<template>
  <div class="select_template">
    <div class="top_fliter template_fliter">
      <show-more-filter class="filter_list">
        <div class="filter_item">
          <span class="filter_title">消息模板搜索：</span>
          <el-input
            v-model="keyword"
            placeholder="请输入消息模板名称/id"
          ></el-input>
        </div>
        <div class="filter_item">
          <span class="filter_title">最后更新时间：</span>
          <el-date-picker
            v-model="updateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
      </show-more-filter>
      <div class="filter_action apaas_button">
        <el-button type="primary" @click="topFilterAction">
          查询
        </el-button>
        <el-button type="defalut" @click="topFilterClear">
          重置
        </el-button>
      </div>
    </div>

    <div class="template_list apaas_scroll">
      <list-table
        class="selected_table"
        :header="listHeader"
        :data="listData"
        :padding-left="0"
        @row-click="selectTemplate"
      ></list-table>

      <list-pagination
        :total="listTotal"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
        style="margin-top: 20px;"
      ></list-pagination>
    </div>
  </div>
</template>

<script>
import helper from "@/services/helper.js";
import listTable from "@/components/apass-table";
import ListPagination from "@/components/comments-pagination";
import showMoreFilter from "@/components/show-more-filter";

export default {
  components: {
    listTable,
    ListPagination,
    showMoreFilter,
  },
  data() {
    return {
      selected: null,
      listHeader: [],
      listData: [],
      listTotal: 0,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      currentPage: 1,
      keyword: "",
      updateTime: "",
      types: [
        {
          name: "全部",
          value: "",
        },
        {
          name: "服务推送",
          value: 1,
        },
        {
          name: "平台维护",
          value: 2,
        },
        {
          name: "版本更新",
          value: 3,
        },
        {
          name: "自动消息",
          value: 4,
        },
      ],
    };
  },
  created() {
    let _self = this;

    _self.listHeader = [
      {
        label: "",
        type: "selected-icon",
        prop: "selected",
        align: "center",
        width: 60,
      },
      {
        label: "模板ID",
        prop: "id",
        width: 240,
      },
      {
        label: "消息模板名称",
        prop: "name",
        type: "button",
        callback: _self.detailAction,
        width: 240,
      },
      {
        label: "模板类型",
        prop: "tpl_type",
        getText(item) {
          let types = [..._self.types];

          types[0] = {
            name: "-",
            value: "",
          };

          return types[item.tpl_type || 0].name;
        },
        width: 160,
        align: "center",
      },
      {
        label: "模板详情",
        prop: "content",
      },
      {
        label: "最后更新时间",
        prop: "update_time",
        getText(item) {
          let date = item.update_time || "";
          return helper.dateStringTransform(date);
        },
        align: "center",
        width: 180,
      },
    ];

    this.getTemplateList();
  },
  methods: {
    getTemplateList() {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        keyword: this.keyword,
        update_time_s: (this.updateTime && this.updateTime[0]) || "",
        update_time_e: (this.updateTime && this.updateTime[1]) || "",
      };

      this.$http
        .get("/apaas/service/v3/msg/manage/tpl/list", { params })
        .then(({ data }) => {
          if (data.success == 1) {
            let listData = (data.data && data.data.list) || [];

            listData.forEach((item) => {
              item.selected =
                (this.selected && this.selected.id === item.id) || false;
            });

            this.listTotal = (data.data && data.data.total) || 0;
            this.listData = listData;
          } else {
            this.$message({
              message: data.errMsg || "获取消息模板列表失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          console.log(error);

          this.$message({
            message: "获取消息模板列表失败",
            type: "warning",
          });
        });
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;

      this.getTemplateList();
    },
    changeCurrentPage(value) {
      this.currentPage = value;

      this.getTemplateList();
    },
    topFilterAction() {
      this.getTemplateList();
    },
    topFilterClear() {
      this.keyword = "";
      this.updateTime = "";

      this.getTemplateList();
    },
    detailAction(item) {
      console.log(item);
    },
    selectTemplate(item) {
      this.listData.forEach((v) => {
        if (v.id === item.id) {
          if (this.selected && this.selected.id === v.id) {
            this.$set(v, "selected", false);
            this.selected = null;
          } else {
            this.$set(v, "selected", true);
            this.selected = v;
          }
        } else {
          this.$set(v, "selected", false);
        }
      });

      this.$emit("change", this.selected);
    },
  },
};
</script>

<style scoped>
.select_template {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.template_fliter {
  padding: 0 0 14px;
  border-bottom: 1px solid #e9ecf3;
}
.template_list {
  flex-grow: 1;
  margin-top: 19px;
  overflow-x: hidden;
  overflow-y: auto;
}
.selected_table {
  min-height: calc(100% - 60px);
}
</style>

<style>
.selected_table .el-table__body-wrapper .el-table__row {
  cursor: pointer;
}
</style>
