 <template>
   <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
     <el-form ref="form" :model="form" :rules="rules" label-width="90px">
         <el-form-item label="登录名称" prop="userName" v-if="type == 'add'">
           <el-input v-model="form.userName"></el-input>
         </el-form-item>
         <el-form-item label="姓名" prop="nickName">
           <el-input v-model="form.nickName"></el-input>
         </el-form-item>
         <el-form-item label="手机号" prop="phonenumber">
           <el-input v-model="form.phonenumber"></el-input>
         </el-form-item>
         <el-form-item label="负责地区" prop="dutyArea">
           <el-select v-model="form.dutyArea" placeholder="请选择负责地区" style="width: 200px;" filterable @change="changeDuty">
             <el-option v-for="(item,index) in dutyAreaOptions" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="省" prop="provinceId" v-if="form.dutyArea">
           <el-select v-model="form.provinceId" placeholder="请选择省" @change="getCityData" filterable style="width: 200px;">
             <el-option v-for="(item,index) in provinceDataList" :key="index" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="市" prop="cityId" v-if="form.dutyArea == '2' || form.dutyArea == '3'">
           <el-select v-model="form.cityId" placeholder="请选择市" @change="getDistrictData" filterable style="width: 200px;">
             <el-option v-for="(item, index) in cityDataList" :key="index" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="区" prop="districtId" v-if="form.dutyArea == '3'">
           <el-select v-model="form.districtId" placeholder="请选择区" filterable style="width: 200px;" @change="changeDistrict">
             <el-option v-for="(item, index) in districtDataList" :key="index" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="密码" prop="password" v-if="type == 'add'">
           <el-input v-model="form.password" type="password"></el-input>
         </el-form-item>
         <el-form-item label="确认密码" prop="confirmPassword" v-if="type == 'add'">
           <el-input v-model="form.confirmPassword" type="password"></el-input>
         </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
       <el-button @click="cancel">取 消</el-button>
     </div>
   </el-dialog>
 </template>

 <script>
   import {addTaxUserApi,getTaxInfoByIdApi,updateTaxInfoApi} from "@/api/admin/tax/tax"
   import {getProvinceDataApi,getRegionChildrenApi} from "@/api/common/common"
   import {dutyAreaOptions} from '@/utils/dataFormat'
   export default {
     data () {
       const equalToPassword = (rule, value, callback) => {
         if (this.form.password !== value) {
           callback(new Error("两次输入的密码不一致"));
         } else {
           callback();
         }
       };
       return {
         open: false,
         disabled: false,
         type: '',
         title: '',
         provinceDataList: [],
         cityDataList: [],
         districtDataList: [],
         provinceName: '',
         cityName: '',
         districtName: '',
         dutyAreaOptions: dutyAreaOptions,
         id: undefined,
         form: {
           id: ''
         },
         rules: {
           userName: [
             {required: true, message: '请输入用户名称', trigger: 'blur'},
             {max: 30, message: '最多输入30个字符', trigger: 'blur' }
           ],
           nickName: [
             {required: true, message: '请输入姓名', trigger: 'blur'},
             {max: 30, message: '最多输入30个字符', trigger: 'blur' }
           ],
           phonenumber: [
             {required: true, message: '请输入手机号', trigger: 'blur'},
             {
               pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
               message: "请输入正确的手机号码",
               trigger: "blur"
             }
           ],
           dutyArea: [
             {required: true, message: '请选择负责区域', trigger: 'change'}
           ],
           provinceId: [
             {required: true, message: '请选择省', trigger: 'change'}
           ],
           cityId: [
             {required: true, message: '请选择市', trigger: 'change'}
           ],
           districtId: [
             {required: true, message: '请选择区', trigger: 'change'}
           ],
           password: [
             { required: true, trigger: "blur", message: "请输入您的密码" },
             { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
           ],
           confirmPassword: [
             { required: true, trigger: "blur", message: "请再次输入您的密码" },
             { required: true, validator: equalToPassword, trigger: "blur" }
           ],
         }
       }
     },
     methods: {
       init(type, id) {
         this.open = true
         this.reset()
         this.type = type
         this.form.id = id
         this.id = id
         if(this.type == 'add') {
           this.title = '新增'
         }else if(this.type == 'update') {
           this.title = '修改'
         }
         this.getProvinceData()

        setTimeout(() => {        // 加延时
          if(this.form.id) {
            this.getData()
          }
        }, 50);

         // this.resetForm("form");
       },
       // 表单重置
       reset() {
         this.form = {
         };
         this.resetForm("form");
       },
       getData() {
         getTaxInfoByIdApi(this.form.id).then(res => {
           if(res.code == 200) {
             this.form = res.data
             //获取parentArea 若长度为2，则为省级，三为市级，四为区级
             let arr = res.data.parentArea.split(',')
             if(arr.length == 2) {
               this.form.provinceId = res.data.scopeId
             }else if(arr.length == 3) {
               this.form.provinceId = arr[2]
               getRegionChildrenApi(this.form.provinceId).then(res => {
                 if(res.code == 200) {
                   this.cityDataList = res.data
                 }
               })
               setTimeout(() => {        // 加延时
                 this.form.cityId = res.data.scopeId
               }, 50);

             }else if(arr.length == 4) {
               this.form.provinceId = arr[2]
               getRegionChildrenApi(this.form.provinceId).then(res => {
                 if(res.code == 200) {
                   this.cityDataList = res.data
                 }
               })
               setTimeout(() => {        // 加延时
                 this.form.cityId = arr[3]
                 getRegionChildrenApi(this.form.cityId).then(res => {
                   if(res.code == 200) {
                     this.districtDataList = res.data
                   }
                 })
               }, 50);
              this.form.districtId = res.data.scopeId
             }
             let list = []
             list = res.data
             if(list.userType == 'GOV_PROV') {
               this.form.dutyArea = 1
             }else if(list.userType == 'GOV_CITY') {
               this.form.dutyArea = 2
             }else if(list.userType == 'GOV_DISTRI') {
               this.form.dutyArea = 3
             }
           }
         })
       },
       getProvinceData() {
         getProvinceDataApi().then(res => {
           if(res.code == 200) {
             this.provinceDataList = res.data
           }
         })
       },
       //选择省份
       getCityData() {
         this.form.cityId = ''
         this.form.districtId = ''
         getRegionChildrenApi(this.form.provinceId).then(res => {
           if(res.code == 200) {
             this.cityDataList = res.data
           }
         })
         this.$forceUpdate()
       },
       //选择市
       getDistrictData() {
         this.form.districtId = ''
         getRegionChildrenApi(this.form.cityId).then(res => {
           if(res.code == 200) {
             this.districtDataList = res.data
           }
         })
         this.$forceUpdate()
       },
       changeDistrict() {
         this.$forceUpdate()
       },
       //视图更新不够及时
       changeDuty() {
         this.$forceUpdate()
       },
       submitForm() {
         this.$refs.form.validate(valid => {
           if (valid) {
             if(this.form.dutyArea == '1') {
               let obj = this.provinceDataList.find(item => {
                 return item.id == this.form.provinceId
               })
               this.form.scopeId = this.form.provinceId
               this.form.remark = obj.name
               this.form.userType = 'GOV_PROV'
             }else if(this.form.dutyArea == '2') {
               let obj = this.provinceDataList.find(item => {
                 return item.id == this.form.provinceId
               })
               this.provinceName = obj.name
               let objCity = this.cityDataList.find(item => {
                 return item.id == this.form.cityId
               })
               this.cityName = objCity.name
               this.form.remark = this.provinceName+this.cityName
               this.form.scopeId = this.form.cityId
               this.form.userType = 'GOV_CITY'
             }else if(this.form.dutyArea == '3') {
               let obj = this.provinceDataList.find(item => {
                 return item.id == this.form.provinceId
               })
               this.provinceName = obj.name
               let objCity = this.cityDataList.find(item => {
                 return item.id == this.form.cityId
               })
               this.cityName = objCity.name
               let objDis = this.districtDataList.find(item => {
                 return item.id == this.form.districtId
               })
               this.districtName = objDis.name
               this.form.remark = this.provinceName+this.cityName+this.districtName
               this.form.scopeId = this.form.districtId
               this.form.userType = 'GOV_DISTRI'
             }
             this.disabled = true
             if(this.id) {
               updateTaxInfoApi(this.form).then(res => {
                 this.disabled = false;
                 if(res.code == 200) {
                   this.$message({
                     message: '修改成功',
                     type: 'success'
                   });
                 }
                 this.open = false;
                 this.$emit('refreshData');
               })
             }else {
               addTaxUserApi(this.form).then(res => {
                 this.disabled = false;
                 if(res.code == 200) {
                   this.$message({
                     message: '新增成功',
                     type: 'success'
                   });
                 }
                 this.open = false;
                 this.$emit('refreshData');
               })
             }

           }
         })
       },
       cancel() {
         this.open = false
       },
     }
   }
 </script>

 <style>
 </style>
