<template>
    <div class="container">
        <fullscreen :fullscreen.sync="fullscreen" class="container-box">
            <div class="titbox">
                <h2>业务时长查询</h2>
                <div>
                    <i class="el-icon-download" @click="iconCli(3)"></i>
                    <i class="el-icon-refresh" @click="iconCli(1)"></i>
                    <i class="el-icon-full-screen" @click="iconCli(2)"></i>
                </div>
            </div>
            <div class="search">
                <mySearch :searchList="searchList" @searchInfo="searchInfo"></mySearch>
            </div>
            <div class="tabbox">

                    <el-table height="100%" v-loading="loading" class="com-table" ref="multipleTable"
                              :data="tableData" tooltip-effect="dark" size="small" border style="width: 100%">
                    <el-table-column prop="region" fixed label="地市"> </el-table-column>
                    <el-table-column align="center" label="业务办理平均时长（秒）-自有渠道">
                        <el-table-column prop="zyYxhdbl" label="营销活动办理" width="100px"></el-table-column>
                        <el-table-column prop="zyZfbg" label="资费变更"></el-table-column>
                        <el-table-column prop="zyPtjf" label="普通缴费"></el-table-column>
                        <el-table-column prop="zyKh" label="开户"></el-table-column>
                        <el-table-column prop="zyBk" label="补卡"></el-table-column>
                        <el-table-column prop="zyYxhdqx" label="营销活动取消" width="100px"></el-table-column>
                        <el-table-column prop="zyZnzwjz" label="智能组网加装业务受理" width="150px"></el-table-column>
                        <el-table-column prop="zyXhzwkh" label="携号转网开户" width="100px"></el-table-column>
                        <el-table-column prop="zyJtcygl" label="家庭成员管理" width="100px"></el-table-column>
                        <el-table-column prop="zyGh" label="过户"></el-table-column>
                        <el-table-column prop="zyYhmmgq" label="用户密码修改" width="100px"></el-table-column>
                        <el-table-column prop="zyXh" label="销户"></el-table-column>
                        <el-table-column prop="zyLlgx" label="流量共享业务" width="100px"></el-table-column>
                        <el-table-column prop="zyRhkd" label="融合宽带业务" width="100px"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="业务办理平均时长（秒）-社会渠道">
                        <el-table-column prop="shYxhdbl" label="营销活动办理" width="100px"></el-table-column>
                        <el-table-column prop="shZfbg" label="资费变更"></el-table-column>
                        <el-table-column prop="shPtjf" label="普通缴费"></el-table-column>
                        <el-table-column prop="shKh" label="开户"></el-table-column>
                        <el-table-column prop="shBk" label="补卡"></el-table-column>
                        <el-table-column prop="shYxhdqx" label="营销活动取消" width="100px"></el-table-column>
                        <el-table-column prop="shZnzwjz" label="智能组网加装业务受理" width="150px"></el-table-column>
                        <el-table-column prop="shXhzwkh" label="携号转网开户" width="100px"></el-table-column>
                        <el-table-column prop="shJtcygl" label="家庭成员管理" width="100px"></el-table-column>
                        <el-table-column prop="shGh" label="过户"></el-table-column>
                        <el-table-column prop="shYhmmgq" label="用户密码修改" width="100px"></el-table-column>
                        <el-table-column prop="shXh" label="销户"></el-table-column>
                        <el-table-column prop="shLlgx" label="流量共享业务" width="100px"></el-table-column>
                        <el-table-column prop="shRhkd" label="融合宽带业务" width="100px"></el-table-column>
                    </el-table-column>
                </el-table>

            </div>
        </fullscreen>
    </div>
</template>



