<template>
  <view class="con">
    <van-toast id="van-toast" />
    <view class="leave-item">
      <view class="top flex flex_start_center">
        <van-image
          round
          fit="cover"
          width="55rpx"
          height="55rpx"
          :src="userInfo.UserIcon ? userInfo.UserIcon : userInfo.GroupLogo"
          style="margin-right: 20rpx"
          class="flex flex_start_center"
        />
        <view class="grow one_line name"
          >{{ data.detail.CreateByName }}的请假</view
        >
        <view
          class="status"
          :class="{
            status1: data.detail.VerifyStatus === 4,
            status2: data.detail.VerifyStatus === 6,
            status3: data.detail.VerifyStatus === 0,
          }"
          >{{ data.detail.AuditStatusName }}</view
        >
      </view>

      <view class="flex label-next margin-t-b-15"
        ><view class="label">请假类型</view>
        <text v-if="data.detail.DataObj.LeaveType === 1">事假</text>
        <text v-if="data.detail.DataObj.LeaveType === 2">病假</text>
      </view>
      <view class="flex label-next margin-t-b-15"
        ><view class="label">开始时间</view
        >{{ data.detail.DataObj.LeaveInfoList[0].ClassDate }}
        {{ data.detail.DataObj.LeaveInfoList[0].StartTime }}</view
      >
      <view class="flex label-next margin-t-b-15"
        ><view class="label">结束时间</view
        >{{
          data.detail.DataObj.LeaveInfoList[
            data.detail.DataObj.LeaveInfoList.length - 1
          ].ClassDate
        }}
        {{
          data.detail.DataObj.LeaveInfoList[
            data.detail.DataObj.LeaveInfoList.length - 1
          ].EndTime
        }}</view
      >
      <view class="flex label-next margin-t-b-15"
        ><view class="label">课时</view>{{ data.detail.hours }}</view
      >
      <view class="flex label-next margin-t-b-15"
        ><view class="label">请假事由</view
        >{{ data.detail.DataObj.Remarks || "无" }}</view
      >
    </view>
    <view class="Approval-box">
      <view class="flex flex_start_center">
        <van-image
          round
          width="55rpx"
          height="55rpx"
          :src="userInfo.UserIcon ? userInfo.UserIcon : userInfo.GroupLogo"
          style="margin-right: 20rpx"
          class="flex flex_start_center"
        />
        <view class="grow one_line name"
          >{{ data.detail.CreateByName }} 发起申请</view
        >
        <view class="date">{{ data.detail.CreateTime }}</view>
      </view>
      <view
        v-for="(item, index) in ApprovalList"
        :key="index"
        class="Approval-item"
        v-if="index > 0"
        ><view
          v-for="(_item, _index) in item.SubList"
          :key="_index"
          class="Approval-item"
        >
          <view class="height-line"></view>
          <view class="flex flex_between_center">
            <view class="flex flex_start_center">
              <!-- <van-image
                round
                width="55rpx"
                height="55rpx"
                fit="cover"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
                style="margin-right: 20rpx"
                class="flex flex_start_center"
              /> -->
              <view class="Approval-status flex flex_center_center">{{
                _item.AuditStatusName
              }}</view>
              <view style="margin-right: 20rpx" class="name">
                {{ _item.AduitName }}
              </view>
              <view
                class="status"
                :class="{
                  status1: _item.AuditStatus === 3,
                  status2: _item.AuditStatus === 1,
                }"
              >
                {{ _item.AuditStatusName }}
              </view>
            </view>
            <view class="date">{{ _item.CreateTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="Approval-box" style="display: none">
      <view class="flex flex_start_center">
        <view class="title">抄送人</view>
        <text class="copy-tip">（审批通过后，通知抄送人）</text>
      </view>
      <view v-for="(item, index) in copy" :key="index" class="copy-item">
        <view class="flex flex_between_center">
          <view class="flex flex_start_center">
            <van-image
              round
              width="55rpx"
              height="55rpx"
              src="https://img.yzcdn.cn/vant/cat.jpeg"
              style="margin-right: 20rpx"
              class="flex flex_start_center"
            />
            <view style="margin-right: 20rpx" class="name flex">
              <view style="margin-right: 20rpx">抄送人</view>
              {{ item.name }}
            </view>
          </view>
          <view class="date">{{ item.time }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import { getEduReceiptInfo } from "../../api/index";
export default {
  setup() {
    let userInfo = uni.getStorageSync("userInfo");
    let data = reactive({
      data: {
        detail: {},
      },
      userInfo,
      ApprovalList: [
        {
          ApprovalMan: "李琴",
          img: "",
          time: "2021.08.20  09:50",
          status: "审核通过",
        },
        {
          ApprovalMan: "李琴",
          img: "",
          time: "2021.08.20  09:50",
          status: "审核通过",
        },
      ],
      copy: [
        {
          name: "校长",
          headImg: "",
          time: "2021.08.20  09:50",
        },
        {
          name: "校长",
          headImg: "",
          time: "2021.08.20  09:50",
        },
      ],
    });
    let methods = {
      async getDetail(id) {
        let res = await getEduReceiptInfo({ Id: id });
        if (res) {
          data.ApprovalList = res.Data;
        }
      },
    };
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad(options) {
    let { proxy } = getCurrentInstance();
    let data = JSON.parse(decodeURIComponent(options.data));
    let n = 0;
    data.DataObj.LeaveInfoList.map((item) => {
      n += item.TimeHour;
    });
    uni.setNavigationBarTitle({
      title: "请假详情",
    });
    proxy.data.detail = data;
    proxy.data.detail.hours = n;
    proxy.getDetail(data.Id);
  },
};
</script>


<style scoped>
.con {
  box-sizing: border-box;
  font-family: PingFang SC;
  padding: 30rpx;
}
.leave-item {
  padding: 20rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
}
.top {
  border-bottom: 1rpx solid #e2e2e2;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
}
.name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.status {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #00df9f;
}
.label {
  width: 100rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-right: 30rpx;
  text-align-last: justify;
}
.label-next {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
.margin-t-b-15 {
  margin-top: 15rpx;
  margin-bottom: 15rpx;
}
.Approval-box {
  padding: 20rpx 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
}
.date {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.Approval-item {
  height: 115rpx;
}
.height-line {
  height: 60rpx;
  width: 2rpx;
  margin-left: 26rpx;
  background-color: #e2e2e2;
}
.title {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
}
.copy-tip {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
}
.copy-item {
  margin-top: 30rpx;
}
.Approval-status {
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  font-size: 20rpx;
  margin-right: 20rpx;
  background-color: #00acf9;
  color: #fff;
}
.status1 {
  color: #ff3816;
}
.status2 {
  color: #111111;
}
.status3 {
  color: #4fc08d;
}
</style>
