<template>
  <div>
    <Card :bordered="false" :loading="!data.isOver">
      <template #extra v-if="data.isOver">
        <a-button type="primary" v-if="isShowHandleEdit(data.detail.status)" @click="handleEdit">
          <template #icon> <Icon icon="clarity:note-edit-line" /></template>
          编辑
        </a-button>
        <a-popconfirm
          class="ml-4"
          title="确定通过吗"
          ok-text="是"
          cancel-text="否"
          @confirm="handleVerify(StatusValEnum.PASSED)"
        >
          <a-button type="primary" v-if="isShowHandlePassed(data.detail.status)">通过</a-button>
        </a-popconfirm>

        <a-popconfirm
          class="ml-4"
          title="确定拒绝吗"
          ok-text="是"
          cancel-text="否"
          @confirm="handleVerify(StatusValEnum.PASSED)"
        >
          <a-button type="danger" v-if="isShowHandleReject(data.detail.status)">拒绝</a-button>
        </a-popconfirm>

        <a-popconfirm
          class="ml-4"
          title="确定禁用吗"
          ok-text="是"
          cancel-text="否"
          @confirm="handleVerify(StatusValEnum.FORBIDDEN)"
        >
          <a-button type="danger" v-if="isShowHandleForbidden(data.detail.status)">禁用</a-button>
        </a-popconfirm>

        <a-popconfirm class="ml-4" title="确定删除吗" ok-text="是" cancel-text="否" @confirm="handleDelete">
          <a-button type="danger" v-if="isShowHandleDelete()">删除</a-button>
        </a-popconfirm>
      </template>
      <Descriptions bordered :column="3">
        <Descriptions.Item
          v-for="p in displayProps"
          :key="p.title"
          :label="p.title"
          :span="['avatar'].includes(p.name) ? 3 : 1"
        >
          <span v-if="p.key === 'avatar'">
            <img :src="p.value" style="width: 120px; height: 120px" />
          </span>
          <template v-else>
            {{ p.value }}
          </template>
        </Descriptions.Item>
      </Descriptions>
    </Card>
    <UserDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup name="UserDetail">
  import { onMounted, computed, ref, reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { ComputedRef } from '@vue/reactivity';
  import { Descriptions, Card } from 'ant-design-vue';
  import { descriptionColumns } from './schema';
  import * as UserApi from '/@/api/system/userApi';
  import { Icon } from '/@/components/Icon';
  import {
    isShowHandleEdit,
    isShowHandlePassed,
    isShowHandleForbidden,
    isShowHandleReject,
    isShowHandleDelete,
    getVerifyParams,
  } from './schema';
  import { StatusValEnum } from './enum';
  import UserDrawer from './drawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  import { User } from '/@/api/model/user';
  const [registerDrawer, { openDrawer }] = useDrawer();
  const router = useRouter();
  const route = useRoute();
  const id = ref(route.params?.id);
  let data = reactive({
    detail: {},
    isOver: false,
  });
  const getDetail = () => {
    UserApi.getById(id.value).then((res: User) => {
      data.isOver = true;
      data.detail = res;
    });
  };

  onMounted(() => {
    getDetail();
  });
  const setLoading = (flag: boolean) => {
    data.isOver = !flag;
  };
  const reload = () => {
    data.isOver = false;
    data.detail = {};
    getDetail();
  };

  const handleSuccess = () => {
    reload();
  };

  const handleVerify = (status: string) => {
    setLoading(true);
    UserApi.batchVerify(getVerifyParams(data.detail, status))
      .then((_) => {
        reload();
      })
      .catch(() => {
        setLoading(false);
      });
  };

  const handleEdit = () => {
    openDrawer(true, {
      record: data.detail,
      isUpdate: true,
    });
  };

  const handleDelete = () => {
    setLoading(true);
    UserApi.remove(data.detail.id)
      .then((_) => {
        router.back();
      })
      .catch(() => {
        setLoading(false);
      });
  };

  const displayProps: ComputedRef<Array<any>> = computed(() => {
    if (!data.isOver) return {};
    const display: any = descriptionColumns.map(({ title, dataIndex = '', customRender }) => ({
      key: dataIndex,
      title,
      value: customRender
        ? customRender({ text: data.detail[dataIndex], record: data.detail })
        : data.detail[dataIndex],
    }));
    return display;
  });
</script>

<style scoped></style>
