<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      title="企业用户注册"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-form @submit="getSubmit">
      <van-field v-model="form.phone" type="tel" label="手机号" placeholder="请输入手机号" required :rules="[{ required:true }]" @input="phoneChange" />
      <van-field readonly v-model="form.companyName" label="企业名称" placeholder="企业名称"/>
      <van-field readonly v-model="form.uniformCode" label="社会信用代码" placeholder="社会信用代码"/>
      <van-field readonly v-model="form.legalName" label="法人/负责人" placeholder="法人/负责人"/>
      <van-field
        v-model="deptName"
        readonly
        name="area"
        label="所在地区"
        placeholder="所在地区"
        @click="showArea = true"
      />
<!--      <van-popup v-model:show="showArea" position="bottom">-->
<!--        <van-picker-->
<!--          show-toolbar-->
<!--          value-key="label"-->
<!--          :columns="deptOptions"-->
<!--          @confirm="onConfirmAdress"-->
<!--          @cancel="showArea = false"-->
<!--        />-->
<!--      </van-popup>-->
      <van-field readonly v-model="form.companyBranch" label="企业分支机构" placeholder="企业分支机构"/>
      <van-field readonly v-model="form.address" label="详细地址" placeholder="详细地址" />
      <van-field readonly v-model="form.investor" label="企业投资人" placeholder="企业投资人" />
      <van-field readonly v-model="form.businessMode" label="经营方式" placeholder="经营方式" />
      <van-field
        v-model="businessTypeText"
        readonly
        label="经营类别"
        placeholder="经营类别"
        @click="showBusiness = true"
      />
<!--      <van-popup v-model:show="showBusiness" position="bottom">-->
<!--        <van-picker-->
<!--          title="经营类别"-->
<!--          show-toolbar-->
<!--          :columns="businessTypeOptions"-->
<!--          @confirm="onConfirmBusiness"-->
<!--          value-key="dictLabel"-->
<!--        />-->
<!--      </van-popup>-->

      <van-field readonly v-model="form.businessScope" label="经营范围" placeholder="经营范围" />

      <div class="submit">
        <van-button round block type="info" color="#007E72" native-type="submit" :disabled="btnDisabled">立即注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import { userRegister } from "@/api/register/index";
import { companyList,treeselectUser , companyCreateUser } from "@/api/lawEnforcement/index";
export default {
  name: "companyRegister",
  data() {
    return {
      height:0,
      tel:'',
      value:'',
      confirmPassWord:'',
      businessTypeText:'',
      showBusiness:false,
      btnDisabled:true,
      // 经营类别
      businessTypeOptions: [],
      showPicker: false,
      columns:[],
      deptName:'',
      showArea:false,
      // 部门列表
      deptOptions: [],
      form: {
      },
      codeUrl:''
    };
  },
  created() {
    this.getCode();
    this.getDicts("economic_type").then(res => {
      res.data.map(item => {
        this.columns.push(item.dictLabel);
      });
    });
    /** 查询部门下拉树结构 */
    treeselectUser().then((response) => {
      this.deptOptions = response.data;
    });

    this.getDicts("business_type").then(response => {
      this.businessTypeOptions = response.data;
    });
    this.height = document.body.clientHeight
  },
  methods: {
    onConfirmBusiness(value){
      this.showBusiness = false;
      this.businessTypeText = value.dictLabel;
      this.form.businessType = value.dictValue;
      console.log(value)
    },
    onConfirmAdress(value){
      console.log(value)
      this.showArea = false;

      this.deptName = value[0]+'/'+value[1]+'/'+value[2]

      let array1 = eval(this.deptOptions).filter(function (e) { return e.label == value[0]; });
      let array2 = eval(array1[0].children).filter(function (e) { return e.label == value[1]; });
      let array3 = eval(array2[0].children).filter(function (e) { return e.label == value[2]; });

      this.form.deptId = array3[0].value
    },
    getCode() {
      getCodeImg().then((res) => {
        this.form.uuid = res.uuid;
        this.codeUrl = "data:image/gif;base64," + res.img;
      });
    },
    onConfirm(value, index) {
      this.value = value;
      this.showPicker = false;
      this.form.supplyDemandType = index + 1 ;
    },
    getSubmit(){
      companyCreateUser(this.form).then((res) => {
        console.log(res)
        if (res.code == 200){
          this.$dialog.alert({
            title: '提示',
            message: "注册成功！账号为您的手机号，初始密码为123456，登录后可前往个人中心-密码修改进行修改密码操作。",
          }).then(() => {
            this.$router.push({name:'lawEnforcementLogin'})
          });
        }
      });
    },
    phoneChange(){
      if (this.form.phone.length<11){
        if (this.form.phone.length == 0){
          this.form = {}
          this.deptName = '';
          this.nationText = '';
          this.businessTypeText = '';
          this.sex = '';
        }
        this.btnDisabled = true;
        return;
      }
      let data = {
        phone:this.form.phone,
      }
      companyList(data).then((res) => {
        if(res.data.id == null){
          this.$notify({ type: 'danger' , message: "无企业信息，无法注册账号，请与执法机构联系添加！" });
        }else{
          this.btnDisabled = false;
          this.form = res.data;
          this.deptName = this.selectDictLabel(this.deptOptions, res.data.deptId);
          this.businessTypeText = this.selectDictLabel(this.businessTypeOptions, res.data.businessType);
        }
      });
    }
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #FFF;
  .code-img {
    width: 220px;
  }
}
.submit{
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: #FFF;
  padding: 5% 3%;
  box-shadow: 0px -5px 9px #eee;
  p{
    text-align: center;
    margin-bottom: 0.2rem;
    span{
      color: #007E72;
    }
  }
}
</style>
