<!--
 * @Description: 添加等级评定-等级评定规则表格
 * @Author: 李亚光
 * @Date: 2023-09-14
 -->
<script lang="ts" setup name="PlanTable">
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCheckList } from '@/utils/useCheckList'
import { getDictByCode } from '@/api/system/dict'
const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
})
const $route = useRoute()
// 表头显示标题
const columns = ref([
  {
    text: '等级',
    value: 'levelCode',
    required: true,
    isSelect: true,
  },
  {
    text: '等级规则描述',
    value: 'remarks',
    required: true,
    isSelect: false,
  },
])
const list = ref<any[]>([])
// 获取等级评定下拉框
const selectList = ref<{ id: string; value: string; name: string }[]>([])
const selectListCopy = ref<any[]>([])
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value, '等级评定规则表格')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
const select = ref({})
// 双击行显示输入框
const dblclickRow = (row: any, column: any) => {
  if ($route.path.includes('detail')) {
    return
  }
  const select1 = selectList.value.filter(item => item.name === row.levelCodeName)[0]
  if (select1.value) {
    select.value = select1
  }
  setAllRowReadable()
  row.editable = true
}
// 添加行
const addRow = () => {
  if (list.value.length >= selectList.value.length) {
    ElMessage.warning(`最多添加${selectList.value.length}个`)
    return
  }
  if (checkCertificateList()) {
    setAllRowReadable()
    list.value.push({
      // levelCodeName: '',
      remarks: '',
      editable: true,
      levelCode: '',
    })
    select.value = {}
  }
}
// 删除行
const removeRow = (index: number) => {
  list.value = list.value.filter((item, cindex) => {
    return cindex !== index
  })
}
const initDialog = () => {
  list.value = $props.data
}

watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = newVal.map((item: any) => ({ ...item, levelCode: String(item.levelCode) }))
  }
}, {
  deep: true,
  // immediate: true,
})

initDialog()
defineExpose({
  list, checkCertificateList,
})

const fetchSelectList = () => {
  getDictByCode('level_code').then((res) => {
    selectList.value = res.data
    selectListCopy.value = res.data
  })
}
watch(() => list.value, (newVal) => {
  if (newVal) {
    const already = newVal.filter(item => item.levelCode).map(item => String(item.levelCode))
    selectListCopy.value = selectList.value.filter(item => already.every(child => String(child) !== String(item.value)))
    if (select.value.value) {
      selectListCopy.value.push(select.value)
    }
  }
}, {
  deep: true,
})
// const select = (index: number) => {
//   list.value[index].levelCodeName = selectList.value.filter(item => item.name == list.value[index].levelCode)[0].value
// }
const selectFocus = (value: string) => {
  console.log(value, 'value')
  if (value) {
    console.log(selectList.value.filter(item => value == String(item.value)))
    selectListCopy.value.push(selectList.value.filter(item => value == String(item.value))[0])
  }
}
fetchSelectList()
</script>

<template>
  <detail-block-switch title="" style="width: 100%;padding: 0;">
    <template v-if="!$route.path.includes('detail')" #btns>
      <el-button type="primary" @click="addRow">
        添加等级规则
      </el-button>
    </template>
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border
      @row-dblclick="dblclickRow"
    >
      <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 v-if="!scope.row.editable && !item.isSelect">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="scope.row.editable && !item.isSelect" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input" type="textarea" :row="2" maxlength="100" show-word-limit
          />
          <el-select v-if="item.isSelect && scope.row.editable" v-model="scope.row[item.value]" :placeholder="`${item.text}`" style="width: 100%;">
            <el-option v-for="item in selectListCopy" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
          <el-select v-if="item.isSelect && !scope.row.editable" v-model="scope.row[item.value]" :placeholder="`${item.text}`" style="width: 100%;" disabled>
            <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80">
        <template #default="scope">
          <el-button link type="danger" size="small" @click="removeRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

<style lang="scss" scoped>
::v-deep(.detail-main) {
  padding: 0;

  .content {
    padding: 0;
  }

  .header {
    padding: 0;
  }
}
</style>