<template>
  <div class="public_container" :style="{paddingTop:marginTop+'px'}">
    <div class="head" style="margin: 10px;border-radius: 5px;">
      <van-swipe :autoplay="3000" style="width: 100%;">
        <van-swipe-item v-for="(item, index) in activity" :key="index" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend(item)">
          <!-- <img :src="config.assetsUrl + item.img + '?v=' + thisGetTime" /> -->
          <img :src="item.img">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div style="margin: 10px;border-radius: 5px;">
      <van-notice-bar
        :left-icon="png8"
        :text='getCodeValue'
      />
    </div>

    <div class="top" style="display:flex;justify-content: space-between;margin: 10px;background: #fff;border-radius: 5px;align-items: center;padding: 15px;">
      <div class="menu" v-for="(item, ind) in homePageIcon" :key="ind" @click="goDetail(item)">
        <div class="menuImg" style="width:100%;display: flex;justify-content: center;margin-bottom: 5px;">
          <img :src="item.img">
        </div>
        <span class="menuName">{{ item.title }}</span>
      </div>
    </div>

    <div style="margin: 10px;background: #fff;border-radius: 5px;padding: 15px;">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <span style="display:flex;align-items: center;">
          <img src="@/assets/YB_APP/images/1.png">
          <span style="margin-left: 10px;font-size: 16px;font-weight: bold;">个人保费排行榜</span>
        </span>
        <span @click="clickCalendar" style="color: #2a409d;border:lpx solid #eee;padding: 6px 12px;border-radius: 15px;background: #f4f6ff;cursor: pointer;font-weight: bold;">
          {{calendarValue}}
        </span>
        <!-- <van-calendar v-model:show="calendarShow" @confirm="calendarOnConfirm" :min-date="minDate"/> -->
      </div>
      
      <div style="margin:15px 0px;">
        <span @click="changePersonalType('1')" v-if="activePersonalType == '1'" style="padding: 8px;border-radius: 5px;background: #f6f6f6;font-weight: bold;cursor: pointer;">期交保费</span>
        <span @click="changePersonalType('1')" v-if="activePersonalType == '2'" style="padding: 8px;border-radius: 5px;color: #8e8e8e;cursor: pointer;">期交保费</span>  
        <span @click="changePersonalType('2')" v-if="activePersonalType == '2'" style="padding: 8px;border-radius: 5px;background: #f6f6f6;margin-left: 10px;font-weight: bold;cursor: pointer;">总保费</span>
        <span @click="changePersonalType('2')" v-if="activePersonalType == '1'" style="padding: 8px;border-radius: 5px;color: #8e8e8e;margin-left: 10px;cursor: pointer;">总保费</span>  
      </div>

      <div v-if="activePersonalType == '1' && ebizPremRankGMList.length != 0">
        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #ffc71f;color: #fff;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankGMList[0].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankGMList[0].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankGMList0" ref="ebizPremRankGMList0"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankGMList[0].prem <= 5, 'colorTwo': ebizPremRankGMList[0].prem > 5, 'colorOne': ebizPremRankGMList[0].prem >= 10 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankGMList[0].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #c0d4f4;color: #fff;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankGMList[1].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankGMList[1].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankGMList1" ref="ebizPremRankGMList1"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankGMList[1].prem <= 5, 'colorTwo': ebizPremRankGMList[1].prem > 5, 'colorOne': ebizPremRankGMList[1].prem >= 10 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankGMList[1].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #c9b394;color: #fff;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankGMList[2].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankGMList[2].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankGMList2" ref="ebizPremRankGMList2"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankGMList[2].prem <= 5, 'colorTwo': ebizPremRankGMList[2].prem > 5, 'colorOne': ebizPremRankGMList[2].prem >= 10 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankGMList[2].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankGMList[3].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankGMList[3].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankGMList3" ref="ebizPremRankGMList3"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankGMList[3].prem <= 5, 'colorTwo': ebizPremRankGMList[3].prem > 5, 'colorOne': ebizPremRankGMList[3].prem >= 10 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankGMList[3].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="font-size:12px;width: 100px;">
            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankGMList[4].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankGMList[4].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankGMList4" ref="ebizPremRankGMList4"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankGMList[4].prem <= 5, 'colorTwo': ebizPremRankGMList[4].prem > 5, 'colorOne': ebizPremRankGMList[4].prem >= 10 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankGMList[4].prem}}万</div>
        </div>
      </div>

      <div v-if="activePersonalType == '2' && ebizPremRankQJList.length != 0">
        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #ffc71f;color: #fff;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankQJList[0].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankQJList[0].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankQJList0" ref="ebizPremRankQJList0"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankQJList[0].prem <= 5, 'colorTwo': ebizPremRankQJList[0].prem > 5, 'colorOne': ebizPremRankQJList[0].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[0].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #c0d4f4;color: #fff;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankQJList[1].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankQJList[1].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankQJList1"  ref="ebizPremRankQJList1"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankQJList[1].prem <= 5, 'colorTwo': ebizPremRankQJList[1].prem > 5, 'colorOne': ebizPremRankQJList[2].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[1].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #c9b394;color: #fff;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankQJList[2].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankQJList[2].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankQJList2"  ref="ebizPremRankQJList2"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankQJList[2].prem <= 5, 'colorTwo': ebizPremRankQJList[2].prem > 5, 'colorOne': ebizPremRankQJList[2].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[2].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="width: 100px;">
            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankQJList[3].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankQJList[3].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankQJList3"  ref="ebizPremRankQJList3"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankQJList[3].prem <= 5, 'colorTwo': ebizPremRankQJList[3].prem > 5, 'colorOne': ebizPremRankQJList[3].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[3].prem}}万</div>
        </div>

        <div style="display: flex;align-items: center;font-size:12px;">
          <div style="font-size:12px;width: 100px;">
            <span style="background: #f6f6f6;color: #959595;padding: 3px 8px;border-radius: 10px;">{{ebizPremRankQJList[4].manageCom3.substring(0,2)}}</span>
            <span style="margin-left:8px;font-weight: bold;color: #333;">{{ebizPremRankQJList[4].agentName}}</span>
          </div>
          <div style="width:calc(100% - 150px);
              margin: 10px 0px;
              display: flex;
              background:#f4f6ff;
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
              border-top-right-radius: 8px;
              border-bottom-right-radius: 8px;">
            <div class="ebizPremRankQJList4"  ref="ebizPremRankQJList4"></div>       
          </div>
          <div v-bind:class="{ 'colorThree': ebizPremRankQJList[4].prem <= 5, 'colorTwo': ebizPremRankQJList[4].prem > 5, 'colorOne': ebizPremRankQJList[4].prem >= 20 }" style="width: 60px;text-align: right;font-weight: bold;">{{ebizPremRankQJList[4].prem}}万</div>
        </div>
      </div>
    </div>

    <div style="margin: 10px;background: #fff;border-radius: 5px;padding: 15px;margin-bottom: 20px;">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <span style="display:flex;align-items: center;">
          <img src="@/assets/YB_APP/images/6.png">
          <span style="margin-left: 10px;font-size: 16px;font-weight: bold;">实时出单榜</span>
        </span>
        <span style="color: #959595;">
          数据截止时间 2022-09-19 17:30
        </span>
      </div>
      <div style="margin-top: 15px;border-radius: 10px;overflow: hidden;width: 100%;">
        <table border="1" class="issueTable" style="width:100%;">
          <tr style="background:#4d6cc4;width: 100%;">
            <th style="width: 13%;">时间</th>
            <th style="width: 13%;">分公司</th>
            <th style="width: 13%;">机构</th>
            <th style="width: 18%;">营业部</th>
            <th style="width: 13%;">姓名</th>
            <th style="width: 17%;">产品名称</th>
            <th style="width: 13%;">保费</th>
          </tr>
          <tbody>
            <tr v-for="item in tableData">
              <td>{{item.acceptTime}}</td>
              <td>{{item.companyName}}</td>
              <td>{{item.orgName}}</td>
              <td>{{item.deptName}}</td>
              <td>{{item.agentName}}</td>
              <td>{{item.productName}}</td>
              <td v-bind:class="{ 'colorThree': item.prem <= 5, 'colorTwo': item.prem > 5, 'colorOne': item.prem >= 20 }" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.prem}}万</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { homeConfigYB, getPremRankList, timelyContYB } from '@/api/YB_APP/index'
