<template>
  <div>
    <!-- 标题 -->
    <div class="title" style="margin-top: 10px">
      <div style="display: flex; justify-content: space-between">
        <h1 style="color: azure">漯河亿通集团数据看板</h1>

        <div class="time">
          <span class="iconfont icon-riqi"></span>&nbsp;&nbsp;{{ currentTime }}
        </div>
      </div>
      <img src="../../assets/bargound/图层 6.png" width="100%" />
    </div>
    <div class="content">
      <el-tabs type="border-card" class="theme">
        <div style="display: flex; justify-content: space-between">
          <!-- 图标 -->
          <div>
            <p>
              <img src="../../assets/bargound/data.png" alt="" /><span
                class="kccl"
                >库存分析</span
              >
            </p>
          </div>
          <div style="display: flex">
            <!-- 下拉框 -->
            <div style="margin-right: 20px">
              <el-select
                class="select"
                v-model="company_ids"
                multiple
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <!-- 日期表 -->
            <div class="dataForm" style="margin-right: 20px">
              <el-date-picker
                v-model="search_date"
                type="daterange"
                range-separator="——"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </div>
            <!-- 按钮 -->
            <el-button
              @click="searchBtn(company_ids, search_date)"
              style="background-color: rgb(40, 155, 209); color: black">查询
            </el-button>
          </div>
        </div>

       
        <!-- 表格 -->
        <el-table
          class="exporttable"
          :data="tableData"
          border
          stripe
          :header-cell-style="{
            'text-align': 'center',
            background: '#03111c',
          }"
          :cell-style="{ 'text-align': 'center' }"
          show-summary
          style="width: 100%; margin: 1px"
        >
          <el-table-column prop="company" label="品牌"> </el-table-column>
          <el-table-column  label="库存种类">
            <el-table-column prop="pjzl" label="配件种类"> </el-table-column>
            <el-table-column prop="jpzl" label="精品种类"> </el-table-column>
            <el-table-column prop="zlhj" label="种类合计"> </el-table-column>
          </el-table-column>
          <el-table-column label="库存数量">
            <el-table-column prop="pjsl" label="配件数量"> </el-table-column>
            <el-table-column prop="jpsl" label="精品数量"> </el-table-column>
            <el-table-column prop="slhj" label="数量合计"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount2" label="库存金额(含税)">
            <el-table-column prop="pjje" label="配件金额"> </el-table-column>
            <el-table-column prop="jpje" label="精品金额"> </el-table-column>
            <el-table-column prop="jehj" label="金额合计"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount3" label="">
            <el-table-column prop="pjje2" label="配件金额未税"> </el-table-column>
            <el-table-column prop="jpje2" label="精品金额未税"> </el-table-column>
            <el-table-column prop="jehj2" label="金额合计未税"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount4" label="入库金额">
            <el-table-column prop="pjrk" label="配件入库"> </el-table-column>
            <el-table-column prop="jprk" label="精品入库"> </el-table-column>
            <el-table-column prop="rkhj" label="入库合计"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount5" label="出库金额">
            <el-table-column prop="pjck" label="配件出库"> </el-table-column>
            <el-table-column prop="jpck" label="精品出库"> </el-table-column>
            <el-table-column prop="ckhj" label="出库合计"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount6" label="呆滞数量(90天以上未出库)">
            <el-table-column prop="pjdzsl" label="配件呆滞数量"> </el-table-column>
            <el-table-column prop="jpdzsl" label="精品呆滞数量"> </el-table-column>
            <el-table-column prop="dzslhj" label="呆滞数量合计"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount6" label="呆滞金额(90天以上未出库)">
            <el-table-column prop="pjdzje" label="配件呆滞金额"> </el-table-column>
            <el-table-column prop="jpdzje" label="精品呆滞金额"> </el-table-column>
            <el-table-column prop="dzjehj" label="呆滞金额合计"> </el-table-column>
          </el-table-column>
          <el-table-column prop="amount1" label="呆滞占比(90天以上未出库)">
            <el-table-column prop="pjdzzb" label="配件呆滞占比"> </el-table-column>
            <el-table-column prop="jpdzzb" label="精品呆滞占比"> </el-table-column>
            <el-table-column prop="dzzbhj" label="占比合计"> </el-table-column>
            
          </el-table-column>
        </el-table>

        <!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { kcfxdataInfo } from "../../servuces/prove";
