<template>
  <div class="app-container">
    <div class="chart-top">
      <div class="left">
        <el-card class="box-card noborder">
          <div class="flex">
            <div class="top-icons">
              <img class="top-img" src="@/assets/images/project/icon_6.png">
              <div class="name">储备项目</div>
              <div class="number">129</div>
              <div class="compare">较上月<span class="ss">+3 <img src="@/assets/images/project/ss.png"></span></div>
            </div>
            <div class="top-icons">
              <img class="top-img" src="@/assets/images/project/icon_7.png">
              <div class="name">重点关注项目</div>
              <div class="number">45</div>
              <div class="compare">较上月<span class="xj">-1 <img src="@/assets/images/project/xj.png"></span></div>
            </div>
            <div class="top-icons">
              <img class="top-img" src="@/assets/images/project/icon_8.png">
              <div class="name">即将开标项目</div>
              <div class="number">39</div>
              <div class="compare">较上月<span class="ss">+3 <img src="@/assets/images/project/ss.png"></span></div>
            </div>
            <div class="top-icons">
              <img class="top-img" src="@/assets/images/project/icon_9.png">
              <div class="name">已签约项目数</div>
              <div class="number">5</div>
              <div class="compare">较上月<span class="ss">+1 <img src="@/assets/images/project/ss.png"></span></div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card noborder" id="charts">
          <div class="cardtitles i">项目经营分析
            <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="xmjyfx" class="chart2"></div>
        </el-card>
      </div>
      <el-card class="box-card noborder right">
        <div class="cardtitles i">最近关注</div>
        <div class="gzlist">
          <div>
            <img src="@/assets/images/project/fjxm.png">
            <div>房建项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/szxm.png">
            <div>市政项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/slxm.png">
            <div>水利项目</div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="cardtitles i">储备项目类型</div>
        <div class="gzlist">
          <div>
            <img src="@/assets/images/project/EPC.png">
            <div>EPC项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/tzxm.png">
            <div>投资项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/fjxm.png">
            <div>房建项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/dlxm.png">
            <div>电力项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/szxm.png">
            <div>市政项目</div>
          </div>
          <div>
            <img src="@/assets/images/project/slxm.png">
            <div>水利项目</div>
          </div>
        </div>
        <div class="addnew" @click="addNew(true)"><div class="img"></div>新建项目</div>
      </el-card>
    </div>

    <div class="chart-bot">
      <el-card class="box-card noborder left">
        <div class="p1">目标完成率</div>
        <div class="p2">78.09<span>%</span></div>
        <div class="p3">较上月 +12.15 % <span></span> 较上月 +1542 亿 <span></span><!--<span class="xj"></span>--></div>
        <div class="p4">年度目标总额 1500.00 亿元</div>
      </el-card>
      <el-card class="box-card noborder right">
        <div class="cardtitles i">跟进记录</div>
        <div class="records">
          <div class="recordlist">
            <div class="rec_detail" v-for="(item,index) in recordlist.rows">

              <div class="rec_time">
                <i class="el-icon-time"></i>
                <div>{{item.createTime && item.createTime.slice(0, 16)}}</div>
              </div>
              <div class="rec_con">
                <div><strong>{{item.nickName}}</strong> <span v-if="item.visitMode">({{item.visitMode}})</span></div>
                <div><span>{{item.content}}</span></div>
                <div class="rec_text">
                  <span>拜访对象：{{item.name||'--'}}</span>
                  <span>职位：{{item.position||'--'}}</span>
                  <span>拜访时间：{{item.createTime && item.createTime.slice(0, 10)}}</span>
                  <span>下次拜访时间：{{item.nextVisitTime == null?'--': item.createTime.slice(0, 10)}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <addproject v-if="isshow" @addproject="add" @cancel="addNew"></addproject>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  import * as echarts from 'echarts'
  import addproject from '../projectList/component/addProject'
export default {
  name: 'Overview',
  components:{addproject},
  data() {
    return {
      chartDom: '',
      myChart: '',
      option: '',
      datatype:'1',//切换类型
      recordlist:{rows:[
        {
          content:"测试拜访功能",
          createTime:"2023-05-26T16:51:23.000+08:00",
          customerId:"2b871d36f4e3ff71a4ea51f4c548f5fc",
          id:5,
          name:"李永佳",
          nextVisitTime:"2023-05-27T00:00:00.000+08:00",
          position:"产品",
          userId:104,
          visitMode:"线下拜访",
      },
        {
          content:"测试拜访功能",
          createTime:"2023-05-26T16:51:23.000+08:00",
          customerId:"2b871d36f4e3ff71a4ea51f4c548f5fc",
          id:5,
          name:"李永佳",
          nextVisitTime:"2023-05-27T00:00:00.000+08:00",
          position:"产品",
          userId:104,
          visitMode:"线下拜访",
      },
        {
          content:"测试拜访功能",
          createTime:"2023-05-26T16:51:23.000+08:00",
          customerId:"2b871d36f4e3ff71a4ea51f4c548f5fc",
          id:5,
          name:"李永佳",
          nextVisitTime:"2023-05-27T00:00:00.000+08:00",
          position:"产品",
          userId:104,
          visitMode:"线下拜访",
      },
        {
          content:"测试拜访功能",
          createTime:"2023-05-26T16:51:23.000+08:00",
          customerId:"2b871d36f4e3ff71a4ea51f4c548f5fc",
          id:5,
          name:"李永佳",
          nextVisitTime:"2023-05-27T00:00:00.000+08:00",
          position:"产品",
          userId:104,
          visitMode:"线下拜访",
      },
        {
          content:"测试拜访功能",
          createTime:"2023-05-26T16:51:23.000+08:00",
          customerId:"2b871d36f4e3ff71a4ea51f4c548f5fc",
          id:5,
          name:"李永佳",
          nextVisitTime:"2023-05-27T00:00:00.000+08:00",
          position:"产品",
          userId:104,
          visitMode:"线下拜访",
      },
        {
          content:"测试拜访功能",
          createTime:"2023-05-26T16:51:23.000+08:00",
          customerId:"2b871d36f4e3ff71a4ea51f4c548f5fc",
          id:5,
          name:"李永佳",
          nextVisitTime:"2023-05-27T00:00:00.000+08:00",
          position:"产品",
          userId:104,
          visitMode:"线下拜访",
      },
      ]},
      isshow:false,
    }
  },
  created() {
    // this.$route.push({ path: "/projectList" })
  },
  mounted(){
    this.$nextTick(()=>{
      this.chartDom = document.getElementById("xmjyfx")
      this.myChart = echarts.init(this.chartDom)
      this.getDT(1)
    })
    this.recordlist.rows.forEach(item=>{
      item.createTime = this.gettime(item.createTime)
      item.nextVisitTime = this.gettime(item.nextVisitTime)
    })
    window.addEventListener("resize", this.resizeEcharts);
  },
  beforeDestroy(){
    window.removeEventListener("resize", this. resizeEcharts);
  },
  activated() {
    this.resizeEcharts()
  },
  methods: {
    getDT(type){
      this.datatype = type
      let time = new Date()
      let week = ['周一','周二','周三','周四','周五','周六','周日']
      let weekdata1 = [200,150,300,240,400,380,460]
      let weekdata2 = [100,250,320,140,300,350,410]
      let weekdata3 = [210,180,200,280,400,280,360]
      let monthdata1 = [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 monthdata2 = [420,250,380,190,110,200,250,318,436,320,478,605,140,310,552,516,250,300,258,436,245,240,140,200,140,300,390,410,450,300,587]
      let monthdata3 = [300,240,310,185,170,210,240,208,416,357,450,645,155,330,522,506,200,315,200,506,355,210,180,100,280,410,310,400,410,320,580]
      let yeardata1 = [1908,1500,2300,1456,2354,2564,1254,1236,4561,4521,1236,4561,3521]
      let yeardata2 = [1920,1700,2400,1556,2400,2500,1420,1520,3850,4520,1500,4600,4500]
      let yeardata3 = [1980,1600,2500,1356,2200,2600,1300,1450,4560,3400,1400,1500,2500]
      let datas = []
      let labels = []
      switch (type) {
        case 1:
          time = time.getDay()
          // week.length = time
          weekdata1.length = time
          weekdata2.length = time
          weekdata3.length = time
          for(var i=0;i<7;i++){
            if(i > time){
              weekdata1.push('')
              weekdata2.push('')
              weekdata3.push('')
            }
          }
          labels = week
          datas.push(weekdata1)
          datas.push(weekdata2)
          datas.push(weekdata3)
          break;
        case 2:
          let days = new Date(time.getFullYear(),time.getMonth()+1,0).getDate()//获取到本月天数
          time = time.getDate()
          monthdata1.length = time
          monthdata2.length = time
          monthdata3.length = time
          for(var i=1;i<days;i++){
            labels.push(i+'日')
            if(i > time){
              monthdata1.push("")
              monthdata2.push("")
              monthdata3.push("")
            }
          }
          datas.push(monthdata1)
          datas.push(monthdata2)
          datas.push(monthdata3)
          break;
        case 3:
          time = time.getMonth()+1
          yeardata1.length = time
          yeardata2.length = time
          yeardata3.length = time
          for(var i=1;i<12;i++){
            labels.push(i+'月')
            if(i>time){
              yeardata1.push('')
              yeardata2.push('')
              yeardata2.push('')
            }
          }
          datas.push(yeardata1)
          datas.push(yeardata2)
          datas.push(yeardata3)
          break;
        default:
          break;
      }
      this.initDT(datas,labels)
    },
    resizeEcharts (){
      const self = this
      setTimeout(function(){
        self.myChart.resize()
      }, 10)
    },
    initDT(datas,labels){
      this.chartDom = document.getElementById("xmjyfx")
      this.myChart = echarts.init(this.chartDom)
      //客户跟进动态
      this.option = {
        xAxis: {
          type: 'category',
          data: labels,
          axisTick: {
            show: false
          },
        },
        yAxis: {
          type: 'value',
          splitNumber: 5,
          splitLine : { //网格线
            lineStyle: {
              type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
            },
          }
        },
        grid:{
          left:'4%',
          top:'20%',
          right:'2%',
          bottom:'15%',
        },
        tooltip:{
          axisPointer:{ //悬浮于圆点展示标签
            type:'axis'
          },
          // trigger: 'axis'
        },
        legend: {
          left: '12px',
          top:"15px",
          data: ['成交金额', '储备项目', '跟进动态'],
          itemHeight: 8, // 修改icon图形大小
          itemGap: 20

        },
        series: [
          {
            name: '成交金额',
            data: datas[0],
            type: 'line',
            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
              }
            },
            itemStyle: {
              normal:{
                color:'#0081FF',
              }
            },
            label:{
              normal:{
                show:false
              }
            },
            symbolSize:8,
          },
          {
            name: '储备项目',
            data: datas[1],
            type: 'line',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(157, 220, 202, 1)'
                }, {
                  offset: 1, color: 'rgba(157, 220, 202, 0)'
                } ],
                global: false
              }
            },
            itemStyle: {
              normal:{
                color:'#79C8B1'
              }
            },
            label:{
              normal:{
                show:false
              }
            },
            symbolSize:8,
          },
          {
            name: '跟进动态',
            data: datas[2],
            type: 'line',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(168, 144, 255, 1)'
                }, {
                  offset: 1, color: 'rgba(168, 144, 255, 0)'
                } ],
                global: false
              }
            },
            itemStyle: {
              normal:{
                color:'#ACA5F7'
              }
            },
            label:{
              normal:{
                show:false
              }
            },
            symbolSize:8,
          },
        ]
      }
      this.option && this.myChart.setOption(this.option)
      let _this = this
      // document.getElementById('charts').onresize = function () {
      //   _this.myChart.resize() ; // 如果有多个图标变动，可写多个
      //
      // }
    },
    gettime(time){
      if(time == null || time == "")
        return null
      let times = new Date(time)
      let year = times.getFullYear()
      let month = times.getMonth()+1
      month = month<10?"0"+month:month
      let day = times.getDate()
      day = day<10?"0"+day:day
      let hour = times.getHours()
      let minute = times.getMinutes()
      let second = times.getSeconds()
      return year+'-'+month+'-'+day+' '+hour+":"+minute+":"+second
    },
    addNew(isshow){
      this.isshow = isshow
    },
    add(){
      this.isshow = false
      this.$router.push({ path: '/project/projectList' })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-top{
  height: 450px;
  margin-bottom: 12px;
  .left{
    float: left;
    width: calc(100% - 367px);
    .box-card:first-child{
      margin-bottom: 12px;
      height: 124px;
      padding: 16px;
    }
    .box-card:last-child{
      height: 314px;
    }
  }
  .right{
    float: right;
    height: 450px;
    width: 353px;
  }
  .top-icons{
    width: 33%;
    height: 92px;
    padding: 16px;
    &::before{
      content: ' ';
      width: 1px;
      height: 56px;
      background: #EFEFEF;
      float: left;
      margin-left: -16px;
    }
    &:first-child:before{
      width: 0;
    }
    .top-img{
      float: left;
      width: 48px;
      margin: 0 8px 12px 0;
    }
    .name{
      font-size: 12px;
      line-height: 14px;
    }
    .number{
      font-size: 18px;
      font-weight: 700;
      padding: 8px 0;
    }
    .compare{
      font-size: 12px;
      color: rgba(35, 35, 35, 0.40);
      line-height: 12px;
      .ss{
        color: #0CBC6D;
        padding-left: 3px;
        position: relative;
        >img{
          width: 8px;
          margin-top: 0px;
          position: absolute;
          margin-left: 8px;
        }
      }
      .xj{
        color: #FF3C3C;
        padding-left: 3px;
        position: relative;
        >img{
          width: 8px;
          margin-top: 1px;
          position: absolute;
          margin-left: 8px;
        }
      }
    }
  }
}
.chart-bot{
  height: auto;
  margin-bottom: 12px;
  .left{
    float: left;
    width: 353px;
    height: 354px;
    background: url("../../../assets/images/project/glbj.png")no-repeat top center;
    background-size: 100% 100%;
    color: #FFFFFF;
    padding-left: 32px;
    .p1{
      font-size: 18px;
      font-weight: bold;
      line-height: 18px;
      padding-top: 56px;
    }
    .p2{
      font-weight: bold;
      font-size: 50px;
      line-height: 40px;
      margin-top: 24px;
      height: 40px;
      box-sizing: border-box;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      >span{
        font-size: 16px;
        font-weight: 400;
        padding-left: 13px;
      }
    }
    .p3{
      margin-top: 24px;
      font-size: 12px;
      >span{
        display: inline-block;
        margin-right: 34px;
        width: 8px;
        height: 10px;
        background: url("../../../assets/images/project/ss_1.png") no-repeat center center;
        background-size: 100% 100%;
      }
      .xj{
        transform: rotateX(180deg);
      }
    }
    .p4{
      font-size: 16px;
      color: #2A72F3;
      font-weight: bold;
      padding-left: 28px;
      margin-top: 30px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    }
  }
  .right{
    float: right;
    height: auto;
    width: calc(100% - 369px);
    .records{
      margin-top: 2px;
      height: 627px;
      overflow-y: auto;
      width: 100%;
      padding-right: 47px;
      box-sizing: border-box;
      .recordlist{
        padding-top: 0;
      }
    }
  }
}

.cardtitles{
  position: relative;
  .labels{
    width: 120px;
    height: 22px;
    position: absolute;
    border-radius: 2px;
    right: 24px;
    top: 24px;
    z-index: 2;
    >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;
      }
    }
  }
}

