<template>
  <div class="JCDetails" style="padding: 50px;">
    <h1>分期业务</h1>
    <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="chaxun(value, value1)">查询</button>
    </div>

    <div> <el-table show-summary :summary-method="getSummaries" :header-cell-style="{
      background: 'rgba(30, 111, 200,0.8)',
      color: 'white',
      textAlign: 'center',
      border: '1px rgb(70, 91, 117) solid',
    }" :data="tableData" style="width: 100%">
        <el-table-column prop="company" label="品牌" width="100">
        </el-table-column>
        <el-table-column label="分期单数及渗透率">
          <el-table-column prop="mbxl" label="目标">
          </el-table-column>
          <el-table-column prop="sjxl" label="实际">
          </el-table-column>
          <el-table-column prop="fqstl" label="分期渗透率">
          </el-table-column>
          <el-table-column prop="qntq" label="去年同期">
          </el-table-column>
          <el-table-column prop="tbcz" label="同比差值">
          </el-table-column>
          <el-table-column prop="sysj" label="上月数据">
          </el-table-column>
          <el-table-column prop="hbcz" label="环比差值">
          </el-table-column>
        </el-table-column>
        <el-table-column label="高期限占比">
          <el-table-column prop="lxsl" label="0息">
          </el-table-column>
          <el-table-column prop="lxzb" label="0息占比">
          </el-table-column>
          <el-table-column prop="36sl" label="36期">
          </el-table-column>
          <el-table-column prop="36zb" label="占比">
          </el-table-column>
          <el-table-column prop="48sl" label="48期">
          </el-table-column>
          <el-table-column prop="48zb" label="占比">
          </el-table-column>
          <el-table-column prop="60sl" label="60期">
          </el-table-column>
          <el-table-column prop="60zb" label="占比">
          </el-table-column>
        </el-table-column>
        <el-table-column label="佣金收入">
          <el-table-column prop="zxfwf" label="咨询服务费">
          </el-table-column>
          <el-table-column prop="gps" label="GPS费用">
          </el-table-column>
          <el-table-column prop="gcjrfy" label="工厂金融返佣">
          </el-table-column>
          <el-table-column prop="yhqdfy" label="银行渠道返佣">
          </el-table-column>
          <el-table-column prop="yjhj" label="收入合计">
          </el-table-column>
          <el-table-column prop="yjtby" label="同比月">
          </el-table-column>
          <el-table-column prop="yjhby" label="环比月">
          </el-table-column>
        </el-table-column>


      </el-table></div>




  </div>
</template>
<script>
import { column } from "./tuozhuai";
import { fqywtabledataInfo } from "../../../servuces/prove";
import { nowmonthy } from "../../../servuces/getnowtime";
export default {
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
      },
      value1: '',
      tableData: [],
      tableDatahj: [],
      options: [],
      value: '',
      activeName: 'second'
    }
  },
  created () {
    const data = sessionStorage.getItem('data')
    console.log(data);
    if (data) {
      this.options = JSON.parse(data)
    }
  },
  mounted () {
    column(this.tableData)
    this.fqywtabledataapi()
  },
  methods: {
    chaxun (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}`;
      fqywtabledataInfo({ "company_ids": strvalue, "search_month": strvalue1 }).then(res => {
        console.log('查询分期业务', res);
        this.tableData = res.data
        this.tableDatahj = res.footer
      }
      )
      // console.log(strvalue, strvalue1);
    },
    getSummaries () {
      const keyindex = {
        'company': 0,
        'mbxl': 1,
        'sjxl': 2,
        'fqstl': 3,
        'qntq': 4,
        'tbcz': 5,
        'sysj': 6,
        'hbcz': 7,
        'lxsl': 8,
        'lxzb': 9,
        '36sl': 10,
        '36zb': 11,
        '48sl': 12,
        '48zb': 13,
        '60sl': 14,
        '60zb': 15,
        'zxfwf': 16,
        'gps': 17,
        'gcjrfy': 18,
        'yhqdfy': 19,
        'yjhj': 20,
        'yjtby': 21,
        'yjhby': 22,
      }
      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
    },
    fqywtabledataapi () {
      this.value1 = nowmonthy
      fqywtabledataInfo({ "company_ids": '', "search_month": nowmonthy }).then(res => {
        // console.log('分期业务', res);
        this.tableData = 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 {
      border: none;
      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>



