<template>
  <div>
    <!-- 标题 -->
    <div class="title" style="margin-top: 10px">
      <div style="display: flex; justify-content: space-between">
        <h1 style="color: azure" @click="goOff">漯河亿通集团数据看板</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>
        <!-- 表格 -->
        <el-tabs type="border-card" class="theme">
          <el-tab-pane label="销售顾问业绩排名">

            <div style="display: flex; justify-content: flex-end; margin: 10px">
              <!-- 下拉框 -->
              <div style="margin-right: 20px">
                <el-select
                  class="select"
                  v-model="pm_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="value1"
                  type="month"
                  placeholder="2023-08"
                >
                </el-date-picker>
              </div>
              <!-- 按钮 -->
              <el-button
                @click="searchBtn1(pm_company_ids, value1)"
                style="background-color: rgb(40, 155, 209); color: black"
                >查询</el-button
              >
            </div>
            <el-table
              class="exporttable"
              :data="tableDataOne"
              border
              stripe
              :header-cell-style="{
                'text-align': 'center',
                background: '#03111c',
              }"
              :cell-style="{ 'text-align': 'center' }"
              show-summary
              style="width: 100%; margin: 1px"
              :max-height="taheight"
            >
              <el-table-column prop="pm" label="排名" sortable> </el-table-column>
              <el-table-column prop="company" label="店面" sortable> </el-table-column>
              <el-table-column prop="xsgw" label="销售顾问" sortable> </el-table-column>

              <el-table-column prop="xzjk" label="新增集客" sortable> </el-table-column>
              <el-table-column prop="xzdd" label="新增订单" sortable> </el-table-column>
              <el-table-column prop="cjl" label="成交率" sortable> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="各品牌销售统计">
            <div style="display: flex; justify-content: flex-end; margin: 10px">
              <!-- 下拉框 -->
              <div style="margin-right: 20px">
                <el-select
                  class="select"
                  v-model="pp_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="value2"
                  type="date"
                  placeholder="2023-08-10"
                >
                </el-date-picker>
              </div>
              <!-- 按钮 -->
              <el-button
                @click="searchBtn2(pp_company_ids, value2)"
                style="background-color: rgb(40, 155, 209); color: black"
                >查询</el-button
              >
            </div>
            <!-- 表格 -->
            <el-table
              border
              class="exporttable"
              :data="tableDataTwo"

              stripe
              :header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
              :cell-style="{ 'text-align': 'center' }"
              show-summary
              style="width: 100%; margin: 1px"
              :max-height="taheight"
            >
              <el-table-column prop="company" label="店名"> </el-table-column>
              <el-table-column prop="name" label="">
                <el-table-column prop="pp" label="品牌"> </el-table-column>
              </el-table-column>
              <el-table-column prop="amount1" label="周度销量">
                <el-table-column prop="week1" label="1"> </el-table-column>
                <el-table-column prop="week2" label="2"> </el-table-column>
                <el-table-column prop="week3" label="3"> </el-table-column>
                <el-table-column prop="week4" label="4"> </el-table-column>
                <el-table-column prop="week5" label="5"> </el-table-column>
                <el-table-column prop="week6" label="6"> </el-table-column>
                <el-table-column prop="week7" label="7"> </el-table-column>
                <el-table-column label="环比">
                  <el-table-column prop="week_hb_1" label=""> </el-table-column>
                  <el-table-column prop="week_hb_2" label=""> </el-table-column>
                </el-table-column>
              </el-table-column>

              <el-table-column prop="amount6" label="月销量">
                <el-table-column prop="dylj" label="当月累计">
                </el-table-column>
                <el-table-column prop="sysj" label="上月数据">
                </el-table-column>
                <el-table-column prop="amount7" label="环比">
                  <el-table-column prop="month_hb_1" label="">
                  </el-table-column>
                  <el-table-column prop="month_hb_2" label="">
                  </el-table-column>
                </el-table-column>
                <el-table-column prop="month_tb" label="同比">
                </el-table-column>
              </el-table-column>
              <el-table-column prop="amount7" label="">
                <el-table-column prop="bymb" label="本月目标">
                </el-table-column>
                <el-table-column prop="wcl" label="完成率"> </el-table-column>
              </el-table-column>
            </el-table>
          </el-tab-pane>
           <el-tab-pane label="销售数据对标">
             <div style="display: flex; justify-content: flex-end; margin: 10px">
               <!-- 下拉框 -->
               <div style="margin-right: 20px">
                 <el-select
                         class="select"
                         v-model="db_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="value3"
                     type="daterange"
                     range-separator="——"
                     start-placeholder="开始日期"
                     end-placeholder="结束日期"
                 >
                 </el-date-picker>
               </div>
               <!-- 按钮 -->
               <el-button
                       @click="searchBtn2(db_company_ids, value3)"
                       style="background-color: rgb(40, 155, 209); color: black"
               >查询</el-button
               >
             </div>
             <!-- 表格 -->
              <el-table
                class="exporttable"
                :data="tableDataThree"
                border
                show-summary
                stripe
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#03111c'
                }"
                :cell-style="{ 'text-align': 'center' }"

                style="width: 100%; margin: 1px;"
                :max-height="taheight"
              >
                <el-table-column prop="name" label="店名"></el-table-column>
                <el-table-column label="新增客流量">
                  <el-table-column prop="visitor_count" label="首次进店" sortable width="120"></el-table-column>
                  <el-table-column prop="call_count" label="首次来店" sortable width="120"></el-table-column>
                  <el-table-column prop="again_count" label="再次来店" sortable width="120"></el-table-column>
                  <el-table-column prop="reception_count" label="接待合计" sortable width="120"></el-table-column>
                  <el-table-column prop="reception_new_count" label="新增合计" sortable width="120"></el-table-column>
                </el-table-column>
                <el-table-column label="新增建档量">
                  <el-table-column prop="visitor_filled_count" label="进店" sortable></el-table-column>
                  <el-table-column prop="call_filled_count" label="来店" sortable></el-table-column>
                  <el-table-column prop="filled_count" label="合计" sortable></el-table-column>
                  <el-table-column prop="filled_ratio" label="建档率" sortable></el-table-column>
                </el-table-column>
                <el-table-column label="试乘驾驶">
                  <el-table-column prop="experience_count" label="数量"></el-table-column>
                  <el-table-column prop="experience_ratio" label="试乘试驾率" sortable width="120"></el-table-column>
                </el-table-column>
                <el-table-column prop="again_ratio" label="再次进店率"> </el-table-column>
                <el-table-column label="交强险">
                  <el-table-column prop="policy1_count" label="数量" sortable> </el-table-column>
                  <el-table-column prop="policy1_rate" label="渗透率" sortable></el-table-column>
                  <el-table-column prop="policy1_amount" label="金额" sortable></el-table-column>
                </el-table-column>
                <el-table-column label="商业险">
                  <el-table-column prop="policy2_count" label="数量" sortable></el-table-column>
                  <el-table-column prop="policy2_rate" label="渗透率" sortable></el-table-column>
                  <el-table-column prop="policy2_amount" label="金额" sortable></el-table-column>
                </el-table-column>
                <el-table-column label="精品">
                  <el-table-column prop="article_unit_price" label="客单价"></el-table-column>
                  <el-table-column prop="article_count" label="单数" sortable></el-table-column>
                  <el-table-column prop="article_rate" label="渗透率" sortable></el-table-column>
                  <el-table-column  prop="article_amount" label="金额" sortable></el-table-column>
                </el-table-column>
                <el-table-column prop="loan_count" label="分期"></el-table-column>
                <el-table-column prop="advance_count" label="订车数量" width="120" sortable></el-table-column>
                <el-table-column prop="unpay_vehicle_count" label="未收银整车" width="120" sortable></el-table-column>
                <el-table-column prop="vehicle_count" label="销售台次" width="120" sortable></el-table-column>
                <el-table-column prop="loan_ratio" label="分期比例" width="120" sortable></el-table-column>
              </el-table>
            </el-tab-pane>
        </el-tabs>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { xsgwtabledataInfo, ppxltabledataInfo, xsdbtabledataInfo } from "../../servuces/prove";
