<!-- 调查表 -->
<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: false,
    width: '400',
    isRadio: false,
  },
  {
    text: '非常满意(10分)',
    value: 'one',
    required: false,
    isRadio: true,
  },
  {
    text: '比较满意(8分)',
    value: 'two',
    required: false,
    isRadio: true,
  },
  {
    text: '一般满意(6分)',
    value: 'three',
    required: false,
    isRadio: true,
  },
  {
    text: '不太满意(3分)',
    value: 'four',
    required: false,
    isRadio: true,
  },
  {
    text: '很不满意(0分)',
    value: 'five',
    required: false,
    isRadio: true,
  },
])
const list = ref<any[]>([
  {
    content: '对仪器交接方便程度是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对工作人员的服务态度是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对检定工作完成的及时性是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对检定工作完成的质量是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对所出具的证书报告的质量是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对送检仪器的管理方式是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对双方的沟通方式是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对所采用的测试、校准、检定方法是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对所提供的技术支持是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
  {
    content: '对所提供的计量保障是否满意',
    one: '',
    two: '',
    three: '',
    four: '',
    five: '',
  },
])
const ruleForm = ref({

})
defineExpose({
  list,
})
const selectScore = (index: number, value: string) => {
  // index 为点击第几行索引  value为点击的属性值
  // 排他 -> 先把所有单选置空， value再单独赋值
  const data = list.value[index]
  data.one = ''
  data.two = ''
  data.three = ''
  data.four = ''
  data.five = ''
  // 单独
  data[value] = '1'
}
</script>

<template>
  <detail-block-switch title="调查表">
    <el-table
      ref="multipleTableRef"
      class="nortable-header" :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" :width="item.width"
        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="!item.isRadio">{{ scope.row[item.value] }}</span>
          <el-radio-group v-else v-model="scope.row[item.value]" class="ml-4 radio">
            <el-radio label="1" size="large" @change="selectScore(scope.$index, item.value)" />
          </el-radio-group>
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

<style lang="scss" scoped>
// .nortable-header {
//   ::v-deep(.el-table__body-wrapper) {
//     display: none;
//   }
// }
.radio {
  ::v-deep(.el-radio__label) {
    display: none;
  }
}
</style>