<template>
  <div>
    <el-dialog title="审核" v-model="dialogVisible">
      <div>
        <el-descriptions border title="" :column="1">
          <el-descriptions-item label="审核状态">
            <span :class="statusList[props.rowData.status].class">{{
              statusList[props.rowData.status].k
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item
            v-for="(item, index) in props.rowData.applyInfos"
            :key="index"
            :label="item.name + ':'"
            width="10px"
          >
            <template v-if="item.type === 0">
              <el-text>{{ item.value }}</el-text>
            </template>
            <template v-if="item.type === 1">
              <el-image
                v-for="(img, index) in item.value"
                :key="img"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="img"
                :zoom-rate="1.2"
                :max-scale="7"
                :initial-index="index"
                :min-scale="0.2"
                :preview-src-list="item.value"
              />
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template #footer>
        <div class="text-left">
          <el-input
            v-model="state.comment"
            style="max-width: 90%"
            placeholder="如审核不通过，请输入备注信息方便服务商查看与整改"
            class="input-with-select"
            clearable
          >
            <template #prepend>
              <el-select placeholder="请选择审核状态" v-model="state.status">
                <el-option
                  :label="item.k"
                  :value="item.v"
                  v-for="item in statusList"
                  :key="item.v"
                />
              </el-select>
            </template>
          </el-input>
          <el-button type="primary" plain class="ml-2" @click="handleSubmit"
            >确 认</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object
  }
});

const statusList = [
  {
    k: "待审核",
    v: 0,
    class: "text-red-500"
  },
  {
    k: "审核通过",
    v: 1,
    class: "text-green-400"
  },
  {
    k: "审核不通过",
    v: 2,
    class: "text-red-400"
  }
];
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) {
      state.comment = "";
      state.status = undefined;
    } else {
    }
  }
);
const state = reactive({
  comment: "",
  status: undefined
});
const handleSubmit = () => {
  if (!state.status) {
    return ElMessage.error("请选择审核状态");
  }
  request
    .post("/articleService/serviceProvider/apply", {
      status: state.status,
      comment: state.comment,
      id: props.rowData.id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      dialogVisible.value = false;
      emits("success");
    });
};
</script>
