<template>
    <div>
       <el-row :gutter="20">
            <el-col :span="24">
                <el-card shadow="hover" class="m-b-20">
                    <div class="flex j-between a-center">
                        <div class="per_title" v-throttle @click="goback()">
                            <i class="el-icon-arrow-left"></i>
                            <span class="per_back">返回</span>
                            <span class="per_school" v-text="isDetail ? '查看用户' : (id != '' ? '编辑客户' : '新增客户')"></span>
                        </div>
                        <el-button type="primary" size="small" round class="mag" v-if="!isDetail" v-throttle @click="saveAdd">确定</el-button>
                    </div>              
                </el-card>

                <el-card shadow="hover">
                    <div>
                        <div class="p-title m-b-20">基本信息</div>

                        <div>
                            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="flex j-center" :disabled="isDetail">
                                <el-col :span="6" style="margin-right: 60px;">
                                    <el-form-item prop="countries" label="国家">
                                        <el-select v-model="form.countries" clearable placeholder="请选择国家">
                                            <el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item prop="provinceId" label="省份">
                                        <el-select v-model="form.provinceId" placeholder="" @change="getCity()" @clear="clearprovince()">
                                            <el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item prop="clientName" label="客户名称">
                                        <el-input placeholder="请输入客户名称" v-model="form.clientName" @change="nameChange"></el-input>
                                    </el-form-item>

                                     <el-form-item prop="phone" label="手机号">
                                        <el-input placeholder="请输入手机号" v-model="form.phone" maxlength="11"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="6" style="margin-left: 60px;">
                                    <el-form-item prop="type" label="客户类型">
                                        <el-select v-model="form.type" placeholder="">
                                            <el-option v-for="(item,index) in clientTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item prop="cityId" label="城市">
                                        <el-select v-model="form.cityId" :disabled="form.provinceId ? false : true" placeholder="">
                                            <el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item prop="contactPersonName" label="管理员姓名">
                                        <el-input placeholder="请输入管理员姓名" v-model="form.contactPersonName"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-form>
                        </div>
                    </div>
                </el-card>

            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'index-add',
    data() {
        return {
            id: this.$route.query.id,
            isDetail: Boolean(this.$route.query.show),
            form: {
                countries: '中国',
                clientName: '',
                provinceId: '',
                contactPersonName: '',
                phone: '',
                cityId: '',
                type: 1,
            },
            rules: {
                type: [
                    { required: true, message: '请选择客户类型', trigger: 'change' }
                ],
                countries: [
                    { required: true, message: '请选择国家', trigger: 'change' }
                ],
                provinceId: [
                    { required: true, message: '请选择省份', trigger: 'change' }
                ],
                cityId: [
                    { required: true, message: '请选择城市', trigger: 'change' }
                ],
                contactPersonName: [
                    { required: true, message: '请输入管理员姓名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '请输入正确的手机号',
                    trigger: 'blur'
                    }
                ],
                clientName: [
                    { required: true, message: '请输入客户名称', trigger: 'blur' }
                ],
            },
            clientTypeList: [{
                name: '正式',
                value: 1
            },
            {
                name: '试用',
                value: 2
            },
            {
                name: '到期',
                value: 3
            }],
            countryList: [{
                name:'中国'
            }],
            cityList: [],
            originalName: '',
            nameRepeat: false
        };
    },
    computed: {
        ...mapState('client', [
            'provinceList'
        ])
    },
    mounted() {
        this.id && this.getData()
    },
    methods: {
        getData(){
            this.$get(`${this.api.getClient}/${this.id}`).then((res) => {
                this.form = res.data.client
                this.originalName = res.data.client.clientName
                this.form.countries = '中国'
                this.getCityData()
                }).catch((res) => {
            })
        },
        nameChange(){
            if(this.form.clientName !== this.originalName){
                this.$get(`${this.api.getClientName}?clientName=${this.form.clientName}`).then(res => {
                    if(res.data.client.length){
                        this.nameRepeat = true
                        this.$message.warning('该客户名称已存在')
                    }else{
                        this.nameRepeat = false
                    }
                }).catch(res => {});
            }else{
                this.nameRepeat = false
            }
        },
        // 清除省份
        clearprovince(){
            this.form.cityId = ''
        },
        getCity(){
           this.clearprovince()
           this.getCityData()
           this.pageNo = 1
        },
        getCityData(){
            let data = {
                provinceId: this.form.provinceId
            }
            this.$get(this.api.queryCity,data).then(res => {
                this.cityList = res.data.list
            }).catch(res => {});
        },
        saveAdd(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if(this.nameRepeat) return this.$message.warning('该客户名称已存在')
                    this.form.provinceName = this.provinceList.find(n => n.provinceId == this.form.provinceId).provinceName
                    this.form.cityName = this.cityList.find(n => n.cityId == this.form.cityId).cityName
                    let data = this.form
                    if(this.id){
                        this.$post(this.api.updateClient,data).then((res) => {
                                this.$message.success('编辑成功');
                                this.$router.back()
                            }).catch((res) => {
                        })
                    }else{
                        this.$post(this.api.addClient,data).then((res) => {
                                this.$message.success('添加成功');
                                this.$router.back()
                            }).catch((res) => {
                        })
                    }
                }
            })
        },
        goback() {
            if(this.isDetail){
                this.$router.back()
            }else{
                this.$confirm('确定返回？未更新的信息将不会保存。', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    this.$router.back()
                })
                .catch(() => {});
            }
        }
    }
};
</script>

<style lang="scss" scoped>
    /deep/.el-row{
        margin-bottom: 0;
    }
</style>