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

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

    <el-table class="team-table" border size="small" :data="list" v-loading="loading" :row-class-name="tableRowClassName">
      <el-table-column label="组别" width="50px">
        <template slot-scope="scope">{{scope.row.isTotal ? '合计' : `T${scope.row.squad}`}}</template>
      </el-table-column>

      <!--<el-table-column label="销售顾问">
        <template slot-scope="scope">
          <span v-html="transStaff(scope.row)"></span>
        </template>
      </el-table-column>-->

      <el-table-column v-if="this.search.team != '1,2,3,4,5,6,7,8,9,10'" label="销售顾问">
        <template slot-scope="scope">{{scope.row.isTotal ? '-' : scope.row.staff_name}}</template>
      </el-table-column>

      <el-table-column prop="reach_class_num">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['reach_class_num']" placement="top">
            <span class="table-refresh-header">
            近30天 <i class="el-icon-question"></i><br>到班数
          </span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="reach_course_num">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['reach_course_num']" placement="top">
            <span class="table-refresh-header">
            近30天 <i class="el-icon-question"></i><br>到课数
          </span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="wait_add_friend">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['wait_add_friend']" placement="top">
            <span class="table-refresh-header">
            近7天 <i class="el-icon-question"></i><br>待添加
          </span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="wait_visit_num">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['wait_visit_num']" placement="top">
            <span class="table-refresh-header">
            当日 <i class="el-icon-question"></i><br>待回访
          </span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="over_visit_num">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['over_visit_num']" placement="top">
            <span class="table-refresh-header">
            当日 <i class="el-icon-question"></i><br>已回访
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'callback')">{{scope.row.over_visit_num}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="chat_contact_count">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['chat_contact_count']" placement="top">
            <span class="table-refresh-header">
            当日 <i class="el-icon-question"></i><br>微信沟通
          </span>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column prop="valid_chat_contact_count">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['valid_chat_contact_count']" placement="top">
            <span class="table-refresh-header">
            当日 <i class="el-icon-question"></i><br>微信有效沟通
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'validchat')">{{scope.row.valid_chat_contact_count}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="valid_phone_counts">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['valid_phone_counts']" placement="top">
            <span class="table-refresh-header">
            当日 <i class="el-icon-question"></i><br>有效通次
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'phonerecord')">{{scope.row.valid_phone_counts}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="phone_total_time">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['phone_total_time']" placement="top">
            <span class="table-refresh-header">
            当日 <i class="el-icon-question"></i><br>有效通时
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">{{transTime(scope.row.phone_total_time)}}</template>
      </el-table-column>

      <el-table-column prop="lately_class_num">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['lately_class_num']" placement="top">
            <span class="table-refresh-header">
            未来7日 <i class="el-icon-question"></i><br>开课班级
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'class')">{{scope.row.lately_class_num}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="month_order_num">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['month_order_num']" placement="top">
            <span class="table-refresh-header">
            当月 <i class="el-icon-question"></i><br>订单
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'achievement')">{{scope.row.month_order_num}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="month_order_rate">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['month_order_rate']" placement="top">
            <span class="table-refresh-header">
            当月 <i class="el-icon-question"></i><br>平均转化
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'achievement')">
            {{transRate(scope.row.month_order_num, scope.row.month_trans_user_num)}}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="order_money_count">
        <template slot="header" slot-scope="scope">
          <el-tooltip effect="dark" :content="TIP_TEAM['order_money_count']" placement="top">
            <span class="table-refresh-header">
            当月 <i class="el-icon-question"></i><br>总业绩
          </span>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span class="cell-link" @click="dialogToggle(scope.row, 'achievement')">{{scope.row.order_money_count}}</span>
        </template>
      </el-table-column>
    </el-table>

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

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

  </div>
</template>

<script>
  import page from '@framework/page';
  import TeamDialog from './dialog';
  import {getTeamApi} from '@service/api';
  import {TIP_TEAM} from '@util/tipArr';
  import CommonJs from '@util/common';

  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, TeamDialog},
    data() {
      return {
        isTotal: false,
        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' // ''
      }
    },
    mounted() {
      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.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.isTotal) {
          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 * 1000 / mother) / 10}%`
        } else {
          return '-'
        }
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'primary-row';
        }
        return '';
      },
      transTime(time) {
        return CommonJs.formatSecond(time) || '-'
      },
      dialogToggle(row, type) {
        this.dialogObj = {
          alias: row.alias, // 老师微信号
          squad: (String(row.squad).indexOf(',') > -1 && row.isTotal) ? '' : `${row.squad}`,
          show: true,
          isTotal: row.isTotal,
          type: type,
          user_id: row.user_id,
          teacher_id: row.teacher_id,
          start_at: this.search.start_at,
          staff_name: row.staff_name.indexOf(',') > -1 ? row.staff_name.split(',').join('，') : row.staff_name
        }
      },
      getData() {
        this.loading = true;
        let json = {
          team: this.search.team,
          page: this.nowPage,
          limit: this.limit,
          start_at: this.search.start_at
        }
        getTeamApi(json).then(res => {
          if (Object.keys(res).length && res.team_list && res.team_list.page_data) {
            if (Object.keys(res.team_total).length) {
              res.team_total.isTotal = true; // 方便"合计" 可以这样写，也可以用scope.$index
              res.team_list.page_data.unshift(res.team_total);
            }
            this.list = res.team_list.page_data;
            this.total = res.team_list.total;
            this.loading = false;
          } 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>
