<template>
  <div class="list_container">
    <apass-list
      ref="list"
      :list-header="listHeader"
      :list-data="listData"
      :list-total="listTotal"
      :hide-search="true"
      :list-padding-left="0"
      @list-action="initList"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/message' }">
          {{ $t("lang.message") }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ $t("lang.directed_push") }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <template slot="top">
        <div class="top_fliter">
          <show-more-filter class="filter_list">
            <div class="filter_item">
              <span class="filter_title">消息模板名称：</span>
              <el-input
                v-model="topFilter.name"
                placeholder="请输入消息模板名称"
              ></el-input>
            </div>
            <div class="filter_item">
              <span class="filter_title">状态：</span>
              <el-select v-model="topFilter.state" placeholder="请选择">
                <el-option label="全部" value=""> </el-option>
                <el-option label="推送成功" value="success"> </el-option>
                <el-option label="推送失败" value="fail"> </el-option>
                <el-option label="推送中" value="pushing"> </el-option>
              </el-select>
            </div>
            <div class="filter_item">
              <span class="filter_title">推送时间：</span>
              <el-date-picker
                v-model="topFilter.push_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </show-more-filter>
          <div class="filter_action apass_button">
            <el-button type="primary" @click="topFilterAction">
              查询
            </el-button>
            <el-button type="defalut" @click="topFilterClear">
              重置
            </el-button>
          </div>
        </div>
      </template>

      <el-button type="primary" @click="addNew" slot="header-left">
        新建
      </el-button>
    </apass-list>

    <apass-dialog
      ref="dialog"
      width="800"
      title="查看"
      @cancel="cancelAction"
      @submit="submitAction"
    >
      <div class="detail_dialog" slot="content" v-if="templateDetail">
        <div class="detail_item">
          <p class="item_title">
            消息模板名称：
          </p>
          <p class="item_content">
            {{ templateDetail.tpl_name }}
          </p>
        </div>
        <div class="detail_item">
          <p class="item_title">
            模板类型：
          </p>
          <p class="item_content">
            {{ templateDetail.tpl_type }}
          </p>
        </div>
        <div class="detail_item full_line">
          <p class="item_title">
            消息详情：
          </p>
          <div class="full_content">
            <div class="apass_scroll">
              <p class="item_content">
                {{ templateDetail.contents }}
              </p>
            </div>
          </div>
        </div>
        <div class="detail_item full_line">
          <p class="item_title">
            目标用户：
          </p>
          <div class="full_content">
            <div class="apass_scroll">
              <p class="item_content">
                {{ templateDetail.receive_user }}
              </p>
            </div>
          </div>
        </div>
        <div class="detail_item">
          <p class="item_title">
            推送时间：
          </p>
          <p class="item_content">
            {{ templateDetail.push_time }}
          </p>
        </div>
        <div class="detail_item">
          <p class="item_title">
            推送状态：
          </p>
          <p class="item_content">
            {{ templateDetail.state }}
          </p>
        </div>
        <div class="detail_item">
          <p class="item_title">
            推送流水号：
          </p>
          <p class="item_content">
            {{ templateDetail.id }}
          </p>
        </div>
      </div>
    </apass-dialog>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";
import showMoreFilter from "@/components/show-more-filter";

