<!--
  @description: 专家库-设置抽取条件列表
  @Modifier: qrf
  @routerPath: /expert/extractProjectMakeUpContent
  @date: 2020/10/26
-->
<template>
  <div class="projectInfoDetail">
    <el-form ref="form" label-width="160px">
      <div class="page-title">
        <span class="be-required"><i style="font-style: normal">{{ titleNum }}</i> 设置抽取条件</span>
        <el-button
          style="margin-left:16px;"
          @click="addExtractCondition"
        >
          添加
        </el-button>
      </div>
      <extractingConditionsDialog ref="extractingConditionsDialog" @extractConditionData="extractConditionHandle" />
      <div>
        <section>
          <el-table :data="extractConditionData" class="tableLimit" border>
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="评标专业" align="center" prop="specialName" />
            <el-table-column label="抽取人数" align="center" prop="expertNum" />
            <el-table-column label="抽取专家地区" align="center" prop="cityName" />
            <el-table-column label="备选专业" align="center" prop="spareMajorName" />
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-link type="primary" @click="handleDelete(scope.row,scope.$index)">
                  [删除]
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </div>
    </el-form>
  </div>
</template>
<script>
/* 组件 */
import extractingConditionsDialog from '@/views/expert/extractExpert/etractApplyDialog/extractingConditions-dialog' // 选择评标专业树弹窗

export default {
  name: 'ExtractingConditionsList',
  components: {
    extractingConditionsDialog
  },
  props: {
    titleNum: {
      type: String,
      default() {
      }
    }
  },
  data() {
    return {
      extractConditionData: []
    }
  },
  methods: {
    addExtractCondition() {
      const dialogStatus = 'create' // 01 添加 00编辑
      this.$refs.extractingConditionsDialog.openDialog(dialogStatus)
    },
    extractConditionHandle(val) {
      this.extractConditionData = val
      this.$emit('extractConditionData', this.extractConditionData)
    },
    // 抽取条件列表，根据d删除某一条
    handleDelete(row, index) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.extractConditionData.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