<script>
import mySearch from "../../../components/search";
export default {
  components: {
    mySearch,
  },
  data() {
    return {
      loading: false,
      subBtn: true,
      fullscreen: false,
      total: 0,
      pageSize: 1,
      tableData: [],
      totalData: [],
      totalSums: [],
      params: {},
        tooltit: "业务时长查询",
        searchList: [
          {
              type: 'date',
              tit: '数据时间',
              value: new Date(new Date()-24*60*60*1000),
              width: '100%',
          }
        ],
    };
  },
  methods: {



    //获取列表
    getList(v, n) {
      this.loading = true;
      this.$http({
        url: "/market/cMkBusiTime/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json"
        },
        data: this.params,
      }).then((res) => {
        this.loading = false;
        this.tableData = res.data;
      });
    },
      //搜索数据
      searchInfo(v) {
          this.params = {};
          if(v[0]){
              var date = new Date(v[0]);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
              var Y = date.getFullYear();
              var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
              var D = (date.getDate()+1 < 10 ? '0'+(date.getDate()) : date.getDate())
              this.params.opTime = Y+M+D;
          }else{
              this.$message({
                  message: '必须选择数据日期',
                  type: 'warning'
              });
              return;
          }
          this.getList(this.params, this.pageSize);
      },

    addRowId({row, rowIndex}){
        row.id = rowIndex+1;
    },

    iconCli(v) {
      if (v === 1) {
          this.getList(this.params, this.pageSize);
      }
      if (v === 2) {
          this.fullscreen = !this.fullscreen;
      }
      if(v === 3){
          // this.exportExcel();
          this.expData();
      }
    },
      expData() {
          let exdata = [];
          this.$http({
              url: "/market/cMkBusiTime/queryList",
              method: "post",
              headers: {
                  "Content-Type": "application/json",
              },
              data: this.params,
          }).then((res) => {
              exdata = res.data;
              var that = this;
              require.ensure([], () => {
                  const { export_json_to_excel } = require("../vendor/Export2Excel");
                  const tHeader = [
                      "地市",
                      "自有-营销活动办理",
                      "自有-资费变更",
                      "自有-普通缴费",
                      "自有-开户",
                      "自有-补卡",
                      "自有-营销活动取消",
                      "自有-智能组网加装业务受理",
                      "自有-携号转网开户",
                      "自有-家庭成员管理",
                      "自有-过户",
                      "自有-用户密码修改",
                      "自有-销户",
                      "自有-流量共享业务",
                      "自有-融合宽带业务",

                      "社会-营销活动办理",
                      "社会-资费变更",
                      "社会-普通缴费",
                      "社会-开户",
                      "社会-补卡",
                      "社会-营销活动取消",
                      "社会-智能组网加装业务受理",
                      "社会-携号转网开户",
                      "社会-家庭成员管理",
                      "社会-过户",
                      "社会-用户密码修改",
                      "社会-销户",
                      "社会-流量共享业务",
                      "社会-融合宽带业务",
                  ]; // 导出的表头名
                  const filterVal = [
                      "region",
                      "zyYxhdbl",
                      "zyZfbg",
                      "zyPtjf",
                      "zyKh",
                      "zyBk",
                      "zyYxhdqx",
                      "zyZnzwjz",
                      "zyXhzwkh",
                      "zyJtcygl",
                      "zyGh",
                      "zyYhmmgq",
                      "zyXh",
                      "zyLlgx",
                      "zyRhkd",

                      "shYxhdbl",
                      "shZfbg",
                      "shPtjf",
                      "shKh",
                      "shBk",
                      "shYxhdqx",
                      "shZnzwjz",
                      "shXhzwkh",
                      "shJtcygl",
                      "shGh",
                      "shYhmmgq",
                      "shXh",
                      "shLlgx",
                      "shRhkd",
                  ]; // 导出的表头字段名

                  let list = exdata;

                  const data = that.formatJson(filterVal, list);
                  export_json_to_excel(tHeader, data, `report`); // 导出的表格名称，根据需要自己命名
              });
          });
      },
      formatJson(filterVal, jsonData) {
          return jsonData.map((v) => filterVal.map((j) => v[j]));
      },
  },
  created() {
      var date = new Date(this.searchList[0].value);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() ;
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
      var D = (date.getDate()+1 < 10 ? '0'+(date.getDate()) : date.getDate())
      this.params={opTime:Y+M+D}
      this.getList(this.params, this.pageSize);
  },
};
</script>



<style>
.el-input__suffix {
    cursor: pointer;
}
</style>
<style scoped lang="scss">
.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}
</style>
