<!-- 模板内容管理 -->
<script name="TempalteContent" lang="ts" setup>
import { watch } from 'vue'

const $props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
const list = ref([])
watch(() => $props.data, (newVal) => {
  console.log(newVal, 'newVal')
  if (newVal.length) {
    list.value = $props.data
  }
  else {
    list.value.push({
      1: '',
      2: '',
      3: '',
      4: '',
      editable: true,
    })
  }
}, {
  deep: true,
})
const columns = ref([
  { text: '检查内容', value: '1', required: true },
  { text: '检查方法', value: '2', required: true },
  { text: '检查结果', value: '3', required: true },
  { text: '依据(GJB2725A 质量手册、程序文件）', value: '4', required: true },
])

const handler = (type: string, index: number) => {

}
</script>

<template>
  <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 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>
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>