 <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>
             <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;">
             <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} from "@/api/admin/tax/tax"
   import {getProvinceDataApi,getRegionChildrenApi} from "@/api/common/common"
   import {dutyAreaOptions} from '@/utils/dataFormat'
   export default {
     data () {
       return {
         open: false,
         disabled: false,
         type: '',
         title: '',
         provinceDataList: [],
         cityDataList: [],
         districtDataList: [],
         provinceName: '',
         cityName: '',
         districtName: '',
         dutyAreaOptions: dutyAreaOptions,
         form: {
         },
         rules: {
           checkStatus: [
             {required: true, message: '请选择审核结果', trigger: 'change'}
           ],
           serviceTime: [
             {required: true, message: '请设置服务时间段', trigger: 'change'}
           ]
         }
       }
     },
     methods: {
       init(type, id) {
         this.open = true
         this.type = type
         this.form.id = id
         if(this.type == 'add') {
           this.title = '新增'
         }else if(this.type == 'update') {
           this.title = '修改'
         }
         if(this.form.id) {
           this.getData()
         }
         console.log(this.form.id)
         this.resetForm("form");
         this.getProvinceData()
       },
       getData() {
         getTaxInfoByIdApi(this.form.id).then(res => {
           if(res.code == 200) {
             this.form = res.data
           }
         })
       },
       //选择省份
       getCityData() {
         this.form.cityId = ''
         this.form.districtId = ''
         getRegionChildrenApi(this.form.provinceId).then(res => {
           if(res.code == 200) {
             this.cityDataList = res.data
           }
         })
       },
       //选择市
       getDistrictData() {
         this.form.districtId = ''
         getRegionChildrenApi(this.form.cityId).then(res => {
           if(res.code == 200) {
             this.districtDataList = res.data
           }
         })
       },
       getProvinceData() {
         getProvinceDataApi().then(res => {
           if(res.code == 200) {
             this.provinceDataList = res.data
           }
         })
       },
       submitForm() {
         this.$refs.form.validate(valid => {
           if (valid) {
             this.disabled = true
             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'
             }
             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>
