<!-- 模板内容管理 -->
<script name="TempalteContent" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCheckList, useCheckNoTips } from '@/commonMethods/useCheckList'
import type { IItemType } from '../template-interface'
import quality from '/public/config/quality.json'

const $props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
const $route = useRoute()
const $router = useRouter()
const list = ref<IItemType[]>([])
watch(() => $props.data, (newVal) => {
  if (newVal.length) {
    list.value = $props.data as IItemType[]
  }
  else {
    if ($route.path.includes('detail')) { return }
    list.value.push({
      itemTitle: '',
      inspectionContent: '',
      inspectionMethod: '',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    } as IItemType)
  }
}, {
  deep: true,
})
const { proxy } = getCurrentInstance() as any
const templateFlag = $route.query.templateFlag as string
const columns = ref([
  // { text: '内容标题', value: 'itemTitle', required: true },
  { text: templateFlag.includes(quality.templateFlag) ? '检查内容' : '质量目标', value: 'inspectionContent', required: true },
  { text: templateFlag.includes(quality.templateFlag) ? '检查方法' : '实现情况', value: 'inspectionMethod', required: true },
  { text: templateFlag.includes(quality.templateFlag) ? '检查结果' : '相关证据', value: 'inspectionRes', required: true },

])
if (templateFlag.includes(quality.templateFlag)) {
  columns.value.push({ text: '依据(GJB2725A 质量手册、程序文件）', value: 'refStandard', required: true })
}
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value, '模板内容管理')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 编辑行
const dblclickRow = (row: IItemType) => {
  if ($route.path.includes('detail')) { return }
  setAllRowReadable()
  row.editable = true
}
// 删除行
const deleteRow = (row: IItemType) => {
  ElMessageBox.confirm(
    '确认删除当前行数据吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const data = list.value.findIndex(item => item === row)
    if (data === 0) {
      list.value.shift()
    }
    else {
      list.value.splice(data, 1)
    }
  })
}
const handler = (type: string, index: number) => {
  if (type === 'insert') {
    if (!checkCertificateList()) { return }
    setAllRowReadable()
    list.value.splice(index + 1, 0, {
      inspectionContent: '',
      inspectionMethod: '',
      inspectionRes: '',
      refStandard: '',
      editable: true,
    } as IItemType)
  }
  else if (type === 'delete') {
    deleteRow(list.value[index])
  }
  else if (type === 'update') {
    // if (!checkCertificateList()) { return }
    dblclickRow(list.value[index])
  }
}
// 鼠标移出表格 自动置为不可编辑状态
const eventBlur = () => {
  if ($route.path.includes('detail')) { return }
  if (useCheckNoTips(list.value, columns.value)) {
    setAllRowReadable()
  }
}
defineExpose({
  list,
  checkCertificateList,
})
</script>

<template>
  <!-- @mouseleave="eventBlur" -->
  <detail-block title="模板内容管理">
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border
    >
      <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">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="scope.row.editable" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
          />
        </template>
      </el-table-column>
      <el-table-column v-if="!$route.path.includes('detail')" align="center" label="操作" width="180">
        <template #default="scope">
          <el-button
            v-if="!scope.row.editable"
            size="small"
            type="primary"
            link
            @click="handler('update', scope.$index)"
          >
            编辑
          </el-button>
          <el-button
            v-if="list.length !== 1 || (list.length === 1 && scope.$index !== 0)"
            size="small"
            type="danger"
            link
            @click="handler('delete', scope.$index)"
          >
            删除
          </el-button>
          <el-button
            size="small"
            type="primary"
            link
            @click="handler('insert', scope.$index)"
          >
            下方插入
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>