export default {
  components: {
    apassList,
    apassDialog,
    showMoreFilter,
  },
  data: () => ({
    listHeader: [],
    listData: [],
    listTotal: 0,
    dialogInfo: {
      msg: "",
      cancelText: "",
      cancelType: "",
      cancel: null,
      sunbmitText: "",
      submit: null,
    },
    topFilter: {
      name: "",
      state: "",
      push_time: "",
    },
    tempFilter: null,
    templateDetail: null,
  }),
  created() {
    this.listHeader = [
      {
        label: "",
        prop: "state",
        type: "image-tooltip",
        getImage(item) {
          return [
            require("@/assets/imgs/ic_failed.png"),
            require("@/assets/imgs/ic_true.png"),
            require("@/assets/imgs/ic_pushing.png"),
          ][item.state || 0];
        },
        getTooltip(item) {
          return ["推送失败", "推送成功", "推送中"][item.state || 0];
        },
        align: "center",
        width: 60,
      },
      {
        label: "推送流水号",
        prop: "id",
        width: 240,
      },
      {
        label: "消息模板名称",
        prop: "tpl_name",
        type: "button",
        callback: this.detailAction,
        width: 300,
      },
      {
        label: "消息详情",
        prop: "contents",
      },
      {
        label: "接收用户",
        prop: "receive_user",
        width: 300,
      },
      {
        label: "推送时间",
        prop: "push_time",
        getText(item) {
          let date = item.push_time || "";
          return helper.dateStringTransform(date);
        },
        align: "center",
        width: 180,
      },
    ];
  },
  methods: {
    initList(filter) {
      let params = {
        page: filter.page,
        size: filter.size,
        tplname: this.topFilter.name,
        state: this.topFilter.state,
        time_s: (this.topFilter.push_time && this.topFilter.push_time[0]) || "",
        time_e: (this.topFilter.push_time && this.topFilter.push_time[1]) || "",
      };

      // console.log(params);

      this.tempFilter = filter; // filter存档，用于页面刷新

      this.$http
        .get("/apaas/service/v3/push/directmsg/list", { params })
        .then(({ data }) => {
          if (data.success == 1) {
            this.listTotal = (data.data && data.data.total) || 0;
            this.listData = (data.data && data.data.data) || [];
          } else {
            this.$message({
              message: data.errMsg || "获取列表失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "获取列表失败",
            type: "warning",
          });
        });
    },
    topFilterAction() {
      this.initList(this.tempFilter);
    },
    topFilterClear() {
      this.topFilter = {
        name: "",
        state: "",
        push_time: "",
      };

      this.initList(this.tempFilter);
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    addNew() {
      console.log("新建模板");
    },
    detailAction(item) {
      this.$http
        .get(`/apaas/service/v3/push/directmsg/view/${item.id}`)
        .then(({ data }) => {
          if (data.success == 1) {
            let detail = data.data || {};

            this.templateDetail = {
              tpl_name: detail.tpl_name || "",
              tpl_type: ["", "服务推送", "平台维护", "版本更新", "自动消息"][
                detail.tpl_type || 0
              ],
              contents: detail.contents || "",
              receive_user: detail.receive_user || "",
              push_time: helper.dateStringTransform(detail.push_time || ""),
              state: ["推送失败", "推送成功", "推送中"][item.state || 0],
              id: detail.id || "",
              tpl_id: detail.tpl_id || "",
              create_user: detail.create_user || "",
            };
            this.$refs.dialog.show();
          } else {
            this.$message({
              message: data.errMsg || "获取详情失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "获取详情失败",
            type: "warning",
          });
        });
    },
    cancelAction() {
      this.$refs.dialog.hide();
    },
    submitAction() {
      this.$refs.dialog.hide();
    },
  },
};
</script>

<style scoped>
.list_container {
  height: 100%;
}
.detail_dialog {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}
.detail_dialog .detail_item {
  flex: 1 1 auto;
  width: 50%;
  margin-top: 20px;
}
.detail_dialog .detail_item.full_line {
  width: 100%;
}
.detail_dialog .detail_item p {
  padding: 0 15px;
  font-size: 14px;
  line-height: 22px;
  color: #8890a7;
}
.detail_dialog .detail_item .item_content {
  color: #000;
  margin-top: 10px;
}
.detail_dialog .detail_item .full_content {
  padding: 10px 0;
  border-radius: 8px;
  background-color: #f8f9fd;
  margin-top: 5px;
}
.detail_dialog .detail_item .full_content > .apass_scroll {
  height: 176px;
  overflow: auto;
}
.detail_dialog .detail_item .full_content .item_content {
  margin: 0;
}
</style>
