<template>
  <div>
    <div
      class="border-gb mt20 header mh-auto van-cell:not(:last-child)::after h50 flex align-items-c"
    >
      <van-button
        round
        @click="goDetail(order)"
        size="small"
        class="ml15"
        type="danger"
        v-no-more-click="1000"
      >当月</van-button>
      <div @click="timePopup" class="fs12 red ml15">
        {{titleTime}}
        <img src="@/assets/images/u79.png" alt class="absolute mt2 ml5" />
      </div>
      <van-popup v-model="dateShow" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="handleCancel"
          @confirm="handleEndDateConfirm"
        />
      </van-popup>
    </div>
    <div class="c-gray-base fs13 ml25 mt10" v-if="mask=='1'">
      所在机构：
      <span v-if="buName!==undefined">{{buName}}></span>
      <span class="red">{{Name}}</span>
    </div>
    <div class="flex align-items-c h86 content1 bg-white mt10">
      <div
        class="w40 h60 ml15 text-center relative header-box"
        v-for="(item, index) in headerList"
        :key="index"
      >
        <div @click="(InfoDetails(index))" class="w40 h60">
          <div style="width:40px; height:42px;border-radius: 20px; margin-top: 2px;margin-left: 2px;" v-if="item.agentHeadUrl!==null">
            <img  style="width:40px; height:40px;border-radius: 20px" :src="item.agentHeadUrl | urlFormat" alt />
          </div>
          <div class="h40 w40" v-else>
            <img class="h40 w40"  src="@/assets/images/u188.png" alt />
          </div>
           <div class="absolute  fs12 white captain" v-if="String(item.agentName)==String(Name).split('组')[0] ||String(item.agentName)==String(unitName).split('组')[0]">团队长</div>
          <div :class="[item.isShowImg?'active':'']"></div>
          <div class="fs13">{{item.agentName}}</div>
        </div>
      </div>
    </div>
    <div class="mt20">
      <div class="h50 bg-white content mh-auto fs13 fw500">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>个人承保期交（元）</div>
          <div class="red">{{cbbb}}</div>
        </div>
      </div>
      <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>寿险承保件数</div>
          <div class="red">{{cbjs}}</div>
        </div>
      </div>
      <!-- <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>承保FYC（元）</div>
          <div class="red">{{cfyc}}</div>
        </div>
      </div>-->
      <!-- <div class="h50 bg-white content mh-auto fs13 fw500 mt5">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>综合开拓承保保费（元）</div>
          <div class="red">{{zcbf}}</div>
        </div>
      </div>-->
      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>本月预收期交（元）</div>
          <div class="red">{{ysbb}}</div>
        </div>
      </div>
      <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>本月预收件数</div>
          <div class="red">{{ysjs}}</div>
        </div>
      </div>
      <!-- <div class="h50 bg-white content mh-auto fs13 fw500 mt5" v-if="isShow">
        <div class="pl10 pr10 pt15 flex justify-content-s align-items-c">
          <div>本月预收FYC（元）</div>
          <div class="red">{{yfyc}}</div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import { getBaseAgentInfo, getPerformanceHeader, getPerformanceDetail, getHeader,getCode } from '@/api/ebiz/performance/performance'