import { nowdaterange, nowdate, nowmonthy } from "../../servuces/getnowtime";
export default {
  data() {
    return {
      taheight: window.innerHeight - (window.innerHeight * 0.25),
      pm_company_ids: [],
      pp_company_ids: [],
      db_company_ids: [],
      currentTime: "",
      value: "",
      //表格各类属性
      tableDataOne: [],
      tableDataTwo: [],
      tableDataThree: [],
      //下拉框内属性
      options: [],
      value1: '',
      value2: '',
      value3: '',
    };
  },
  created () {
    const data = sessionStorage.getItem('company_data');
    if (data) {
      this.options = JSON.parse(data)
    }
  },
  mounted() {
    this.updateTime(); //时间
    this.getTableDataOne(); //开始获取表格
    this.getTableDataTwo(); //开始获取表格
    this.getTableDataThree(); //开始获取表格
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
  methods: {
    //表格接口数据
    getTableDataOne() {
      this.value1 = nowmonthy;
      xsgwtabledataInfo({ "company_ids": '', "search_month": nowmonthy }).then(res => {
        this.tableDataOne = res.data;
      });
    },
    getTableDataTwo() {
      this.value2 = nowdate;
      ppxltabledataInfo({ "company_ids": '', "search_date": nowdate }).then(res => {
        this.tableDataTwo = res.data;
      });
    },
    getTableDataThree() {
      this.value3 = nowdaterange;
      xsdbtabledataInfo({ "company_ids": '', "date_begin": nowdaterange[0], "date_end": nowdaterange[1] }).then(res => {
        this.tableDataThree = res.data;
      });
    },
    //表格接口数据
    goOff(){
      history.go(-1);
    },
    //更新时间
    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}`;
    },
    searchBtn1(ids, search_month) {
      const company_ids = ids.join(',');
      const date = new Date(search_month);
      // 获取年份和月份
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1

      // 将年份和月份拼接成所需形式的字符串
      const search_date = `${year}-${month}`;
      xsgwtabledataInfo({ "company_ids": company_ids, "search_month": search_date}).then(res => {
        this.tableDataOne = res.data;
      });
    },
    searchBtn2(ids, search_date) {
      const company_ids = ids.join(',');
      const date = new Date(search_date);
      // 获取年份和月份
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1
      const s_date = date.getDate(); // 月份从0开始，需要加1

      // 将年份和月份拼接成所需形式的字符串
      const search_date1 = `${year}-${month}-${s_date}`;
      ppxltabledataInfo({ "company_ids": company_ids, "search_date": search_date1}).then(res => {
        this.tableDataTwo = res.data;
      });
    },
    searchBtn3(ids, search_date) {
      const company_ids = ids.join(',');
      if (search_date) {
        const strvaluezh = search_date.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}`;
        });
        xsdbtabledataInfo({ "company_ids": company_ids, "date_begin": strvaluezh[0], 'date_end': strvaluezh[1] }).then(res => {
          this.tableDataThree = res.data;
        })
      } else {
        xsdbtabledataInfo({"company_ids": company_ids, "date_begin": '', 'date_end': ''}).then(res => {
          this.tableDataThree = res.data;
        });
      }
    },
  },
};
</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;
}
/* 鼠标移入 */
:deep(.el-table__body tr.hover-row>td.el-table__cell){
background-color: transparent;
}
::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 td,
.building-top .el-table th.is-leaf {
  color: #93acbf;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #133654;
}
/* 日期表 */
:deep(.el-input__inner) {
  background-color: #133654;
  border: none;
  color: #ffffffc1;
}

::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;
  text-align: center !important;
}
.time {
  color: rgb(174, 201, 222);
  margin-right: 2%;
  font-size: 16px;
  overflow: hidden;
  max-width: 15%;
  white-space: nowrap;
}
</style>
