<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>在线客服报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->
    <el-tabs type="border-card">
      <el-tab-pane label="在线客服汇总">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="客户ID">
            <el-input v-model="listQuery1.customerId" placeholder clearable></el-input>
          </el-form-item>
           <el-form-item label="专员名称">
            <el-input v-model="listQuery1.userName" placeholder clearable></el-input>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker
              v-model="listQuery1.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch1">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadOnline1" v-per="'downloadOnline1'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData1" border style="width: 100%" class="table">
          <el-table-column label="index" prop="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column label="对话ID" prop="msgUuid" width="200px" fixed="left"></el-table-column>
          <el-table-column label="对话日期" prop="chatDate"></el-table-column>
          <el-table-column label="对话时间" prop="cusPostTime"></el-table-column>
          <el-table-column label="对话内容" prop="content" width="450px"></el-table-column>
          <el-table-column label="客户ID" prop="cusId"></el-table-column>
          <el-table-column label="专员名称" prop="name"></el-table-column>
          <el-table-column label="渠道" prop="chanel"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="total1"
          :page.sync="currentPage1"
          :limit.sync="pageSize1"
          @pagination="querySearch1"
        />
      </el-tab-pane>
       <el-tab-pane label="在线客服明细">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery2">
        
           <el-form-item label="专员名称">
            <el-input v-model="listQuery2.userName" placeholder clearable></el-input>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker
              v-model="listQuery2.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch2">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadOnline2" v-per="'downloadOnline2'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData2" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="date" label="日期" width="120px" fixed="left"></el-table-column>
          <el-table-column prop="zygh" label="专员工号"></el-table-column>
          <el-table-column prop="name" label="专员名称"></el-table-column>
          <el-table-column prop="onlineDuration" label="总在线时长" >
              <template slot-scope="scope">
          {{ formatMinute(scope.row['onlineDuration']) }}  
        </template>
          </el-table-column>
          <el-table-column prop="whfjxl" label="未回复进线量"></el-table-column>
          <el-table-column prop="zjxjql" label="总进线接起量"></el-table-column>
          <el-table-column prop="zkxsj" label="总空闲时间">
             <template slot-scope="scope">
          {{ formatMinute(scope.row['zkxsj']) }}  
        </template>
          </el-table-column>
          <el-table-column prop="pjdhsc" label="平均对话时长">
             <template slot-scope="scope">
          {{ formatMinute(scope.row['pjdhsc']) }}  
        </template>
          </el-table-column>
          <el-table-column prop="pjxysc" label="平均响应时长">
             <template slot-scope="scope">
          {{ formatMinute(scope.row['pjxysc']) }}  
        </template>
          </el-table-column>
          <el-table-column prop="wdb" label="答问比"></el-table-column>
          <el-table-column prop="dhzddzcs" label="对话中等待总次数"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="total2"
          :page.sync="currentPage2"
          :limit.sync="pageSize2"
          @pagination="querySearch2"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: { Pagination },
  data() {
    return {
       exportOnlineUrl1:
        url.exportUrl +
        "/reportservice/report/onlineChatSummary?token=" +
        window.localStorage.getItem("token"),
        exportOnlineUrl2:
        url.exportUrl +
        "/reportservice/report/onlineChathz?token=" +
        window.localStorage.getItem("token"),
      activeTab: "1",
      cityList: [],
      stationList: [],
      allStationList: [],
      listData1: [],
      total1: 0,
      pageSize1: 50,
      currentPage1: 1, //当前页
      listQuery1: {
        customerId: "",
        userName:'',
        timePart: []
      },
         listData2: [],
      total2: 0,
      pageSize2: 50,
      currentPage2: 1, //当前页
      listQuery2: {
        userName:'',
        timePart: []
      },

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );
    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    this.$set(this.listQuery1, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery2, "createTime", [startDate, currentDate]);
  
    this.querySearch1();
    this.querySearch2();
  },
  methods: {
  
    //查询
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          // this.$message.warning("选中时间范围不能超过一个月");
          // this.listQuery1.createTime = null;
        }
      }
    },
    querySearch1() {
      if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage1,
        pageSize: this.pageSize1,
        customerId: this.listQuery1.customerId,
        userName: this.listQuery1.userName,
        startDate: this.listQuery1.createTime[0],
        endDate: this.listQuery1.createTime[1]
      };

      Service.$axiosOnlineChatSummary(temp)
        .then(res => {
          // console.log(res);
          this.listData1 = res.data.data.list;
          this.total1 = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
      querySearch2() {
      if (this.isEmptyObjVue(this.listQuery2.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage2,
        pageSize: this.pageSize2,
        userName: this.listQuery2.userName,
        startDate: this.listQuery2.createTime[0],
        endDate: this.listQuery2.createTime[1]
      };

      Service.$axiosOnlineChathz(temp)
        .then(res => {
          // console.log(res);
          this.listData2 = res.data.data.list;
          this.total2 = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    downloadOnline1(){
         if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&customerId=${
        this.listQuery1.customerId
      }&userName=${this.listQuery1.userName}&startDate=${
        this.listQuery1.createTime[0]
      }&endDate=${this.listQuery1.createTime[1]}&isExport=${true}`;
      window.open(this.exportOnlineUrl1 + params);
    },
    downloadOnline2(){
         if (this.isEmptyObjVue(this.listQuery2.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&userName=${this.listQuery2.userName}&startDate=${
        this.listQuery2.createTime[0]
      }&endDate=${this.listQuery2.createTime[1]}&isExport=${true}`;
      window.open(this.exportOnlineUrl2 + params);
    },


  }
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>