<!-- 报告内容 -->
<script name="ReportContent" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import templateDialog from './templateDialog.vue'
import { useCheckList, useCheckNoTips } from '@/commonMethods/useCheckList'
import { detailReviewTarget, getReviewTargetList } from '@/api/quality/review/target'
const $props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
const $route = useRoute()
const $router = useRouter()
const list = ref<any[]>([])
watch(() => $props.data, (newVal) => {
  if (newVal.length) {
    list.value = $props.data
    list.value.forEach((item: any) => {
      item.editable = true
    })
  }
  else {
    list.value = []
  }
}, {
  deep: true,
})
const columns = ref([
  { text: '质量目标', value: 'inspectionContent', required: true, width: '220' },
  { text: '实现情况', value: 'inspectionMethod', required: true, width: '350' },
  { text: '相关证据', value: 'inspectionRes', required: true },
])

// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value, '报告内容')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 编辑行
const dblclickRow = (row: any) => {
  if ($route.path.includes('detail')) { return }
  setAllRowReadable()
  row.editable = true
}
// 删除行
const deleteRow = (row: any) => {
  ElMessageBox.confirm(
    '确认删除当前行数据吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const data = list.value.findIndex(item => item === row)
    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: '',
      editable: true,
    })
  }
  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,
})
// 插入模板
const templateRef = ref()
const selectTemplate = () => {
  if (checkCertificateList()) {
    templateRef.value.initDialog()
  }
}
// 确认选择模板
const confirmTemplate = (template: any) => {
  // if(list.value.) {
  // list.value.push({ ...template, editable: true })
  // console.log(template, 'template')
  // }
  template.forEach((item: any) => {
    if (list.value.every((citem: any) => citem.id !== item.id)) {
      list.value.push({ ...item, editable: true })
    }
  })
}
// 自动填充上次内容
const fillContent = () => {
  getReviewTargetList({ limit: 1, offset: 1 }).then((res) => {
    if (res.data.rows.length) {
      detailReviewTarget({ id: res.data.rows[0].id }).then((res1) => {
        if (res1.data.targetEvaluationContents?.length) {
          list.value = res1.data.targetEvaluationContents
          list.value = list.value.map((item: any) => ({ ...item, editable: true }))
        }
        else {
          ElMessage.warning('暂无内容填充')
        }
      })
    }
    else {
      ElMessage.warning('暂无内容填充')
    }
  })
}
</script>

<template>
  <detail-block title="报告内容">
    <template-dialog ref="templateRef" @add="confirmTemplate" />
    <template #btns>
      <el-button type="primary" @click="fillContent">
        自动填充上次内容
      </el-button>
      <el-button type="primary" @click="selectTemplate">
        插入内容模板
      </el-button>
    </template>
    <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" :width="item.width"
      >
        <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="item.text === '质量目标' && scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="item.text !== '质量目标' && scope.row.editable" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input" type="textarea" :rows="6"
          />
        </template>
      </el-table-column>
      <el-table-column v-if="!$route.path.includes('detail')" align="center" label="操作" width="100">
        <template #default="scope">
          <!-- <el-button
            v-if="!scope.row.editable"
            size="small"
            type="primary"
            link
            @click="handler('update', scope.$index)"
          >
            编辑
          </el-button> -->
          <el-button
            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>
          <el-button
            size="small"
            type="primary"
            link
            @click="handler('insert', scope.$index)"
          >
            上移
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>