<template>
  <div>
      <el-dialog
	:visible.sync="form.show"
	:close-on-click-modal="false"
	:modal-append-to-body='false'
	@before-close="cancelHandle(false)"
	custom-class="self_dialog"
	center
    v-dialogDrag
	width="600px">
        <div slot="title">
		    <span style="fontSize:16px;">请先补全客户基本信息</span>
		</div>
        <el-form ref="form" :model="formData" :rules="formRule" label-width="100px">
            <el-form-item label="客户全称" prop="name" >
                <el-input  v-model="formData.name" style="width:400px" :disabled="formData.nameDisable"></el-input>
            </el-form-item>
            <el-form-item label="社会信用码" prop="CreditCode">
                <el-input v-model="formData.CreditCode" placeholder="请填写社会信用码" style="width:400px" :disabled="formData.CreditCodeDisable"></el-input>
            </el-form-item>
            <el-form-item label="客户地址" prop="City" v-if="formData.RegionType!='海外'" >
                <v-distpicker :province-source="province_sorce"
                :city-source="city_sorce"  :disabled="formData.CityDisable" :province="formData.Province" :city="formData.City" hide-area @province="provinceChange" @selected="selectRegion"></v-distpicker>
            </el-form-item>
            <div v-if="!formData.flag">
                <el-form-item label="客户来源" prop="Source">
                    <el-select v-model="formData.Source" :disabled="formData.SourceDisable" placeholder="请选择客户来源" style="width:400px">
                        <el-option
                        v-for="item in fromArr"
                        :key="item.SourceId"
                        :label="item.SourceName"
                        :value="item.SourceName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业" prop="IndustryId">
                    <el-select v-model="formData.IndustryId" :disabled="formData.IndustryIdDisable" placeholder="请选择行业" style="width:400px">
                        <el-option
                        v-for="item in tradeArr"
                        :key="item"
                        :label="item.IndustryName"
                        :value="item.IndustryId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div style="text-align:center;margin:30px 0">
                <el-button type="primary" @click="handleConfirm">确定</el-button>
                <el-button type="primary" plain @click="cancelHandle(false)">取消</el-button>
            </div>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { customInterence } from '@/api/api.js'
import{province_sorce,city_sorce} from '@/utils/distpicker';
export default {
    props:{
        form:{}
    },
    watch:{
        form(nval){
            console.log(nval);
            this.formData=nval
            if(nval.flag){
                //跨部门
                this.formRule.Source[0].required=false
                this.formRule.IndustryId[0].required=false
            }
            //海外去掉地址
            if(nval.RegionType=='海外'){
                this.formRule.City[0].required=false
            }
        }
    },
    data () {
      this.province_sorce=province_sorce
      this.city_sorce=city_sorce
        return {
            formData:{},
            formRule:{
                name:[{ required: true, message: '请填写客户名称', trigger: 'blur' }],
                CreditCode:[{ required: true, message: '请填写社会信用码', trigger: 'blur' }],
                City:[{ required: true, message: '请选择地址', trigger: 'change' }],
                Source:[{ required: true, message: '请选择客户来源', trigger: 'change' }],
                IndustryId:[{ required: true, message: '请选择行业', trigger: 'change' }],
            },
            fromArr:[],//来源选项数据
            tradeArr:[],//行业选项数据
        }
    },
    created () {
      this.getCustomerSourceList() 
      this.getIndustry() 
    },

    methods: {
        cancelHandle(refresh=false){
            this.$emit('cancel',refresh)
        },

        //选地地区时 选则的省份改变重置city为空
        provinceChange(){
            // this.formData.City=''
        },

        //选择地区
        selectRegion(e) {
            this.formData.Province =e.province.value=='省'?'':e.province.value;
            this.formData.City = e.city.value=='市'?'':e.city.value;
        },

        async handleConfirm(){
            this.$refs.form.validate(async (valid) => {
                if(valid){
                    let IndustryName=''
                    this.tradeArr.forEach(item=>{
                        if(item.IndustryId==this.formData.IndustryId){
                            IndustryName=item.IndustryName
                        }
                    })
                    let res=await customInterence.completeInfo({
                        CompanyId:this.formData.CompanyId,
                        CompanyName:this.formData.name,
                        CreditCode:this.formData.CreditCode,
                        Province:this.formData.Province,
                        City:this.formData.City,
                        IndustryId:Number(this.formData.IndustryId)||0,
                        IndustryName:IndustryName,
                        Source:this.formData.Source
                    })
                    if(res.Ret===200){
                        this.cancelHandle(true)
                        this.$confirm('信息补全成功，请重新点击相应操作','提示', {
                            confirmButtonText: '知道了',
                            showCancelButton:false,
                            type: 'success'
                        })
                    }
                }
            })
        },

        /* 获取客户来源数据 */
		getCustomerSourceList(){
			customInterence.customerSourceList({}).then(res=>{
				if(res.Ret===200){
					this.fromArr=res.Data.List
				}
			})
		},

        /* 获取行业选项数据 */
		getIndustry() {
            let type = localStorage.getItem('RoleType') || '';
			customInterence.getindustry({
				Classify:type
			}).then(res => {
				if(res.Ret === 200) {
					this.tradeArr = res.Data.List || [];
				}
			})
		},
    }
}
</script>

<style lang="scss" >
.distpicker-address-wrapper select {
	width: 198px;
}
</style>