<template>
  <div>
    <el-dialog title="修改关联档案" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-width="120px" status-icon>
          <el-form-item label="问卷结果编号：">
            <el-text tag="b">{{ props?.rowData.id }}</el-text>
          </el-form-item>
          <el-form-item label="问卷结果名称：">
            <el-text tag="b">{{ props?.rowData?.survey?.name || "-" }}</el-text>
          </el-form-item>
          <el-form-item
            label="关联的档案："
            prop="archivesId"
            :rules="[
              {
                required: true,
                message: '请输入档案号或者姓名',
                trigger: 'blur'
              }
            ]"
          >
            <el-select
              v-model="form.archivesId"
              style="width: 30%"
              placeholder="输入档案编号或姓名进行查找"
            >
              <el-option
                v-for="item in archivesList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onNext">确 认</el-button>
        </div>
      </template>
    </el-dialog>
    <ComponentDialogSurvey
      v-model:show="visibleAnswerSurvey"
    ></ComponentDialogSurvey>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";

import { request } from "@/utils/http";

import ComponentDialogSurvey from "./DialogSurvey.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:show", "success"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
      form.value.archivesId = props.rowData.archivesId;
    } else {
      resetForm();
    }
  }
);
const formRef = ref<FormInstance>();
const form = ref({
  surveyMechanismId: undefined, // 机构问卷编号
  archivesId: "", // 档案编号
  time: undefined
});
const visibleAnswerSurvey = ref(false);
const archivesList = ref([]);
/**
 * 获取档案列表
 */
const getArchivesList = key => {
  request
    .get("/archivesService/mechanism/archives/paginate", {
      params: {
        name: key,
        pageSize: 100
      }
    })
    .then(resp => {
      archivesList.value = resp.data.list.map(v => {
        return {
          ...v,
          label: `${v.name}（${v.id}）`
        };
      });
    });
};

const onNext = async () => {
  await formRef.value.validate((valid, fields) => {
    if (!valid) return;
    request
      .post("/surveyService/mechanism/surveyResult/update/archivesId", {
        archivesId: form.value.archivesId,
        id: props.rowData.id
      })
      .then(resp => {
        dialogVisible.value = false;
        ElMessage.success(resp?.message);
        emits("success");
      });
  });
};

const resetForm = () => {
  formRef.value.resetFields();
};

const initData = () => {
  getArchivesList();
};
</script>
<style lang="scss" scoped></style>
