<template>
  <div>
    <el-dialog title="需求管理" v-model="dialogVisible">
      <div>
        <el-form ref="formRef" :model="state.form">
          <el-form-item
            label="选择档案人:"
            :rules="[{ required: true, message: '请选择档案' }]"
            prop="archiveSn"
          >
            <el-select
              v-model="state.form.archiveSn"
              placeholder="选择档案人"
              filterable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              :loading="state.loading"
              @change="handleChangeArchive"
              @clear="getArchivesList"
              clearable
            >
              <el-option
                v-for="item in state.archivesList"
                :label="item.label"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <template v-if="state.currentArchive?.id">

          </template> -->
          <el-form-item label="提交人姓名:">
            <el-text>{{ state.currentArchive?.name || "暂无数据" }}</el-text>
          </el-form-item>
          <el-form-item label="提交人性别:">
            <el-text v-if="!state.currentArchive?.gender">暂无数据</el-text>
            <el-text v-else>{{
              state.currentArchive?.gender == 1 ? "男" : "女"
            }}</el-text>
          </el-form-item>
          <el-form-item label="提交人年龄:">
            <el-text v-if="!state.currentArchive?.gender">暂无数据</el-text>
            <el-text v-else>{{
              formatAgeMethod(state.currentArchive?.birthday)
            }}</el-text>
          </el-form-item>
          <el-form-item label="提交人手机号:">
            <el-input
              v-model="state.form.mobile"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="提交人住址:">
            <el-text v-if="state.currentArchive?.community">
              {{
                state.currentArchive?.provinceText +
                state.currentArchive?.cityText +
                state.currentArchive?.areaText +
                state.currentArchive?.subDistrict +
                state.currentArchive?.community +
                state.currentArchive?.village +
                state.currentArchive?.building +
                state.currentArchive?.houseNumber
              }}
            </el-text>
            <el-text v-else></el-text>
          </el-form-item>
          <el-divider></el-divider>
          <el-form-item
            label="需求类别:"
            :rules="[{ required: true, message: '请选择需求类别' }]"
            prop="categoryId"
          >
            <el-select
              v-model="state.form.categoryId"
              placeholder="请选择需求类别"
            >
              <el-option
                v-for="item in state.categoryList"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="需求内容:"
            :rules="[{ required: true, message: '请输入需求内容' }]"
            prop="content"
          >
            <el-input
              v-model="state.form.content"
              placeholder="请输入需求内容"
              show-word-limit
              type="textarea"
              rows="5"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request, formatAge } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(["update:show", "success"]);
const formRef = ref();
const formatAgeMethod = formatAge;
const state = reactive({
  form: {
    archiveSn: "",
    categoryId: "", // 需求类别,
    mobile: "", // 手机
    content: "" // 需求内容
  },
  loading: false,
  archivesList: [],
  currentArchive: {},
  categoryList: []
});
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      initData();
    } else {
      onReset();
    }
  }
);
const getArchivesList = (query: string) => {
  state.loading = true;
  request
    .get("archivesService/mechanism/archives/paginate", {
      params: {
        page: 1,
        pageSize: 15,
        keyword: query
      }
    })
    .then(resp => {
      let list = resp.data.list;
      state.archivesList = list.map(v => {
        return {
          ...v,
          label: `${v.name}（${v.id}）`
        };
      });
    })
    .finally(() => {
      state.loading = false;
    });
};
const remoteMethod = (query: string) => {
  if (query) {
    getArchivesList(query);
  }
};
const handleChangeArchive = params => {
  state.currentArchive = state.archivesList.find(v => v.id == params);
};
const getCategory = () => {
  request
    .get("articleService/demand/category/paginate", {
      params: {
        pageSize: 1000
      }
    })
    .then(resp => {
      let list = resp.data.list;
      // 政策类别不包含
      state.categoryList = list.filter(v => {
        return v.id != 1;
      });
    });
};

const onReset = () => {
  formRef.value.resetFields();
  state.currentArchive = {};
};
const handleSubmit = () => {
  formRef.value.validate((valid, fields) => {
    if (!valid) return;
    request.post("articleService/demand", state.form).then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
  });
};
const initData = () => {
  getCategory();
  getArchivesList();
};
</script>
