<!-- 委托方满意度调查表-编辑 -->
<script lang="ts" setup name="SatisfactionSurveyFormEdit">
import type { FormInstance, FormRules, UploadUserFile } from 'element-plus'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
// import { create } from 'qrcode'
import questionnaireTable from './questionnaire.vue'
import FilterCustomerStaff from './filterCustomerStaff.vue'
import { getDictByCode } from '@/api/system/dict'
import useUserStore from '@/store/modules/user'
import { addSatifaction, updateSatifaction } from '@/api/eqpt/MeasurementBusiness/satisfaction'
import { getUserDept } from '@/api/system/user'
// import useUserStore from '@/store/modules/user'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const tableRef = ref()
const isSave = ref(false)
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const dialogStatusQuestionnaire = ref('create')
const ruleForm = ref<{ [key: string]: string }>({
  createTime: '',
  customerId: '',
  customerName: '',
  id: '',
  itemEight: '',
  itemFive: '',
  itemFour: '',
  itemNine: '',
  itemOne: '',
  itemSeven: '',
  itemSix: '',
  itemTen: '',
  itemThree: '',
  itemTwo: '',
  labCode: '',
  questionnaireName: '',
  questionnaireNo: '',
  sendTime: '',
  senderId: '',
  senderName: '',
  updateTime: '',
  writeStatus: '',
  writeTime: '',
  writerId: '',
  writerName: '',
}) // 表单
const rules = ref<FormRules>({
  writerName: [{ required: true, message: '填写人必填', trigger: ['blur', 'change'] }],
  writeTime: [{ required: true, message: '填写时间必选', trigger: ['blur', 'change'] }],
  labCode: [{ required: true, message: '实验室必选', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  dialogStatusQuestionnaire.value = $route.params.type as string
  // console.log(dialogStatusQuestionnaire.value , 'dialogStatusQuestionnaire.value ')
  ruleFormRef.value?.resetFields()
  if ($route.params.type !== 'create') {
    const data = JSON.parse($route.query.row as string)
    ruleForm.value = data
  }
  else {
    // 获取当前用户单位
    getUserDept().then((res) => {
      ruleForm.value.customerName = res.data.fullName
      ruleForm.value.customerId = res.data.id
      ruleForm.value.senderName = userStore.name
      ruleForm.value.senderId = userStore.id
      ruleForm.value.sendTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
      ruleForm.value.writerName = userStore.name
      ruleForm.value.writerId = userStore.id
    })
  }
}
onMounted(() => {
  initDialog()
})

// 关闭弹窗
const close = () => {
  $router.back()
}
// 编辑
const update = () => {
  const list = tableRef.value.rateList
  list.forEach((item: any) => {
    ruleForm.value[item.attributeName] = item.value.toString()
  })
  ruleForm.value.draft = '1'
  updateSatifaction(ruleForm.value).then((res) => {
    ElMessage.success('保存成功')
    isSave.value = true
    dialogStatusQuestionnaire.value = 'detail'
    // close()
  })
}
// 新建
const create = () => {
  const list = tableRef.value.rateList
  list.forEach((item: any) => {
    ruleForm.value[item.attributeName] = item.value.toString()
  })
  addSatifaction(ruleForm.value).then((res) => {
    ElMessage.success('保存成功')
    isSave.value = true
    dialogStatusQuestionnaire.value = 'detail'
    // close()
  })
}
// 保存
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(
        '确认保存吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then((res) => {
        if ($route.path.includes('create')) {
          // 新建
          create()
        }
        else {
          // 编辑
          update()
        }
      })
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
const labCodeList = ref<{ id: string; value: string; name: string }[]>()
getDictByCode('bizLabCode').then((res) => {
  labCodeList.value = res.data
})
// 选择填写人
const refFilterCustomer = ref()
const selectPerson = () => {
  if (!$route.path.includes('create')) {
    return
  }
  // 显示筛选填写用户和单位的弹窗
  refFilterCustomer.value.showOrHideFilterDialog(true)
}
const submitForm = () => {
  if (!isSave.value) {
    ElMessage.warning('请先保存')
    return
  }
  ElMessageBox.confirm(
    '确认提交吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const list = tableRef.value.rateList
    list.forEach((item: any) => {
      ruleForm.value[item.attributeName] = item.value.toString()
    })
    ruleForm.value.draft = '2'
    updateSatifaction(ruleForm.value).then((res) => {
      ElMessage.success('操作成功')
      // isSave.value = true
      close()
    })
  })
}
const editForm = () => {
  isSave.value = false
  dialogStatusQuestionnaire.value = $route.params.type as string
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <!-- 用户弹窗 -->
    <!-- <filter-customer-staff ref="refFilterCustomer" title="请选择填写单位和填写人" @record-selected="confirmPerson" /> -->
    <detail-page :title="`委托方满意度调查表-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail') && isSave" type="primary" @click="submitForm">
          提交
        </el-button>
        <el-button v-if="!$route.path.includes('detail') && !isSave" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </el-button>
        <el-button v-if="!$route.path.includes('detail') && isSave" type="primary" @click="editForm">
          编辑
        </el-button>
        <el-button type="info" @click="resetForm(ruleFormRef)">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-form
        ref="ruleFormRef" :model="ruleForm" :class="$route.path.includes('detail') ? 'isDetail' : ''"
        :rules="rules" label-position="right" label-width="120px" class="form"
        :disabled="$route.path.includes('detail') || isSave"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="表单编号" prop="questionnaireNo">
              <el-input
                v-model.trim="ruleForm.questionnaireNo"
                :placeholder="$route.path.includes('create') ? '系统自动生成' : '表单编号'" disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="填写单位" prop="customerName">
              <el-input v-model.trim="ruleForm.customerName" placeholder="选择填写人时自动填充" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发送人" props="senderName">
              <el-input v-model.trim="ruleForm.senderName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发送时间">
              <el-input v-model.trim="ruleForm.sendTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="填写人" prop="writerName">
              <el-input v-model.trim="ruleForm.writerName" placeholder="填写人" disabled>
                <!-- <template #append>
                  <el-button type="primary" @click="selectPerson">
                    选择
                  </el-button>
                </template> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="填写时间" prop="writeTime">
              <!-- <el-input v-model.trim="ruleForm.writeTime" placeholder="填写时间" :disabled="$route.path.includes('detail')" /> -->
              <el-date-picker
                v-model="ruleForm.writeTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                placeholder="填写时间" class="normal-date" style="width: 100%;"
                :disabled="$route.path.includes('detail')"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="$route.path.includes('create')" :span="6">
            <el-form-item label="实验室代码" prop="labCode">
              <!-- <el-input v-model.trim="ruleForm.writerName" placeholder="填写人" :disabled="$route.path.includes('detail')" /> -->
              <el-select v-model="ruleForm.labCode" filterable placeholder="实验室代码" style="width: 100%;">
                <el-option v-for="item in labCodeList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <questionnaire-table ref="tableRef" :data="ruleForm" :status="dialogStatusQuestionnaire" />
    </detail-block-com>
  </app-container>
</template>

<style lang="scss" scoped>
// 详情页面隐藏小红点
.isDetail {
  ::v-deep {
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before,
    .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
      content: "";
      display: none;
    }
  }
}
</style>