<template>
    <div class="add-edit-dialog-container">
        <el-dialog
            :title="title"
            :visible.sync="visible"
            width="600px"
            :before-close="close"
            :close-on-click-modal="false"
        >
            <el-form :model="formData" ref="formData" :rules="rules" label-width="90px">
                <el-form-item label="公司名称:" prop="companyId">
                    <SelectCompany
                        ref="company"
                        :companyName="companyName"
                        @companyEmpty="companyEmpty"
                        @companyChange="companyChange"
                    ></SelectCompany>
                </el-form-item>
                <el-form-item label="岗位:" prop="job">
                    <el-input placeholder="请输入" v-model="formData.job"></el-input>
                    <!-- <el-select v-model="formData.job" placeholder="请选择">
                        <el-option
                            v-for="item in jobList"
                            :key="item.key"
                            :label="item.value"
                            :value="item.value"
                        ></el-option>
                    </el-select>-->
                </el-form-item>
                <el-form-item label="薪资范围:" required>
                    <el-form-item prop="lowerSalary" style="display: inline-block;">
                        <el-input
                            placeholder="请输入"
                            v-model="formData.lowerSalary"
                            class="short-input"
                        ></el-input>
                    </el-form-item>
                    <span class="line">-</span>
                    <el-form-item prop="upperSalary" style="display: inline-block;">
                        <el-input
                            placeholder="请输入"
                            v-model="formData.upperSalary"
                            class="short-input"
                        ></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="学历:" prop="eduLevel" class="classify-input">
                    <el-select placeholder="请选择" v-model="formData.eduLevel" clearable>
                        <el-option
                            :label="item.name"
                            :value="item.id"
                            v-for="(item, i) in education"
                            :key="i"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工作年限:" required>
                    <el-form-item prop="lowerWorking" style="display: inline-block;">
                        <el-input
                            placeholder="请输入"
                            v-model="formData.lowerWorking"
                            class="short-input"
                        ></el-input>
                    </el-form-item>
                    <span class="line">-</span>
                    <el-form-item prop="upperWorking" style="display: inline-block;">
                        <el-input
                            placeholder="请输入"
                            v-model="formData.upperWorking"
                            class="short-input"
                        ></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="岗位职责:" prop="info">
                    <el-input
                        placeholder="请输入"
                        type="textarea"
                        size="mini"
                        v-model="formData.info"
                        class="sort-input"
                    ></el-input>
                </el-form-item>
                <el-form-item label="省市:" prop="city">
                    <el-cascader
                        v-model="formData.city"
                        :options="options"
                        @change="handleChange"
                    ></el-cascader>
                    <!-- <el-cascader
                        v-model="formData.city"
                        :options="options"
                        :props="props"
                        @change="handleChange"
                    ></el-cascader> -->
                </el-form-item>
                <el-form-item label="地址:" prop="address">
                    <el-input placeholder="请输入" v-model="formData.address"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('formData')"
                    :disabled="submitBtndisabled"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import cityData from '@/apps/mobile/utils/pc-code';
