<!-- 调查表 -->
<script lang="ts" setup name="QuestionnaireTable">
import { ElMessage, ElMessageBox } from 'element-plus'
// const $props = defineProps({
//   data: {
//     type: Array,
//     default: () => ([]),
//   },
// })
const $route = useRoute()
// 表头显示标题
const columns = ref([
  {
    text: '内容',
    value: 'content',
    required: true,
  },
  {
    text: '非常满意(10分)',
    value: 'createTime',
    required: true,
  },
  {
    text: '比较满意(8分)',
    value: 'createTime',
    required: true,
  },
  {
    text: '一般满意(6分)',
    value: 'createTime',
    required: true,
  },
  {
    text: '不太满意(3分)',
    value: 'createTime',
    required: true,
  },
  {
    text: '很不满意(0分)',
    value: 'createTime',
    required: true,
  },
])
const list = ref<any[]>([
  {
    content: '对仪器交接方便程度是否满意',
  },
  {
    content: '对工作人员的服务态度是否满意',
  },
  {
    content: '对检定工作完成的及时性是否满意',
  },
  {
    content: '对检定工作完成的质量是否满意',
  },
  {
    content: '对所出具的证书报告的质量是否满意',
  },
  {
    content: '对送检仪器的管理方式是否满意',
  },
  {
    content: '对双方的沟通方式是否满意',
  },
  {
    content: '对所采用的测试、校准、检定方法是否满意',
  },
  {
    content: '对所提供的技术支持是否满意',
  },
  {
    content: '对所提供的计量保障是否满意',
  },
])
// 检查数据列表
function checkCertificateList() {
  return true
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
defineExpose({
  list,
})
</script>

<template>
  <detail-block-switch 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 && !item.isSelect" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
          />
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>