<template>
  <div class="app-sty">
    <title-bar :title="title" @click-right="rightClick">
      <van-icon slot="left" name="cross" size="24" />
      <div slot="right" style="font-size: 18px">{{ rightText }}</div>
    </title-bar>
    <div class="container-sty">
      <div class="box-sty">
        <div class="containerBox-sty containerLeft-sty">
          <div class="leftTop-sty">
            <div class="custName-sty">某某某支行</div>
            <div class="leftTopBottm-sty">
              <div>
                <div class="dataTitle-sty">分支行当月上门营销户数</div>
                <div class="data-sty">
                  <div>4156</div>
                  <div v-if="isFrequency">&nbsp;户</div>
                  <div v-if="!isFrequency">&nbsp;次</div>
                </div>
              </div>
              <div class="splitLine-sty"></div>
              <div>
                <div class="dataTitle-sty">分支行排名</div>
                <div class="data-sty">
                  <div>4156</div>
                  <div>&nbsp;/ {{ total }}</div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 90%;height: 60%">
            <div class="leftMiddle-sty">{{ trendText }}</div>
            <div id="market-household-trend" class="leftBottom-sty"></div>
          </div>
        </div>
        <div class="containerBox-sty containerRight-sty">
          <van-tabs
            :ellipsis="false"
            animated
            color="#FF574C"
            type="card"
            title-active-color="#FFFFFF"
            class="d-tabs d-tabs-container tabs-sty"
            @click="checkMod"
            line-width="100px"
            v-model="active"
          >
            <van-tab v-for="(item1, index1) in tabs" :key="index1" :title="item1.name">
              <div class="chart-sty">
                <div class="rank-sty">
                  <div>{{ item1.name }}</div>
                  <div v-if="index1 == 0">
                    <div>当月营销总户数： </div>
                    <div>{{ marketTotalNum }} {{ danwei }}</div>
                  </div>
                </div>
                <div v-for="(item, index) in topThree" :key="index" class="data">
                  <svg v-if="item.marketNumbersRank == 1" class="icon imgCls" aria-hidden="true">
                    <use xlink:href="#icon-guanjunxpx" />
                  </svg>
                  <svg v-else-if="item.marketNumbersRank == 2" class="icon imgCls" aria-hidden="true">
                    <use xlink:href="#icon-yajunxpx" />
                  </svg>
                  <svg v-else-if="item.marketNumbersRank == 3" class="icon imgCls" aria-hidden="true">
                    <use xlink:href="#icon-jijunxpx" />
                  </svg>
                  <div style="width: 30%;color: #999999;font-size: 14px;margin-left: 10px">
                    <div>{{ item.exeUserName }}</div>
                    <div>{{ item.orgName }}</div>
                  </div>
                  <van-progress
                    :percentage="item.percentage"
                    stroke-width="8"
                    pivot-color="#7232dd"
                    track-color="white"
                    color="#FD5065"
                    style="width: 50%"
                  />
                  <div style="margin-left: 10px">{{ item.marketNumbers }}</div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { NativeUI } from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";
import { Progress } from 'vant';
import * as echarts from 'echarts';

Vue.use(Progress);

@Component({
  name: "MarketStatisticsDetail"
})
export default class MarketStatisticsDetail extends Vue {
  title = '营销户数统计';
  rightText = '营销次数统计';
  rankText = '全行客户经理当月排名';
  trendText = '营销户数趋势';
  danwei = '户';
  total = 100;
  marketTotalNum = 4245;
  household: any;
  frequency: any;
  flag = 1;
  active = 0;
  tabs = [{ name: '全行客户经理当月排名' }, { name: '本支行客户经理营销户数排名' }];
  trendData = [
    {
      datas: [
        {
          date: '1',
          frequency: 70
        },{
          date: '2',
          frequency: 100
        },{
          date: '3',
          frequency: 40
        },{
          date: '4',
          frequency: 130
        },
      ]
    }
  ];
  topThree = [
    {
      marketNumbersRank: 1,
      exeUserName: '李艳明',
      orgName: '某某分支行',
      percentage: 100,
      marketNumbers: '68'
    },{
      marketNumbersRank: 2,
      exeUserName: '张三',
      orgName: '某某分支行',
      percentage: 45,
      marketNumbers: '34'
    },{
      marketNumbersRank: 3,
      exeUserName: '赵四',
      orgName: '某某分支行',
      percentage: 80,
      marketNumbers: '52'
    }
  ];
  isFrequency = true;

