<template>
  <div class="JCDetails" style="padding: 50px;">
    <!-- <div class="topbox">
      <div class="selec">
        <el-select v-model="value" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="timeselec">

      </div>
    </div> -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="销售顾问业绩排名" name="first">
        <div class="topbox" style="display: flex;justify-content: space-between;">
          <div style="width: 60%;"></div>
          <div class="selec">
            <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="timeselec">
            <el-date-picker v-model="value1" type="month" placeholder="选择日期">
            </el-date-picker>
          </div>
          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun1(value, value1)">查询</button>
        </div>
        <div> <el-table ref="myrefs1" :header-cell-style="{
          background: 'rgba(30, 111, 200,0.8)',
          color: 'white',
          border: '1px rgb(70, 91, 117) solid',
        }" :data="tableData1" style="width: 100%">
            <el-table-column prop="pm" label="排名" width="100">
            </el-table-column>
            <el-table-column prop="company" label="店面">
            </el-table-column>
            <el-table-column prop="xsgw" label="销售顾问">
            </el-table-column>
            <el-table-column prop="xzjk" label="新增集客">
            </el-table-column>
            <el-table-column prop="xzdd" label="新增订单">
            </el-table-column>
            <el-table-column prop="cjl" label="成交率">
            </el-table-column>


          </el-table></div>
      </el-tab-pane>
      <el-tab-pane label="各品牌销量统计" name="second">
        <div class="topbox" style="display: flex;justify-content: space-between;">
          <div style="width: 60%;"></div>
          <div class="selec">
            <el-select v-model="value" filterable multiple collapse-tags clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="timeselec">
            <el-date-picker v-model="value2" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun2(value, value2)">查询</button>
        </div>
        <div> <el-table ref="myrefs2" :header-cell-style="{
          background: 'rgba(30, 111, 200,0.8)',
          color: 'white',
          border: '1px rgb(70, 91, 117) solid',
        }" :data="tableData2" style="width: 100%">
            <el-table-column prop="company" label="店名" width="100">
            </el-table-column>
            <el-table-column label="">
              <el-table-column prop="pp" label="品牌">
              </el-table-column>
              <el-table-column prop="company" label="店面">
              </el-table-column>
            </el-table-column>
            <el-table-column 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 label="月度销量">
              <el-table-column prop="dylj" label="当月累计">
              </el-table-column>
              <el-table-column prop="sysj" label="上月数据">
              </el-table-column>
              <el-table-column 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 prop="bymb" label="本月目标">
              </el-table-column>
              <el-table-column prop="wcl" label="完成率">
              </el-table-column>
            </el-table-column>
          </el-table></div>
      </el-tab-pane>
      <el-tab-pane label="销售数据对标" name="third">
        <div class="topbox" style="display: flex;justify-content: space-between;">
          <div style="width: 60%;"></div>
          <div class="selec">
            <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">
            <el-date-picker v-model="value3" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <button style="width: 100px;height: 40px;background-color: aqua;" @click="chaxun3(value, value3)">查询</button>
        </div>
        <div> <el-table ref="myrefs3" show-summary :summary-method="getSummaries" :header-cell-style="{
          background: 'rgba(30, 111, 200,0.8)',
          color: 'white',
          border: '1px rgb(70, 91, 117) solid',
        }" :data="tableData3" style="width: 100%">
            <el-table-column prop="name" label="门店" width="100">
            </el-table-column>
            <el-table-column label="新增客流量">
              <el-table-column prop="visitor_count" label="首次进店">
              </el-table-column>
              <el-table-column prop="call_count" label="首次来店">
              </el-table-column>
              <el-table-column prop="again_count" label="再次来店">
              </el-table-column>
              <el-table-column prop="reception_count" label="接待合计">
              </el-table-column>
              <el-table-column prop="reception_new_count" label="新增合计">
              </el-table-column>

            </el-table-column>
            <el-table-column label="新增建档量">
              <el-table-column prop="visitor_filled_count" label="进店">
              </el-table-column>
              <el-table-column prop="call_filled_count" label="来电">
              </el-table-column>
              <el-table-column prop="filled_count" label="合计">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="filled_ratio" label="建档率">

            </el-table-column>
            <el-table-column label="试乘驾驶">
              <el-table-column prop="experience_count" label="数量">
              </el-table-column>
              <el-table-column prop="experience_ratio" label="试乘试驾率">
              </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="数量">
              </el-table-column>
              <el-table-column prop="policy1_rate" label="渗透率">
              </el-table-column>
              <el-table-column prop="policy1_amount" label="金额">
              </el-table-column>
            </el-table-column>
            <el-table-column label="商业险">
              <el-table-column prop="policy2_count" label="数量">
              </el-table-column>
              <!-- //////////////////////////////// -->
              <el-table-column prop="policy2_rate" label="渗透率">
              </el-table-column>
              <el-table-column prop="policy2_amount" label="金额">
              </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="单数">
              </el-table-column>
              <el-table-column prop="article_rate" label="渗透率">
              </el-table-column>
              <el-table-column prop="article_amount" label="金额">
              </el-table-column>
            </el-table-column>
            <el-table-column prop="loan_count" label="分期">

            </el-table-column>
            <el-table-column prop="advance_count" label="订车数量">

            </el-table-column>
            <el-table-column prop="unpay_vehicle_count" label="未收银整车">

            </el-table-column>
            <el-table-column prop="vehicle_count" label="销售台次">

            </el-table-column>
            <el-table-column prop="loan_ratio" label="分期比例">

            </el-table-column>

          </el-table></div>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>
