<!-- 委托方满意度调查表-编辑 -->
<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 questionnaireTable from './questionnaire.vue'
import useUserStore from '@/store/modules/user'
const $route = useRoute()
const $router = useRouter()
const userStore = useUserStore()
const ruleFormRef = ref<FormInstance>() // from组件
const tableRef = ref()
// 显示标题
const textMap: { [key: string]: string } = {
  update: '编辑',
  create: '新增',
  detail: '详情',
}
// 对话框类型：create,update
const dialogStatus = ref('create')
const ruleForm = ref({
  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>({
  // fileName: [{ required: true, message: '文件名称必填', trigger: ['blur', 'change'] }],
}) // 表单验证规则
// 弹窗初始化
const initDialog = () => {
  dialogStatus.value = $route.params.type as string
  ruleFormRef.value?.resetFields()
  if ($route.params.type !== 'create') {
    const data = JSON.parse($route.query.row as string)
    ruleForm.value = data
  }
  if ($route.params.type === 'update') {
    ruleForm.value.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss') // 创建时间
    // ruleForm.value.createUserId = userStore.id
    // ruleForm.value.createUserName = userStore.name
  }
}
onMounted(() => {
  initDialog()
})

// 关闭弹窗
const close = () => {
  $router.back()
}
// 编辑
const update = () => {
  updateDocument(ruleForm.value).then((res) => {
    ElMessage.success('修改成功')
    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) => {
        update()
      })
    }
  })
}
// 取消
const resetForm = (formEl: FormInstance | undefined) => {
  formEl?.resetFields()
  close()
}
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`委托方满意度调查表-${textMap[dialogStatus]}`">
      <template #btns>
        <el-button v-if="!$route.path.includes('detail')" type="primary" @click="saveForm(ruleFormRef)">
          保存
        </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')">
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="表单编号" prop="questionnaireNo">
              <el-input v-model.trim="ruleForm.questionnaireNo" placeholder="表单编号" 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 />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="填写时间" prop="writeTime">
              <el-input v-model.trim="ruleForm.writeTime" placeholder="填写时间" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-block-com>
    <detail-block-com>
      <questionnaire-table ref="tableRef" :data="ruleForm" :status="dialogStatus" />
    </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>