<template>
  <div v-loading="pageLoading" class="app-container">
    <div style="padding-bottom: 10px;">
      <span style="padding-right: 20px;font-size: 16px;font-weight: bold;">{{ $t('周') }}</span>
      <el-date-picker
        v-model="queryParams.weekData"
        type="week"
        value-format="yyyy-MM-dd"
        format="yyyy 第 WW 周"
        :picker-options="{'firstDayOfWeek': 6}"
        @change="handleWeekChange"
        placeholder="选择周"
        :clearable="false"/>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-search" size="mini" @click="getList">{{ $t('common.search') }}
      </el-button>
    </div>

    <div class="card-Table">
      <el-button v-hasPermi="['bt:business:quotation:export']" icon="el-icon-download" plain size="mini"
                   @click="handleExport">{{ $t('common.export') }}
        </el-button>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.week }}周各区域数据</h2>
          <el-table :data="data.weekCountList" :summary-method="getWeekCountSummaries" :show-summary="true" v-loading="loading"
          :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column label="区域" prop="key"/>
            <Column label="签单" prop="signCount"/>
            <Column label="排产" prop="productionCount"/>
            <Column label="发货" prop="deliveryCount"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <h2>{{ data.year }}国际月度签约、排产、发货</h2>
          <el-table :data="data.monthCountListAll" :summary-method="getMonthCountAllSummaries" :show-summary="true" v-loading="loading"
          :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column label="月份" prop="key"/>
            <Column label="签约合计" prop="signCount"/>
            <Column label="排产合计" prop="productionCount"/>
            <Column label="发货合计" prop="deliveryCount"/>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.year }}国际每周签约、排产、发货数据（币别USD）</h2>
          <el-table :data="data.weekCountListAll" :summary-method="getMonthCountAllSummaries" :show-summary="true" v-loading="loading"
          :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column label="周" prop="key"/>
            <Column label="签约合计" prop="signCount"/>
            <Column label="排产合计" prop="productionCount"/>
            <Column label="发货合计" prop="deliveryCount"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <h2>{{ data.year }}国际各区域签单</h2>
          <el-table :data="getBody(data.signingAreaColStatistics)" :summary-method="() => getFooter(data.signingAreaColStatistics)" :show-summary="true" v-loading="loading"
          :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column v-for="(label, index) in getHeader(data.signingAreaColStatistics)" :label="label" :prop="index" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.year }}国际各区域排产</h2>
          <el-table :data="getBody(data.productionAreaColStatistics)" :summary-method="() => getFooter(data.productionAreaColStatistics)" :show-summary="true" v-loading="loading"
           :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column v-for="(label, index) in getHeader(data.productionAreaColStatistics)" :label="label" :prop="index" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <h2>{{ data.year }}发货金额</h2>
          <el-table :data="getBody(data.deliveryMonthColStatistics)" :summary-method="() => getFooter(data.deliveryMonthColStatistics)" :show-summary="true" v-loading="loading"
          :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column v-for="(label, index) in getHeader(data.deliveryMonthColStatistics)" :label="label" :prop="index" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.year }}排产金额</h2>
          <el-table :data="getBody(data.productionMonthColStatistics)" :summary-method="() => getFooter(data.productionMonthColStatistics)" :show-summary="true" v-loading="loading"
          :height="300" class="page-table" element-loading-text="loading..." :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}" border>
            <Column v-for="(label, index) in getHeader(data.productionMonthColStatistics)" :label="label" :prop="index" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import {contractSigningStatistic} from "@/api/contract/contract.js";
import moment from "moment";

export default {
  name: "ContractSigningStatistic",
  data() {
    return {
      loading: false,
      showSummary: false,
      queryParams: {
        weekData: null,
        beginTime: null,
        endTime: null
      },
      data: {
        weekCountList: [],
        monthCountListAll: [],
        weekCountListAll: []
      }
    }
  },
  created() {
    this.handleWeekChange(moment().startOf('week').format('YYYY-MM-DD'))
  },
  methods:{
    handleWeekChange(val){
      const date = moment(val)
      this.queryParams.weekData = date.format('YYYY-MM-DD')
      this.queryParams.beginTime = date.add(-1, 'days').format('YYYY-MM-DD')
      this.queryParams.endTime = date.add(6, 'days').format('YYYY-MM-DD')
      this.getList()
    },
    getList() {
      this.loading = true;
      contractSigningStatistic(this.queryParams).then(res => {
        this.data = res.data;
      }).finally(() => {
        this.loading = false;
        this.showSummary = true;
      });
    },
    getWeekCountSummaries() {
      return [
        <div><span>周合计</span><br/><span>月合计</span></div>,
        <div><span>{this.data.weekSignCountTotal}</span><br/><span>{this.data.monthSignCountTotal}</span></div>,
        <div><span>{this.data.weekProductionCountTotal}</span><br/><span>{this.data.monthProductionCountTotal}</span></div>,
        <div><span>{this.data.weekDeliveryCountTotal}</span><br/><span>{this.data.monthDeliveryCountTotal}</span></div>
      ];
    },
    getMonthCountAllSummaries() {
      return ['合计', this.data.monthSignCountTotalAll, this.data.monthProductionCountTotalAll, this.data.monthDeliveryCountTotalAll]
    },
    getWeekCountAllSummaries() {
      return ['合计', this.data.weekSignCountTotalAll, this.data.weekProductionCountTotalAll, this.data.weekDeliveryCountTotalAll]
    },
    getHeader(list){
      return list[0] || []
    },
    getBody(list){
      if (!list || list.length < 3) {
        return []
      }
      return list.slice(1, list.length - 1)
    },
    getFooter(list){
      if (!list || list.length === 0) {
        return []
      }
      return list[list.length - 1] || []
    }
  },
}
</script>

<style scoped lang="scss">
.card-Table {
  padding: 24px;
  margin-top: 0;
  background: #FFFFFF;
  box-shadow: 0 2px 10px 0 #CED6DD;
  border-radius: 6px;

  ::v-deep .el-table {
    .caret-wrapper {
      display: none !important;
    }

    .label-header .caret-wrapper {
      display: inline-block !important;
    }
  }

}
.el-table{
  overflow:visible !important;
  margin-bottom: 80px;
}

</style>
