<template>
  <div class="history-push">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title"></div>
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
        <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
          <el-col :span="4">
            <el-form-item label="状态">
              <el-select v-model="formInline.status" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="推送类型">
              <el-select v-model="formInline.pushWay" placeholder="请选择">
                <el-option
                  v-for="item in pushWayList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="标题">
              <el-input v-model="formInline.title" placeholder="推送标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="推送日期">
              <el-date-picker
                v-model="duringTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5" style="padding:0;text-align:right;padding-right:15px;">
            <el-button type="primary" size="small" @click="searchList">搜索</el-button>
            <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">刷新</el-button>
          </el-col> -->
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24" style="padding:0;text-align:right;padding-right:35px;margin-bottom:15px">
          <el-button type="primary" size="small" @click="searchList">搜索</el-button>
          <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column prop="title" label="推送标题" min-width="100" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pushWay" label="推送类型" min-width="100" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.pushWay | getPushWay }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="推送介绍"
          min-width="130"
          align="left"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button  style="" type="text" size="small" @click="showDetail(scope.row)">{{ scope.row.content }}</el-button>
            <!-- <span >{{ scope.row.content }}</span> -->
            <!-- <el-button  style="margin-left: 15px;" type="text" size="small" @click="showDetail(scope.row)">详情</el-button> -->
          </template>
        </el-table-column>
        <el-table-column prop="createdName" label="操作人" align="left" min-width="100"></el-table-column>
        <el-table-column prop="status" label="状态" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.status | getPushStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" min-width="95" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.createdTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startPushTime" label="开始推送时间" min-width="95" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.startPushTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalCount" label="推送目标" align="left" min-width="100"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" :disabled="scope.row.status == 1" @click="pushStatistics(scope.row)">推送统计</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有查询到相关结果</p>
          </div>
        </div>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title :visible.sync="dialogVisible" width="30%" center>
      <p style="white-space: pre-line">{{ introduce }}</p>
      <p style="margin-top: 20px">
        <span>页面去向：</span>
        <el-link type="primary" :href="toUrl" target="_blank" >{{ toUrl }}</el-link>
      </p>
    </el-dialog>
    <el-dialog title="" :visible.sync="dialogTableVisible" center class="push-census" width="68%">
      <el-table :data="statistics">
        <el-table-column align="center" property="totalCount" label="目标用户" min-width="150">
          <template slot-scope="scope">
            <p>目标总量：{{ scope.row.totalCount }}</p>
            <p>僵尸用户：{{ scope.row.zombieDeviceCount }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" property="totalDevice" label="设备数" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.totalDevice }}</span>
            <div class="under-tips">单个目标用户可能会存在多个设备</div>
          </template>
        </el-table-column>
        <el-table-column align="center" property="toCount" label="送达数/率" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row | getToValue }}</span>
            <div class="under-tips">送达率：送达数/设备数</div>
          </template>
        </el-table-column>
        <el-table-column align="center" property="clickCount" label="点击数/率" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row | getClickValue }}</span>
            <div class="under-tips">点击率：点击数/设备数</div>
          </template>
        </el-table-column>
        <el-table-column align="center" property="failedCount" label="提交失败" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row | getFailedValue }}</span>
            <div class="under-tips">提交失败率：失败人数/目标用户数</div>
            <el-button v-if="failedExcelUrl !== null" style="margin-top: 20px;right: 0" type="primary" size="small" @click="download(scope.row)">导出失败名单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-button style="margin-top: 20px;right: 0" type="primary" size="small" @click="download(scope.row)">导出失败名单</el-button> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">关闭</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import { getBaseUrl } from '@/utils/index';
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      // curmbFirst: "APP推送",
      // curmbSecond: "APP推送历史",
      curmbFirst: "APP推送历史",
      tableData: [],
      currentPage: 1,
      duringTime: 0,
      totalRows: 0,
      formInline: {
        status: "",
        pushWay: "",
        startTime: "",
        endTime: "",
        title: "",
        pageNo: 1,
        pageSize: 10
      },
      duringTime: "",
      dialogVisible: false,
      introduce: "",
      link: "www.baidu.com",
      statistics: [{
        totalCount: "",
        toCount: "",
        toProportion: "",
        clickCount: "",
        clickProportion: "",
        failedCount: "",
        failedProportion: "",
        failedExcelUrl: null
      }],
      dialogTableVisible: false,
      toUrl: '',
      failedExcelUrl: null,
      statusList: [
        {
          value: 1,
          label: "推送中"
        },
        {
          value: 2,
          label: "推送完成"
        },
        {
          value: 3,
          label: "任务中断"
        }
      ],
      pushWayList: [
        {
          value: '',
          label: "全部"
        },
        {
          value: 2,
          label: "手动推送"
        },
        {
          value: 1,
          label: "模板推送"
        },
      ]
    };
  },
  computed: {
    ...mapGetters(["_token"])
  },
  created() {
    vm = this;
    vm.idType = localStorage.getItem("storageIdType");
    console.log("idType:", vm.idType);
    this.search();
  },
  // 挂载到Dom完成时
  mounted: function() {
    // commonUtil.resizeHeight();
  },
  methods: {
    searchList() {
      this.formInline.pageNo = 1;
      console.log('this.duringTime',this.duringTime);
      if(this.duringTime!=='' && this.duringTime!==null) {
        this.formInline.startTime = this.duringTime[0].getTime();
        this.formInline.endTime = this.duringTime[1].getTime();
      } else {
        this.formInline.startTime = '';
        this.formInline.endTime = '';
      }
      console.log('formInline',this.formInline);
      this.search();
    },
    search() {
      let req = {};
      req = this.formInline;
      openLoading(vm);
      vm.GET("raytheon/pushLog/list", req).then(res => {
        closeLoading(vm);
        vm.tableData = res.data.list;
        vm.totalRows = res.data.total;
      });
    },
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          status: "",
          pushWay: "",
          startTime: "",
          endTime: "",
          title: "",
          pageNo: 1,
          pageSize: 10
        }
      );
      vm.duringTime = '';
      vm.search();
    },
    pushStatistics(row) {
      let req = {};
      vm.failedExcelUrl = null;
      openLoading(vm);
      vm.GET("raytheon/pushLog/statistics/"+row.batchNo, req).then(res => {
        closeLoading(vm);
        console.log(res.data);
        vm.dialogTableVisible = true;
        vm.statistics = [];
        vm.statistics[0] = res.data;
        vm.failedExcelUrl = res.data.failedExcelUrl;
      });
    },
    showDetail(row) {
      vm.dialogVisible = true;
      vm.introduce = row.content;
      vm.toUrl = row.url;
    },
    download() {
      let downUrl = getBaseUrl(vm.failedExcelUrl);
      console.log('导出失败名单',downUrl);
      setTimeout(() => {
        window.open(downUrl);
      }, 500);
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.search();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formInline.pageNo = val;
      this.search();
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="scss">
.history-push {
  .component-content {
    margin-top: 20px;
    padding: 10px;
    background: #fff;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
  .push-census{
    .el-table td{
      vertical-align: top;
    }
    .under-tips{
      margin-top: 6px;
      color: #909399;
    }
  }
}
</style>