<!-- 筛选系统用户弹窗 -->
<script name="FilterQuestionnaire" lang="ts" setup>
import { type DateModelType } from 'element-plus'
import type { ICustomerQuestionnaireInfo, ICustomerRateColumn, IListQuery } from '@/views/resource/customer/questionnaire/customer-questionnaire'
import { getQuestionnaireList } from '@/api/resource/questionnaire'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const emit = defineEmits(['recordSelected'])

const showFilterDialog = ref(false)
const searchQuery = ref<IListQuery>({
  customerName: '', // 填写单位
  writerName: '',
  writeTimeStart: '',
  writeTimeEnd: '',
  sendTimeStart: '',
  sendTimeEnd: '',
  offset: 1,
  limit: 10,
})
const dateRangeWrite = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据 - 填写时间
const total = ref<number>(0) // 数据总条数
const columns = ref <Array<TableColumn>>([
  { text: '调查表编号', value: 'questionnaireNo', align: 'center', width: '175' },
  { text: '填写单位', value: 'customerName', align: 'center' },
  { text: '填写人', value: 'writerName', align: 'center' },
  { text: '填写时间', value: 'writeTime', align: 'center', width: '180' },
  { text: '填写状态', value: 'writeStatus', align: 'center', width: '120' },
]) // 表头

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 refQuestionnaireTable = ref()

const questionnaireList = ref<Array<ICustomerQuestionnaireInfo>>([]) // 表格数据
const rowSelected = ref<Array<ICustomerQuestionnaireInfo>>([])

// 根据字典值返回满意度分值
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 calTotalSatis = (satisfies: ICustomerQuestionnaireInfo) => {
  let retTotal = 0
  rateList.value.forEach((item: ICustomerRateColumn) => {
    retTotal += satisfies[item.attributeName] === '' ? 0 : getSatisfactionByDict(Number(satisfies[item.attributeName]))
  })
  return retTotal
}

const validateStatis = (satisfies: ICustomerQuestionnaireInfo) => {
  let satisfactionStr = ''
  rateList.value.forEach((item: ICustomerRateColumn) => {
    satisfactionStr += satisfies[item.attributeName]
  })

  return satisfactionStr
}

// 查询委托方名录列表
const getList = () => {
  getQuestionnaireList(searchQuery.value).then((response) => {
    if (response.code === 200) {
      questionnaireList.value = response.data.rows

      total.value = parseInt(response.data.total)
    }
  })
}

// 逻辑
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.value.limit = val.size
  }
  if (val && val.page) {
    searchQuery.value.offset = val.page
  }
  getList()
}

// 选中用户
const questionnaireSelected = (e: any) => {
  rowSelected.value = e
}

const submitQuestionnaireSelected = () => {
  let rows = rowSelected.value.filter((row) => {
    if (validateStatis(row).length > 0 || row.writeStatus !== '已提交' || row.writeTime !== '') { return row }
  })

  rows = rows.map((row) => {
    return {
      ...row,
      score: calTotalSatis(row).toFixed(0),
      proposeTime: row.writeTime,
    }
  })

  emit('recordSelected', rows)
}

const showOrHideFilterDialog = (show: boolean) => {
  if (show === false) {
    searchQuery.value.customerName = ''
    searchQuery.value.offset = 1
    searchQuery.value.limit = 10
  }
  else {
    getList()
  }

  showFilterDialog.value = show
}

defineExpose({
  showOrHideFilterDialog,
})
</script>

<template>
  <el-dialog v-model="showFilterDialog" title="选择满意度调查表" :append-to-body="true" :close-on-click-modal="false" top="10vh" width="75%">
    <search-area :need-clear="false" @search="getList">
      <search-item>
        <el-input v-model="searchQuery.customerName" placeholder="填写单位" clearable />
      </search-item>
      <search-item>
        <el-input v-model="searchQuery.writerName" placeholder="填写人" clearable />
      </search-item>
      <search-item>
        <el-date-picker v-model="dateRangeWrite" type="daterange" start-placeholder="填写时间（开始）" end-placeholder="填写时间（结束）" />
      </search-item>
    </search-area>

    <!-- 表格数据展示 -->
    <table-container :title-show="false">
      <!-- 表格区域 -->
      <normal-table
        ref="refQuestionnaireTable"
        :data="questionnaireList" :total="total" :columns="columns"
        :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
        :is-showmulti-select="true"
        @change="changePage"
        @multi-select="questionnaireSelected"
      >
        <template #preColumns>
          <el-table-column label="序号" width="55" align="center">
            <template #default="scope">
              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
            </template>
          </el-table-column>
        </template>
        <template #columns />
      </normal-table>
    </table-container>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showOrHideFilterDialog(false)">取消</el-button>
        <el-button type="primary" @click="submitQuestionnaireSelected">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
