<template>
    <div class="crowdnum">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="cardtitle">
                    <div class="cardline"></div>
                    <div class="cardtext">{{ form.jobId ? '修改' : '新增' }}招聘</div>
                </div>
                <div class="cardBtn" @click="backlist">{{ '< 返回' }}</div>
            </div>
            <!-- 表单 -->
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="formclass">
                <el-form-item label="职位名称：" prop="title">
                    <el-input v-model="form.title" placeholder="请输入职位名称"></el-input>
                </el-form-item>
                <!-- 工作地点 -->
                <el-form-item label="工作地点" prop="city" class="citybox">
                    <el-input v-model="form.city" v-show="false"></el-input>
                    <v-distpicker
                        @province="onChangeProvince"
                        @city="onChangeCity"
                        :placeholders="placeholders"
                        :province="province"
                        :city="city"
                        hide-area
                    ></v-distpicker>
                </el-form-item>
                <el-form-item label="经验要求：" prop="experience">
                    <el-input v-model="form.experience" placeholder="请输入经验要求"></el-input>
                </el-form-item>
                <el-form-item label="招聘人数：" prop="personCount" class="littleBox">
                    <el-input min="1" type="number" v-model="form.personCount" placeholder="请输入招聘人数"></el-input>
                </el-form-item>
                <el-form-item label="工作方式：" prop="jobType" class="littleBox">
                    <el-select v-model="form.jobType" placeholder="请选择工作方式">
                        <el-option label="全职" :value="0"></el-option>
                        <el-option label="兼职" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学历要求：" prop="education" class="littleBox">
                    <el-select v-model="form.education" placeholder="请选择学历要求">
                        <el-option label="硕士" value="硕士"></el-option>
                        <el-option label="本科" value="本科"></el-option>
                        <el-option label="专科" value="专科"></el-option>
                        <el-option label="不限学历" value="不限学历"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="福利：" prop="welfare">
                    <el-select v-model="form.welfare" multiple placeholder="请选择福利">
                        <el-option label="五险一金" value="五险一金"></el-option>
                        <el-option label="餐饮福利" value="餐饮福利"></el-option>
                        <el-option label="住房福利" value="住房福利"></el-option>
                        <el-option label="带薪休假" value="带薪休假"></el-option>
                        <el-option label="节日福利" value="节日福利"></el-option>
                        <el-option label="生日福利" value="生日福利"></el-option>
                        <el-option label="健康体检" value="健康体检"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职企业：" prop="company">
                    <el-input v-model="form.company" placeholder="请输入入职企业"></el-input>
                </el-form-item>
                <el-form-item label="职位描述：" prop="jobDesc" class="jobDesc">
                    <quill-editor
                        class="ql-editor"
                        v-model="editContent"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @change="onEditorChange($event)"
                    >
                    </quill-editor>
                </el-form-item>
                <el-form-item label="薪资范围：" prop="emolument">
                    <el-input v-model="form.emolument" placeholder="请输入薪资范围"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <div class="subJob" @click="subJob">保存</div>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { addJob, jobDetailById, editJob } from '@/api/job'

// 富文本编辑器
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
const fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px']
Quill.register(fontSizeStyle, true)
const Font = Quill.import('attributors/style/font')
const fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
Font.whitelist = fonts
Quill.register(Font, true)

const AlignStyle = Quill.import('attributors/style/align')
AlignStyle.whitelist = ['right', 'center', 'justify']
Quill.register(AlignStyle, true)

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: [] }, { background: [] }],
    [{ align: [] }],
    [{ size: fontSizeStyle.whitelist }],
    [{ font: fonts }],
    [{ header: [1, 2, 3, 4, 5, 6, true] }],
    [{ direction: 'ltl' }],
    [{ direction: 'rtl' }],
    [{ indent: '-1' }, { indent: '+1' }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }],
    ['blockquote', 'code-block'],
    ['clean'],
]
// 富文本编辑器

