<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.message_template") }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <template slot="top">
        <div class="top_fliter">
          <div class="filter_list">
            <div class="filter_item">
              <span class="filter_title">消息模板搜索：</span>
              <el-input
                v-model="topFilter.name"
                placeholder="请输入消息模板名称/id"
              ></el-input>
            </div>
            <div class="filter_item">
              <span class="filter_title">模板类型：</span>
              <el-select v-model="topFilter.type" placeholder="请选择">
                <el-option label="服务推送" value="0"> </el-option>
                <el-option label="平台维护" value="1"> </el-option>
                <el-option label="版本更新" value="2"> </el-option>
                <el-option label="自动消息" value="3"> </el-option>
              </el-select>
            </div>
            <div class="filter_item">
              <span class="filter_title">最后更新时间：</span>
              <el-date-picker
                v-model="topFilter.updata_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </div>
          <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"
      :msg="dialogInfo.msg"
      :cancel-text="dialogInfo.cancelText"
      :cancel-type="dialogInfo.cancelType"
      :cancel="dialogInfo.cancel"
      :sunbmit-text="dialogInfo.sunbmitText"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

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

export default {
  components: {
    apassList,
    apassDialog,
  },
  data: () => ({
    listHeader: [],
    listData: [],
    listTotal: 0,
    dialogInfo: {
      msg: "",
      cancelText: "",
      cancelType: "",
      cancel: null,
      sunbmitText: "",
      submit: null,
    },
    topFilter: {
      name: "",
      type: "",
      updata_time: "",
    },
    tempFilter: null,
    types: [
      {
        name: "服务推送",
        value: 0,
      },
      {
        name: "平台维护",
        value: 1,
      },
      {
        name: "版本更新",
        value: 2,
      },
      {
        name: "自动消息",
        value: 3,
      },
    ],
  }),
  created() {
    let _self = this;

    _self.listHeader = [
      {
        label: "模板ID",
        prop: "id",
        width: 240,
      },
      {
        label: "消息模板名称",
        prop: "name",
        type: "button",
        callback: _self.detailAction,
        width: 240,
      },
      {
        label: "模板类型",
        prop: "type",
        getText(item) {
          return _self.types[item.type || 0].name;
        },
        width: 100,
        align: "center"
      },
      {
        label: "模板详情",
        prop: "detail",
      },
      {
        label: "最后更新时间",
        prop: "updata_time",
        getText(item) {
          let date = item.updata_time || "";
          return helper.dateStringTransform(date);
        },
        align: "center",
        width: 180,
      },
      {
        label: "操作",
        type: "buttons",
        align: "center",
        width: 160,
        actionList: [
          {
            label: "编辑",
            callback: this.editAction,
          },
          {
            label: "删除",
            class: "warn",
            callback: this.deleteAction,
          },
        ],
      },
    ];
  },
  methods: {
    initList(filter) {
      let fullFilter = {
        ...filter,
        ...this.topFilter,
      };

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

      console.log(fullFilter);

      this.listTotal = 55;
      this.listData = [
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["张三", "李四", "王五"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["杨过", "小龙女", "冯宝宝"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["张三", "李四", "王五"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["杨过", "小龙女", "冯宝宝"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["杨过", "小龙女", "冯宝宝"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["张三", "李四", "王五"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["杨过", "小龙女", "冯宝宝"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["张三", "李四", "王五"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["杨过", "小龙女", "冯宝宝"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
        {
          id: "message20200429001",
          push_num: "propelling2020001",
          name: "服务定向推送的消息",
          detail:
            "亲爱的用户，根据您的服务调用情况，我们向您推荐地图视频融合服务，欢迎使用！",
          users: ["杨过", "小龙女", "冯宝宝"],
          updata_time: "2020-07-18T14:25:09+08:00",
        },
      ];

      /* this.$http
        .get("/apaas/service/v3/resource/apply/approveList", {
          params: {
            search: filter.keyword,
            page: filter.page,
            limit: filter.size,
            state: filter.state,
          },
        })
        .then(({ data }) => {
          if (data.success == 1) {
            this.listTotal = data.total;
            this.listData = data.data;
          } else {
            this.$message({
              message: data.errMsg || "获取列表失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        }); */
    },
    topFilterAction() {
      this.initList(this.tempFilter);
    },
    topFilterClear() {
      this.topFilter = {
        name: "",
        type: "",
        updata_time: "",
      };

      this.initList(this.tempFilter);
    },
    showDialog() {
      this.$refs.dialog.show();
    },
    addNew() {
      console.log("新建模板");
    },
    detailAction(item) {
      console.log(`查看${item.name}`);
    },
    editAction(item) {
      console.log(`编辑${item.name}`);
    },
    deleteAction(item) {
      console.log(`删除${item.name}`);
    },
  },
};
</script>

<style scoped>
.list_container {
  height: 100%;
}
</style>
