<template>
  <div>
    <div class="miantitle">
      <span>客户管理</span>
      <span> / 客户概览</span>
    </div>
    <div class="app-container">
      <div class="topions">
        <div class="icons">
          <div class="name">客户总数</div>
          <div class="count">120</div>
          <img class="icon_img" src="@/assets/images/project/icon_1.png">
        </div>
        <div class="icons">
          <div class="name">已合作客户</div>
          <div class="count">56</div>
          <img class="icon_img" src="@/assets/images/project/icon_2.png">
        </div>
        <div class="icons">
          <div class="name">局级大客户</div>
          <div class="count">50</div>
          <img class="icon_img" src="@/assets/images/project/icon_3.png">
        </div>
        <div class="icons">
          <div class="name">今日紧进客户</div>
          <div class="count">30</div>
          <img class="icon_img" src="@/assets/images/project/icon_4.png">
        </div>
        <div class="icons">
          <div class="name">储备项目数</div>
          <div class="count">33</div>
          <img class="icon_img" src="@/assets/images/project/icon_5.png">
        </div>
      </div>
      <div class="flex">
        <el-card class="box-card noborder left" style="position: relative;padding-bottom: 0">
          <div class="cardtitles">客户级别</div>
          <div class="chartsum">
            <div class="sum">23家</div>
            <div>11%</div>
            <div>有息债务/总负债</div>
          </div>
          <div class="flex">
            <div id="khjb" class="chart1"></div>
            <div class="tables">
            <el-table
              :data="tableData"
              stripe border
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
            >
              <el-table-column
                prop="name"
                label="名称">
              </el-table-column>
              <el-table-column
                prop="sum"
                label="数量（家）" align="right">
              </el-table-column>
              <el-table-column
                prop="point"
                label="占比" align="right">
              </el-table-column>
            </el-table>
          </div>
          </div>

        </el-card>

        <el-card class="box-card noborder right" style="padding-bottom: 0">
          <div class="cardtitles">客户跟进动态
            <div class="labels">
              <div :class="{'on':datatype==1}" @click="getDT(1)">周</div>
              <div :class="{'on':datatype==2}" @click="getDT(2)">月</div>
              <div :class="{'on':datatype==3}" @click="getDT(3)">年</div>
            </div>
          </div>
          <div id="khgjdt" class="chart2"></div>
        </el-card>
      </div>
      <div class="flex">
        <el-card class="box-card noborder left">
          <div class="cardtitles">客户性质分析</div>
          <div class="chart2" id="khxz"></div>
        </el-card>

        <el-card class="box-card noborder right">
          <div class="cardtitles">客户资信评级</div>
          <div class="chart2" id="khzxpj"></div>
        </el-card>
      </div>

      <el-card class="box-card noborder">
        <div class="cardtitles">客户动态</div>
        <div class="trendslist">
          <div class="trends" v-for="item in datalist">
            <div class="names">{{item.name}}</div>
            <div class="trendtips"><div class="tips tip3">{{item.tip1}}</div><div class="tips tip2">{{item.tip2}}</div></div>
            <div class="trendcon">{{item.text}}</div>
            <div class="time">{{item.time}}</div>
          </div>
          <div class="tables" style="width: 100%" v-if="datalist.length>10">
            <div class="bottems">
              <el-pagination
                background
                :page-size="10"
                :current-page="1"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="datalist.length">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import '@/assets/styles/project.scss'
  import * as echarts from 'echarts'

  export default {
  name: 'Overview',
  data() {
    return {
      //客户级别
      chartDom: '',
      myChart: '',
      option: '',
      //客户跟进
      chartDom1: '',
      myChart1: '',
      option1: '',
      //客户性质
      chartDom2: '',
      myChart2: '',
      option2: '',
      // 客户资信
      chartDom3: '',
      myChart3: '',
      option3: '',
      //表格数据
      tableData:[
        {name:'集团总部',sum:'23',point:'11%'},
        {name:'一级单位',sum:'61',point:'29%'},
        {name:'二级单位',sum:'60',point:'29%'},
        {name:'三级单位',sum:'21',point:'10%'},
        {name:'其他单位',sum:'44',point:'21%'},
      ],
      datatype:'1',//切换类型
      datalist:[
        {name:'重庆市江北区国有资本投资运营管理集团有限公司',time:'2023-05-30',text:'新增招标公告：【江北房地产综合开发公司名下不动产鲤鱼池片区资产评估项目】 公开选取【资产评估】机构的公告',tip1:'正向',tip2:'招标公告'},
        {name:'上海城投（集团）有限公司',time:'2023-05-29',text:'新增招标公告：北横通道新建工程——机电、装饰工程Ⅱ标段',tip1:'正向',tip2:'招标公告'},
        {name:'上海申迪（集团）有限公司',time:'2023-5-27',text:'新增招标公告：上海国际旅游度假区核心区3.1平方公里绿地公园配套停车场项目',tip1:'正向',tip2:'招标公告'},
        {name:'上海浦东建设股份有限公司',time:'2023-5-25',text:'新增招标公告：张村地块基础设施建设及上汽地块配套道路桥梁项目道路照明工程二标段',tip1:'正向',tip2:'招标公告'},
        {name:'上海浦东建设股份有限公司',time:'2023-5-24',text:'新增供应商：江苏安神交通工程有限公司',tip1:'提示',tip2:'新增供应商'},
      ],
    }
  },
  created() {
  },
  mounted(){
    this.$nextTick(()=>{
      this.chartDom = document.getElementById("khjb")
      this.myChart = echarts.init(this.chartDom)
      this.chartDom2 = document.getElementById("khxz")
      this.myChart2 = echarts.init(this.chartDom2)
      this.chartDom3 = document.getElementById("khzxpj")
      this.myChart3 = echarts.init(this.chartDom3)
      this.initChart()
      this.getDT(1)
    })
    window.addEventListener("resize", this.resizeEcharts);
  },
  beforeDestroy(){
    window.removeEventListener("resize", this. resizeEcharts);
  },
  activated() {
    this.resizeEcharts()
  },
  methods: {
    resizeEcharts (){
      const self = this
      setTimeout(function(){ //图表跟随页面大小变化宽度
        self.myChart.resize()
        self.myChart1.resize()
        self.myChart2.resize()
        self.myChart3.resize()
      }, 10)
    },
    initChart(){
      //客户级别
      this.option = {
        tooltip: {
          trigger: 'item',
          extraCssText: 'border:0',
        },
        color:['#8A82F3','#5B9CF7','#8DCF96','#FFDC6B','#FE9C77'],//修改配色
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%','70%'],
            data: [
              { value: 23, name: '集团总部：11%',borderWidth:0  },
              { value: 61, name: '一级单位：29%',borderWidth:0  },
              { value: 60, name: '二级单位：29%',borderWidth:0 },
              { value: 21, name: '三级单位：10%',borderWidth:0  },
              { value: 44, name: '其他单位: 21%',borderWidth:0  }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0)'
              }
            }
          }
        ]
      }
      this.option && this.myChart.setOption(this.option)
      //客户性质分析
      this.option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['地方单位', '事业单位', '政府机关', '中央企业', '上市公司', '军队', '民营企业','其他'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine : { //网格线
              lineStyle: {
                type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
              },
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '18px',
            data: [100, 152, 200, 334, 390, 330, 220,256,178],
            itemStyle:{
              normal: {
                barBorderRadius: [9, 9, 0, 0],
                color: '#165DFF'
              }
            }
          }
        ],

        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: 'rgb(90,146,247)'
          },
        }
      }
      this.option2 && this.myChart2.setOption(this.option2)
      //客户资质分析
      this.option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['AA', 'AA+', 'AA-', 'A', 'A+', 'A', 'A-','其他'],
            axisTick: {
              alignWithLabel: true,
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine : { //网格线
              lineStyle: {
                type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
              },
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '18px',
            data: [110, 112, 190, 234, 310, 350, 220,276,198],
            itemStyle:{
              normal:{
                barBorderRadius:[9,9,0,0],
                color:'#14C9C9'
              },
            }
          }
        ],

        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: 'rgb(134,231,231)'
          },
        }
      }
      this.option3 && this.myChart3.setOption(this.option3)

    },
    initDT(datas,labels){
      this.chartDom1 = document.getElementById("khgjdt")
      this.myChart1 = echarts.init(this.chartDom1)
      //客户跟进动态
      this.option1 = {
        xAxis: {
          type: 'category',
          data: labels,
          axisTick: {
            show: false
          },
          boundaryGap: false,
          nameLocation:'end',
          nameTextStyle: {
            fontSize:12,
            padding: [0, 0, 0, -30]
          },
        },
        yAxis: {
          type: 'value',
          splitLine : { //网格线
            lineStyle: {
              type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
            },
          }
        },
        grid:{
          left:'8%',
          top:'8%',
          right:'5%',
          bottom:'42px',
        },
        tooltip:{
          axisPointer:{ //悬浮于圆点展示标签
            type:'axis'
          },
          extraCssText: 'border:0',
          // trigger: 'axis'
        },
        series: [
          {
            name: '总跟进',
            data: datas,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal:{
                color:'#0081FF'
              }
            },
            label:{
              normal:{
                show:false
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 129, 255, 0.5)'
                }, {
                  offset: 1, color: 'rgba(0, 129, 255, 0)'
                } ],
                global: false
              }
            },
            symbolSize:8,
          }
        ]
      }
      this.option1 && this.myChart1.setOption(this.option1)
    },
    getDT(type){
      this.datatype = type
      let time = new Date()
      let week = ['周一','周二','周三','周四','周五','周六','周日']
      let weekdata = [200,150,300,240,400,380,460]
      let monthdata = [400,200,350,170,190,280,260,308,406,387,458,695,125,360,512,546,298,365,458,536,345,200,150,300,240,400,380,460,472,365,547]
      let yeardata = [1908,1500,2300,1456,2354,2564,1254,1236,4561,4521,1236,4561,3521]
      let datas = []
      let labels = []
      switch (type) {
        case 1:
          time = time.getDay()== 0?7:time.getDay()
          // week.length = time
          weekdata.length = time
          for(var i=0;i<7;i++){
            if(i > time){
              weekdata.push('')
            }
          }
          labels = week
          datas = weekdata
          break;
        case 2:
          let days = new Date(time.getFullYear(),time.getMonth()+1,0).getDate()//获取到本月天数
          time = time.getDate()
          monthdata.length = time
          for(var i=1;i<days;i++){
            labels.push(i+'日')
            if(i > time){
              monthdata.push("")
            }
          }
          datas = monthdata
          break;
        case 3:
          time = time.getMonth()+1
          yeardata.length = time
          for(var i=1;i<12;i++){
            labels.push(i+'月')
            if(i>time){
              yeardata.push('')
            }
          }
          datas = yeardata
          break;
        default:
          break;
      }
      this.initDT(datas,labels)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  }
}
</script>

