<!--
  @description: 抽取专家-抽取条件弹框
  @Modifier: qrf
  @routerPath:
  @date: 2020/10/26-13:27
-->
<template>
  <div>
    <el-dialog
      :title="textMap[dialogStatus]+`抽取条件`"
      :visible.sync="projectDialog.dialog"
      :close-on-click-modal="false"
      width="650px"
      custom-class="el-dialog__body-p0"
      @close="closeDialog('form')"
    >
      <div class="p8">
        <el-form
          ref="form"
          :rules="rules"
          :model="extractForm"
          :inline-message="true"
        >
          <table class="from_table">
            <tr>
              <td>
                <el-form-item label="抽取专业" prop="specialName" />
              </td>
              <td>
                <el-input v-model="extractForm.specialName" disabled style="width: calc(100% - 156px );" />
                <el-button type="primary" @click="changeSelect('1')">
                  选择
                </el-button>
                <el-button type="primary" plain @click="clearSelect('1')">
                  清空
                </el-button>
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="抽取区域" prop="areaD" />
              </td>
              <td>
                <el-cascader
                  v-model="extractForm.areaD"
                  :options="regionData"
                  style="width:100%;"
                  size="small"
                  change-on-select
                  @change="addressChange"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="抽取人数" prop="expertNum" />
              </td>
              <td>
                <el-input
                  v-model="extractForm.expertNum"
                  placeholder="抽取人数"
                  class="publicTitle_z"
                  size="small"
                />
              </td>
            </tr>
            <tr>
              <td>
                <el-form-item label="备选专业" prop="spareMajorName" />
              </td>
              <td>
                <el-input v-model="extractForm.spareMajorName" disabled style="width: calc(100% - 156px );" />
                <!-- 请选择 -->
                <el-button type="primary" @click="changeSelect('0')">
                  选择
                </el-button>
                <el-button type="primary" plain @click="clearSelect('0')">
                  清空
                </el-button>
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <!--底部操作按钮-->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExtractForm('form')">提交</el-button>
        <el-button @click="projectDialog.dialog = false">取消</el-button>
      </span>
    </el-dialog>
    <expertSepcialDialog ref="expertSelectworkunitDialog" :title="types" @dialogExpertSepcialList="dialogExpertSepcialList" />
  </div>
</template>
<script>
/* api */
// import { saveCondition } from '@/api/expert/extractExpert/extractExpert'
import { regionData, CodeToText } from 'element-china-area-data'
import expertSepcialDialog from '@views/expert/expertInfo/expertEvaluationInfo/expertSepcial-dialog' // 选择评标专业树弹窗
export default {
  name: 'ExtractingConditionsDialog',
  components: {
    expertSepcialDialog // 选择评标专业树弹窗
  },
  data() {
    return {
      types: '', // 是否抽取专业还是备选专业
      dialogStatus: '', // 弹框状态
      textMap: {
        update: '编辑',
        create: '添加'
      },
      extractForm: {
        type: '', // 类别
        specialName: '', // 抽取专业
        specialCode: '', // 抽取专业code
        cityName: '', // 抽取专家地区
        expertNum: '', // 抽取人数
        spareMajorName: '', // 备选专业
        spareMajorCode: '',
        expertExtractConditionAssistSpeciallist: [],
        areaD: [], // 抽取条件弹框选择地区
        applyId: this.$route.params.id
      },
      rules: {
        specialName: [{ required: true, message: '不能为空', trigger: 'change' }], // 抽取专业
        areaD: [{ required: true, message: '不能为空', trigger: 'change' }], // 抽取专家地区
        expertNum: [{ required: true, message: '不能为空', trigger: 'blur' }], // 抽取人数
        spareMajorName: [{ required: true, message: '不能为空', trigger: 'change' }] // 备选专业
      },
      regionDataProps: {
        value: 'territoryName',
        label: 'territoryName'
      },
      regionData: regionData,
      projectDialog: {
        dialog: false
      },
      extractConditionData: []
    }
  },
  methods: {
    openDialog(val) {
      this.dialogStatus = val
      this.projectDialog.dialog = true
    },
    closeDialog(formRule) {
      this.$refs[formRule].resetFields()
      if (formRule === 'avoidDepartForm') {
        this.avoidDepartForm.reason = ''
      }
      if (formRule === 'extractForm') {
        this.arrName = []
        this.arrId = []
        this.extractForm.spareMajorName = ''
        this.extractForm.spareMajorCode = ''
      }
    },
    changeSelect(type) { // 打开评标专业选择弹窗
      this.types = type
      this.$refs.expertSelectworkunitDialog.dialogData.dialog = true
    },
    clearSelect(type) { // 清空抽取专业
      if (type === '1') {
        this.extractForm.specialName = ''
        this.extractForm.specialCode = ''
      } else {
        this.arrName = []
        this.arrId = []
      }
    },
    addressChangeF(arr) { // 评标地点
      this.allData.proviceCode = arr[0]
      this.allData.areaCode = arr[2]
      this.allData.cityCode = arr[1]
      this.allData.proviceName = CodeToText[arr[0]]
      this.allData.areaName = CodeToText[arr[2]]
      this.allData.cityName = CodeToText[arr[1]]
    },
    //  三级联动
    addressChange(arr) {
      this.extractForm.areaD = [...arr]
      this.extractForm.cityName = CodeToText[arr[arr.length - 1]]
      this.extractForm.cityCode = arr[arr.length - 1]
    },
    // 保存抽取条件
    submitExtractForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 保存抽取条件
          const obj = JSON.parse(JSON.stringify(this.extractForm))
          this.extractConditionData.push(obj)
          this.$emit('extractConditionData', this.extractConditionData)
          this.projectDialog.dialog = false
        }
      })
    },
    dialogExpertSepcialList(data, title) { // 添加评标专业到弹窗
      if (this.types === '1') {
        this.extractForm.specialName = data.labels
        this.extractForm.specialCode = data.keys
      } else {
        this.extractForm.spareMajorName = data.labels
        this.extractForm.spareMajorCode = data.keys
        this.extractForm.expertExtractConditionAssistSpeciallist = data.keys.split(',').map((item, index) =>
          ({ specialId: item, specialName: data.labels.split(',')[index] }))
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .relevance_f .dialog-footer{
    padding-bottom: 16px;
  }
  /deep/ .need_space .el-dialog__body{
    margin: 22px 10px 10px 5px;
  }
</style>
