<!-- 报告内容 -->
<script name="ReportContent" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCheckList, useCheckNoTips } from '@/commonMethods/useCheckList'
import { detailReviewEffect, getReviewEffectList } from '@/api/quality/review/effectiveness'
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,
  immediate: true,
})
const columns = ref([
  { text: '', value: 'inspectionContent', required: false, width: '180' },
  { text: '质量管理体系运行情况', value: 'inspectionMethod', required: false },
  { text: '综合分析', value: 'inspectionRes', required: true },
  { text: '对策', 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: 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: '',
      refStandard: '',
      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 getSpanArr = (data: any, spanKey: any) => {
  console.log(spanKey)
  const spanArr = []
  let pos: any = ''
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1)
      pos = 0
    }
    else {
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1
        spanArr.push(0)
      }
      else {
        spanArr.push(1)
        pos = i
      }
    }
  }
  return spanArr
}
const strategySpanMethod = ({ row, column, rowIndex, columnIndex }: any): any => {
  if (columnIndex == 0 && rowIndex < 7) {
    const spanArr = getSpanArr(list.value, column.property)
    const _row = spanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
}
// 自动填充上次内容
const fillContent = () => {
  getReviewEffectList({ limit: 1, offset: 1 }).then((res) => {
    if (res.data.rows.length) {
      detailReviewEffect({ id: res.data.rows[0].id }).then((res1) => {
        console.log(res1.data, '需要填充的内容')
        if (res1.data.repContents?.length) {
          list.value = res1.data.repContents
          list.value = list.value.map((item: any) => ({ ...item, editable: true }))
        }
        else {
          ElMessage.warning('暂无内容填充')
        }
      })
    }
    else {
      ElMessage.warning('暂无内容填充')
    }
  })
}
</script>

<template>
  <detail-block title="报告内容">
    <template #btns>
      <el-button type="primary" @click="fillContent">
        自动填充上次内容
      </el-button>
      <!-- <el-button type="primary">
        插入内容模板
      </el-button> -->
    </template>
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border
      :span-method="strategySpanMethod"
    >
      <!-- <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="!scope.row.editable">{{ scope.row[item.value] }}</span>
          <span v-if="(item.text === '' || item.text === '质量管理体系运行情况') && scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="item.text !== '' && item.text !== '质量管理体系运行情况' && scope.row.editable" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input" type="textarea" :rows="scope.$index === 0 ? 6 : 4"
          />
        </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="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>
          <el-button
            size="small"
            type="primary"
            link
            @click="handler('insert', scope.$index)"
          >
            上移
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </detail-block>
</template>