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

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

    <el-tabs 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">{{(String(scope.row.squad).indexOf(',') > -1 && scope.row.total) ? '合计' : `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.total ? '-' : 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">
          <!--TODO-->
          <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>
      </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_trans_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';

  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 {
        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
        }
      }
    },
    mounted() {
      this.getData();
    },
    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 '-'
        }
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 0) {
          return 'primary-row';
        }
        return '';
      },

      dialogToggle(row, type) {
        this.dialogObj = {
          alias: row.alias, // 老师微信号
          squad: (String(row.squad).indexOf(',') > -1 && row.total) ? '' : `${row.squad}`,
          show: true,
          total: row.total,
          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
        }
        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.total = 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>
