<template>
  <div>
    <el-dialog title="处理需求" v-model="dialogVisible">
      <div>
        <el-descriptions :column="3">
          <el-descriptions-item label="提交人档案号：">{{
            state.info?.archiveSn
          }}</el-descriptions-item>
          <el-descriptions-item label="提交人姓名：">{{
            state.info?.archive?.name || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="提交人性别：">
            <el-tag
              type=""
              v-if="state.info?.archive?.gender == 1"
              effect="plain"
              >男</el-tag
            >
            <el-tag type="danger" v-else effect="plain">女</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="提交人年龄：">{{
            formatAge(state.info.archive?.birthday)
          }}</el-descriptions-item>
          <el-descriptions-item label="提交人手机号：">{{
            state.info.mobile || "-"
          }}</el-descriptions-item>
          <el-descriptions-item label="提交人住址：">
            <el-text v-if="state.info?.archive?.community">
              {{
                state.info?.archive?.province +
                state.info?.archive?.city +
                state.info?.archive?.area +
                state.info?.archive?.subDistrict +
                state.info?.archive?.community +
                state.info?.archive?.village +
                state.info?.archive?.building +
                state.info?.archive?.houseNumber
              }}
            </el-text>
            <el-text v-else>-</el-text>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions :column="1">
          <el-descriptions-item label="需求类别：">
            {{ state.info?.category?.name }}
          </el-descriptions-item>
          <el-descriptions-item label="需求内容：">
            {{ state.info.content }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-form ref="form" label-width="110px" label-position="left">
          <el-form-item
            label="服务商："
            :required="[1, 2].includes(state.status)"
          >
            <el-select
              v-model="state.processorId"
              filterable
              clearable
              placeholder="请选择服务商"
            >
              <el-option
                v-for="item in state.processors"
                :key="item.sn"
                :label="item.nickname"
                :value="item.sn"
              >
                <el-text>{{ item.nickname }}</el-text>
                <el-tag class="ml-2">{{ item.sn }}</el-tag>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="需求状态：" required>
            <el-select v-model="state.status" placeholder="需求状态">
              <el-option
                v-for="item in state.statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="需求处理备注：">
            <el-input
              v-model="state.comment"
              placeholder="请输入需求内容"
              show-word-limit
              type="textarea"
              rows="5"
            />
          </el-form-item>
          <el-form-item label="">
            <UploadOnlyImage
              v-model:url="state.images"
              :key="coverKey"
              type="image"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="state.loading"
            >确 定</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";
import UploadOnlyImage from "@/components/UploadOnlyImage.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["update:show", "success"]);
const state = reactive({
  status: 0,
  comment: "",
  info: {},
  processors: [],
  processorId: [],
  loading: false,
  images: [],
  statusList: [
    {
      value: 0,
      label: "待处理"
    },
    {
      value: 1,
      label: "处理中"
    },
    {
      value: 2,
      label: "已处理"
    }
  ]
});
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      state.info = props.rowData;
      state.status = props.rowData.status;
      state.comment = props.rowData.comment;
      state.processorId = props.rowData.processorId;
      state.images = props.rowData.images?.map((v, i) => {
        return {
          url: v,
          name: "images" + i,
          status: "success",
          uid: new Date().getTime()
        };
      });
      getProcessors();
    } else {
      onReset();
    }
  }
);

const getProcessors = () => {
  request.get("/articleService/demand/processors").then(resp => {
    state.processors = resp.data;
  });
};

const handleSubmit = () => {
  if ([1, 2].includes(state.status) && !state.processorId) {
    return ElMessage.error("请选择服务商");
  }
  state.loading = true;
  request
    .post("articleService/demand/update", {
      id: state?.info.id,
      status: 2,
      comment: state.comment,
      processorId: state.processorId,
      images: state.images.map(v => v.url)
    })
    .then(resp => {
      dialogVisible.value = false;
      ElMessage.success(resp.message);
      emits("success");
    })
    .finally(() => {
      state.loading = false;
    });
};
const onReset = () => {
  state.info = {};
  console.log("执行成功");
};
</script>
