<template>
  <div v-loading="loading" 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="weekValue"
        :picker-options="{'firstDayOfWeek': 6}"
        placeholder="选择周"
        @change="handleWeekChange"
        :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.areaCountStatisticsTitle }}</h2>
          <el-table :data="getBody(data.areaCountStatistics, 2)" :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 v-for="(label, index) in getHeader(data.areaCountStatistics)" :label="label" :prop="String(index)" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <h2>{{ data.monthCountStatisticsTitle }}</h2>
          <el-table :data="getBody(data.monthCountStatistics)" :summary-method="() => getFooter(data.monthCountStatistics)" :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.monthCountStatistics)" :label="label" :prop="String(index)" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.weekCountStatisticsTitle }}</h2>
          <el-table :data="getBody(data.weekCountStatistics)" :summary-method="() => getFooter(data.weekCountStatistics)" :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.weekCountStatistics)" :label="label" :prop="String(index)" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <h2>{{ data.signingAreaColStatisticsTitle }}</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="String(index)" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.productionAreaColStatisticsTitle }}</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="String(index)" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <h2>{{ data.deliveryMonthColStatisticsTitle }}</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="String(index)" :fixed="index === 0? 'left' : false"/>
          </el-table>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="12">
          <h2>{{ data.productionMonthColStatisticsTitle }}</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="String(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";

moment.updateLocale('en', { week: {
  dow: 6, // First day of week is Saturday
  doy: 12 // First week of year must contain 1 January (7 + 6 - 1)
}})

export default {
  name: "ContractSigningStatistic",
  data() {
    return {
      loading: false,
      exportLoading: false,
      showSummary: false,
      queryParams: {
        weekData: null,
        beginTime: null,
        endTime: null
      },
      data: {
        weekCountList: [],
        monthCountListAll: [],
        weekCountListAll: []
      }
    }
  },
  created() {
    this.handleWeekChange(moment().startOf('week').format('YYYY-MM-DD'))
    this.getList()
  },
  computed: {
    weekValue(){
      const currentDate = moment(this.queryParams.weekData).locale('en')
      const weekYear = currentDate.weekYear();
      const weekNumber = currentDate.week();
      return `${weekYear} 第 ${weekNumber} 周`
    }
  },
  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')
    },
    getList() {
      this.loading = true;
      contractSigningStatistic(this.queryParams).then(res => {
        this.data = res.data;
      }).finally(() => {
        this.loading = false;
        this.showSummary = true;
      });
    },
    handleExport() {
      this.download('/business/contract/contractSigningStatistic/export', {
        ...this.queryParams
      }, `周、月签约、排产、发货_${new Date().getTime()}.xlsx`)
    },
    getWeekCountSummaries() {
      if (!this.data || !this.data.areaCountStatistics || this.data.areaCountStatistics.length < 2) {
        return ['', '', '', '']
      }
      const arr = this.data.areaCountStatistics.slice(this.data.areaCountStatistics.length - 2)
      return [
        <div><span>{arr[0][0]}</span><br/><span>{arr[1][0]}</span></div>,
        <div><span>{arr[0][1]}</span><br/><span>{arr[1][1]}</span></div>,
        <div><span>{arr[0][2]}</span><br/><span>{arr[1][2]}</span></div>,
        <div><span>{arr[0][3]}</span><br/><span>{arr[1][3]}</span></div>
      ]
    },
    getHeader(list){
      if (!list || list.length < 3) {
        return []
      }
      return list[0]
    },
    getBody(list, footerOffset = 1){
      if (!list || list.length < 3) {
        return []
      }
      return list.slice(1, list.length - footerOffset)
    },
    getFooter(list, footerOffset = 1){
      if (!list || list.length < 3) {
        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>
