<template>
  <div class="messageContainer">
    <div class="messageTopTitle">
      <div class="msgTips">共 {{ totalMessage || 0 }} 个消息模版</div>
      <el-button type="primary" @click="openMessageDialog">新增</el-button>
    </div>
    <!-- 卡片模式 -->
    <div style="height: calc(100% - 100px)">
      <div class="messageBox" v-if="messageData.length > 0">
        <div v-for="(item, index) in messageData" class="messageItem">
          <div class="flowBox">
            <div class="IDBOX">
              <div class="titlebox">
                <div class="title">模板ID：</div>
                <div class="content" style="color: #1478f6">{{ item.id }}</div>
              </div>
            </div>
            <div class="templateBox" style="align-items: flex-start">
              <div
                class="titlebox"
                style="width: 50%; margin-right: 10px; align-items: flex-start"
              >
                <div class="title">模板名称：</div>
                <div class="content">{{ item.templateName }}</div>
              </div>
              <div class="titlebox" style="width: 49%; margin-right: 10px">
                <div class="title">模板类型：</div>
                <div class="content">{{ item.templateType }}</div>
              </div>
            </div>

            <div class="templateBox">
              <div class="titlebox" style="flex: 1">
                <div class="title">状态：</div>
                <div class="content">
                  {{ item.state == 1 ? "启用" : "停用" }}
                </div>
              </div>
            </div>
            <div class="templateBox">
              <div class="titlebox" style="align-items: flex-start">
                <div class="title">消息标题：</div>
                <div
                  class="content"
                  v-html="item.messageTitle"
                  :title="item.messageTitle"
                ></div>
              </div>
            </div>
            <div class="contentBox" style="margin-bottom: 10px">
              <div class="title">消息内容：</div>
              <div class="content" v-html="item.messageContents"></div>
            </div>
            <div
              class="contentBox contentBtnBox"
              v-for="(el, elIndex) in item.btns"
              :key="elIndex"
              v-if="item.btns.length > 0"
            >
              <div class="title">按钮{{ elIndex + 1 }}：</div>
              <div class="content boxBtnontent">
                <div
                  v-if="el.pcTitle"
                  :style="{
                    backgroundColor: el.pcColor ? el.pcColor : '#409EFF',
                    borderColor: el.pcColor ? el.pcColor : '#409EFF',
                    color:
                      el.pcColor && el.pcColor == '#ffffff'
                        ? '#000000'
                        : '#ffffff',
                  }"
                  class="colorBox"
                >
                  {{ el.pcTitle }}
                </div>
                <div class="contentBox btnContentBox">
                  <div class="title" style="margin-bottom: 0">PC按钮配置：</div>
                  <div
                    class="content"
                    v-html="el.pcRoute"
                    style="white-space: pre-wrap; padding: 0 10px"
                  ></div>
                </div>
                <div
                  v-if="el.appTitle"
                  :style="{
                    backgroundColor: el.appColor ? el.appColor : '#409EFF',
                    borderColor: el.appColor ? el.appColor : '#409EFF',
                    color:
                      el.appColor && el.appColor == '#ffffff'
                        ? '#000000'
                        : '#ffffff',
                  }"
                  class="colorBox"
                >
                  {{ el.appTitle }}
                </div>
                <div class="contentBox btnContentBox">
                  <div class="title" style="margin-bottom: 0">
                    APP按钮配置：
                  </div>
                  <div
                    class="content"
                    v-html="el.appRoute"
                    style="white-space: pre-wrap; padding: 0 10px"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <div class="messageItem_opearte">
            <div @click="handleEdit(item)">
              <i class="el-icon-edit-outline pointer"></i>
              <p class="pointer">编辑</p>
            </div>
            <div @click="handleDelete(item)">
              <i class="el-icon-delete pointer" style="color: #ff3b30"></i>
              <p class="pointer">删除</p>
            </div>
            <div>
              <el-switch
                v-model="item.state"
                :active-value="'1'"
                :inactive-value="'0'"
                active-color="#13ce66"
                style="margin-bottom: 10px"
                @change="StopMessageTemplate(item)"
              >
              </el-switch>
              <p class="pointer">启用/停用</p>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="height: calc(100% - 40px); margin-top: 100px">
        <el-empty description="暂无数据"></el-empty>
      </div>
    </div>
    <footer>
      <basePage
        :pageModel="pageModel"
        @update:pageModel="currentChangeHandle"
      ></basePage>
    </footer>
    <message-dialog
      ref="messageDialog"
      :billKindID="billKindID"
      @handleConfirmClick="handleConfirmClick"
    >
    </message-dialog>
  </div>
</template>

