<template>
  <div class="admin-refresh">

    <el-date-picker
      style="display: block; margin: 10px 0 10px 10px; width: 185px;" :clearable="false"
      v-model="search.start_at" value-format="yyyy-MM-dd"
      align="right" type="date" placeholder="选择日期"
      :picker-options="pickerOptions" @change="getData">
    </el-date-picker>

    <el-tabs v-if="teacherType == ''" v-model="search.team" type="card" class="tabs-refresh" @tab-click="getData">
      <!--<el-tab-pane label="总计" name="1,2,3,4,5,6,7,8,9,10"/>-->
      <!--<el-tab-pane v-for="i in 10" :key="i" :label="'T'+i" :name="i.toString()"/>-->
      <el-tab-pane v-for="i in 10" :key="i+(index-1)*10" :label="'T'+(i+(index-1)*10)" :name="(i+(index-1)*10).toString()"/>
    </el-tabs>

    <!--<table class="custom-table" v-loading="loading">
      <thead>
      <tr>
        <th v-for="th in table.th">{{ th }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-if="table.td1.length != 0">
        <td v-for="td in table.td1">{{ td }}</td>
      </tr>
      <tr v-if="table.td2.length != 0">
        <td v-for="td in table.td2">{{ td }}</td>
      </tr>
      <tr v-if="table.td3.length != 0">
        <td v-for="td in table.td3">{{ td }}</td>
      </tr>
      </tbody>
    </table>-->

    <el-table class="team-table" border size="small" :data="list" v-loading="loading">
      <el-table-column label="组别" width="50px" fixed="left">
        <template slot-scope="scope">{{(String(scope.row.squad).indexOf(',') > -1 && scope.row.total) ? '合计' : `T${scope.row.squad}`}}</template>
      </el-table-column>

      <el-table-column label="销售顾问" fixed="left">
        <template slot-scope="scope">{{scope.row.total ? '-' : scope.row.staff_name}}</template>
      </el-table-column>

      <el-table-column label="有效微信沟通/通次">
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row)">{{scope.row.valid_chat_count + ' / ' + scope.row.valid_phone_count}}</span>
        </template>
      </el-table-column>

      <el-table-column v-for="(t, index) in time" :key="index" width="60px">
        <template slot="header" slot-scope="scope">
          <!--<span v-html="t.split('-').join('<br>-')"></span>-->
          {{t.replace(/:00/g, "")}}
        </template>
        <template slot-scope="scope">
          <!--<span class="cell-link" @click="dialogToggle(scope.row)">{{scope.row[`valid_count${index}`]}}</span>-->
          {{scope.row[`valid_count${index}`]}}
        </template>
      </el-table-column>
    </el-table>

    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>

    <hour-dialog :dialog-obj="dialogObj"/>

  </div>
</template>

<script>
  import page from '@framework/page'
  import HourDialog from './hourDialog'
  import {getHourTeamApi} from '@service/api';
  import {TIP_TEAM} from '@util/tipArr';

  function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();    //年
    var month = date.getMonth() + 1;  //月
    var strDate = date.getDate();     //日
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    return currentdate;
  }

  export default {
    name: "index",
    components: {page, HourDialog},
    data() {
      return {
        index: '',
        // teamTotalString: '',
        teamLength: 10,
        time: [],
        table: {
          th: [],
          td: []
        },
        TIP_TEAM: TIP_TEAM,
        loading: true,
        search: {
          team: '1',
          start_at: getNowFormatDate()
          // start_at: new Date()
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        list: [],
        total: 0,
        nowPage: 1,
        limit: 10,
        dialogObj: {
          show: false,
          type: '', // callback, class
        },
        teacherType: '' // 'teacher_leader' // 'teacher' // ''
      }
    },
    watch: {
      $route() {
        this.index = this.$route.meta.index;
        this.search.type = this.$route.meta.type;

        /*var arr = [];
        for (var i = 0; i < this.teamLength; i++) {
          arr.push(i + 1 + (this.index - 1) * 10)
        }
        this.teamTotalString = arr.join(',');*/

        var phoneNum = localStorage.getItem("phoneNum");
        this.teacherType = phoneNum && JSON.parse(phoneNum) && JSON.parse(phoneNum).teacher_type ? JSON.parse(phoneNum).teacher_type : '';
        if (this.teacherType == '') { // 总监
          this.search.team = ((this.index - 1) * 10 + 1).toString();
          this.getData();
        } else if (this.teacherType == 'teacher_leader') { // 组长
          this.search.team = JSON.parse(phoneNum).squad;
          this.getData();
        } else if (this.teacherType == 'teacher') { // 组员
          console.log('组员无权限！')
        }
      },
    },
    mounted() {
      this.index = this.$route.meta.index;
      this.search.type = this.$route.meta.type;

      /*var arr = [];
      for (var i = 0; i < this.teamLength; i++) {
        arr.push(i + 1 + (this.index - 1) * 10)
      }
      this.teamTotalString = arr.join(',');*/

      var phoneNum = localStorage.getItem("phoneNum");
      this.teacherType = phoneNum && JSON.parse(phoneNum) && JSON.parse(phoneNum).teacher_type ? JSON.parse(phoneNum).teacher_type : '';
      if (this.teacherType == '') { // 总监
        this.search.team = ((this.index - 1) * 10 + 1).toString();
        this.getData();
      } else if (this.teacherType == 'teacher_leader') { // 组长
        this.search.team = JSON.parse(phoneNum).squad;
        this.getData();
      } else if (this.teacherType == 'teacher') { // 组员
        console.log('组员无权限！')
      }
    },
    methods: {
      transStaff(row) {
        if (row.total) {
          return '合计'
        } else if (row.staff_name.indexOf(',') > -1) {
          return row.staff_name.split(',').join('<br>')
        } else {
          return row.staff_name
        }
      },
      transRate(child, mother) {
        if (mother) {
          return `${Math.floor(child * 100) / mother}%`
        } else {
          return '-'
        }
      },

      dialogToggle(row) {
        this.dialogObj = {
          alias: row.alias, // 老师微信号
          squad: row.squad, // 组别
          show: true,
          user_id: row.user_id,
          start_at: this.search.start_at,
          staff_name: row.staff_name.indexOf(',') > -1 ? row.staff_name.split(',').join('，') : row.staff_name
          // total: row.total,
          // type: type,
          // teacher_id: row.teacher_id,
        }
      },
      getData() {
        this.loading = true;
        let json = {
          team: this.search.team,
          type: this.search.type,
          page: this.nowPage,
          limit: this.limit,
          start_at: this.search.start_at
        }
        getHourTeamApi(json).then(res => {
          console.log(res)
          if (res && res.time) {
            res.time.push('合计');
            this.time = res.time;
          } else {
            this.time = []
          }
          if (res && res.team_list && res.team_list.page_data) {
            this.list = res.team_list.page_data;
            this.total = res.team_list.total
          } else {
            this.list = [];
            this.total = 0
          }
          this.loading = false;
        })
      },
      onPageChange(val) {
        this.nowPage = val
        this.getData()
      },
      onSizeChange(val) {
        this.limit = val;
        this.nowPage = 1;
        this.getData()
      },
    },
  }
</script>

<style lang="less">
  .team-table {
    .primary-row {
      background: #f5f7fa;
    }
  }
</style>
