<template>
  <a-spin :spinning="loading">
    <div class="wms-layout-grid">
      <div class="wms-layout-toolbar">
        <div>
          <p-range-picker
            class="mr-10"
            v-model="dateRange"
            separator="-"
            valueFormat="YYYY-MM-DD"
            :allowClear="false"
          />
          <a-checkbox :checked="autoRefresh" @change="onAutoRefreshChange">自动刷新</a-checkbox>
          <p-button icon="reload" @click="refresh">刷新</p-button>
        </div>
      </div>
      <div class="wms-layout-grid-item deep-bg-1">
        <a-statistic
          class="wms-item-statistic deep"
          title="总单量(单)"
          suffix="单"
          :value="headerData['totalOrder'] || 0"
        />
      </div>
      <div class="wms-layout-grid-item deep-bg-2">
        <a-statistic
          class="wms-item-statistic deep"
          title="已出库量(单)"
          suffix="单"
          :value="headerData['backOrder'] || 0"
        />
      </div>
      <div class="wms-layout-grid-item deep-bg-3">
        <a-statistic
          class="wms-item-statistic deep"
          title="未开始(单)"
          suffix="单"
          :value="headerData['initialOrder'] || 0"
        />
      </div>
      <div class="wms-layout-grid-item deep-bg-4">
        <a-statistic
          class="wms-item-statistic deep"
          title="出库完成率"
          :value="headerData['endRate'] || 0"
          suffix="%"
        />
      </div>
      <div class="wms-layout-grid-item">
        <a-statistic
          class="wms-item-statistic i-round-5"
          title="入库订单数"
          :value="cardData['billnum'] || 0"
          suffix="单"
        />
      </div>
      <div class="wms-layout-grid-item">
        <a-statistic
          class="wms-item-statistic i-round-6"
          title="入库总数量"
          :value="cardData['totalqty'] || 0"
          suffix="件"
        />
      </div>
      <div class="wms-layout-grid-item">
        <a-statistic
          class="wms-item-statistic i-round-7"
          title="入库进度"
          :value="cardData['inpercent'] || 0"
          suffix="%"
        />
      </div>
      <div class="wms-layout-grid-item">
        <a-statistic
          class="wms-item-statistic i-round-8"
          title="已入库件数"
          :value="cardData['inpieceqty'] || 0"
          suffix="件"
        />
      </div>
      <div class="wms-layout-grid-item area-chart-9">
        <BarChart height="100%" :option="inBoundBarData" />
      </div>

      <div class="wms-layout-grid-item area-chart-min">
        <BarChart height="100%" :option="outBoundBarData" />
      </div>
      <div class="wms-layout-grid-item area-chart-11">
        <BarChart height="100%" :option="totalStockPieData" />
      </div>

      <div class="wms-layout-grid-item area-chart-min">
        <PieChart height="100%" :option="outBoundPieData" />
      </div>
      <div class="wms-layout-grid-item area-chart-min">
        <PieChart height="100%" :option="customerPieData" />
      </div>
    </div>
  </a-spin>
</template>
<script>
import BarChart from "@/components/chart/BarChart";
import PieChart from "@/components/chart/PieChart";
import {
  transformCustomerPie,
  transformInBoundChart,
  transformOutBoundChart,
  transformOutBoundPie,
  transformTotalStockPie,
} from "./js/config";
import {
  getHeaderData,
  getCardData,
  getInBoundBarData,
  getOutBoundBarData,
  getTotalStockPieData,
  getOutBoundPieData,
} from "./api";
import { getBusiness } from "@/views/kzyWMS/api/business";