.chart2{
  width: 100%;
  padding: 0 0 0 16px;
  height: 285px;
  margin-top: -20px;
}
.cardtitles.i{
  line-height: 44px;
  height: 44px;
  &::after{
    margin-top: 14px;
  }
}
.gzlist{
  padding: 0px 16px 10px;
  margin-top: -06px;
  >div{
    display: inline-block;
    height: 94px;
    width: 33.3%;
    text-align: center;
    font-size: 12px;
    padding-top: 16px;
    >img{
      height: 48px;
    }
    >div{
      line-height: 14px;
    }
  }
}
.el-divider{
  margin: 0 16px;
  color: #EFEFEF;
  width: 320px;
}
.addnew{
  width: 321px;
  height: 40px;
  background: #F4F6F9;
  border-radius: 4px;
  color: #0081FF;
  line-height: 40px;
  margin: auto;
  font-size: 14px;
  cursor: pointer;
  .img{
    float: left;
    width: 16px;
    height: 16px;
    background: url("../../../assets/images/add.png") no-repeat center center;
    display: inline-block;
    margin: 12px 8px 0 114px;
  }
  &:hover{
    background: #0081FF;
    color: #FFFFFF;
    .img{
      background: url("../../../assets/images/project/add_2.png") no-repeat center center;
      background-size: 100%;
    }
  }
}
</style>
