<template>

  <div>

    <el-dialog :title="title" append-to-body :visible.sync="show" top="5vh" width="1200px">
      <div v-loading="loading">

        <table class="custom-table el-table" style="margin-bottom: 20px;">
          <thead>
          <tr>
            <th v-for="th in table.th">{{ th.replace(/:00/g, "") }}</th>
          </tr>
          </thead>
          <tbody>
          <!--微信有效沟通-->
          <tr v-if="table.td1.length != 0">
            <td>微信有效沟通</td>
            <td v-for="(td, index) in table.td1">
              <span class="cell-link cell" @click="dialogToggle(td)">{{ td.content }}</span>
            </td>
          </tr>
          <!--沟通>10-->
          <tr v-if="table.td2.length != 0">
            <td>沟通>10</td>
            <td v-for="(td, index) in table.td2">
              <span class="cell-link cell" @click="dialogToggle(td)">{{ td.content }}</span>
            </td>
          </tr>
          <!--有效通次-->
          <tr v-if="table.td3.length != 0">
            <td>有效通次</td>
            <td v-for="(td, index) in table.td3">
              <span class="cell-link cell" @click="dialogToggle(td)">{{ td.content }}</span>
            </td>
          </tr>
          <!--＞3分钟-->
          <tr v-if="table.td4.length != 0">
            <td>＞3分钟</td>
            <td v-for="(td, index) in table.td4">
              <span class="cell-link cell" @click="dialogToggle(td)">{{ td.content }}</span>
            </td>
          </tr>
          </tbody>
        </table>

        <el-table :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="friend_uid"></el-table-column>
          <el-table-column label="客户微信昵称">
            <template slot-scope="scope">
              <template v-if="scope.row.friend_uid">
              <span class="cell-link">
                <router-link target="_blank" :to="{path:'/user', query:{type: 'detail', userid: scope.row.friend_uid}}">
                  {{scope.row.nick || '-'}}
                </router-link>
              </span>
              </template>
              <template v-else>{{scope.row.nick || '-'}}</template>
            </template>
          </el-table-column>
          <el-table-column label="聊天条数">
            <template slot-scope="scope">{{scope.row.chat_count}}</template>
          </el-table-column>
          <el-table-column label="电话号码">
            <template slot-scope="scope">{{scope.row.mobile || '-'}}</template>
          </el-table-column>
          <el-table-column label="呼出时间" width="92px">
            <template slot-scope="scope">{{scope.row.phone_start_time || '-'}}</template>
          </el-table-column>
          <el-table-column label="通话时间">
            <template slot-scope="scope">{{transTime(scope.row.phone_duration)}}</template>
          </el-table-column>
          <!--todo 转义-->
          <el-table-column label="意向度">
            <template slot-scope="scope">{{transIntention(scope.row.intention)}}</template>
          </el-table-column>
          <el-table-column label="下次回访时间">
            <template slot-scope="scope">{{scope.row.next_visit_at || '-'}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--<el-button size="small" v-if="scope.row.chat_count > 0">聊天记录</el-button>-->
              <chat-record
                v-if="scope.row.chat_count > 0"
                :friend-id="scope.row.friend_id" :start-at="dialogObj.start_at"></chat-record>
              <phone-record
                v-if="scope.row.phone_source_file"
                :src="scope.row.phone_source_file"></phone-record>
              <!--<span class="cell-link" v-if="scope.row.phone_source_file">录音</span>-->
            </template>
          </el-table-column>
        </el-table>

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

      </div>
    </el-dialog>

    <!--小弹框-->
    <el-dialog
      top="5vh" width="1200px" append-to-body
      :title="dialog.title" :visible.sync="dialog.show">
      <div v-loading="dialog.loading">
        <el-table :data="dialog.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="friend_uid"></el-table-column>
          <el-table-column label="客户微信昵称">
            <template slot-scope="scope">
              <template v-if="scope.row.friend_uid">
              <span class="cell-link">
                <router-link target="_blank" :to="{path:'/user', query:{type: 'detail', userid: scope.row.friend_uid}}">
                  {{scope.row.nick || '-'}}
                </router-link>
              </span>
              </template>
              <template v-else>{{scope.row.nick || '-'}}</template>
            </template>
          </el-table-column>

          <el-table-column v-if="dialog.search.type == '0'" label="聊天条数">
            <template slot-scope="scope">{{scope.row.chat_count}}</template>
          </el-table-column>

          <el-table-column label="电话号码">
            <template slot-scope="scope">{{scope.row.mobile || '-'}}</template>
          </el-table-column>

          <el-table-column v-if="dialog.search.type == '1'" label="呼出时间" width="92px">
            <template slot-scope="scope">{{scope.row.start_time || '-'}}</template>
          </el-table-column>
          <el-table-column v-if="dialog.search.type == '1'" label="通话时间">
            <template slot-scope="scope">{{transTime(scope.row.duration)}}</template>
          </el-table-column>

          <el-table-column label="意向度">
            <template slot-scope="scope">{{transIntention(scope.row.intention)}}</template>
          </el-table-column>
          <el-table-column label="下次回访时间">
            <template slot-scope="scope">{{scope.row.next_visit_at || '-'}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <chat-record
                v-if="dialog.search.type == '0'"
                :friend-id="scope.row.friend_id" :start-at="dialogObj.start_at"></chat-record>
              <phone-record
                v-if="dialog.search.type == '1' && scope.row.source_file"
                :src="scope.row.source_file"></phone-record>
              <!--<span v-if="dialog.search.type == '0'" class="cell-link">聊天记录</span>
              <span v-if="dialog.search.type == '1'" class="cell-link">录音</span>-->
            </template>
          </el-table-column>
        </el-table>

        <page :current-page="dialog.nowPage" :total="dialog.total" :limit="dialog.limit" @pageChange="onPageChangeDialog" @sizeChange="onSizeChange"/>
      </div>

    </el-dialog>
  </div>

</template>

<script>
  import {getHourSingleApi, getHourTimeApi} from "@service/api";
  import PhoneRecord from '@framework/PhoneRecord'
  import ChatRecord from '@framework/ChatRecord'
  import page from '@framework/page'
  import CommonJs from '@util/common';
  import {CALLBACK_INTENTION} from "@/util/wordbook";

  export default {
    name: "HourDialog",
    components: {page, PhoneRecord, ChatRecord},
    props: {
      dialogObj: {
        type: Object,
        required: true,
        default: () => {
        }
      }
    },
    data() {
      return {
        CALLBACK_INTENTION: CALLBACK_INTENTION,
        dialog: {
          search: {
            wechat_number: '',
            is_type: '',
            key: '',
            start_at: '',
            type: '1', // 1 点击有效沟通、＞10条下方的数字    2 通次、＞3分钟，下方的数字
          },
          loading: false,
          show: false,
          title: '',
          list: [],
          total: 0,
          nowPage: 1,
          limit: 10,
        },
        show: false,
        loading: true,
        table: {
          th: [],
          td1: [],
          td2: [],
          td3: [],
          td4: [],
        },
        list: [],
        title: '',
        total: 0,
        nowPage: 1,
        limit: 10,
      }
    },
    mounted() {
      this.initDialog()
    },
    methods: {
      transTime(time) {
        return CommonJs.secondFmt(time) || '-'
      },
      transIntention(string) {
        var result;
        if (string) {
          result = this.CALLBACK_INTENTION.find(i => {
            return i.value == string
          }).label
        } else {
          result = '-'
        }
        return result
      },

      initDialog() {
        if (this.dialogObj) {
          this.show = this.dialogObj.show;
          this.getData();
        }
      },

      dialogToggle(td) {
        this.dialog.show = !this.dialog.show;
        if (this.dialog.show) {
          this.dialog.loading = true;
          this.dialog.search.wechat_number = td.wechat_number;
          this.dialog.search.type = td.type;
          this.dialog.search.is_type = td.is_type;
          this.dialog.search.key = td.key;
          this.dialog.search.start_at = td.start_at;
          this.getDataDialog(td)
        }
      },

      getData() {
        let json = {
          wechat_number: this.dialogObj.alias,
          start_at: this.dialogObj.start_at,
          page: this.nowPage,
          limit: this.limit,
        }
        getHourSingleApi(json).then(res => {
          // console.log(111, res)
          if (res && res.list && res.list.page_data) {
            this.list = res.list.page_data;
            this.total = res.list.total
          } else {
            this.list = [];
            this.total = 0
          }
          if (res && res.time && res.time.length) {
            let arr = [...res.time];
            arr.unshift(' ');
            arr.push('合计');
            this.table.th = arr;
            res.time.push('total'); // 循环用
          } else {
            this.table.th = []
          }

          if (res && res.count && res.count.valid_chat_count && res.count.valid_chat_count.length) {
            let count = res.count.valid_chat_count, arr = [];
            res.time.forEach((val, idx) => { // 用时间来循环
              arr.push({
                content: count[idx],
                wechat_number: this.dialogObj.alias,
                type: '0',
                is_type: 'valid1',
                key: (idx == res.time.length - 1) ? 'total' : idx,
                start_at: this.dialogObj.start_at,
              })
            })
            this.table.td1 = arr
          } else {
            this.table.td1 = []
          }

          if (res && res.count && res.count.chat_count10 && res.count.chat_count10.length) {
            let count = res.count.chat_count10, arr = [];
            res.time.forEach((val, idx) => { // 用时间来循环
              arr.push({
                content: count[idx],
                wechat_number: this.dialogObj.alias,
                type: '0',
                is_type: 'valid10',
                key: (idx == res.time.length - 1) ? 'total' : idx,
                start_at: this.dialogObj.start_at,
              })
            })
            this.table.td2 = arr
          } else {
            this.table.td2 = []
          }

          if (res && res.count && res.count.valid_phone_count && res.count.valid_phone_count.length) {
            let count = res.count.valid_phone_count, arr = [];
            res.time.forEach((val, idx) => { // 用时间来循环
              arr.push({
                content: count[idx],
                wechat_number: this.dialogObj.alias,
                type: '1',
                is_type: 'min1',
                key: (idx == res.time.length - 1) ? 'total' : idx,
                start_at: this.dialogObj.start_at,
              })
            })
            this.table.td3 = arr
          } else {
            this.table.td3 = []
          }

          if (res && res.count && res.count.three_min_count) {
            let count = res.count.three_min_count, arr = [];
            res.time.forEach((val, idx) => { // 用时间来循环
              arr.push({
                content: count[idx],
                wechat_number: this.dialogObj.alias,
                type: '1',
                is_type: 'min3',
                key: (idx == res.time.length - 1) ? 'total' : idx,
                start_at: this.dialogObj.start_at,
              })
            })
            this.table.td4 = arr
          } else {
            this.table.td4 = []
          }
          this.loading = false

        })
      },
      getDataDialog() {
        let json = {
          wechat_number: this.dialog.search.wechat_number,
          type: this.dialog.search.type,
          is_type: this.dialog.search.is_type,
          key: this.dialog.search.key,
          start_at: this.dialog.search.start_at,
          page: this.dialog.nowPage,
          limit: this.dialog.limit,
        }
        getHourTimeApi(json).then(res => {
          // console.log(333, res)
          if (res && res.page_data && res.page_data.length) {
            this.dialog.list = res.page_data;
            this.dialog.total = res.total
          } else {
            this.dialog.list = [];
            this.dialog.total = 0
          }
          this.dialog.loading = false;

        })
      },

      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 => {
          if (Object.keys(res).length && res.chat_friend_list) {
            this.list = res.chat_friend_list.page_data;
            this.total = res.chat_friend_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()
      },
      onPageChangeDialog(val) {
        this.dialog.nowPage = val;
        this.getDataDialog()
      },
      onSizeChangeDialog(val) {
        this.dialog.limit = val;
        this.dialog.nowPage = 1;
        this.getDataDialog()
      },
    },
    watch: {
      dialogObj: {
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      show(value) {
        this.nowPage = 1; // 重置
        this.$emit("changeShow", value);
      },
      'dialog.show'(value) {
        this.dialog.nowPage = 1; // 重置
      }
    }
  }
</script>

