<template>
  <div v-cloak class="group-office-container">
    <!-- <van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack"> -->
      <!-- <template #right>
        <img @click="getlComPremDetil" :src="refreshLogo" />
      </template> -->
    <!-- </van-nav-bar> -->
    <!-- 业绩和人力 -->
    <!-- <van-tabs @click="onClickMain" type="card" class="p0 title">
      <van-tab title="机构业绩排名"></van-tab>
      <van-tab title="机构人力排名"></van-tab>
    </van-tabs> -->
    <!-- 年月日选择 -->
    <van-tabs @click="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
      <van-tab title="实时"></van-tab>
      <van-tab @click="showDatePicker=true" title="日"></van-tab>
      <van-tab title="月"></van-tab>
      <van-tab title="年"></van-tab>
    </van-tabs>
    <div class="p10 pl40 pr40">
      <van-row>
        <van-col span="3">
          <img :src="calendar" />
        </van-col>
        <van-col class="fs14 mp2" span="9"><span v-if="showText">截至</span>{{timeVal}}</van-col>
        <van-col span="3">
          <img :src="point" />
        </van-col>
        <van-col span="9">
          <span class="fs14" @click="showPicker=true">{{sortTypeText}}</span>
        </van-col>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="queryColumns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <!-- 时间选择器 -->
        <!-- 日 -->
        <van-popup v-model="showDatePicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmDate"
            @cancel="showDatePicker = false"
          />
        </van-popup>
        <!-- 月 -->
        <van-popup v-model="showMonthPicker" position="bottom">
          <van-datetime-picker
            v-model="currentMonthDate"
            type="year-month"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="onConfirmDate"
            @cancel="showMonthPicker = false"
          />
        </van-popup>
        <!-- 年 -->
        <van-popup v-model="showYearPicker" position="bottom">
          <van-picker
          v-model="currentYearDate"
            show-toolbar
            :columns="YearColumns"
            @confirm="onConfirmDate"
            @cancel="showYearPicker = false"
          />
        </van-popup>
        <!-- /时间选择器 -->
      </van-row>
    </div>
    <div class="layer-box">
        <div class="layer">
      <table class="fs14" style="table-layout：fixed;padding-left:14.5em;">
        <tr class="title">
          <th class="td-1" style="height: 1.2em;">排名</th>
          <th class="td-2" style="height: 1.2em;width:8.6em">机构</th>
            <th>预收标保</th>
            <th>承保标保</th>
            <th>承保保费</th>
            <th>预收件数</th>
            <th>承保件数</th>
            <th>操作</th>
        </tr>
        <tr>
           <th class="td-1 white" style="width:4.3em">1</th>
          <th class="td-2">合计</th>
         <th>{{ysbbTotal.toFixed(2)}}</th>
          <th>{{bzbfTotol.toFixed(2)}}</th>
          <th>{{cbbfTotal.toFixed(2)}}</th>
          <th>{{ysjsTotal}}</th>
          <th>{{cbjsTotal}}</th>
        </tr>
        <tr v-for="(item,index) in tableData" :key="index">
          <td class="td-1">{{index+1}}</td>
          <td class="td-2">
            <div style="width:10em">{{item.name}}</div>
          </td>
         <td>{{item.ysbb}}</td>
          <td>{{item.bzbf}}</td>
          <td>{{item.cbbf}}</td>
          <td>{{item.ysjs}}</td>
          <td>{{item.cbjs}}</td>
          <td>
            <span @click="toDetail(item.code)" class="red">查看</span>
          </td>
        </tr>
      </table>
    </div>
    </div>
  </div>
</template>