import { Swipe, SwipeItem, NoticeBar, Icon } from 'vant'
import config from '@/config'
import png8 from '@/assets/YB_APP/images/8.png';
export default {
  name: 'Home',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    // [Calendar.name]: Calendar,
  },
  data() {
    return {
      config,
      marginTop:'80',
      getCodeValue:'',
      png8,
      activity: [],
      homePageIcon:[],
      ebizPremRankGMList:[],
      ebizPremRankQJList:[],
      tableData:[],
      activePersonalType:'1',
      calendarShow:false,
      minDate: new Date(2010, 0, 1),
      calendarValue:'9月27日',
      colorOne:false,
      colorTwo:false,
      colorThree:false,
      thisValue:'12.9',
      clickFlag:false,
    }
  },
  mounted(){
    this.getHomeConfigYB()
    this.getPremRankList()
    this.getTimelyContYB()
    
    this.setMarginTop()
    if(this.thisValue >= 10){
      this.colorOne = true
    }
    else if(this.thisValue >= 5 && this.thisValue < 10){
      this.colorTwo = true
    }
    else if(this.thisValue < 5){
      this.colorThree = true
    }
  },
  methods:{
    setMarginTop(){
      EWebBridge.webCallAppInJs("top_bar_height").then(data => {
        console.log(data,'top_bar_height')
        if(data){
          // 获取高度成功
          let height = data.height
          // 设置高度
          this.marginTop = height
        }
    })
    },
    getHomeConfigYB(){
      let params = {

      }
      homeConfigYB(params).then(res=>{
        if(res.result == 0){
          this.activity = res.content.activity
          if(res.content.getCodeValue.length!=0){
            res.content.getCodeValue.forEach(item=>{
              this.getCodeValue += item + '         '
            })
          }
          this.homePageIcon = res.content.icon.homePageIcon
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    getPremRankList(){
      let params = {}
      getPremRankList(params).then(res=>{
        if(res.result == 0){
          this.ebizPremRankGMList = res.content.ebizPremRankGMList
          this.ebizPremRankQJList = res.content.ebizPremRankQJList
          this.$nextTick(() => {
            this.setAnimation()
          })
          
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    getTimelyContYB(){
      let params = {}
      timelyContYB(params).then(res=>{
        if(res.result == 0){
          this.tableData = res.content
        }else{
          this.$toast(res.resultMessage)
        }
      })
    },
    changePersonalType(type){
      this.activePersonalType = type
      this.$nextTick(() => {
        this.setAnimation()
      })
    },
    calendarOnConfirm(value){
      this.calendarShow = false
      this.calendarValue = `${value.getMonth() + 1}月${value.getDate()}日`
    },
    clickCalendar(){
      this.calendarShow = true
    },
    setAnimation(){
      if(this.activePersonalType == 1){
        this.ebizPremRankGMList.forEach((item,index)=>{
          let ruleTrue1 = ` @keyframes changeWidth`+[index]+` { 0% {width: 0px;} 100% {width: `+item.prem/this.ebizPremRankGMList[0].prem*170+`px;} }`
          let sheet1 = document.styleSheets[0]
          sheet1.insertRule(ruleTrue1, 0)
          this.$refs['ebizPremRankGMList'+index].style.width = parseInt(item.prem/this.ebizPremRankGMList[0].prem*170)+'px'
          this.$refs['ebizPremRankGMList'+index].style.animation = "changeWidth"+index+"  2s  forwards"
        })
      }
      
      if(this.activePersonalType == 2){
        this.ebizPremRankQJList.forEach((item,index)=>{
          let ruleTrue2 = ` @keyframes changeTotalWidth`+[index]+` { 0% {width: 0px;} 100% {width: `+item.prem/this.ebizPremRankQJList[0].prem*170+`px;} }`
          let sheet2 = document.styleSheets[0]
          sheet2.insertRule(ruleTrue2, 0)
          this.$refs['ebizPremRankQJList'+index].style.width = parseInt(item.prem/this.ebizPremRankQJList[0].prem*170)+'px'
          this.$refs['ebizPremRankQJList'+index].style.animation = "changeTotalWidth"+index+"  2s  forwards"
        })
      }
    },
    goDetail(data){
      console.log(data)
      // if(data.route != null){
      //   window.location.href = 'http://www.baidu.com'
      // }else{
      //   this.$toast('暂未开放')
      // }
      if(data.title == '业绩查询'){
        this.$jump({
          flag: 'h5',
          extra: {
            url: location.origin + '/#/YB_APP/performanceQuery',
          },
          routerInfo: {
            path: '/YB_APP/performanceQuery',
          },
        })
      }
    },
    touchstart(){
      this.clickFlag = true
    },
    touchmove(){
      this.clickFlag = false
    },
    touchend(data){
      if(this.clickFlag){
        window.location.href = JSON.parse(data.route).extra.url
      }else{

      }
    },
    swiperJump(data){
      if(JSON.parse(data.route).extra.url){
        window.location.href = JSON.parse(data.route).extra.url
      }
    }
  },
}
</script>
<style lang="scss" scoped>
  .public_container{
    font-size: 12px;
    height: 100vh;
    width: 100vw;
    background-image: url("../../assets/YB_APP/images/2.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .head {
    position: relative;
    box-shadow: 0px 5px 8px 0px #7a6fc1;
    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
    /deep/ .van-swipe-item{
      height: auto;
    }
  }
  /deep/ .van-notice-bar{
    border-radius: 5px;
  }
  .menuImg{
    /deep/ img{
      width: 30px;
      height: 30px;
    }
  }
  .ebizPremRankGMList0,.ebizPremRankGMList1,.ebizPremRankGMList2,.ebizPremRankGMList3,.ebizPremRankGMList4,.ebizPremRankQJList0,.ebizPremRankQJList1,.ebizPremRankQJList2,.ebizPremRankQJList3,.ebizPremRankQJList4{
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 14px;
    background-image: linear-gradient(-90deg, #abbcff, #768bfe);
    transition-timing-function: ease-out;
  }

  th{
    height: 45px;
    color: #fff;
  }

  table tbody tr:nth-child(odd){
    background: #fff;
  }
  table tbody tr:nth-child(even){
    background: #f9faff;
  }
  .issueTable{
    border: 1px solid #ebedff;
    border-collapse:collapse;
  }
  td{
    text-align: center;
    padding: 5px 0px;
    line-height: 25px;
    color: #7183b3;
    border: 1px solid #ebedff;
    border-collapse:collapse;
  }
  .colorThree{
    color: #333;
  }
  .colorTwo{
    color: #e1801d;
  }
  .colorOne{
    color: #e51f14;
  }
  /deep/ .van-notice-bar{
    background: linear-gradient(#f4f6ff,#fff);
    color: #333;
    letter-spacing: 1px;
  }
  /deep/ .van-icon__image{
    width: 100%;
  }
  /deep/ .van-notice-bar__left-icon{
    width: 50px;
  }
  /deep/ .van-notice-bar__wrap{
    margin-left: 10px;
  }
</style>
