<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="系统消息" name="first"></el-tab-pane>
        <el-tab-pane label="活动消息" name="second"></el-tab-pane>
      </el-tabs>
      <el-form
        :inline="true"
        size="mini"
        label-width="auto"
        class="params-form"
      >
        <el-form-item>
          <el-input v-model.trim="title" placeholder="请输入搜索关键词">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="readStatus" placeholder="消息阅读状态">
            <el-option label="全部" value="-1"></el-option>
            <el-option label="已读" value="1"></el-option>
            <el-option label="未读" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="searchMsg"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item style="float: right">
          <el-button
            type="text"
            style="color: #666666; margin-right: 20px; font-size: 14px"
            icon="el-icon-document"
            @click="allRead"
            >全部标记为已读</el-button
          >
          <el-button
            style="color: #666666; font-size: 14px"
            type="text"
            icon="el-icon-delete"
            @click="delRead"
            >删除全部已读消息</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-table
          ref="msgTableCon"
          :data="msgTableList"
          :height="msgConHeight"
          style="width: 100%"
          :header-cell-style="{
            background: '#F9F9FA',
          }"
        >
          <el-table-column
            prop="title"
            label="系统公告标题"
            min-width="50%"
            v-if="this.activeName == 'first'"
          ></el-table-column>
          <el-table-column
            prop="title"
            label="活动公告标题"
            min-width="50%"
            v-if="this.activeName == 'second'"
          ></el-table-column>
          <el-table-column
            prop="add_time"
            label="发布时间"
            min-width="20%"
            :formatter="formatter"
          ></el-table-column>
          <el-table-column label="状态" min-width="15%">
            <template slot-scope="scope">
              <div class="dotColorRed" v-if="scope.row.status == 0"></div>
              <span v-if="scope.row.status == 0">未读</span>
              <div class="dotColorGreen" v-if="scope.row.status == 1"></div>
              <span v-if="scope.row.status == 1">已读</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="15%">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="editMsg(scope.row)"
                >查看详情</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="forward(scope.row)"
                v-if="ispaas == 1"
                >转发</el-button
              >
              <el-button
                type="text"
                size="mini"
                style="color: red"
                @click="delMsg(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="footer_pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 40, 60, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-drawer
      title="公告详情"
      center
      :withHeader="true"
      :append-to-body="false"
      :modal="false"
      v-if="dialogMessageDetail"
      :modal-append-to-body="false"
      :visible.sync="dialogMessageDetail"
      :direction="direction"
      class="custom-drawer"
      size="100%"
    >
      <msgtemplateInfo
        @closeOrderDetailDialog="closeOrderDetailDialog"
        :messageDetailIds="messageDetailIds"
      ></msgtemplateInfo>
    </el-drawer>
  </div>
</template>