import { validPositiveIntegerZero } from '@/apps/mobile/utils/validate';
import educationStatus from '../../model/education-status';
import { addData, queryCompany, editData } from '@/apps/mobile/api/recruitment/index';
import SelectCompany from '@/apps/mobile/components/selectCompany/index';
import { queryDictionaryByName } from '@/apps/mobile/api/dictionary/index';
import { provinceAndCityData ,CodeToText} from 'element-china-area-data'
export default {
    components: {
        SelectCompany,
    },
    data() {
        // 验证数字
        var checkNumber = (rule, value, callback) => {
            if (value && !validPositiveIntegerZero(value)) {
                callback(new Error('格式不正确'));
            } else {
                callback();
            }
        };
        return {
            type: null,
            visible: false,
            title: '新增',
            submitBtndisabled: false,
            formData: {
                companyId: '',
                lowerSalary: '',
                upperSalary: '',
                lowerWorking: '',
                upperWorking: '',
                city:[]
            },
            rules: {
                companyId: [
                    {
                        required: true,
                        message: '请选择公司',
                        trigger: ['change', 'blur'],
                    },
                ],
                job: [
                    { required: true, message: '请选择岗位', trigger: 'blur' },
                    { max: 20, message: '长度最大20个字符', trigger: 'blur' },
                ],
                lowerSalary: [
                    {
                        required: true,
                        message: '请输入薪资范围',
                        trigger: 'blur',
                    },
                    { validator: checkNumber, message: '请输入整数', trigger: 'blur' },
                ],
                upperSalary: [
                    {
                        required: true,
                        message: '请输入薪资范围',
                        trigger: 'blur',
                    },
                    { validator: checkNumber, message: '请输入整数', trigger: 'blur' },
                ],
                eduLevel: [
                    {
                        required: true,
                        message: '请选择学历',
                        trigger: ['blur', 'change'],
                    },
                ],
                lowerWorking: [
                    {
                        required: true,
                        message: '请输入工作年限',
                        trigger: 'blur',
                    },
                    { validator: checkNumber, message: '请输入整数', trigger: 'blur' },
                ],
                upperWorking: [
                    {
                        required: true,
                        message: '请输入工作年限',
                        trigger: 'blur',
                    },
                    { validator: checkNumber, message: '请输入整数', trigger: 'blur' },
                ],
                info: [
                    { required: true, message: '请输入岗位职责', trigger: 'blur' },
                    { max: 500, message: '长度最大500个字符', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                    { max: 30, message: '长度最大30个字符', trigger: 'blur' },
                ],
                city: [
                    {
                        required: true,
                        message: '请选择省市',
                        trigger: 'change',
                    },
                ],
            },
            education: [], //学历
            companyName: '', //公司名称
            jobList: [],
            options: provinceAndCityData,
            opList:[],
            // options: [],
            props: {
                value: 'name',
                label: 'name',
            },
            cityValue: [],
        };
    },
    created() {
        // this.options = cityData;
    },
    methods: {
        open(type, data) {
            console.log(data);
            this.type = type;
            this.education = educationStatus;
            // this.getDictionarys();
            if (type === 'edit') {
                this.title = '编辑';
                // this.formData = { ...data };
                this.cityValue = [data.provinceName, data.cityName];
                this.formData = Object.assign({}, data, { city: this.cityValue });
                if(data.company){
                    this.companyName = data.company;
                }
            } else {
                this.title = '新增';
                this.formData = {
                    companyId: '',
                };
            }
            console.log(this.formData);
            this.visible = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (Number(this.formData.lowerSalary) >= Number(this.formData.upperSalary)) {
                        return this.$message.warning('请输入正确的薪资范围');
                    }
                    if (Number(this.formData.lowerWorking) >= Number(this.formData.upperWorking)) {
                        return this.$message.warning('请输入正确的工作年限范围');
                    }
                    this.submitBtndisabled = true;
                    let message = '';
                    let obj = { ...this.formData };
                    if (this.type === 'add') {
                        message = '新增成功';
                        obj.checkFlag = 2;
                        obj.statuz = 0;
                        obj.provinceName = this.cityValue[0];
                        obj.cityName = this.cityValue[1];
                        delete obj.city;
                        console.log(obj);
                        addData(obj)
                            .then(res => {
                                this.completeOperation(message);
                            })
                            .catch(() => {});
                    }
                    if (this.type === 'edit') {
                        message = '修改成功';
                        let editObj = {
                            id: obj.id,
                            companyId: obj.companyId,
                            job: obj.job,
                            lowerSalary: obj.lowerSalary,
                            upperSalary: obj.upperSalary,
                            eduLevel: obj.eduLevel,
                            lowerWorking: obj.lowerWorking,
                            upperWorking: obj.upperWorking,
                            hotFlag: obj.hotFlag,
                            info: obj.info,
                            statuz: obj.statuz,
                            provinceName: this.cityValue[0],
                            address: obj.address,
                            cityName: this.cityValue[1],
                        };
                        console.log(editObj);
                        editData(editObj)
                            .then(() => {
                                this.completeOperation(message);
                            })
                            .catch(() => {});
                    }
                } else {
                    return false;
                }
            });
        },
        companyChange(data) {
            console.log(data);
            if (data.id) {
                this.$set(this.formData, 'companyId', data.id);
                this.$refs['formData'].validateField('companyId');
            } else {
                this.formData.companyId = null;
            }
        },
        companyEmpty() {
            this.formData.companyId = null;
            this.companyName = '';
            this.$refs['formData'].validateField('companyId');
        },
        handleChange(data) {
            console.log(data);
            console.log(123);
            if(data){
                this.cityValue = data.map((item)=>{
               return item = CodeToText[item];
            });
            if(this.cityValue[1] == "市辖区" && this.cityValue[0].indexOf("市") != -1){
                this.cityValue[1] = this.cityValue[0].substr(0,this.cityValue[0].length-1) + "城区"
            }
            console.log(this.cityValue);
            }
        },
        getDictionarys() {
            let obj = {
                field: 'job',
                tableName: 'recruitment_info',
            };
            queryDictionaryByName(obj)
                .then(res => {
                    console.log(res);
                    this.jobList = res.data;
                })
                .catch();
        },
        close() {
            this.type = null;
            this.submitBtndisabled = false;
            this.visible = false;
            this.formData = { companyId: null };
            this.companyName = null;
            this.$refs.company.reset();
            this.$refs['formData'].resetFields();
        },
        completeOperation(message) {
            this.$message({
                type: 'success',
                message,
            });
            this.close();
            this.submitBtndisabled = false;
            this.$emit('queryListData');
        },
    },
    watch: {
        addEditDialogType(val) {
            switch (val) {
                case 'add':
                    this.title = '新增文件';
                    break;
                case 'edit':
                    this.title = '修改文件';
                    break;
                default:
                    this.title = '新增文件';
                    break;
            }
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-input__inner {
        width: 200px;
    }

    ::v-deep .short-input .el-input__inner {
        width: 100px;
    }

    ::v-deep .el-input {
        width: auto;
    }

    .line {
        margin-right: 5px;
    }
}
</style>
