<!-- 调查表 -->
<script lang="ts" setup name="QuestionnaireTable">
const $props = defineProps({
  status: {
    type: String,
    required: true,
  },
})
// watch(() => $props.status, (newVal) => {
//   // console.log(newVal, 'newVal')
// }, {
//   deep: true,
//   immediate: true
// })
const $route = useRoute()
const rateTips = ['很不满意', '不太满意', '一般满意', '比较满意', '非常满意']
const rateList = ref([
  { index: 1, text: '1、对仪器交接方便程度是否满意', value: 0, attributeName: 'itemOne' },
  { index: 2, text: '2、对工作人员的服务态度是否满意', value: 0, attributeName: 'itemTwo' },
  { index: 3, text: '3、对检定工作完成的及时性是否满意', value: 0, attributeName: 'itemThree' },
  { index: 4, text: '4、对检定工作完成的质量是否满意', value: 0, attributeName: 'itemFour' },
  { index: 5, text: '5、对所出具的证书报告的质量是否满意', value: 0, attributeName: 'itemFive' },
  { index: 6, text: '6、对送检仪器的管理方式是否满意', value: 0, attributeName: 'itemSix' },
  { index: 7, text: '7、对双方的沟通方式是否满意', value: 0, attributeName: 'itemSeven' },
  { index: 8, text: '8、对所采用的测试、校准、检定方法是否满意', value: 0, attributeName: 'itemEight' },
  { index: 9, text: '9、对所提供的技术支持是否满意', value: 0, attributeName: 'itemNine' },
  { index: 10, text: '10、对所提供的计量保障是否满意', value: 0, attributeName: 'itemTen' },
])
const initDialog = () => {
  if ($route.params.type !== 'create') {
    const data = JSON.parse($route.query.row as string)
    rateList.value.forEach((item: any) => {
      item.value = data[item.attributeName] === '' ? 0 : Number(data[item.attributeName])
    })
  }
}
onMounted(() => {
  initDialog()
})
defineExpose({
  rateList,
})
// 根据字典值返回满意度分值
const getSatisfactionByDict = (val: number) => {
  switch (val) {
    case 1 : return 0
    case 2 : return 3
    case 3: return 6
    case 4: return 8
    case 5: return 10
    default: return 0
  }
}
// 满意度调查表总分
const totalSatisfaction = computed(() => {
  let retTotal = 0
  rateList.value.forEach((val: any) => {
    retTotal += getSatisfactionByDict(val.value)
  })
  return retTotal
})
</script>

<template>
  <detail-block-switch title="调查表">
    <table-container class="long-label" title="">
      <template #btns-right>
        <el-text style="margin-right: 20px;">
          总分： {{ totalSatisfaction }}
        </el-text>
      </template>
      <el-row :gutter="24">
        <el-col v-for="item in rateList" :key="item.index" :span="12">
          <el-form-item :label="item.text">
            <el-rate v-model="item.value" :disabled="$props.status === 'detail'" size="large" :texts="rateTips" :show-text="true" :clearable="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </table-container>
  </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>