<!--
  @description: 专家库-抽取项目列表
  @Modifier: qrf
  @routerPath:
  @date: 2020/10/26
-->
<template>
  <div class="projectInfoDetail">
    <div>
      <div class="page-title">
        <span class="be-required">1 抽取项目</span>
        <el-button style="margin-left:16px;" @click="projectDialogData.dialog=true">
          添加
        </el-button>
      </div>
      <div>
        <el-table :data="projectList" class="tableLimit">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column header-align="center" min-width="200" align="left">
            <template slot="header" prop="tenderName">
              <span>项目名称</span>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.tenderName }}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" min-width="200" align="left">
            <template slot="header" prop="tenderNo">
              <span>项目编号</span>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.tenderNo }}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" min-width="200" align="left">
            <template slot="header" prop="packName">
              <span>标段名称</span>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.packName }}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="left">
            <template slot="header" prop="packNo">
              <span>标段编号</span>
            </template>
            <template slot-scope="scope">
              <span>{{ scope.row.packNo }}</span>
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="操作" align="center" width="130">
            <template slot-scope="scope">
              <el-link type="primary" @click="removeProjectList(scope.row,scope.$index)">
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <addEtractProjectDialog :dialog-data="projectDialogData" @extractProjectDialogInfo="extractProjectDialogInfo" />
  </div>
</template>

<script>
/* 组件 */
import addEtractProjectDialog from '@/views/expert/extractExpert/etractApplyDialog/addEtractProject-dialog' // 添加项目-弹框
export default {
  name: 'EtractProjectList',
  components: {
    addEtractProjectDialog // 添加项目-弹框
  },
  data() {
    return {
      projectList: [],
      // 添加项目
      projectDialogData: {
        dialog: false
      }
    }
  },
  methods: {
    extractProjectDialogInfo(val) {
      val.forEach((item) => {
        this.projectList.push(item)
      })
    },
    removeProjectList(index, type) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.projectList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
