<!--
 * @Description: 考核方案详情 - 一级考核指标列表
 * @Author: 李亚光
 * @Date: 2023-09-15
 -->
<script lang="ts" setup name="CertificateTable">
import { ElMessage, ElMessageBox } from 'element-plus'
import proxyDialog from './proxyDialog.vue'
import { useCheckList } from '@/utils/useCheckList'
const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
})
const $route = useRoute()
// 表头显示标题
const columns = ref([
  {
    text: '考核指标项目',
    value: 'quotaProjectName',
    required: false,
  },
  {
    text: '考核指标类型',
    value: 'quotaTypeName',
    required: false,
  },
  {
    text: '一级考核指标',
    value: 'priIndicators',
    required: false,
  },
  {
    text: '考核指标编号',
    value: 'quotaNo',
    required: false,
  },
  {
    text: '考核指标计算规则',
    value: 'ruleDesc',
    required: false,
  },
  {
    text: '指标数据来源',
    value: 'dataSourceName',
    required: false,
  },
  {
    text: '指标责任考核人',
    value: 'assDeptName',
    required: false,
  },
  {
    text: '考核分值',
    value: 'score',
    required: false,
  },
])
const list = ref<any[]>([])
const backList = ref<any[]>([])
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value, '一级考核指标列表')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 双击行显示输入框
const dblclickRow = (row: any) => {
}
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: any[]) => {
  SelectionList.value = e
}
// 添加行
const proxyRef = ref()
const addRow = () => {
  proxyRef.value.initDialog()
}
// 确认添加
const comfirm = (data: any[]) => {
  data.forEach((item: any) => {
    // 去掉重复选择
    if (!list.value.filter((ele: any) => ele.id === item.id).length) {
      list.value.push(item)
      backList.value.push(item)
    }
  })
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = JSON.parse(JSON.stringify(newVal))
    backList.value = JSON.parse(JSON.stringify(newVal))
  }
}, {
  deep: true,
})
// const initDialog = () => {
//   list.value = JSON.parse(JSON.stringify($props.data))
// }
// initDialog()
defineExpose({
  list,
  checkCertificateList,
})
const name = ref<string>('')
const search = () => {
  list.value = backList.value.filter((item: any) => item.quotaNo.includes(name.value))
}
const reset = () => {
  name.value = ''
  list.value = backList.value
}
</script>

<template>
  <detail-block-switch title="">
    <proxy-dialog ref="proxyRef" @add="comfirm" />
    <template #menu>
      <el-input v-if="!$route.path.includes('create')" v-model="name" placeholder="指标编号" clearable />
    </template>
    <template #btns>
      <el-button v-if="!$route.path.includes('create')" type="primary" @click="search">
        查询
      </el-button>
      <el-button v-if="!$route.path.includes('create')" type="warning" @click="reset">
        重置
      </el-button>
      <el-button v-if="!$route.path.includes('detail')" type="info" @click="removeRow">
        删除
      </el-button>
      <el-button v-if="!$route.path.includes('detail')" type="primary" @click="addRow">
        增加
      </el-button>
    </template>
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border @selection-change="handleSelectionChange"
      @row-dblclick="dblclickRow"
    >
      <el-table-column v-if="!$route.path.includes('detail')" type="selection" width="38" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columns" :key="item.value" :prop="item.value" :label="item.text"
        align="center"
      >
        <template #header>
          <span v-show="item.required && !$route.path.includes('detail')" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <span>{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>