<template>
  <el-dialog :title="title" append-to-body :visible.sync="show" width="960px">
    <div v-loading="loading">

      <div></div>

      <!--回访 开始-->
      <el-table v-if="dialogObj.type == 'callback'" :data="list" border size="small">
        <el-table-column label="销售顾问" prop="staff_name"></el-table-column>
        <el-table-column label="老师名" prop="teacher_name"></el-table-column>
        <el-table-column label="UID" prop="user_id"></el-table-column>
        <el-table-column label="客户微信昵称" prop="nickname"></el-table-column>
        <el-table-column label="电话号码">
          <template slot-scope="scope">{{scope.row.mobile || '-'}}</template>
        </el-table-column>
        <el-table-column label="意向度">
          <template slot-scope="scope">{{scope.row.intention || '-'}}</template>
        </el-table-column>
        <el-table-column label="最近备注时间">
          <template slot-scope="scope">
            <template v-if="scope.row.remark_time && String(scope.row.remark_time).indexOf(' ') > -1">
              <div>{{String(scope.row.remark_time).split(' ')[0]}}</div>
              <div>{{String(scope.row.remark_time).split(' ')[1]}}</div>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column label="下次回访时间">
          <template slot-scope="scope">{{scope.row.next_visit_at || '-'}}</template>
        </el-table-column>
      </el-table>
      <!--回访 结束-->

      <!--有效沟通 开始-->
      <el-table v-if="dialogObj.type == 'validchat'" :data="list" border size="small">
        <el-table-column label="销售顾问" prop="staff_name"></el-table-column>
        <el-table-column label="老师名" prop="teacher_name"></el-table-column>
        <el-table-column label="UID" prop="user_id"></el-table-column>
        <el-table-column label="客户微信昵称" prop="nick"></el-table-column>
        <el-table-column label="电话号码">
          <template slot-scope="scope">{{scope.row.mobile || '-'}}</template>
        </el-table-column>
        <el-table-column label="意向度">
          <template slot-scope="scope">{{scope.row.intention || '-'}}</template>
        </el-table-column>
        <el-table-column label="最近备注时间">
          <template slot-scope="scope">
            <template v-if="scope.row.remark_time && String(scope.row.remark_time).indexOf(' ') > -1">
              <div>{{String(scope.row.remark_time).split(' ')[0]}}</div>
              <div>{{String(scope.row.remark_time).split(' ')[1]}}</div>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column label="下次回访时间">
          <template slot-scope="scope">{{scope.row.next_visit_at || '-'}}</template>
        </el-table-column>
      </el-table>
      <!--有效沟通 结束-->

      <!--有效通次 开始-->
      <el-table v-if="dialogObj.type == 'phonerecord'" :data="list" border size="small">
        <el-table-column label="销售顾问" prop="staff_name"></el-table-column>
        <el-table-column label="老师名" prop="teacher_name"></el-table-column>
        <el-table-column label="UID" prop="user_id"></el-table-column>
        <el-table-column label="客户名">
          <template slot-scope="scope">{{scope.row.contact_name || '-'}}</template>
        </el-table-column>
        <el-table-column label="电话号码">
          <template slot-scope="scope">{{scope.row.contact_phone || '-'}}</template>
        </el-table-column>
        <el-table-column label="意向度">
          <template slot-scope="scope">{{scope.row.intention || '-'}}</template>
        </el-table-column>
        <el-table-column label="最近备注时间">
          <template slot-scope="scope">
            <template v-if="scope.row.remark_time && String(scope.row.remark_time).indexOf(' ') > -1">
              <div>{{String(scope.row.remark_time).split(' ')[0]}}</div>
              <div>{{String(scope.row.remark_time).split(' ')[1]}}</div>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column label="下次回访时间">
          <template slot-scope="scope">{{scope.row.next_visit_at || '-'}}</template>
        </el-table-column>
      </el-table>
      <!--有效通次 结束-->

      <!--开课班级 开始-->
      <el-table v-if="dialogObj.type == 'class'" :data="list" border size="small">
        <el-table-column label="销售顾问" prop="staff_name"></el-table-column>
        <el-table-column label="老师名" prop="teacher_name"></el-table-column>
        <el-table-column label="期数名称" prop="user_id"></el-table-column>
        <el-table-column label="班级名称">
          <template slot-scope="scope">{{scope.row.contact_name || '-'}}</template>
        </el-table-column>
        <el-table-column label="开课时间">
          <template slot-scope="scope">{{scope.row.contact_phone || '-'}}</template>
        </el-table-column>
        <el-table-column label="进班人数">
          <template slot-scope="scope">{{scope.row.intention || '-'}}</template>
        </el-table-column>
      </el-table>
      <!--开课班级 结束-->

      <!--业绩 开始-->
      <el-table v-if="dialogObj.type == 'achievement'" :data="list" border size="small">
        <el-table-column label="组别" width="60px">
          <template slot-scope="scope">{{scope.row.squad ? `T${scope.row.squad}` : '-'}}</template>
        </el-table-column>
        <el-table-column label="销售顾问">
          <!--todo 优化-->
          <template slot-scope="scope">{{(dialogObj.total || String(scope.row.staff_name).indexOf('，')>-1) ? '-' : dialogObj.staff_name}}</template>
        </el-table-column>
        <el-table-column label="平均转化率" prop="trans_rate"></el-table-column>
        <el-table-column label="日课/体验课" prop="day_order_rate" width="90px"></el-table-column>
        <el-table-column label="月课/季课" prop="month_order_rate"></el-table-column>
        <el-table-column label="总订单" prop="total_order_num"></el-table-column>
        <el-table-column label="一年课" prop="year_order_num">

        </el-table-column>
        <el-table-column label="两年课" prop="two_order_num">

        </el-table-column>
        <el-table-column label="总业绩" prop="total_order_money"></el-table-column>
        <el-table-column label="一年课" prop="year_order_money"></el-table-column>
        <el-table-column label="两年课" prop="two_order_money"></el-table-column>
      </el-table>
      <!--业绩 结束-->

      <!--todo 分页有问题-->
      <page v-if="total" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>

    </div>
  </el-dialog>

