<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div class="mb-[10px]">
        <el-card shadow="hover" class="pt-[40px] position-relative">
          <span @click="goToList" class="back-to-list">
            <el-icon><ArrowLeftBold /></el-icon>
            <span>返回列表</span>
          </span>
          <div class="detail-main">
            <div class="model-title">请假信息</div>
            <div class="item-gird p-[16px]">
              <div class="item">
                <div class="item-label">请假开始/结束时间：</div>
                <div>{{ state.startDate }} ~ {{ state.endDate }}</div>
              </div>
              <div class="item">
                <div class="item-label">请假理由：</div>
                <div>{{ state.leaveReason }}</div>
              </div>
              <div class="item" v-if="type == 'superadmin'">
                <div class="item-label">申请人：</div>
                <div>{{ state.createBy }}</div>
              </div>
              <div class="item">
                <div class="item-label">请假类型：</div>
                <!-- 模板部分，直接使用映射对象 -->
                <div>{{ leaveTypeMap[state.leaveType] || '-' }}</div>
              </div>
              <div class="item">
                <div class="item-label">请假时间：</div>
                <div>{{ state.createTime }}</div>
              </div>
              <div class="item" v-if="type == 'superadmin'">
                <div class="item-label">审批结果：</div>
                <div>{{ state.status }}</div>
              </div>
            </div>
            <div v-if="!type && state.leaveType == '长期请假'">
              <div class="model-title">审批信息</div>
              <div class="approval-main">
                <div class="item">
                  <div class="item-label">审批人：</div>
                  <div>{{ state.approvalUser || '-' }}</div>
                </div>
                <div class="item">
                  <div class="item-label">审批结果：</div>
                  <div>{{ state.status || '-' }}</div>
                </div>
                <div class="item">
                  <div class="item-label"></div>
                  <div class="approval-desc">{{ state.approvalMsg || '无' }}</div>
                </div>
              </div>
            </div>
            <div v-if="type == 'approval'">
              <div class="model-title">审批信息</div>
              <el-form :model="approval.form" ref="form" :rules="approval.rules" label-width="80px">
                <el-form-item label="审批结果" prop="status">
                  <el-radio-group v-model="approval.form.status" @change="changeApprovalResult">
                    <el-radio label="1"> 通过 </el-radio>
                    <el-radio label="2"> 驳回 </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="审批详情" prop="approvalMsg">
                  <el-input type="textarea" :disabled="!approval.form.status" :rows="5" resize="none" v-model="approval.form.approvalMsg"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div v-if="type == 'approvalShow'">
              <div class="model-title">审批信息</div>
              <div class="approval-main">
                <div class="item">
                  <div class="item-label">审批人：</div>
                  <div>{{ state.approvalUser || '-' }}</div>
                </div>
                <div class="item">
                  <div class="item-label">审批结果：</div>
                  <div>{{ state.status || '-' }}</div>
                </div>
                <div class="item">
                  <div class="item-label"></div>
                  <div class="approval-desc">{{ state.approvalMsg || '无' }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-[20px] text-right">
            <el-button @click="goToList">返回</el-button>
            <el-button type="primary" v-if="type == 'approval'" @click="Confirm">确定</el-button>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { getLeaveInfo, Approval } from '@/api/leave/detail';
import { stateTypes, approvalTypes } from '@/api/leave/detail/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { qjlx } = toRefs<any>(proxy?.useDict('qjlx'));
const leaveTypeMap = computed(() => {
  const map: Record<string, string> = {};
  qjlx.value.forEach(item => {
    map[item.value] = item.label; // 只保留 label
  });
  return map;
});
const id = computed(() => proxy?.$route.query.id || '');
const type:any = computed(() => proxy?.$route.query.type || '');

const state = ref<stateTypes>({
  startDate: '',
  endDate: '',
  leaveReason: '',
  leaveType: '',
  createTime: '',
  approvalUser: '',
  status: '',
  approvalMsg: '',
  createBy: ''
});

const approval = ref<approvalTypes>({
  form: {
    gid: '',
    status: '',
    approvalMsg: ''
  },
  rules: {
    status: [{ required: true, message: '请选择审批结果', trigger: 'blur' }],
    approvalMsg: [{ required: true, message: '请输入审批详情', trigger: 'blur' }]
  }
});
const changeApprovalResult = () => {
  if (approval.value.form.status == '1') {
    approval.value.form.approvalMsg = '同意';
  } else {
    approval.value.form.approvalMsg = '';
  }
};
const goToList = () => {
  proxy?.$tab.closePage(proxy?.$route).then(() => {
    let typeJson = {
      '': '/leave/log',
      superadmin: '/leave/log',
      approval: '/leave/approval',
      approvalShow: '/leave/approval'
    };
    proxy?.$router.replace(typeJson?.[type.value]);
  });
  if (type.value == 'approvalShow') {
    proxy?.$router.push('/leave/approval');
  } else {
    proxy?.$router.back();
  }
};
const form = ref<ElFormInstance>(null);
const Confirm = () => {
  form.value.validate(async (valid) => {
    if (!valid) return;
    let res = await Approval({ ...approval.value.form, gid: id.value as string });
    if (res.code != 200) {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      });
      return;
    }
    ElNotification({
      title: '提示',
      message: '操作成功',
      type: 'success'
    });
    proxy.$router.push({
      path: '/leave/detail',
      query: {
        id: id.value,
        type: 'approvalShow'
      }
    });
    await getInfo();
  });
};

const getInfo = async () => {
  let res = await getLeaveInfo(id.value as string);
  if (res.code !== 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  state.value = res.data;
};
onActivated(() => {
  approval.value.form.gid = id.value as string;
  getInfo();
});
onMounted(() => {
  getInfo();
});
</script>
<style lang="scss" scoped>
.item-gird {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 18px;
}
.item {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 32px;
  color: var(--el-text-color-primary);
  .item-label {
    display: block;
    width: 150px;
    text-align: right;
    padding-right: 10px;
    font-weight: 700;
    color: var(--el-text-color-regular);
  }
}
.model-title {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: bold;
}
.back-to-list {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  line-height: 20px;
  cursor: pointer;
  &:hover * {
    color: var(--el-color-primary);
  }
}
.approval-main {
  background-color: #f2f2f2;
  padding: 16px;
  flex-direction: column;
  gap: 18px;
  .approval-desc {
    background-color: #fff;
    padding: 16px;
    border-radius: 7px;
    flex-grow: 1;
  }
}
</style>
