<template>
  <div class="KCDetails" style="padding:0 50px 0 50px;">
    <h1>库存分析</h1>
    <div class="topbox" style="display: flex;justify-content: space-between;">
      <div style="flex: 1;"></div>
      <div class="selec ershi">
        <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
          <el-option v-for="(item, index) in options" :key="index" :label="item.text" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="timeselec ershi">
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <button class="ershi" style="width: 100px;height: 40px;background-color: aqua;"
        @click="chaxun2(value, value1)">查询</button>
    </div>
    <div class="station-search">
      <el-table ref="table" show-summary :height="taheight" :summary-method="getSummaries" :header-cell-style="{
        background: 'rgba(30, 111, 200,0.8)',
        color: 'white',
        textAlign: 'center',
        border: '1px rgb(70, 91, 117) solid',
      }" row-key="data[index]" :data="tableData" style="width: 100%">
        <el-table-column prop="company" fixed label="店名" width="100">
        </el-table-column>
        <el-table-column label="库存种类">
          <el-table-column prop="pjzl" sortable width="110" label="配件种类">
          </el-table-column>
          <el-table-column prop="jpzl" sortable width="110" label="精品种类">
          </el-table-column>
          <el-table-column prop="zlhj" sortable width="110" label="种类合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="库存数量">
          <el-table-column prop="pjsl" sortable width="110" label="配件数量">
          </el-table-column>
          <el-table-column prop="jpsl" sortable width="110" label="精品数量">
          </el-table-column>
          <el-table-column prop="slhj" sortable width="110" label="数量合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="库存金额(含税)">
          <el-table-column prop="pjje" sortable width="110" label="配件金额">
          </el-table-column>
          <el-table-column prop="jpje" sortable width="110" label="精品金额">
          </el-table-column>
          <el-table-column prop="jehj" sortable width="110" label="金额合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="库存金额(不含税)">
          <el-table-column prop="pjje2" sortable width="100" label="配件金额未税">
          </el-table-column>
          <el-table-column prop="jpje2" sortable width="100" label="精品金额未税">
          </el-table-column>
          <el-table-column prop="jehj2" sortable width="100" label="金额合计未税">
          </el-table-column>
        </el-table-column>
        <el-table-column label="入库金额">
          <el-table-column prop="pjrk" sortable width="110" label="配件入库">
          </el-table-column>
          <el-table-column prop="jprk" sortable width="110" label="精品入库">
          </el-table-column>
          <el-table-column prop="rkhj" sortable width="110" label="入库合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="出库金额">
          <el-table-column prop="pjck" sortable width="110" label="配件出库">
          </el-table-column>
          <el-table-column prop="jpck" sortable width="110" label="精品出库">
          </el-table-column>
          <el-table-column prop="ckhj" sortable width="110" label="出库合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="呆滞数量(90天以上未出库)">
          <el-table-column prop="pjdzsl" sortable width="130" label="配件呆滞数据">
          </el-table-column>
          <el-table-column prop="jpdzsl" sortable width="130" label="精品呆滞数量">
          </el-table-column>
          <el-table-column prop="dzslhj" sortable width="130" label="呆滞数量合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="呆滞数量(90天以上未出库)">
          <el-table-column prop="pjdzje" sortable width="130" label="配件呆滞金额">
          </el-table-column>
          <el-table-column prop="jpdzje" sortable width="130" label="精品呆滞金额">
          </el-table-column>
          <el-table-column prop="dzjehj" sortable width="130" label="呆滞金额合计">
          </el-table-column>
        </el-table-column>
        <el-table-column label="呆滞占比">
          <el-table-column prop="pjdzzb" sortable width="130" label="配件呆滞占比">
          </el-table-column>
          <el-table-column prop="jpdzzb" sortable width="120" label="精品呆滞占">
          </el-table-column>
          <el-table-column prop="dzzbhj" sortable width="110" label="占比合计">
          </el-table-column>
        </el-table-column>

      </el-table>
    </div>

  </div>
