<!-- 委托方满意度调查表详情 -->
<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 FilterSysUser from '@/views/resource/common/filterSysUser.vue'
import { addQuestionnaire, getQuestionnaireDetail, send } from '@/api/resource/questionnaire'
import type { IDictType } from '@/commonInterface/resource-interface'
import { getDictByCode } from '@/api/system/dict'
import { uniqueArray } from '@/utils/Array'

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

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

const questionnaireFormRef = ref()
const refFilterCustomer = ref()
const sendIds = ref<string[]>([]) // 发送的参数
const questionnaireInfo = ref<ICustomerQuestionnaireInfo>({
  id: '',
  customerId: '',
  customerName: '',
  createTime: '',
  labCode: '',
  labCodeName: '',
  questionnaireNo: '',
  questionnaireName: '委托方满意度调查表',
  senderId: '',
  senderName: '',
  sendTime: '',
  writerId: '', // 填写人id（单选用-新建不让传）
  writerName: '', // 填写人名字(多选时候-新建不让传)
  writeTime: '',
  writeStatus: '',
  itemOne: '',
  itemTwo: '',
  itemThree: '',
  itemFour: '',
  itemFive: '',
  itemSix: '',
  itemSeven: '',
  itemEight: '',
  itemNine: '',
  itemTen: '',

  sendFlag: '', // 是否已发送（1/2）
  sendFlagName: '', // 是否已发送（1/2）
})

const questionnaireFormRules = ref({
  labCode: [{ required: true, message: '实验室不能为空', trigger: ['change', 'blur'] }],
  customerId: [{ required: true, message: '填写单位不能为空', trigger: 'change' }],
  writerName: [{ 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 writerNames = ref<{ customerId: string; writerId: string }[]>([]) // 选择的填写人数组
// 点击选择填写人
const showFilterCustomerDialog = () => {
  refFilterCustomer.value.showOrHideFilterDialog(true, '', false, writerNames.value)
}

// 选定填写人
const recordSelectedHandler = (list: any) => {
  refFilterCustomer.value.showOrHideFilterDialog(false)
  if (list && list.length) {
    writerNames.value = list.map((item: { customerDeptId: string; id: string }) => {
      return {
        customerId: item.customerDeptId,
        writerId: item.id,
      }
    })
    questionnaireInfo.value.writerName = list.map((item: { name: string }) => item.name).join(',')
    // 填写单位
    questionnaireInfo.value.customerName = uniqueArray(list.map((item: { customerName: string }) => item.customerName)).join(',')
    questionnaireInfo.value.customerId = uniqueArray(list.map((item: { customerDeptId: string }) => item.customerDeptId)).join(',')
  }
  else {
    ElMessage.error('填写单位和填写人不能为空，请重新选择')
  }
}

// 清空填写人
const clean = () => {
  questionnaireInfo.value.writerName = ''
  questionnaireInfo.value.customerName = ''
  questionnaireInfo.value.customerId = ''
  writerNames.value = []
}

// ---------------------------------------------------------------------------------------------------

// 保存
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') // 填写时间为当前时间
    // }
    const params = {
      ...questionnaireInfo.value,
      writerId: null, // 填写人id（单选用-多选时候新建不让传）
      writerName: null, // 填写人名字(多选时候-新建不让传)
      sendFlag: '2', // 是否已发送（1/2）
      sendFlagName: '未发送', // 是否已发送（1/2）
      customerName: null,
      customerId: null,
      sendDTOs: writerNames.value, // 填写人信息
    }
    // 提交接口
    addQuestionnaire(params).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'
        sendIds.value = res.data
        questionnaireInfo.value.sendFlag = '2' // 是否已发送（1/2）
        questionnaireInfo.value.sendFlagName = '未发送' // 是否已发送（1/2）
      }
      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 handleSend = () => {
  if (sendIds && sendIds.value.length) {
    send({ ids: sendIds.value }).then((res) => {
      ElMessage.success('发送成功')
      questionnaireInfo.value.sendFlag = '1' // 是否已发送（1/2）
      questionnaireInfo.value.sendFlagName = '已发送' // 是否已发送（1/2）
    })
  }
  else {
    ElMessage.warning('没有发送的单位或个人')
  }
}

const fetchQuestionnaireDetail = () => {
  getQuestionnaireDetail({ id: id.value }).then((res) => {
    questionnaireInfo.value = res.data
    rateList.value.forEach((item: ICustomerRateColumn) => {
      item.value = questionnaireInfo.value[item.attributeName] === '' ? 0 : Number(questionnaireInfo.value[item.attributeName])
    })
  })
}

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')
      questionnaireInfo.value.labCode = userInfo.bizLabCode // 实验室代码
      questionnaireInfo.value.labCodeName = userInfo.labCodeName // 实验室名称
      break

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

      // questionnaireInfo.value = JSON.parse(sessionStorage.getItem('questionnaireInfo')!)
      fetchQuestionnaireDetail()
      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' && questionnaireInfo.sendFlagName === '未发送'" type="primary" @click="handleSend">
            发送
          </el-button>
          <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-col>
          <el-col :span="6">
            <el-form-item label="文件编号">
              <el-input v-model="questionnaireInfo.questionnaireNo" placeholder="系统自动生成" :disabled="true" />
            </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-col>
          <el-col :span="6">
            <el-form-item label="发送时间">
              <el-input v-model="questionnaireInfo.sendTime" placeholder="保存后自动生成" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="填写人" prop="writerName" style="display: flex;">
              <el-button size="small" type="primary" :disabled="type === 'detail'" @click="showFilterCustomerDialog">
                {{ questionnaireInfo.writerName ? '继续添加' : '添加' }}
              </el-button>
              <el-button size="small" type="info" :disabled="type === 'detail'" @click="clean">
                清空
              </el-button>
              <el-input v-model="questionnaireInfo.writerName" placeholder="请添加填写人" style="margin-top: 8px;" :readonly="true" :disabled="true" type="textarea" autosize>
                <!-- <template #append>
                  <el-button size="small" :disabled="type === 'detail'" @click="showFilterCustomerDialog">
                    选择
                  </el-button>
                </template> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="填写单位" prop="customerId">
              <el-input v-model="questionnaireInfo.customerName" type="textarea" :autosize="{ minRows: 3 }" :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.writeTime" :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" :is-multi="true" 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>