<template>
  <el-dialog  title="审批详情" v-model="open" width="1100px" append-to-body @close="handleClose"
    class="el-dialog-apply-detail">
    <div class="dialog-body solid-top solid-bottom" v-loading="loading">
      <Index :apply="apply">
        <el-descriptions direction="vertical" :column="1">
          <el-descriptions-item label="申请人">Uice</el-descriptions-item>
          <el-descriptions-item label="审批类型">请假</el-descriptions-item>
          <el-descriptions-item label="开始时间">
            <template #default="scope">
              <span>{{ parseTime(new Date()) }}</span>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="结束时间">
            <template #default="scope">
              <span>{{ parseTime(new Date()) }}</span>
            </template>
          </el-descriptions-item>
        </el-descriptions>
        <slot></slot>
      </Index>
    </div>
    <div class="flex justify-center"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button :disabled="loading" plain @click="handleEidt">修 改</el-button>
        <el-button :disabled="loading" plain @click="handelRevoke">撤 回</el-button>
        <el-button :disabled="loading" type="danger" @click="handelReject">驳 回</el-button>
        <el-button :disabled="loading" type="primary" @click="handelAgree">同 意</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import Index from "./index";
const { proxy } = getCurrentInstance();
const open = ref(false);
const loading = ref(true);

const apply = ref({ a: "" });

const prop = defineProps({
  applyId: {
    type: [Number, String],
    default: null,
  },
});

const { applyId } = toRefs(prop);

// 显示弹框
function show() {
  open.value = true;
  getData(applyId.value);
}

function getData(applyId) {
 // console.log(applyId);
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    apply.value = {
      a: "a",
      b: proxy.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}"),
    };
  }, 1000);
}

// 撤回
function handelRevoke() {
  proxy.$modal
    .confirm("是否撤回？")
    .then(() => {
      proxy.$modal.msg("已撤回");
    })
    .catch(() => { });
}

// 驳回
function handelReject() {
  proxy.$modal
    .confirm("是否驳回？")
    .then(() => {
      proxy.$modal.msgError("已驳回");
    })
    .catch(() => { });
}

// 同意
function handelAgree() {
  proxy.$modal
    .confirm("是否同意？")
    .then(() => {
      proxy.$modal.msgSuccess("已同意");
    })
    .catch(() => { });
}

// 关闭按钮
function handleClose() {
  open.value = false;
}

defineExpose({
  show,
handleClose,
});
</script>

<style lang="scss">
.el-dialog-apply-detail {
  .el-dialog__body {
    padding: 0;

    .dialog-body {
      height: 70vh;

      .dialog-body-header {
        height: 90px;
      }

      .dialog-body-content {
        height: calc(100% - 90px);
      }
    }
  }
}
</style>
