<!-- 委托方满意度调查表详情 -->
<script name="QuestionnaireDetail" lang="ts" setup>
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type{ ICustomerQuestionnaireInfo, ICustomerRateColumn } from './customer-questionnaire'
import FilterCustomerStaff from '@/views/resource/common/filterCustomerStaff.vue'
import useUserStore from '@/store/modules/user'
import { addQuestionnaire } from '@/api/resource/questionnaire'
import type { IDictType } from '@/commonInterface/resource-interface'
import { getDictByCode } from '@/api/system/dict'

// 从路由中传过来的参数
const type = ref<string>('')
const id = ref<string>('')

const userInfo = useUserStore()
const route = useRoute()
const router = useRouter()

const questionnaireFormRef = ref()
const refFilterCustomer = ref()

const questionnaireInfo = ref<ICustomerQuestionnaireInfo>({
  id: '',
  customerId: '',
  customerName: '',
  createTime: '',
  labCode: '',
  labCodeName: '',
  questionnaireNo: '',
  questionnaireName: '委托方满意度调查表',
  senderId: '',
  senderName: '',
  sendTime: '',
  writerId: '',
  writerName: '',
  writeTime: '',
  writeStatus: '',
  itemOne: '',
  itemTwo: '',
  itemThree: '',
  itemFour: '',
  itemFive: '',
  itemSix: '',
  itemSeven: '',
  itemEight: '',
  itemNine: '',
  itemTen: '',
})

const questionnaireFormRules = ref({
  labCode: [{ required: true, message: '实验室代码不能为空，请选择', trigger: ['change', 'blur'] }],
  customerId: [{ required: true, message: '填写单位不能为空，请选择', trigger: 'change' }],
  writerId: [{ required: true, message: '填写人不能为空，请选择', trigger: 'change' }],
}) // 表单验证规则

// 字典值
const labCodeDict = ref<IDictType[]>([])
const questionnaireDict = ref<IDictType[]>([])

const rateTips = ['很不满意', '不太满意', '一般满意', '比较满意', '非常满意']
const rateList = ref<Array<ICustomerRateColumn>>([
  { 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 showFilterCustomerDialog = () => {
  refFilterCustomer.value.showOrHideFilterDialog(true)
}

// 返回选定结果
const recordSelectedHandler = (row: any) => {
  refFilterCustomer.value.showOrHideFilterDialog(false)

  if (row.id !== '') {
    questionnaireInfo.value.customerId = row.customerId
    questionnaireInfo.value.customerName = row.customerName
    questionnaireInfo.value.writerId = row.id
    questionnaireInfo.value.writerName = row.name
  }
  else {
    ElMessage.error('填写单位和填写人不能为空，请重新选择')
  }
}

// 保存
const saveQuestionnaireInfo = () => {
  let satisfactionStr = ''
  rateList.value.forEach((item: ICustomerRateColumn) => {
    questionnaireInfo.value[item.attributeName] = item.value === 0 ? '' : item.value.toString()
    satisfactionStr += item.value === 0 ? '' : item.value.toString()
  })

  // 满意度全部填写 或者 全不填写时 都可以提交
  if (satisfactionStr.length === 0 || satisfactionStr.length === 10) {
    questionnaireInfo.value.sendTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 发送时间改为提交时的时间

    // 全填时表示填写完成 补充填写时间
    if (satisfactionStr.length === 10) {
      questionnaireInfo.value.writeTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') // 填写时间为当前时间
    }

    // 提交接口
    addQuestionnaire(questionnaireInfo.value).then((res) => {
      if (res.code === 200) {
      // 提示保存成功
        ElMessage.success('委托方满意度调查表创建并发送成功')

        // 设置返回的委托方id和委托方编号
        questionnaireInfo.value.questionnaireNo = res.data.questionnaireNo
        questionnaireInfo.value.id = res.data.id
        id.value = res.data.id

        type.value = 'detail'
      }
      else {
      // 提示失败信息
        ElMessage.error(`保存失败：${res.message}`)
      }
    })
  }
  else {
    ElMessage.warning('满意度调查表不能部分填写，请检查')
  }
}

// 新建时保存后的处理 获取返回的id
const saveButtonHandler = async () => {
  if (!questionnaireFormRef) { return }

  await questionnaireFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid === true) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        saveQuestionnaireInfo()
      })
    }
  })
}

const getLabCodeDict = async () => {
  // 先从缓存中获取
  if (sessionStorage.getItem('bizLabCodeExceptAll') === null || sessionStorage.getItem('bizLabCodeExceptAll') === undefined) {
    // 缓存中没有则调用接口查询
    await getDictByCode('bizLabCode').then((res) => {
      if (res.code === 200) {
        labCodeDict.value = res.data.filter((item: { name: string }) => item.name !== '全站')
        sessionStorage.setItem('bizLabCodeExceptAll', JSON.stringify(labCodeDict.value)) // 放到缓存中
      }
    })
  }
  else {
    labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCodeExceptAll')!)
  }
}