<script>
// import { XTable } from 'vux'
import { branchOfficeApi } from '@/api/ebiz/branchOffice/branchOffice'
import refreshLogo from '@/assets/images/ebiz/refresh.png'
import calendar from '@/assets/images/ebiz/calendar.png'
import point from '@/assets/images/ebiz/point.png'
import { Tabs, Tab } from 'vant'
export default {
  name: 'districtOffice',
  components: {
    // XTable,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  data() {
    return {
      curMainType:"01",
      showText:true,
      YearColumns: ['2020', '2019'],
      minDate: new Date(2019, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentMonthDate: new Date(),
      currentYearDate: new Date(),
      currentDate: new Date(),
      sortType: '1',
      // 总和
       ysbbTotal:0,
        bzbfTotol:0,
      ysjsTotal: 0,
      ysbbTotol: 0,
      cbjsTotal: 0,
      cbbfTotal: 0,
      bzbfTotal: 0,
      tableData: [],
      timeVal: '',
      sortTypeText: '预收标保',
      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '承保标保'],
      showPicker: false,
      // 年月日选择器
      showDatePicker: false,
      showMonthPicker: false,
      showYearPicker: false,
      //
      refreshLogo,
      calendar,
      point,
      active: 0,
      // 当前的机构编码
      curCode: '',
      dateType: 'now',
      dateVal: '',
      curTab: '',
      shitimeVal:""
    }
  },
  methods: {
    formatterYear(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      return val
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    onClickMain(name) {
      console.log(name)
      if (name == 1) {
        this.curMainType = '02'
      } else {
        this.curMainType = '01'
      }
      this.getlComPremDetil()
    },
    onClickRabs(name, title) {
      this.curTab = name
      if (name == 1) {
        this.showDatePicker = true
      } else if (name == 2) {
        this.showMonthPicker = true
      } else if(name == 3) {
        this.showYearPicker = true
      } else {
        // "截至"文字显示出来
        this.showText=true
        // 实时的时候date清空
        this.dateType = 'now'
        this.dateVal = ''
        // 左侧时间实时赋值
        this.timeVal= this.shitimeVal
        // 调接口
         this.getlComPremDetil()
      }
    },
    toDetail(manageCode) {
      this.$router.push({
        path: '/institutionalPerform/personalOffice',
        query: {
          manageCode: manageCode,
           timeVal:this.timeVal,
          showText:this.showText
        },
      })
    },
    //修改月、天的格式，保持两位数显示
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    getCurrentDate() {
      var timeStr = ''
      var curDate = new Date()
      var curMonth = curDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
      var curDay = curDate.getDate() //获取当前日(1-31)

      var curHour = curDate.getHours() //获取当前小时数(0-23)
      var curMinute = curDate.getMinutes() // 获取当前分钟数(0-59)
      var curSec = curDate.getSeconds() //获取当前秒数(0-59)
      if (curHour < 10) {
        if (curMinute < 10) {
          timeStr += ' 0' + curHour + ':0' + curMinute
        } else {
          timeStr += ' 0' + curHour + ':' + curMinute
        }
      } else {
        if (curMinute < 10) {
          timeStr += ' ' + curHour + ':0' + curMinute
        } else {
          timeStr += ' ' + curHour + ':' + curMinute
        }
      }
      // 一直在获取时间
      this.shitimeVal = this.add0(curMonth) + '-' + this.add0(curDay) + timeStr
      // 存页面上值得一个变量
      this.timeVal= this.shitimeVal
    },
    dateFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      return year + '-' + this.add0(month) + '-' + this.add0(day)
    },
    onConfirmDate(value, index) {
         // 点击确定那么文字“截至”就隐藏
      this.showText=false;
      console.log(this.curTab)
      console.log(value)
      if (this.curTab == 1) {
        // now：当前 y:年 m:月 d:日
        // 日
        this.dateType = 'd'
        this.dateVal = this.dateFormat(this.currentDate)
        console.log(this.dateVal)
        // 左侧时间实时赋值
        this.timeVal=this.dateVal
      } else if (this.curTab == 2) {
        // 月
        this.dateType = 'm'
        this.dateVal = this.dateFormat(this.currentMonthDate)
        // 左侧时间实时赋值
        this.timeVal=this.dateVal.substring(0,7)
      } else if (this.curTab == 3) {
        // 年
        this.dateType = 'y'
        this.dateVal = value+'-' + '01' + '-' + '01'
        // 左侧时间实时赋值
        this.timeVal=this.dateVal.substring(0,4)
      }
       this.showDatePicker=false,
       this.showMonthPicker=false,
       this.showYearPicker= false,
       this.getlComPremDetil()
    },
    onConfirm(value, index) {
      this.sortTypeText = value
      switch (value) {
        //  '预收件数', '预收标保', '承保件数', '承保标保', '承保标保
        case '预收件数':
          this.sortType = '1'
          break
        case '预收标保':
          this.sortType = '2'
          break
        case '承保件数':
          this.sortType = '3'
          break
        case '承保标保':
          this.sortType = '4'
          break
        case '承保标保':
          this.sortType = '5'
          break
      }
      this.showPicker = false
      this.getlComPremDetil()
    },
    onBack() {
        this.$router.go(-1);
    },
    //获取列表
    getlComPremDetil() {
      let $this = this
      let data = {
        manageCode: this.$route.query.manageCode,
        manageLv: "07",
        sortType: this.sortType,
        queryType: this.dateType,
        date: this.dateVal,
          //01：保费排行 02：人力排行
        type: this.curMainType,
      }
      // 去除对象里面是空的属性
      for (var key in data) {
        if (data[key] === '') {
          delete data[key]
        }
      }
      branchOfficeApi(data)
        .then((res) => {
          if (res.result == 0) {
            console.log(res.content.list)
            $this.tableData = res.content.list

            $this.ysjsTotal = 0
            $this.ysbbTotol = 0
            $this.cbjsTotal = 0
            $this.cbbfTotal = 0
            $this.bzbfTotal = 0
            $this.ysbbTotal =0
              $this.bzbfTotol=0
            // 业绩排名的 总计计算
            $this.tableData.map(function (val) {
                  $this.bzbfTotol = Number($this.bzbfTotol) + Number(val.ysbb)
               $this.ysbbTotal = Number($this.ysbbTotal) + Number(val.ysbb)
              $this.ysjsTotal = Number($this.ysjsTotal) + Number(val.ysjs)
              $this.ysbbTotol = Number($this.ysbbTotol) + Number(val.ysbb)
              $this.cbjsTotal = Number($this.cbjsTotal) + Number(val.cbjs)
              $this.cbbfTotal = Number($this.cbbfTotal) + Number(val.cbbf)
              $this.bzbfTotal = Number($this.bzbfTotal) + Number(val.bzbf)
            })
            console.log($this.tableData)
          }
        })
        .catch((err) => {})
    },
  },
   created() {
    setTimeout(() => {
      // eslint-disable-next-line no-undef
      EWebBridge.webCallAppInJs('webview_right_button', {
        btns: [
          {
            img: this.$assetsUrl + 'images/ebiz/refresh.png',
            route: {
              flag: '',
              extra: {
                url: location.origin + '/#/institutionalPerform/BranchOffice',
              },
            },
          },
        ],
      })
    }, 1000)
  },
  mounted() {
    setInterval(this.getCurrentDate(), 1000 * 60)
 this.timeVal=this.$route.query.timeVal||""
 this.showText=this.$route.query.showText
    this.getlComPremDetil()
  },
}
</script>
<style lang="scss">
.group-office-container {
  .van-tabs__nav--card .van-tab.van-tab--active {
    color: red;
    background-color: #fff;
  }
  .van-tabs__nav--card .van-tab {
    color: #232020;
    background-color: #e6e6e6;
    border-right: 1px solid #8e8d8d;
  }
  .van-nav-bar .van-icon,
  .van-nav-bar__text {
    color: #232020;
  }
  .slide-box {
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  table.gridtable {
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }
  table .title th {
    color: #fff;
    padding: 5px 10px;

    white-space: nowrap;
    border-width: 1px;
    border-color: #666666;
    background-color: #f56123;
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  table td {
    text-align: center;
    border-width: 1px;
    padding: 8px;
    // border-style: solid;
    // border-color: #666666;
    background-color: #ffffff;
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  table {
    border: 0;
  }
  .title .van-tabs__nav--card {
    margin: 0;
    border: 1px solid #bdbdbd;
    border-left: none;
    border-right: none;
  }
  .title .van-tabs__nav--card .van-tab {
    background-color: transparent;
  }
  // 固定表头
   td,th{
            /* color: #333;
            font-size: 14px;
            border-right: 1px solid #333;
            line-height: 30px; */
            /* box-sizing: border-box; */
            background: #fff;
        }
        .layer-box{
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .layer{
            width: 100%;
            overflow: hidden;
            overflow-x: scroll;
        }
        .td-1{
            position: absolute;
            left: 0;
            z-index: 2;
            width: 3em;
        }
         .td-2{
           position: absolute;
            left: 4.6em;
            z-index: 2;
            width: 10em;
            padding: 0;
            height: 2.3em;
        }
}
</style>