export default {
  components: { BarChart, PieChart },
  data() {
    return {
      loading: false,
      autoRefresh: false,
      timer: null,
      // 自动刷新间隔
      autoRefreshTime: 1000 * 60 * 5,
      // 查询条件
      form: {
        startDate: "",
        endDate: "",
      },
      // 顶部卡片数据
      headerData: {},
      // 卡片数据
      cardData: {},
      // 入库柱图
      inBoundBarData: {},
      // 出库柱图
      outBoundBarData: {},
      // 库存总数饼图
      totalStockPieData: {},
      // 出库条目饼图
      outBoundPieData: {},
      // 客户出库信息
      customerPieData: {},
    };
  },
  computed: {
    dateRange: {
      get() {
        return [this.form.startDate, this.form.endDate];
      },
      set(value) {
        this.$set(this.form, "startDate", value[0]);
        this.$set(this.form, "endDate", value[1]);
      },
    },
  },
  created() {
    this.getBusinessParams();
  },
  mounted() {
    this.form.startDate = this.$moment().format("YYYY-MM-DD");
    this.form.endDate = this.$moment().format("YYYY-MM-DD");
    this.refresh();
  },
  methods: {
    getBusinessParams() {
      getBusiness("autoRefreshTime").then((value) => {
        // this.autoRefreshTime = 1000 * 5 // 默认5分钟
        if (!value) {
          this.autoRefreshTime = 1000 * 60 * 5; // 默认5分钟
        } else {
          this.autoRefreshTime = 1000 * 60 * Number(value);
        }
      });
    },
    startAutoRefresh() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      this.polling();
    },
    stopAutoRefresh() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = null;
    },
    polling() {
      const autoRefreshTime = this.autoRefreshTime;
      this.timer = setTimeout(() => {
        this.refresh();
        this.polling();
      }, autoRefreshTime);
    },
    refresh() {
      this.getChartData();
    },
    onAutoRefreshChange(e) {
      this.autoRefresh = e.target.checked;
      if (this.autoRefresh) {
        this.startAutoRefresh();
      } else {
        this.stopAutoRefresh();
      }
    },
    getChartData() {
      const params = {
        ...this.form,
      };
      const p1 = getHeaderData(params).then((res) => {
        if (res.success) {
          const headerData = res.data?.[0] || {};
          this.headerData = headerData;
          this.customerPieData = transformCustomerPie(headerData);
        } else {
          this.$message.error(res.message);
        }
      });
      const p2 = getCardData(params).then((res) => {
        if (res.success) {
          this.cardData = res.data?.[0] || {};
        } else {
          this.$message.error(res.message);
        }
      });
      const p3 = getInBoundBarData(params).then((res) => {
        if (res.success) {
          this.inBoundBarData = transformInBoundChart(res.data);
        } else {
          this.$message.error(res.message);
        }
      });
      const p4 = getOutBoundBarData(params).then((res) => {
        if (res.success) {
          this.outBoundBarData = transformOutBoundChart(res.data);
        } else {
          this.$message.error(res.message);
        }
      });
      const p5 = getTotalStockPieData(params).then((res) => {
        if (res.success) {
          this.totalStockPieData = transformTotalStockPie(res.data);
        } else {
          this.$message.error(res.message);
        }
      });
      const p6 = getOutBoundPieData(params).then((res) => {
        if (res.success) {
          this.outBoundPieData = transformOutBoundPie(res.data);
        } else {
          this.$message.error(res.message);
        }
      });

      this.loading = true;
      Promise.all([p1, p2, p3, p4, p5, p6]).finally(() => {
        this.loading = false;
      });
    },
  },
};
</script>
<style lang="less">
.wms-layout-grid {
  height: 100%;
  min-height: 1020px;
  //   overflow: hidden;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: auto 17% 18% 18% 1fr;
  //间距
  grid-gap: 15px;

  .deep-bg-1 {
    background: url("./img/1.png") no-repeat right bottom, linear-gradient(to right, #ff7c0b, #ffb501);
  }

  .deep-bg-2 {
    background: url("./img/2.png") no-repeat right bottom, linear-gradient(to right, #498af7, #65cafd);
  }

  .deep-bg-3 {
    background: url("./img/3.png") no-repeat right bottom, linear-gradient(to right, #ff5a18, #ff9b47);
  }

  .deep-bg-4 {
    background: url("./img/4.png") no-repeat right bottom, linear-gradient(to right, #00bb93, #00ddb8);
  }

  [class*="i-round-"] {
    .ant-statistic-title {
      position: relative;
      padding-left: 20px;

      &:before {
        position: absolute;
        content: "";
        width: 14px;
        height: 14px;
        left: 0;
        top: 4px;
        border: 3px solid #e8e8e8;
        border-radius: 50%;
      }
    }
  }

  .i-round {
    &-5 {
      .ant-statistic-title {
        &:before {
          border-color: #ff6600;
        }
      }
    }

    &-6 {
      .ant-statistic-title {
        &:before {
          border-color: #275eff;
        }
      }
    }

    &-7 {
      .ant-statistic-title {
        &:before {
          border-color: #3fcdae;
        }
      }
    }

    &-8 {
      .ant-statistic-title {
        &:before {
          border-color: #da60ff;
        }
      }
    }
  }

  .wms-item-statistic {
    margin-left: 40px;
    align-self: center;

    .ant-statistic-title {
      font-size: 14px;
      color: #333;
    }

    .ant-statistic-content {
      font-size: 32px;
      font-weight: bold;
      line-height: 1.8;
      letter-spacing: -1px;
    }

    &.deep {
      .ant-statistic-title {
        font-size: 16px;
      }

      * {
        color: #fff;
      }

      .ant-statistic-content {
        font-size: 40px;
      }
    }
  }

  .wms-layout-toolbar {
    text-align: right;
    grid-column-start: 1;
    grid-column-end: 21;
  }

  .wms-layout-grid-item {
    display: flex;
    border-radius: 4px;
    background-color: #fff;
    grid-column: ~"span 5";

    &.area-chart-9 {
      grid-column: ~"11/21";
      grid-row: ~"3/5";
    }

    &.area-chart-10 {
      grid-column: ~"1/9";
    }
    &.area-chart-11 {
      grid-column: ~"span 11";
    }

    &.area-chart-min {
      grid-column: ~"span 3";
    }
  }
}
</style>
