<template>
  <el-dialog v-dialogDrag :visible.sync="isCoverageRateShow" @close="handleClose" :modal-append-to-body="false" center title="近4周服务覆盖率">
    <el-table :data="dataList" border max-height="250" style="width: 100%; margin-bottom: 20px">
      <el-table-column align="center" prop="ThisWeekAmount">
        <template slot="header" slot-scope="{}">
          <p>本周服务覆盖率</p>
          <p>{{ getWeekRange(0) }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="LastWeekAmount">
        <template slot="header" slot-scope="{}">
          <p>上周服务覆盖率</p>
          <p>{{ getWeekRange(-1) }}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="TwoWeekAmount">
        <template slot="header" slot-scope="{}">
          <p>上上周服务覆盖率</p>
          <p>{{ getWeekRange(-2) }}</p>
        </template></el-table-column
      >
      <el-table-column align="center" prop="ThreeWeekAmount">
        <template slot="header" slot-scope="{}">
          <p>上三周服务覆盖率</p>
          <p>{{ getWeekRange(-3) }}</p>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { dataMainInterface } from "@/api/api.js";
export default {
  props: {
    dlgForm: {
      type: Object,
      default: null,
    },
    isCoverageRateShow: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      dataList: [],
    };
  },
  methods: {
    async getDataList() {
      const res = await dataMainInterface.getRaiServeCoverageRate({
        CompanyId: this.dlgForm.CompanyId,
      });
      if (res.Ret == 200) {
        this.dataList = [res.Data] || [];
      }
    },
    // 时间的计算
    getWeekRange(offset) {
      const now = new Date();
      const startOfWeek = new Date(now);
      startOfWeek.setDate(now.getDate() - now.getDay() + 1 + offset * 7); // 设置为每周的周一
      const endOfWeek = new Date(startOfWeek);
      endOfWeek.setDate(startOfWeek.getDate() + 6); // 设置为每周的周日

      const formatDate = (date) => {
        const year = date.getFullYear();
        const month = ("0" + (date.getMonth() + 1)).slice(-2);
        const day = ("0" + date.getDate()).slice(-2);
        return `${month}-${day}`;
      };

      return `(${formatDate(startOfWeek)} ~ ${formatDate(endOfWeek)})`;
    },
    // 关闭弹框
    handleClose() {
      this.$emit("update:isCoverageRateShow", false);
      this.$emit("update:dlgForm", {});
    },
  },
  watch: {
    isCoverageRateShow(val) {
      if (val) {
        this.getDataList();
      } else {
        this.dataList = [];
      }
    },
  },
};
</script>

<style></style>