export default {
    components: { quillEditor },
    data() {
        return {
            form: {
                city: '北京市-北京市',
            },
            rules: {
                title: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
                city: [{ required: true, message: '请输入工作地点', trigger: 'blur' }],
                experience: [{ required: true, message: '请输入职位名称', trigger: 'blur' }],
                personCount: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
                jobType: [{ required: true, message: '请选择工作方式', trigger: 'change' }],
                education: [{ required: true, message: '请选择学历要求', trigger: 'change' }],
                welfare: [{ required: true, message: '请选择福利', trigger: 'blur' }],
                company: [{ required: true, message: '请输入入职企业', trigger: 'blur' }],
                jobDesc: [{ required: true, message: '请输入职位描述', trigger: 'blur' }],
                emolument: [{ required: true, message: '请输入薪资范围', trigger: 'blur' }],
            },
            province: '北京市',
            city: '北京市',
            placeholders: {
                province: '--- 省 ----',
                city: '--- 市 ---',
            },
            editContent: '', //任务描述
            editorOption: {
                placeholder: '请在这里输入',
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                    },
                },
            },
        }
    },
    mounted() {
        const id = this.$route.query.id
        if (id) {
            this.getDetail(id)
        }
    },
    computed: {
        ...mapGetters(['userinform']),
    },

    methods: {
        // 修改获取详情
        getDetail(id) {
            jobDetailById(id).then((res) => {
                this.form = res.data || {}
                if (this.form.city) {
                    this.province = this.form.city.split('-')[0]
                    this.city = this.form.city.split('-')[1]
                }
                this.editContent = this.form.jobDesc
                if (this.form.welfare) {
                    this.form.welfare = this.form.welfare.split(',')
                }
            })
        },
        // 返回上一步
        backlist() {
            this.$router.push('/console/jobM')
        },
        // 保存表单
        subJob() {
            this.form.jobDesc = this.editContent
            this.form.welfare = this.form.welfare.join(',')
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.jobId) {
                        // 修改
                        editJob(this.form).then((res) => {
                            this.$message.success('修改成功')
                            this.form = { city: '北京市-北京市' }
                            this.$router.push('/console/jobM')
                        })
                    } else {
                        // 新增
                        addJob(this.form).then((res) => {
                            this.$message.success('新增成功')
                            this.form = { city: '北京市-北京市' }
                            this.$router.push('/console/jobM')
                        })
                    }
                }
            })
        },
        // 省
        onChangeProvince(data) {
            if (data.value.indexOf('---') == -1) {
                this.province = data.value
                this.city = '--- 市 ---'
                this.form.city = this.province + '-' + this.city
            } else {
                this.province = ''
            }
        },
        // 市
        onChangeCity(data) {
            if (data.value.indexOf('---') == -1) {
                this.city = data.value
                this.form.city = this.province + '-' + this.city
            } else {
                this.city = ''
            }
        },
        onEditorChange() {
            this.form.jobDesc = this.escapeStringHTML(this.editContent)
        },
        escapeStringHTML(content) {
            content = content.replace(/&lt;/g, '<')
            content = content.replace(/&gt;/g, '>')
            return content
        },
    },
}
</script>
<style scoped>
.jobDesc >>> .quill-editor {
    width: 570px;
    padding: 0;
}
.jobDesc >>> .ql-container {
    height: 150px;
}
.citybox >>> select {
    width: 282px !important;
    font-size: 14px !important;
}
.littleBox >>> .el-input__inner {
    padding: 0 0 0 15px;
}
.clearfix {
    display: flex;
    justify-content: space-between;
}
.cardtitle {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 20px;
    color: #000000;
}
.cardline {
    width: 5px;
    height: 18px;
    background: #1578ed;
    border-radius: 3px;
    margin-right: 10px;
}
.cardBtn {
    font-weight: 500;
    font-size: 20px;
    color: #1c82f9;
    cursor: pointer;
}
.crowdnum >>> .el-card__body {
    padding: 30px;
}
.formclass >>> .el-input {
    width: 570px;
}
.formclass >>> .el-textarea {
    width: 570px;
}
.littleBox >>> .el-input {
    width: 265px;
}
.subJob {
    width: 200px;
    height: 44px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
    margin-top: 20px;
}
</style>