<script>
import { column } from "./tuozhuai";
//销售顾问业绩排名
// xsgwtabledataInfo
// //各品牌品牌销量
//ppxltabledataInfo
// //销售数据对比
//  xsdbtabledataInfo
import { xsgwtabledataInfo, ppxltabledataInfo, xsdbtabledataInfo } from "../../../servuces/prove";
import { nowdate, nowdaterange, nowmonthy } from "../../../servuces/getnowtime";
export default {
  data () {
    return {
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableDatahj: [],
      options: [],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      activeName: 'second'
    }
  },
  created () {
    const data = sessionStorage.getItem('data')
    console.log(data);
    if (data) {
      this.options = JSON.parse(data)
    }
  },
  mounted () {
    column(this.tableData1)
    // column(this.tableData)
    this.jcphdetailsapi()
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);

    },
    chaxun1 (value, value1) {
      const strvalue = value.join(',')
      const date = new Date(value1)
      // 获取年份和月份
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1

      // 将年份和月份拼接成所需形式的字符串
      const strvalue1 = `${year}-${month}`;
      xsgwtabledataInfo({ "company_ids": strvalue, "search_month": strvalue1 }).then(res => {
        console.log('查询分期业务', res);
        this.tableData1 = res.data
        // this.tableDatahj = res.footer
      }
      )
      // console.log(strvalue, strvalue1);
    },
    chaxun2 (value, value2) {
      const strvalue = value.join(',')
      const date = new Date(value2)
      // 获取年份和月份
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始，需要加1
      const day = date.getDate()
      // 将年份和月份拼接成所需形式的字符串
      const strvalue1 = `${year}-${month}-${day}`;
      ppxltabledataInfo({ "company_ids": strvalue, "search_date": strvalue1 }).then(res => {
        console.log('查询分期业务', res);
        this.tableData2 = res.data
        // this.tableDatahj = res.footer
      }
      )
      console.log(strvalue, strvalue1);
    },
    chaxun3 (value, value3) {
      const strvalue = value.join(',')
      if (value3) {
        const strvaluezh = value3.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": 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 {
        xsdbtabledataInfo({ "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);
    },
    getSummaries () {
      const keyindex = {
        'company': 0,
        'visitor_count': 1,
        'call_count': 2,
        'again_count': 3,
        'reception_count': 4,
        'reception_new_count': 5,
        'visitor_filled_count': 6,
        'call_filled_count': 7,
        'filled_count': 8,
        'filled_ratio': 9,
        'experience_count': 10,
        'experience_ratio': 11,
        'again_ratio': 12,
        'policy1_count': 13,
        'policy1_rate': 14,
        'policy1_amount': 15,
        'policy2_count': 16,
        'policy2_rate': 17,
        'policy2_amount': 18,
        'article_unit_price': 19,
        'article_count': 20,
        'article_rate': 21,
        'article_amount': 22,
        'loan_count': 23,
        'advance_count': 24,
        'unpay_vehicle_count': 25,
        'vehicle_count': 26,
        'loan_ratio': 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
    },
    jcphdetailsapi () {
      this.value1 = nowmonthy
      this.value2 = nowdate
      this.value3 = nowdaterange
      xsgwtabledataInfo({ "company_ids": '', "search_month": nowmonthy }).then(res => {
        this.tableData1 = res.data
        console.log(res, '销售顾问业绩排名');
      })
      ppxltabledataInfo({ "company_ids": '', "search_date": nowdate }).then(res => {
        console.log('品牌排名', res);
        this.tableData2 = res.data
      })
      xsdbtabledataInfo({ "company_ids": '', "date_begin": nowdaterange[0], 'date_end': nowdaterange[1] }).then(res => {
        console.log('数据对标', res);
        this.tableData3 = res.data
        this.tableDatahj = res.footer
      })
    }
  }
}
</script>
<style>
/* .el-table tr {
  background-color: none;
  color: white;
} */
.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">
.JCDetails {
  .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 .el-table td,
.building-top .el-table th.is-leaf {
  border-color: rgb(70, 91, 117);
  color: white;
}

::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);
}

::v-deep #tab-first,
::v-deep #tab-second,
::v-deep #tab-third,
::v-deep #tab-fourth {
  color: #fff; //设置修改默认蚊子颜色，背景颜色，等
}

::v-deep .el-tabs__item.is-active {
  color: rgb(37, 99, 214) !important;
}
</style>