import { nowdaterange } from "../../servuces/getnowtime";
import { column } from "../../store/tuozhuai";
export default {
  data() {
    return {
      company_ids: [],

      currentTime: "",
      value: "",
      //表格各类属性
      tableData: [],
      tableDatahj: [],
      //下拉框内属性
      options: [],
      search_date: '',
    };
  },
  created () {
    const data = sessionStorage.getItem('company_data');
    if (data) {
      this.options = JSON.parse(data)
    }
  },
  mounted() {
    column(this);
    this.updateTime(); //时间
    this.getTableData(); //开始获取表格
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
  methods: {

    //表格接口数据
    getTableData () {
      this.search_date = nowdaterange;
      kcfxdataInfo({ "company_ids": '', "date_begin": nowdaterange[0], 'date_end': nowdaterange[1] }).then(res => {
        this.tableData = res.data;
        this.tableDatahj = res.footer
      })
    },
    //查询
    searchBtn(value, value1) {
      const company_ids = 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": company_ids, "date_begin": strvaluezh[0], 'date_end': strvaluezh[1] }).then(res => {
          this.tableData = res.data;
          this.tableDatahj = res.footer

        })
      } else {
        kcfxdataInfo({"company_ids": company_ids, "date_begin": '', 'date_end': ''}).then(res => {
          this.tableData = res.data;
          this.tableDatahj = res.footer;
        });
      }
    },
    //更新时间
    updateTime() {
      // 在组件挂载结束时启动定时器，每秒更新一次时间
      this.currentTime = this.getCurrentTime();
      //每秒更新一次
      this.timer = setInterval(() => {
        this.currentTime = this.getCurrentTime();
      }, 1000);
    },
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
    },
  },

};
</script>

<style scoped="less">
.content {
  padding: 10px;
}

.title {
  width: 100%;
  /* background: url('../../assets/bargound/'); */
  height: 64px;

  p {
    height: 100px;
  }
}

.kccl {
  color: #697c91;
  font-size: 24px;
  margin-left: 10px;
}
.el-input__inner {
  background-color: #133654;
}

.el-input__inner {
  border: 0;
}
::v-deep .el-date-editor .el-range-input {
  display: inline-block;
  height: 100%;
  width: 39%;
  text-align: center;
  font-size: 14px;
  color: #ffffffba;
  background-color: #133654;
}
::v-deep .el-table {
  border: none;
}
::v-deep .el-table::before {
  background-color: black;
}
::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
.el-table__header-wrapper tbody td.el-table__cell {
  background-color: rgb(2, 62, 2);
  color: #93acbf;
}
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: black;
  z-index: 1;
}
::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  color: #93acbf;
}
::v-deep
  .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
  .el-tabs__nav-scroll {
  border-bottom: 1px solid;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #133654;
}
::v-deep .el-table tr {
  background: #133654;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #081b2b;
}
/**
改变边框颜色
 */
.el-table {
  border-bottom: 1px solid #102b47;
  border-right: 1px solid #102b47;
  margin: 0 auto;
}
::v-deep.el-table th {
  border: 1px solid #102b47 !important;
  border-right: none !important;
  border-bottom: none !important;
}

::v-deep.el-table td {
  border: 1px solid #102b47;
  border-right: none !important;
}
.time {
  color: rgb(174, 201, 222);
  margin-right: 2%;
  font-size: 16px;
  overflow: hidden;
  max-width: 15%;
  white-space: nowrap;
}
</style>
