<template>
  <div class="app-container">
    <!-- 筛选表单 -->
    <el-form :inline="true" status-icon ref="ruleForm" label-width="100px">
      <el-form-item label="应用选择">
        <el-select
          v-model="condition.pkg"
          filterable
          @change="
            clearInfo();
            getAttributeGraphApi(1112);
          "
        >
          <el-option
            v-for="(item, index) in pkgList"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
        <el-date-picker
          v-model="queryDate"
          type="daterange"
          align="center"
          unlink-panels
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$store.state.pickerOptions"
          @change="
            clearInfo();
            getAttributeGraphApi(1112);
          "
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="
            clearInfo();
            getAttributeGraphApi(1112);
          "
        >
          筛选
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 消息切换栏 @tab-click="handleClick" 后期切换消息类型利用该函数请求-->
    <el-tabs v-model="condition.msgType" @tab-click="tabsClick">
      <el-tab-pane label="全部消息" name="0">全部消息</el-tab-pane>
      <el-tab-pane label="更改出价" name="1"></el-tab-pane>
      <el-tab-pane label="投放报错" name="2">投放报错</el-tab-pane>
      <el-tab-pane label="计划关停" name="3">计划关停</el-tab-pane>
    </el-tabs>
    <!-- 消息显示列表 -->
    <zx-table
      :table-list="msgTable"
      :header="msgHeader"
      :select="true"
      :selection-change="handleSelectionChange"
      :row-click="clickRow"
    ></zx-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="paegChange"
      :current-page="pageMsgInfo.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageMsgInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageMsgInfo.total"
    >
    </el-pagination>
    <!-- 详细信息弹窗 -->
    <msg-details
      :msg-detail-table="msgDetailTable"
      size="50%"
      :show-drawer.sync="showDrawer"
      :msg-detail-acout="msgDetailAcoutInfo"
      :page-msg-detail-info="pageMsgDetailInfo"
      @msgDetailChange="getAttributeGraphApi"
    >
    </msg-details>
  </div>
</template>

<script>
const moment = require("moment");
import { getAttributeGraphApi, menuSelectApps } from "@/api/report";
import { getDateToSeconds } from "@/utils/utils";

import ZxTable from "./compomemts/ZxTable";
import MsgDetails from "./compomemts/MsgDetails";