const getQuestionnaireDict = async () => {
  // 先从缓存中获取
  if (sessionStorage.getItem('bizQuestionnaire') === null || sessionStorage.getItem('bizQuestionnaire') === undefined) {
    // 缓存中没有则调用接口查询
    await getDictByCode('bizQuestionnaire').then((res) => {
      if (res.code === 200) {
        questionnaireDict.value = res.data
        sessionStorage.setItem('bizQuestionnaire', JSON.stringify(questionnaireDict.value)) // 放到缓存中
      }
    })
  }
  else {
    questionnaireDict.value = JSON.parse(sessionStorage.getItem('bizQuestionnaire')!)
  }
}

// 关闭
const resetForm = () => {
  sessionStorage.removeItem('questionnaireInfo') // 返回列表时 将缓存中的数据删除
  router.go(-1)
}

const initDialog = (params: any) => {
  // 从路由中获取参数
  type.value = params.type
  id.value = params.id !== undefined ? params.id : ''

  switch (params.type) {
    case 'create' :
      sessionStorage.removeItem('questionnaireInfo')

      questionnaireInfo.value.senderId = userInfo.id
      questionnaireInfo.value.senderName = userInfo.name
      questionnaireInfo.value.sendTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')

      break

    case 'detail':
      id.value = params.id

      questionnaireInfo.value = JSON.parse(sessionStorage.getItem('questionnaireInfo')!)

      rateList.value.forEach((item: ICustomerRateColumn) => {
        item.value = questionnaireInfo.value[item.attributeName] === '' ? 0 : Number(questionnaireInfo.value[item.attributeName])
      })
      break

    default:
      break
  }
}

const initDict = () => {
  getLabCodeDict()
  getQuestionnaireDict()
}

// 根据字典值返回满意度分值
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
  }
}

// 监听 显示中文
watch(() => questionnaireInfo.value.labCode, (newVal) => {
  labCodeDict.value = JSON.parse(sessionStorage.getItem('bizLabCodeExceptAll')!)

  if (labCodeDict.value.length > 0) {
    const targetList = labCodeDict.value.filter(item => item.value === newVal)
    if (targetList.length > 0) {
      questionnaireInfo.value.labCodeName = targetList[0].name
    }
    else {
      questionnaireInfo.value.labCodeName = ''
    }
  }
})

// 满意度调查表总分
const totalSatisfaction = computed(() => {
  let retTotal = 0
  rateList.value.forEach((val: ICustomerRateColumn) => {
    retTotal += getSatisfactionByDict(val.value)
  })
  return retTotal
})

onMounted(() => {
  initDict()
  initDialog(route.query)
})
</script>

<template>
  <app-container>
    <el-form ref="questionnaireFormRef" :model="questionnaireInfo" :rules="questionnaireFormRules" label-position="right" label-width="110px" border stripe>
      <detail-page title="委托方满意度调查表">
        <template #btns>
          <el-button v-if="type !== 'detail'" type="primary" @click="saveButtonHandler">
            保存
          </el-button>
          <el-button type="info" @click="resetForm()">
            关闭
          </el-button>
        </template>

        <el-row :gutter="24">
          <!-- 第一行 第一列 -->
          <el-col :span="6">
            <el-form-item label="实验室代码" prop="labCode">
              <el-select v-model="questionnaireInfo.labCode" placeholder="请选择实验室代码" :disabled="type === 'detail'" style="width: 100%;">
                <el-option v-for="dict in labCodeDict" :key="dict.id" :label="dict.name" :value="dict.value" />
              </el-select>
              <el-input v-model="questionnaireInfo.labCodeName" type="hidden" />
            </el-form-item>

            <el-form-item label="填写单位" prop="customerId">
              <el-input v-model="questionnaireInfo.customerName" :disabled="true" placeholder="选择填写人时自动填充" />
              <el-input v-model="questionnaireInfo.customerId" type="hidden" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="文件编号">
              <el-input v-model="questionnaireInfo.questionnaireNo" placeholder="文件编号，保存后自动生成" :disabled="true" />
            </el-form-item>

            <el-form-item label="填写人" prop="writerId">
              <el-input v-model="questionnaireInfo.writerName" :readonly="true" :disabled="true">
                <template #append>
                  <el-button size="small" :disabled="type === 'detail'" @click="showFilterCustomerDialog">
                    选择
                  </el-button>
                </template>
              </el-input>
              <el-input v-model="questionnaireInfo.writerId" type="hidden" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="发送人">
              <el-input v-model="questionnaireInfo.senderName" :disabled="true" />
              <el-input v-model="questionnaireInfo.senderId" type="hidden" />
            </el-form-item>

            <el-form-item label="填写时间">
              <el-input v-model="questionnaireInfo.writeTime" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="发送时间">
              <el-input v-model="questionnaireInfo.sendTime" placeholder="保存后自动生成" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </detail-page>

      <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" size="large" :texts="rateTips" :show-text="true" :clearable="true" :disabled="type === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
      </table-container>
    </el-form>

    <filter-customer-staff ref="refFilterCustomer" title="请选择填写单位和填写人" @record-selected="recordSelectedHandler" />
  </app-container>
</template>

<style lang="scss" scoped>
.long-label {
  ::v-deep {
    .el-form-item__label {
      width: 400px !important;
      margin-left: 20px;
      justify-content: left;
    }

    .el-radio__label {
      width: 150px;
    }
  }
}
</style>