import utils from '@/assets/js/utils/date-utils'
import { Popup, DatetimePicker } from 'vant'
import config from '@/config'
export default {
  name: 'performance',
  components: {
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
  data() {
    return {
      currentDate: new Date(),
      dateShow: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(),
      titleTime: '',
      date1: {
        date: '2020-07-01',
      },
      agentGrade: '',
      isShow: true,
      obj: {},
      agentCode: '',
      cbbb: '',
      cbjs: '',
      ysjs: '',
      cfyc: '0.00',
      zcbf: '0.00',
      ysbb: '0.00',
      yfyc: '0.00',
      timeCode: '',
      mask: '',
      headerList: [],
      unitName: '',
      Name: '',
      code: '',
      isShowImg: true,
      buName:''
    }
  },
  created() {
    // console.log('=======' + this.$route.params.parmas)
    console.log(JSON.parse(window.localStorage.getItem('parmas2')))
    if (window.localStorage.getItem('parmas') !== null) {
      this.mask = JSON.parse(window.localStorage.getItem('parmas')).mask
      ;(this.titleTime = JSON.parse(window.localStorage.getItem('parmas')).date.slice(0, 7)),
        (this.dateTime = JSON.parse(window.localStorage.getItem('parmas')).date),
        (this.unitName = JSON.parse(window.localStorage.getItem('parmas')).unitName),
        (this.Name = JSON.parse(window.localStorage.getItem('parmas')).Name),
        (this.code = JSON.parse(window.localStorage.getItem('parmas')).code),
        this.buName=JSON.parse(window.localStorage.getItem('parmas')).buName
    }else if (window.localStorage.getItem('parmas2') !== null) {
      this.mask = JSON.parse(window.localStorage.getItem('parmas2')).mask
      ;(this.titleTime = JSON.parse(window.localStorage.getItem('parmas2')).date.slice(0, 7)),
        (this.dateTime = JSON.parse(window.localStorage.getItem('parmas2')).date),
        (this.unitName = JSON.parse(window.localStorage.getItem('parmas2')).unitName),
        (this.Name = JSON.parse(window.localStorage.getItem('parmas2')).Name),
        (this.code = JSON.parse(window.localStorage.getItem('parmas2')).code),
        this.buName=JSON.parse(window.localStorage.getItem('parmas2')).buName,
        this.agentCode=JSON.parse(window.localStorage.getItem('parmas2')).agentCode
    }else if (window.localStorage.getItem('parmas1') !== null) {
      this.mask = JSON.parse(window.localStorage.getItem('parmas1')).mask
      ;(this.titleTime = JSON.parse(window.localStorage.getItem('parmas1')).date.slice(0, 7)),
        (this.dateTime = JSON.parse(window.localStorage.getItem('parmas1')).date),
        (this.unitName = JSON.parse(window.localStorage.getItem('parmas1')).unitName),
        (this.code = JSON.parse(window.localStorage.getItem('parmas1')).code),
        this.buName=JSON.parse(window.localStorage.getItem('parmas1')).buName
        // window.localStorage.removeItem('parmas1');
    }
   
    // this.performanceData()
    if (JSON.parse(window.localStorage.getItem('obj')).agentGrade.slice(0, 2) == 'A2') {
      this.getPerformanceHeader1()
    }else{
        this.getCode1()
    }
    if(this.mask=="1"){
      // this.getPerformanceDetailC()
    }
    this.formatDate1()
    this.getBaseAgentInfo1()
    if (this.code !== '') {
      // this.getHeader1()
    }
  },
  mounted() {
    
  },
  methods: {  
    timePopup() {
      this.dateShow = true
    },
    handleCancel() {
      this.dateShow = false
    },
    //开始时间
    handleEndDateConfirm(e) {
      this.dateShow = false
      this.titleTime = utils.formatDate(e, 'yyyy-MM')
      this.timeCode = utils.formatDate(e, 'yyyy-MM-dd')
      this.obj.date = this.timeCode
      this.getPerformanceDetailC()
      if (String(this.titleTime) === String(utils.formatDate(new Date(), 'yyyy-MM'))) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    formatDate1() {
      // console.log(utils.formatDate("2020-1-1"))
      if (window.localStorage.getItem('parmas2') !== null) {
        this.titleTime = JSON.parse(window.localStorage.getItem('parmas2')).date.slice(0, 7),
        this.timeCode = JSON.parse(window.localStorage.getItem('parmas2')).date
      }
       if(window.localStorage.getItem('parmas1') !== null){
         this.titleTime = JSON.parse(window.localStorage.getItem('parmas1')).date.slice(0, 7),
        this.timeCode = JSON.parse(window.localStorage.getItem('parmas1')).date
      }
      this.obj.date = this.timeCode
      // console.log(this.titleTime)
    },
    //获取代理人关系
    getBaseAgentInfo1() {
      let date = {}
      getBaseAgentInfo(date).then((res) => {
        // console.log(res)
        if (res.result == 0) {
          ;(this.agentGrade = res.agentGrade),
            (this.unitName = res.unitName),
            (this.saleArea = res.saleArea)
            if(window.localStorage.getItem('parmas2') == null){
                (this.agentCode = res.jobNo)
            }else{
              this.agentCode=JSON.parse(window.localStorage.getItem('parmas2')).agentCode
            }
            
            (this.obj.agentGrade = this.agentGrade),
            (this.obj.agentCode = this.agentCode),
            (this.branchCode = res.branchCode),
            (this.deptCode = res.deptCode),
            (this.areaCode = res.areaCode)
          if (this.agentGrade.slice(0, 2) == 'A2') {
            ;(this.obj.unitName = this.unitName), (this.obj.code = this.branchCode)
          } else if (this.agentGrade.slice(0, 2) == 'A3') {
            ;(this.obj.unitName = this.saleArea), (this.obj.code = this.deptCode)
          } else if (this.agentGrade.slice(0, 2) == 'A4') {
          }
          if (this.agentGrade == 'A101') {
            this.mask = 1
          }
          this.getPerformanceDetailC()
        }
      })
    },
    //获取代理人下级头像
    getPerformanceHeader1() {
      let date = {}
      getPerformanceHeader(date).then((res) => {
        // console.log( res)
        if (res.result == 0) {
          for (let i = 0; i < res.content.length; i++) {
            res.content[i].isShowImg = true
            // res.content[i].agentHeadUrl=encodeURIComponent(config.imgDomain + '/returnDirectStream?imgPath=' +res.content[i].imgUrl)
          }
          this.headerList = res.content
          console.log(this.headerList)
        }
      })
    },
    getHeader1() {
      console.log(this.code)
      let code = {
        agentgroup: this.code,
      }
      getHeader(code).then((res) => {
        console.log(res)
        if (res.result == 0) {
          for (let i = 0; i < res.content.length; i++) {
            res.content[i].isShowImg = true
            res.content[0].isShowImg = false
          }
          this.headerList = res.content
        }
      })
    },
    //获取代理人相关信息
    getPerformanceDetailC() {
      // console.log(this.agentCode)
      let code = {
        date: this.timeCode,
        agentCode: this.agentCode,
      }
      getPerformanceDetail(code).then((res) => {
        console.log(res)
        if (res.result == 0) {
          ;(this.cbbb = res.content.list[0].cbbb),
            (this.cbjs = res.content.list[0].cbjs),
            (this.ysjs = res.content.list[0].ysjs),
            (this.ysbb = res.content.list[0].ysbb),(this.agentCode = res.content.list[0].code)
        }
      })
    },
    getCode1(){
      console.log("=========="+this.Name)
      let code={
        groupCode:this.Name
      }
      getCode(code).then(res=>{
        console.log(res)
          if (res.result == 0) {
            this.code=res.content.groupCode
          }
          console.log(this.code)
         this.getHeader1()
      })
    },
    //点击头像
    InfoDetails(item) {
      console.log(item)
      for (let i = 0; i < this.headerList.length; i++) {
        this.headerList[i].isShowImg = true
      }
      this.headerList[item].isShowImg = false

      let code = {
        date: this.timeCode,
        agentCode: this.headerList[item].agentCode,
      }
      getPerformanceDetail(code).then((res) => {
        console.log(res)
        if (res.result == 0) {
          ;(this.cbbb = res.content.list[0].cbbb),
            (this.cbjs = res.content.list[0].cbjs),
            (this.ysjs = res.content.list[0].ysjs),
            (this.ysbb = res.content.list[0].ysbb),
            (this.agentCode = res.content.list[0].code)
        }
      })
    },
  },
   filters: {
    urlFormat(url) {
      return (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${url}`).replace(/\+/g, '%2B')
    }
  },
  destroyed: function () {
           console.log("我已经离开了！");
          let parmas1={}
          parmas1.date=this.dateTime
          parmas1.unitName=this.unitName
          parmas1.Name=this.Name
          parmas1.code=this.code
          if(this.mask=="1"){
            // localStorage.parmas1 = JSON.stringify(parmas1)
          }else{
            window.localStorage.removeItem('parmas1');
          }
            
            window.localStorage.removeItem('parmas2');
 },
}
</script>
<style scoped>
.header {
  width: 92%;
}
.content {
  width: 86%;
}
.footer {
  width: 100%;
  line-height: 40px;
}
.content1 {
  width: 100%;
  overflow-x: scroll;
}
.active {
  width: 40px !important;
  height: 40px !important;
  z-index: 100;
  background: #ccc;
  opacity: 0.5;
  top: 0px;
  border-radius: 20px;
  position: absolute;
}
.captain{
    z-index: 2000;
    text-align: center;
    width:40px;
    margin-top:-14px;
    margin-left:2px;
    background:red;
}
</style>