<template>
  <div class="app-container">
    <div class="dashboard-container">
      <div class="dashboard-item">
        <div class="dashboard-item-title">年假总额</div>
        <div class="dashboard-item-value">
          {{ parseInt(totalAnnualLeave) }} 天
        </div>
      </div>
      <div class="dashboard-item">
        <div class="dashboard-item-title">已使用天数</div>
        <div class="dashboard-item-value">{{ parseInt(totalUsedDay) }} 天</div>
      </div>
      <div class="dashboard-item">
        <div class="dashboard-item-title">剩余天数</div>
        <div class="dashboard-item-value">
          {{ parseInt(totalUnusedDay) }} 天
        </div>
      </div>
    </div>

    <el-table :data="detailRows" style="width: 100%">
      <el-table-column type="index" label="序号" />
      <el-table-column label="员工编号" align="center" prop="userName" width="100" />
      <el-table-column label="员工姓名" align="center" prop="nickName" width="100" />
      <el-table-column label="所属部门" align="center" prop="deptName" width="140"  />
      <el-table-column label="申请日期" prop="createTime" width="160" />
      <el-table-column label="休假天数" prop="usedDay" width="120">
        <template slot-scope="scope">
          {{ parseInt(scope.row.usedDay) }} 天
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'" style="color: #409eff">
            待提交
          </span>
          <span v-else-if="scope.row.status == '1'" style="color: #e6a23c">
            待审批
          </span>
          <span v-else-if="scope.row.status == '2'" style="color: #67c23a">
            审批通过
          </span>
          <span v-else-if="scope.row.status == '3'" style="color: #f56c6c">
            驳回
          </span>
          <span v-else-if="scope.row.status == '4'" style="color: #909399">
            已作废
          </span>
        </template>
      </el-table-column>
      <el-table-column label="休假时间" prop="applyDates">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { balanceList, detailList } from "@/api/oa/leave/annual";

import { mapGetters } from "vuex";

export default {
  name: "AnnualBalance",
  components: {},
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,

      // 总条数
      total: 0,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        userName: undefined,
        nickName: undefined,
      },

      // 休假明细
      detailRows: [],

      // 年假总额
      totalAnnualLeave: 0,
      // 已使用天数
      totalUsedDay: 0,
      // 剩余天数
      totalUnusedDay: 0,
    };
  },
  computed: {
    ...mapGetters(["userinfo"]),
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 加载数据
    getList() {
      this.loading = true;
      this.queryParams.userName = this.userinfo.userName;
      balanceList(this.queryParams).then((response) => {
        this.loading = false;

        if (response.rows.length > 0) {
          this.totalAnnualLeave = response.rows[0].annualLeave;
          this.totalUsedDay = response.rows[0].usedDay;
          this.totalUnusedDay = response.rows[0].unusedDay;
        }

        detailList({
          userName: this.userinfo.userName,
        }).then((response) => {
          this.detailRows = response.rows;
        });
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.userName = undefined;
      this.queryParams.nickName = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 重置表单
    resetForm() {
      this.attendanceGroup = {
        id: null,
        name: "",
        description: "",
        workDays: ["mon", "tue", "wed", "thu", "fri"],
        workStartTime: "09:00",
        workEndTime: "18:00",
        allowLate: true,
        lateRange: 15,
        allowEarly: true,
        earlyRange: 15,
        areaId: null,
        checkInType: "location",
        members: [],
        areaName: "",
      };

      this.isEditMode = false;
      this.selectedGroupId = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
  .dashboard-item {
    flex: 1;
    padding: 30px 20px;
    background-color: #fff;

    &-title {
      font-size: 14px;
      font-weight: 500;
      color: #909399;
    }

    &-value {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
    }
  }
}
</style>
