<template>
  <div>
    <a-modal
      class="modalBox"
      centered
      :footer="null"
      title="设置考评指标"
      v-model="isshow"
      @cancle="cancel"
      :width="'60%'">
      <a-row :gutter="24" class="header">
        <div>请给考评项目为【{{ itemName }}】设置考评指标</div>
        <a-button v-hasPermission="'B_target_add'" id="setEvaItemModal-add" type="primary" @click="openModal">新增</a-button>
      </a-row>
      <a-table
        ref="table"
        size="default"
        :pagination="false"
        :rowKey="(record) => record.id"
        :columns="columns"
        :dataSource="list"
        bordered>
        <!-- 操作 -->
        <template slot="action" slot-scope="text, record">
          <a-icon v-hasPermission="'B_target_edit'" id="setEvaItemModal-edit" type="edit" class="actionBtn icon-blues" @click="openModal(record)" />
          <a-icon v-hasPermission="'B_target_del'" id="setEvaItemModal-delete" type="delete" class="actionBtn icon-red" @click="delect(record)" />
          <span v-if="!$hasPermissions('B_target_edit') && !$hasPermissions('B_target_del')">--</span>
        </template>
      </a-table>
      <!-- 新增/编辑 弹窗 -->
      <add-evaIndexModal :itemId="itemId" :itemIndexId="itemIndexId" :visible="openAddModal" @refresh="getList" @close="openAddModal=false"></add-evaIndexModal>
    </a-modal>
  </div>
</template>

<script>
import {
  itemIndexQuery,
  itemIndexDelete
} from '@/api/evaluationItem.js'
import addEvaIndexModal from './AddEvaIndexModal.vue'
export default {
  name: 'SetEvaItemModal',
  components: {
    addEvaIndexModal
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 要编辑的考评项id
    itemId: {
      type: [String, Number],
      default: ''
    },
    // 要编辑的考评项名称
    itemName: {
      type: String,
      default: ''
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        this.getList()
      } else {
        this.cancel()
      }
    }
  },
  data () {
    return {
      isshow: this.visible, // 弹框显示隐藏
      openAddModal: false, // 是否打开编辑/新增弹框
      itemIndexId: '', // 考评指标id
      // 表头
      columns: [{
        title: '序号',
        dataIndex: 'no',
        width: 60,
        align: 'center'
      },
      {
        title: '考评指标名称',
        dataIndex: 'name',
        width: 200,
        align: 'center'
      },
      {
        title: '操作',
        width: 150,
        align: 'center',
        scopedSlots: {
          customRender: 'action'
        }
      }
      ],
      list: []
    }
  },
  computed: {},
  methods: {
    // 获取列表数据
    getList () {
      itemIndexQuery({
        assessItemId: this.itemId
      }).then(res => {
        if (res.status == 200) {
          res.data.map((item, index) => {
            item.no = index + 1
          })
          this.list = res.data
        } else {
          this.list = []
        }
      })
    },
    // 点击弹框x号触发事件
    cancel (e) {
      this.$emit('close')
    },
    // 打开新增/编辑 弹窗
    openModal (row) {
      this.itemIndexId = row ? row.id : ''
      this.openAddModal = true
    },
    // 删除考评指标
    delect (row) {
      const _this = this
      this.$confirm({
        title: '警告',
        centered: true,
        content: '删除后原数据不可恢复，是否删除?',
        okText: '确定',
        cancelText: '取消',
        onOk () {
          itemIndexDelete({
            id: row.id
          }).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.getList()
            }
          })
        }
      })
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, {
      name: 'SetEvaItemModal'
    })
  }

}
</script>

<style lang="less">
  .modalBox{
    .header {
    	font-size: 16px;
    	font-weight: 600;
      padding: 0 15px 20px 15px;
    }
    .header div {
    	margin-bottom: 20px;
    }
  }
</style>