  created() {
    this.$nextTick(() => {
      this.initEcharts();
    });
  }
  /**
   *@Description 初始化趋势图
   *@Author XWH
   *@Date 2022/3/3 15:08
   */
  initEcharts() {
    this.$nextTick(() => {
      if(this.flag == 1){

      }
      this.household = echarts.init(document.getElementById('market-household-trend') as HTMLDivElement);
      this.initHyChart(this.household);
    });
  }
  initHyChart(myChart: any) {
    console.log('初始化', myChart);
    const _this = this;
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        name: '日',
        axisTick: {
          show: false
        },
        data: _this.trendData[0].datas.map(f => f.date),
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        name: '次'
      },
      series: [
        {
          data: _this.trendData[0].datas.map(f => f.frequency),
          type: 'line'
          // areaStyle: {
          //   color: '#ff0',
          //   opacity: 0.5
          // }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 50
        },
        {
          start: 0,
          end: 50
        }
      ]
    };
    myChart.setOption(option);
  }
  onClick() {

  }
  checkMod() {

  }
  rightClick() {
    if(!this.isFrequency){
      this.trendText = '营销户数趋势';
      this.tabs = [{ name: '全行客户经理当月排名' }, { name: '本支行客户经理营销户数排名' }];
      this.danwei = '户';
    }else{
      this.trendText = '营销次数趋势';
      this.tabs = [{ name: '全行客户经理当月排名' }, { name: '本支行客户经理营销次数排名' }];
      this.danwei = '次';
    }
    console.log("右边按钮",this.isFrequency);
    const oldTitle = this.title;
    this.title = this.rightText;
    this.rightText = oldTitle;
    this.isFrequency = !this.isFrequency;
  }
}
</script>
<style lang="scss" scoped>
.app-sty{
  background-color: #F2EFF0;
  width: 100%;
  height: 100%;
}
.container-sty{
  width: 100%;
  height: 93%;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-sty{
  width: 99%;
  height: 99%;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
  display: flex;
}
.containerBox-sty{
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  width: 50%;
  height: 100%;
}
.containerLeft-sty{
  justify-content: space-around;
  padding-left: 20px;
}
.containerRight-sty{
  padding: 20px 0 0 0;
}
.leftTop-sty{
  width: 85%;
  height: 20%;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
  .leftTopBottm-sty{
    width: 85%;
    height: 60%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
.leftMiddle-sty{
  font-size: 20px;
}
.leftBottom-sty{
  width: 100%;
  height: 100%;
}
.splitLine-sty{
  width: 1px;
  height: 60%;
  background-color: #FA6419;
}
.data-sty{
  display: flex;
  div:nth-child(1){
    font-size: 18px;
    font-weight: bold;
  };
  div:nth-child(2){
    font-size: 14px;
    color: #999999;
    align-self: flex-end;
  };
}
.dataTitle-sty{
  font-size: 18px;
  color: #999999;
}
.custName-sty{
  width: 100px;
  text-align: center;
  color: white;
  background-color: #00A3FF;
  border-radius: 10px 0 10px 0;
  line-height: 40px;
}
.tabs-sty {
  border-radius: 20px 20px 0 0;
  padding: 0 10px;
}
::v-deep .van-progress__pivot {
  display: none;
}
.imgCls {
  width: 30px;
  height: 30px;
}
.data {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  /*justify-content: space-between;*/
}
.chart-sty{
  padding: 20px;
}
.rank-sty{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  div:nth-child(1){
    font-size: 20px;
  }
  div:nth-child(2){
    display: flex;
    align-items: center;
    font-size: 16px;
    div:nth-child(1){
      font-size: 16px;
      color: #999999;
    }
  }
}
</style>