export default {
  components: {
    ZxTable,
    MsgDetails
  },
  data() {
    return {
      queryDate: [], //初始化时间
      pkgList: [], //包（app）列表
      selList: [], //消息表格被选中的数据集
      /*下面是消息列表数据所需数据变量*/
      condition: {
        sqlId: null, //不同接口处理sqlid
        pkg: "com.ym.bbnc", //平台选择
        startDate: null, //开始日期
        endDate: null, //截止日期
        msgType: "1" //更改出价1 投放报错 计划关停
      }, //消息列表传递的参数
      pageMsgInfo: {
        total: 0,
        page: 1,
        size: 10
      }, //分页信息
      msgTable: [], //消息表格所展示的数据
      msgHeader: [
        {
          prop: "title",
          label: "消息",
          width: "800",
          tooltip: true,
          align: "left"
        },
        { prop: "msg_type_name", label: "操作" },
        {
          prop: "update_at",
          label: "时间",
          width: "180",
          formatter: row => {
            let time = new Date(row.update_at);
            time = getDateToSeconds(time, "minute");
            return time;
          }
        }
      ], //消息表格表头定义
      /*下面是抽屉中详细信息的数据变量*/
      showDrawer: false, //详细信息弹窗控制
      msgDetails: {
        sqlId: null,
        advertiserId: null,
        id: null
      }, //获取详细信息的请求参数
      pageMsgDetailInfo: {
        total: 0,
        page: 1,
        size: 10
      }, //详细信息分页数据
      msgDetailTable: [], //详细信息表格数据
      msgDetailAcoutInfo: {
        content: "",
        time: "",
        app: ""
      } //抽屉中显示的东西
    };
  },
  created() {
    //初始化时间
    this.queryDate[0] = moment()
      .subtract(0, "days")
      .format("YYYY-MM-DD");
    this.queryDate[1] = moment().format("YYYY-MM-DD");
    //获取应用列表
    this.menuSelectApps();
  },
  methods: {
    /**
     * 获取应用列表
     */
    menuSelectApps() {
      menuSelectApps({ platformId: 4, menuCode: "putin.apps" }).then(res => {
        this.pkgList = res.result.data;
        // this.pkgList.unshift({ label: "全部", value: "" });//现在暂时没有全部消息
        this.getAttributeGraphApi(1112);
      });
    },
    /**
     * 消息列表接口  1112
     * 详情列表接口  1113
     * 获取总条数，因为后台接口返回数据原因，总条数需要单独返回
     * 消息列表总条数接口 1115
     * 详情列表总条数接口 1116
     */
    getAttributeGraphApi(sqlId) {
      if (!this.queryDate) {
        this.$message.warning("请选择时间范围！");
        return;
      }
      let params = {}; //请求参数体
      this.condition.sqlId = sqlId;
      this.condition.startDate = this.queryDate[0];
      this.condition.endDate = this.queryDate[1];
      this.msgDetails.sqlId = sqlId;
      if (sqlId == 1112) {
        params = {
          ...this.condition,
          page: this.pageMsgInfo.page,
          size: this.pageMsgInfo.size
        };
        this.getAttributeGraphApi(1115); //获取消息列表的总条数
      } else if (sqlId == 1113) {
        params = {
          ...this.msgDetails,
          page: this.pageMsgDetailInfo.page,
          size: this.pageMsgDetailInfo.size
        };
        this.getAttributeGraphApi(1116); //获取详细消息列表的总条数
      } else if (sqlId == 1115) {
        params = {
          ...this.condition
        };
      } else if (sqlId == 1116) {
        params = {
          ...this.msgDetails
        };
      }
      //汇总好的参数请求数据
      this.fetchSqlIdData(params);
    },
    /**
     * @method sqlid查询通用接口
     */
    fetchSqlIdData(params) {
      getAttributeGraphApi(params)
        .then(res => {
          // console.log(res);
          if (res.status == 200) {
            if (res.result.data.length == 0) {
              this.$message.info("没有查询到数据！");
              return;
            }
            //获取信息 1112 1113 获取对应页面总条数 1115 1116
            if (params.sqlId == 1112) {
              //消息列表
              this.msgTable = res.result.data;
            } else if (params.sqlId == 1113) {
              //消息详情列表
              this.msgDetailTable = res.result.data;
            } else if (params.sqlId == 1115) {
              //消息列表总条数
              this.pageMsgInfo.total = res.result.data[0].total_size;
            } else if (params.sqlId == 1116) {
              //消息详情列表总条数
              this.pageMsgDetailInfo.total = res.result.data[0].total_size;
            }
          } else {
            this.$message.error(`请求错误，错误代码:${res.status}`);
            console.log("改价列表错误：", res);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.err(`请求出错：${err}`);
        });
    },
    /**
     * 切换消息类型时发送请求
     */
    tabsClick() {
      this.clearInfo();
      this.getAttributeGraphApi(1112);
    },
    /**
     * 留存信息清除接口
     */
    clearInfo() {
      this.pageMsgInfo = {
        total: 0,
        page: 1,
        size: 10
      };
      this.selList = [];
      this.msgTable = [];
    },
    //监听选择，更改选择的数据,保存在选择的数据集中
    handleSelectionChange(ary) {
      this.selList = ary;
    },
    //表格点击事件
    clickRow(row) {
      //重置分页参数，每次打开表格时
      this.pageMsgDetailInfo = {
        total: 0,
        page: 1,
        size: 10
      };
      //获取包名字
      let appName = this.pkgList.filter(item => {
        return item.value == row.pkg;
      });
      let time = new Date(row.update_at);
      time = getDateToSeconds(time, "second");
      //抽屉内所展示的title部分
      this.msgDetailAcoutInfo = {
        content: row.title,
        time: time,
        app: appName[0].label
      };
      //请求改价详细信息时所需要的参数
      this.msgDetails = {
        sqlId: null,
        advertiserId: row.advertiser_id,
        id: row.id
      };
      this.showDrawer = true;
      this.getAttributeGraphApi(1113);
    },
    /**
     *  大小和页数的分页查看
     */
    sizeChange(val) {
      this.pageMsgInfo.size = val;
      this.getAttributeGraphApi(1112);
    },
    paegChange(val) {
      this.pageMsgInfo.page = val;
      this.getAttributeGraphApi(1112);
    }
  }
};
</script>

<style></style>