<script>
import msgtemplateInfo from "./components/msgtemplateInfo";
import { dateFormat } from '@/utils'
import {
  readingNotes,
  msgMessageList,
  delIsRead,
  GetIsPaas,
  Forward,
} from "@/api/msgtemplate";
export default {
  name: "msgtemplate",
  components: {
    msgtemplateInfo,
  },
  data() {
    // application_id 只能为数字校验
    let checkAppid = (rule, value, callback) => {
      const reg = /^[0-9]*$/;
      if (!reg.test(value) || value == "") {
        callback(new Error("应用ID（appId）不能为空，且只能是数字"));
      } else {
        callback();
      }
    };
    return {
      activeName: "first",
      msgConHeight: 0,
      // 列表 数据
      currentPage: 1, // 分页
      pageSize: 20, // 每页多少条
      msgTableList: [],
      total: 0,
      title: "", //关键词
      // selectone: "", //商品消息类型
      readStatus: "-1", //消息阅读状态
      dialogMessageDetail: false, //查看详情
      direction: "rtl",
      messageDetailIds: "", //传给详情页面的id
      ispaas: 0,
    };
  },
  created() {
    this.getList();
    // this.getIsPaas();
  },
  mounted() {
    this.$nextTick(() => {
      let queryHeight = document.querySelector(".params-form").clientHeight;
      this.msgConHeight =
        document.querySelector(".box-card").clientHeight -
        queryHeight -
        140 +
        "px";
    });
  },
  methods: {
    /** 列表 */
    getList() {
      let data = {
        page: this.currentPage,
        limit: this.pageSize,
        plat_ids:4
        // status:-1
      };
      if (this.activeName == "first") {
        data["type"] = "1";
      }
      if (this.activeName == "second") {
        data["type"] = "3";
      }
      if (!this.readStatus == "") {
        data["status"] = this.readStatus;
      }
      if (!this.title == "") {
        data["title"] = this.title;
      }
      msgMessageList(data).then((res) => {
        if (res.code == 1) {
          this.total = res.data.count;
          this.msgTableList = res.data.data;
        }
      });
    },
    //全部标记已读
    allRead() {
      this.$confirm("确认将全部消息标为已读状态？", "提示：", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          let data = {
                source:4
              }
          readingNotes(data).then((res) => {
            if (res.code == 1) {
              this.$message({ message: "标记成功", type: "success" });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    //删除全部已读
    delRead() {
      this.$confirm("确认将全部消息删除？", "提示：", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          let data = {
                source:4
              }
          delIsRead(data).then((res) => {
            if (res.code == 1) {
              this.$message({ message: "删除成功", type: "success" });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    /** 搜索 */
    searchMsg() {
      this.getList();
    },
    /** 查看详情 */
    editMsg(row) {
      this.dialogMessageDetail = true;
      this.messageDetailIds = row.id;
    },
    // 转发
    forward(row) {
      this.$confirm(
        "<strong>确认把此条消息创建到系统公告列表吗？</strong><br/><span>点击确定后请到系统公告中查看或编辑</span>",
        "消息转发",
        {
          dangerouslyUseHTMLString: true,
          type: "warning",
          confirmButtonText: "确定",
        }
      )
        .then(async () => {
          let data = {
            id: row.id,
            source:4
          };
          Forward(data).then((res) => {
            if (res.code == 1) {
              this.$message({ message: "转发成功", type: "success" });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    /** 删除 */
    delMsg(row) {
      let data = {
        id: row.id,
        source:4
      };
      delIsRead(data).then((res) => {
        if (res.code == 1) {
          
          this.$message({ message: "删除成功", type: "success" });
          this.getList();
        }
      });
    },
    /** 列表 调整每页显示数量 */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    /** 列表 翻页 */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
     /** 时间格式化 */
    formatter(row) {
      var Time = row.add_time
        return dateFormat(Time * 1000, 'Y-m-d H:i:s')
      },
    /** 关闭 对话框 */
    closeOrderDetailDialog() {
      this.dialogMessageDetail = false;
      this.getList();
    },
    handleClick(tab, event) {
      this.title = "";
      this.readStatus = "-1";
      this.currentPage = 1;
      this.getList();
    },
    getIsPaas() {
      GetIsPaas().then((res) => {
        if (res.code == 1) {
          this.ispaas = res.data.ispaas;
        }
      });
    },
  },
};
</script>

<style scoped>
.app-container >>> .el-card {
  height: 100%;
  overflow: hidden;
}

.app-container >>> .el-card .el-card__body {
  height: 100%;
  overflow: hidden;
}

.msg-table-con {
  overflow: auto;
  padding-right: 15px;
}

::v-deep .params-form .el-form-item {
  margin: 0 20px 15px 0;
}

::v-deep .msg-table-con .el-button--mini {
  padding: 3px 5px;
}

.footer_pagination {
  /* border-top: 1px solid #e6ebf5; */
  text-align: center;
  padding: 20px 0 0;
}

.dotColorGreen {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #23c58f;
  border-radius: 50%;
  margin-right: 4px;
}
.dotColorRed {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #f14e4e;
  border-radius: 50%;
  margin-right: 4px;
}
/*详情 start*/
.custom-drawer {
  position: absolute;
  height: 100%;
}
.custom-drawer >>> .el-drawer__header {
  text-align: center;
  margin: 0;
}
.custom-drawer >>> .el-drawer__body {
  height: 100%;
  overflow: auto;
  padding: 0 0 20px 0;
}
.el-drawer__title {
  margin: 10px 0;
}
/*详情 end*/
.el-drawer ::v-deep :focus {
  outline: none;
}
.el-drawer:focus {
  outline: none;
}
</style>