<script>
import basePage from "@/views/intergrationTask/compoments/basePage.vue";
import messageDialog from "./messageDialog.vue";
import { getApiModuleApi } from "@/api/apiChunks/index.js";
export default {
  components: {
    messageDialog,
    basePage,
  },
  props: {
    billKindID: {
      type: [String, Number],
      default: null,
    },
  },

  data() {
    return {
      totalMessage: 0,
      messageData: [],
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10,
      },
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.GetMessageTemplateList();
    },
    openMessageDialog() {
      this.$refs.messageDialog.openDialog("add");
    },
    handleEdit(item) {
      this.$refs.messageDialog.openDialog("edit", item);
    },
    handleConfirmClick() {
      this.GetMessageTemplateList();
    },
    async GetMessageTemplateList() {
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "queryEntityPage",
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
        }
      );
      if (res.status == 200 || res.status == "200") {
        res.attribute.list.forEach((element) => {
          element.btns = element.btns ? JSON.parse(element.btns) : [];
        });
        this.messageData = res.attribute.list;
        this.totalMessage = res.attribute.total;
        this.pageModel.total = res.attribute.total;
      }
    },
    // 页面
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.GetMessageTemplateList();
    },
    handleDelete(item) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteMessage(item);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    async deleteMessage(item) {
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "deleteEntity",
        },
        {
          id: item.id,
        }
      );
      if (res.status == 200) {
        this.$vmNews("删除成功", "success");
        this.GetMessageTemplateList();
      }
    },
    // 修改状态
    StopMessageTemplate(row) {
      row.state = row.state == "0" ? "1" : "0";
      this.$confirm(
        `您确定要${row.state == "1" ? "停用" : "启用"}该消息模版吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let state = row.state == "1" ? "0" : "1";
          let params = {
            id: row.id,
            state: state,
          };
          this.changeStage(params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    async changeStage(params) {
      const res = await getApiModuleApi(
        {
          tl: "sysMessageTemplateService",
          as: "",
          dj: "enableDisableEntity",
        },
        {
          ...params,
        }
      );
      if (res.status == 200) {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.GetMessageTemplateList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.messageContainer {
  height: 100%;
  background: #ffffff;
  padding: 10px 10px 20px 10px;
  border-radius: 4px;
}

.messageTopTitle {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10px;

  .msgTips {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    text-align: center;
    font-style: normal;
    margin-right: 10px;
  }
}

.messageBox {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;

  .messageItem {
    width: 470px;
    // min-width: 600px;
    // max-width: 600px;
    height: 400px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dddddd;
    position: relative;
    margin: 10px;

    .flowBox {
      padding: 10px;
      overflow-y: auto;
      height: inherit;
    }

    .templateBox {
      display: flex;
      margin-bottom: 10px;

      .titlebox {
        display: flex;
        align-items: center;
        font-size: 14px;
        // white-space: nowrap;
        // /* 强制文本在一行显示 */
        // overflow: hidden;
        // /* 隐藏超出部分 */
        // text-overflow: ellipsis;

        /* 使用省略号表示被截断的文本 */
        .title {
          color: #999999;
          text-align: left;
          font-style: normal;
        }

        .content {
          color: #333333;
          text-align: left;
          font-style: normal;
          font-weight: 400;
          width: calc(100% - 70px);
          word-break: break-all;
        }
      }
    }

    .contentBox {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      .title {
        color: #999999;
        text-align: left;
        font-style: normal;
        margin-bottom: 10px;
      }

      .content {
        color: #333333;
        text-align: left;
        font-style: normal;
        background: #f5f5f5;
        padding: 10px;
        border-radius: 4px;
        height: 100px;
        overflow-y: auto;
        font-weight: 400;
        word-break: break-all;
      }
    }

    .contentBtnBox {
      .content {
        overflow-y: unset;
        height: auto;
      }
    }

    &_opearte {
      display: none;
      // display: flex;
      background-color: rgba(0, 0, 0, 0.7);
      // display: flex;
      justify-content: space-around;
      padding: 13px 0;
      color: white;
      font-size: 12px;
      text-align: center;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;

      i {
        font-size: 24px;
        margin-bottom: 10px;
      }
    }
  }

  .messageItem:hover {
    .messageItem_opearte {
      display: flex;
      align-items: center;
    }
  }

  .colorBox {
    padding: 5px 15px;
    font-size: 13px;
    border-radius: 3px;
  }
}

.btnContentBox {
  width: 100%;
  display: flex !important;
  flex-direction: unset !important;
  align-items: flex-start !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 10px 0;
}

.boxBtnontent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 10px;
  margin-bottom: 10px;
}

.IDBOX {
  display: flex;
  margin-bottom: 10px;

  .titlebox {
    display: flex;
    align-items: center;
    font-size: 14px;
    .title {
      color: #999999;
      text-align: left;
      font-style: normal;
    }

    .content {
      color: #333333;
      text-align: left;
      font-style: normal;
      font-weight: 400;
      word-break: break-all;
    }
  }
}
</style>
