<template>
  <div>
    <el-dialog title="新增答题" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="form" label-width="120px" status-icon>
          <el-form-item
            label="选择问卷"
            prop="surveyMechanismId"
            :rules="[
              {
                required: true,
                message: '请选择问卷',
                trigger: 'blur'
              }
            ]"
          >
            <el-select
              style="width: 30%"
              v-model="form.surveyMechanismId"
              placeholder="选择问卷"
              clearable
            >
              <el-option
                v-for="item in surveyList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </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-item
            label="答题时间"
            prop="time"
            :rules="[
              {
                required: true,
                message: '请选择答题时间',
                trigger: 'blur'
              }
            ]"
          >
            <el-col :span="11">
              <el-date-picker
                value-format="YYYY-MM-DD HH:mm:ss"
                v-model="form.time"
                type="datetimerange"
                range-separator="—"
                start-placeholder="答题开始时间"
                end-placeholder="答题结束时间"
              />
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onNext">下一步</el-button>
        </div>
      </template>
    </el-dialog>
    <ComponentDialogSurvey
      v-model:show="visibleAnswerSurvey"
      :id="surveyConfig.surveyMechanismId"
      :resultId="surveyConfig.id"
    ></ComponentDialogSurvey>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { request } from "@/utils/http";
import ComponentDialogSurvey from "./DialogSurvey.vue";

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

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
      resetForm();
    }
  }
);
const formRef = ref<FormInstance>();
const form = ref({
  surveyMechanismId: undefined, // 机构问卷编号
  archivesId: "", // 档案编号
  time: undefined
});
const visibleAnswerSurvey = ref(false);
const surveyList = ref([]);
const surveyConfig = ref({});
const archivesList = ref([]);
/**
 * 获取问卷列表
 */
const getSurveyList = () => {
  request
    .get("/surveyService/mechanism/survey/paginate", {
      params: {
        key: undefined,
        pageSize: 999
      }
    })
    .then(resp => {
      surveyList.value = resp.data.list.map(v => {
        return {
          ...v,
          label: `${v.name}（${v.surveyId}）`
        };
      });
    });
};
/**
 * 获取档案列表
 */
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;
    let [startTime, endTime] = form.value.time;
    request
      .post("/surveyService/mechanism/surveyResult/create", {
        archivesId: form.value.archivesId,
        surveyMechanismId: form.value.surveyMechanismId,
        startTime,
        endTime
      })
      .then(resp => {
        dialogVisible.value = false;
        visibleAnswerSurvey.value = true;
        surveyConfig.value = resp.data.detail;
      });
  });
};

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

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