</template>

<script>
  import {getVisitedApi, getClassOpenedApi, getAchievementApi, getPhoneRecordApi, getValidchatApi} from "@service/api";
  import page from '@framework/page'

  export default {
    name: "TeamDialog",
    components: {page},
    props: {
      dialogObj: {
        type: Object,
        required: true,
        default: () => {
        }
      }
    },
    data() {
      return {
        show: false,
        loading: true,
        list: [],
        title: '',
        total: 0,
        nowPage: 1,
        limit: 10,
      }
    },
    mounted() {
      this.initDialog()
    },
    methods: {
      initDialog() {
        console.log(this.dialogObj)
        if (this.dialogObj) {
          this.show = this.dialogObj.show;
          this.getData();
        }
      },

      getData() { // todo 名字
        if (this.dialogObj.type == 'callback') {
          this.getVisited();
          this.title = `销售顾问：${this.dialogObj.staff_name} T${this.dialogObj.squad}`
        } else if (this.dialogObj.type == 'validchat') {
          this.getValidchat();
          this.title = `销售顾问：${this.dialogObj.staff_name} T${this.dialogObj.squad}`
        } else if (this.dialogObj.type == 'phonerecord') {
          this.getPhonerecord();
          this.title = `销售顾问：${this.dialogObj.staff_name} T${this.dialogObj.squad}`
        } else if (this.dialogObj.type == 'class') {
          this.getClass();
          this.title = `销售顾问：${this.dialogObj.staff_name} T${this.dialogObj.squad}`
        } else if (this.dialogObj.type == 'achievement') {
          this.getAchievement();
          this.title = `业绩详情：${this.dialogObj.staff_name} T${this.dialogObj.squad}`
        }
      },

      getVisited() { // 已回访
        let json = {
          // teacher_id: this.dialogObj.teacher_id,
          teacher_id: '82',
          start_at: this.dialogObj.start_at,
          page: this.nowPage,
          limit: this.limit
        }
        getVisitedApi(json).then(res => {
          this.list = res;
          this.total = res.total || 0; // todo 后台没给分页
          this.loading = false;
        })
      },

      getValidchat() { // 有效沟通
        let json = {
          alias: this.dialogObj.alias,
          teacher_id: this.dialogObj.teacher_id,
          start_at: this.dialogObj.start_at,
          page: this.nowPage,
          limit: this.limit
        }
        getValidchatApi(json.alias, json).then(res => {
          this.list = res.chat_friend_list.page_data;
          this.total = res.chat_friend_list.total;
          this.loading = false;
        })
      },

      getPhonerecord() {
        let json = {
          alias: this.dialogObj.alias,
          teacher_id: this.dialogObj.teacher_id,
          start_at: this.dialogObj.start_at,
          page: this.nowPage,
          limit: this.limit
        }
        getPhoneRecordApi(json.alias, json).then(res => {
          if (Object.keys(res).length && res.phone_record_list) {
            this.list = res.phone_record_list.page_data || [];
            this.total = res.phone_record_list.total || 0;
          }
          this.loading = false;
        })
      },

      getClass() {
        let json = {
          teacher_id: this.dialogObj.teacher_id.toString(),
          start_at: this.dialogObj.start_at,
          page: this.nowPage,
          limit: this.limit
        }
        getClassOpenedApi(json).then(res => {
          this.list = res;
          this.total = res.total || 0;
          this.loading = false;
        })
      },

      getAchievement() {
        let json = {
          teacher_id: this.dialogObj.teacher_id,
          user_id: this.dialogObj.user_id,
          start_at: this.dialogObj.start_at,
          page: this.nowPage,
          limit: this.limit
        }
        getAchievementApi(json).then(res => {
          if (typeof res === 'object') {
            res.squad = this.dialogObj.squad;
            res.staff_name = this.dialogObj.total ? '-' : this.dialogObj.staff_name;
            this.list = [res];
            this.total = 0
          }
          this.loading = false;
        })
      },

      onPageChange(val) {
        this.nowPage = val
        this.getData()
      },
      onSizeChange(val) {
        this.limit = val;
        this.nowPage = 1;
        this.getData()
      },
    },
    watch: {
      dialogObj: {
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value) {
        // this.nowPage = 1;
        this.$emit("changeShow", value);
      }
    }
  }
</script>

