<template>
  <div class="select_template">
    <div class="top_fliter template_fliter">
      <show-more-filter class="filter_list" ref="filters">
        <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-class-name="rowClassName"
        @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>

    <apass-dialog
      ref="dialog"
      width="800"
      title="预览"
      @cancel="cancelAction"
      @submit="submitAction"
    >
      <div class="detail_dialog apaas_detail_form" slot="content">
        <div class="detail_item">
          <p class="item_title">
            消息模板名称：
          </p>
          <div class="item_content">
            <el-input v-model="detail.name" :disabled="true"></el-input>
          </div>
        </div>
        <div class="detail_item">
          <p class="item_title">
            模板类型：
          </p>
          <div class="item_content">
            <el-select v-model="detail.tpl_type" :disabled="true">
              <el-option
                v-for="item in types"
                :label="item.name"
                :value="item.value"
                :key="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="detail_item full_line">
          <p class="item_title">
            消息详情：
          </p>
          <div class="item_content">
            <el-input
              v-model="detail.content"
              type="textarea"
              placeholder="请输入消息详情，最多可以输入500字。"
              maxlength="500"
              :disabled="true"
            ></el-input>
            <p
              class="textarea_count"
              v-text="`还可以输入${500 - detail.content.length}字`"
            ></p>
          </div>
        </div>
      </div>
    </apass-dialog>
  </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";
import apassDialog from "@/components/apass-dialog";

export default {
  components: {
    listTable,
    ListPagination,
    showMoreFilter,
    apassDialog,
  },
  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,
        },
      ],
      detail: {
        name: "",
        tpl_type: "",
        content: "",
      },
    };
  },
  computed: {
    parentIsActive() {
      return this.$parent.isActive;
    },
  },
  watch: {
    parentIsActive() {
      this.$refs.filters.resize();
    },
  },
  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();
    },
    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);
    },
    rowClassName({ row }) {
      return row.selected ? "border-active" : "";
    },
    detailAction(item) {
      this.$http
        .get("/apaas/service/v3/msg/manage/tpl/info", {
          params: {
            id: item.id,
          },
        })
        .then(({ data }) => {
          if (data.success == 1) {
            let detail = data.data;

            this.detail.name = detail.name;
            this.detail.tpl_type = detail.tpl_type;
            this.detail.content = detail.content;

            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>
.select_template {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.template_fliter {
  padding: 0 0 15px;
  position: relative;
}
.template_fliter::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  left: -20px;
  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);
}
.detail_dialog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: left;
}
.detail_dialog .detail_item {
  flex-shrink: 0;
  width: calc(50% - 20px);
  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 {
  margin-top: 10px;
}
</style>

<style>
.selected_table .el-table__body-wrapper .el-table__row {
  cursor: pointer;
}
.select_template .detail_dialog .el-textarea.is-disabled .el-textarea__inner {
  height: 194px;
}
</style>