<style lang="scss" scoped>
  .box-card{
    margin: 12px 0 0;
    padding-bottom: 24px;
    &.left{
      width: calc(62% - 16px);
      margin-right: 14px;
    }
    &.right{
      width: 40%;
    }
  }
  .topions{
    width: 100%;
    display: flex;
    .icons{
      width: calc(20%);
      margin-right: 16px;
      height: 96px;
      background: url("../../../assets/images/project/beijing.png") top center no-repeat;
      background-size: 100% 100%;
      position: relative;
      padding: 24px;
      &:last-child{
        margin-right: 0;
      }
      .name{
        font-size: 14px;
        color: #3D3D3D;
        line-height: 14px;
      }
      .count{
        font-size: 26px;
        font-weight: 700;
        color: #0081FF;
        padding-top: 14px;
        line-height: 26px;
      }
      .icon_img{
        width: 70px;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
  .chart1{
    width: 428px;
    height: 240px;
  }
  .tables{
    width: calc(100% - 428px);
  }
  .chartsum{
    position: absolute;
    color: #3D3D3D;
    text-align: center;
    top: 155px;
    left: 168px;
    >div{
      font-size: 10px;
      line-height: 18px;
      padding: 0 2px;
      &.sum{
        font-size: 18px;
        padding-bottom: 4px;
      }
    }
  }
  .chart2{
    width: 100%;
    height: 265px;
  }
  .cardtitles{
    position: relative;
    .labels{
      width: 120px;
      height: 22px;
      position: absolute;
      border-radius: 2px;
      right: 24px;
      top: 24px;
      >div{
        width: 40px;
        height: 100%;
        text-align: center;
        line-height: 22px;
        float: left;
        opacity: 1;
        border: 1px solid #EFEFEF;
        margin-left: -1px;
        font-weight: 400;
        font-size: 12px;
        color: rgba(35, 35, 35, 0.80);
        cursor: pointer;
        &.on{
          background: #0081FF;
          color: #FFFFFF;
          border-color: #0081FF;
        }
        &:first-child{
          border-radius: 2px 0px 0px 2px;
        }
        &:last-child{
          border-radius: 0px 2px 2px 0px;
        }
      }
    }
  }
  .trendslist{
    border-top: 1px solid #EFEFEF;
    .trends{
      position: relative;
      padding: 16px 16px 0;
      &:hover{
        background: #F6F9FC;
      }
      .names{
        width: calc(100% - 92px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 23px;
        font-size: 16px;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 23px;
      }
      .trendtips{
        padding: 8px 0 12px;
      }
      .trendcon{
        border-bottom: 1px solid #EFEFEF;
        font-size: 14px;
        font-family: MicrosoftYaHei-Regular, MicrosoftYaHei;
        font-weight: 400;
        color: rgba(35,35,35,0.8);
        line-height: 18px;
        padding-bottom: 16px;
      }

      &:last-child{
        .trendcon{
          border: none;
        }
      }
      .time{
        position: absolute;
        right: 16px;
        top: 26px;
        font-size: 14px;
        opacity: 0.4;
      }
    }
  }
</style>