</template>
<script>
import { column } from "./tuozhuai";
import { nowdaterange } from "../../../servuces/getnowtime";
import { kcfxdataInfo, kcfxcompanInfo } from "../../../servuces/prove";
export default {
  data () {
    return {
      //库存分析图表数据
      taheight: window.innerHeight - (window.innerHeight * 0.15),
      tableData: [],
      tableDatahj: [],
      //公司
      options: [],
      value: '',
      value1: '',

    }
  },
  created () {
    const data = sessionStorage.getItem('data')
    console.log(data);
    if (data) {
      this.options = JSON.parse(data)
    }
  },
  mounted () {
    column(this)
    this.kcfxdataapi()
    this.kcfxcompanAPI()
  },
  updated () {

    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    chaxun2 (value, value1) {
      const strvalue = value.join(',')
      if (value1) {
        const strvaluezh = value1.map(item => {
          const date = new Date(item)
          // 获取年份和月份
          const year = date.getFullYear();
          const month = date.getMonth() + 1; // 月份从0开始，需要加1
          const day = date.getDate()
          // 将年份和月份拼接成所需形式的字符串
          return `${year}-${month}-${day}`;
        });
        kcfxdataInfo({ "company_ids": strvalue, "date_begin": strvaluezh[0], 'date_end': strvaluezh[1] }).then(res => {
          // console.log('查询分期业务', res);
          this.tableData = res.data
          this.tableDatahj = res.footer
          console.log(res);
        }
        )
      } else {
        kcfxdataInfo({ "company_ids": strvalue, "date_begin": '', 'date_end': '' }).then(res => {
          // console.log('查询分期业务', res);
          this.tableData = res.data
          this.tableDatahj = res.footer
          console.log(res);
        }
        )
      }


      // const strvalue1 = strvaluezh.join(',')
      // console.log(strvaluezh[0], strvaluezh[1]);
      // const date = new Date(value1)
      // // 获取年份和月份
      // const year = date.getFullYear();
      // const month = String(date.getMonth() + 1); // 月份从0开始，需要加1
      // const day = String(date.getDate())
      // // 将年份和月份拼接成所需形式的字符串
      // const strvalue1 = `${year}-${month}-${day}`;
      // const strvalue3=
      // console.log(strvalue, strvaluezh[0], strvaluezh[1]);

      // console.log(strvalue, strvalue1);
      // console.log(value, value1);
    },
    kcfxcompanAPI () {
      this.value1 = nowdaterange
      kcfxcompanInfo({ "company_ids": '', "date_begin": nowdaterange[0], 'date_end': nowdaterange[1] }).then(res => {
        console.log(res.data);
        this.options = res.data
      })
    },
    getSummaries () {
      const keyindex = {
        'company': 0,
        'pjzl': 1,
        'jpzl': 2,
        'zlhj': 3,
        'pjsl': 4,
        'jpsl': 5,
        'slhj': 6,
        'pjje': 7,
        'jpje': 8,
        'jehj': 9,
        'pjje2': 10,
        'jpje2': 11,
        'jehj2': 12,
        'pjrk': 13,
        'jprk': 14,
        'rkhj': 15,
        'pjck': 16,
        'jpck': 17,
        'ckhj': 18,
        'pjdzsl': 19,
        'jpdzsl': 20,
        'dzslhj': 21,
        'pjdzje': 22,
        'jpdzje': 23,
        'dzjehj': 24,
        'pjdzzb': 25,
        'jpdzzb': 26,
        'dzzbhj': 27,
      }
      const item_value = []
      for (let key in this.tableDatahj) {
        let index = keyindex[key]
        item_value[index] = this.tableDatahj[key] + ''
      }
      // console.log(item_value);
      item_value[0] = '合计'
      return item_value
    },
    //库存分析总数据
    kcfxdataapi () {
      kcfxdataInfo().then(res => {
        this.tableData = res.data
        this.tableDatahj = res.footer
        console.log(res);
      })
    },
  }
}
</script>
<style scoped>
/* .el-table tr {
  background-color: none;
  color: white;
} */
/* .station-search .table-head {
  font-size: 14px !important;
}

.station-search .el-table .caret-wrapper {
  position: absolute;
  top: 2px;
  right: 0;
}

.station-search .el-table .cell,
.el-table th div {
  padding: 0 !important;
}

.station-search .el-table tr td .cell {
  padding: 5px 2px !important;
}

.station-search .el-table .cell,
.station-search .el-table th div,
.station-search .el-table--border td:first-child .cell,
.station-search .el-table--border th:first-child .cell {
  padding-left: 0 !important;
} */



.el-table .warning-row {
  background-color: rgba(15, 78, 146, 0.827);

}

.el-table .success-row {
  background-color: rgb(15, 78, 146, 0.5);
}

.has-gutter tr th:last-child {
  background-color: rgba(30, 111, 200, 0.8);
}

.el-table tr {
  background-color: rgb(15, 78, 146, 0.5);
}
</style>
<style scoped lang="scss">
.KCDetails {

  .selec {
    margin: 0 0 20px 0;
  }
}

::v-deep .el-table__footer {
  border: none;

  tr {
    border: none;

    td {
      color: white;
      background-color: rgba(30, 111, 200, 0.8);
    }

    td:hover {
      color: white;
    }
  }

}

::v-deep .el-table {
  background-color: transparent;
  border-color: rgb(70, 91, 117);
}

::v-deep .gutter {
  background-color: rgba(30, 111, 200, 0.8) !important;
  border: 0 !important;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border-color: rgb(70, 91, 117);
  color: white;
}

::v-deep .el-table__body tr.hover-row>td.el-table__cell {
  background-color: rgb(58, 147, 189) !important;
}

::v-deep .el-table td:hover {
  color: rgb(5, 51, 159);
}

::v-deep .has-gutter th {
  border-color: rgb(70, 91, 117);
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgb(58, 147, 189);
}
</style>



