<!--
 * @Date: 2022-08-08 10:09:50
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-09-19 16:50:55
 * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\mass-list\index.vue
 * @description: 群发列表
-->

<template>
    <div class="home-container">
        <!-- 顶部内容 -->
        <div class="top-container">
            <!-- 搜索 -->
            <el-input
                :placeholder="placeholder"
                v-model="searchParams.subject"
                class="search-input"
                clearable
                @clear="onClear"
            />
            <el-button icon="el-icon-search" @click="onSearch" type="primary" class="search-btn">搜索</el-button>
        </div>
        <TTable :tableData="dataList" :columns="columns" @details="onDetails" @delete="onDelete" @update="onUpdate"></TTable>
        <!-- 分页 -->
        <pagination
            v-show="total > 0"
            ref="pages"
            :total="total"
            :page.sync="searchParams.page"
            :limit.sync="searchParams.limit"
        />
        <el-dialog
          title="发送明细"
          :visible.sync="isDetailsShow"
          center
          top="5vh"
          @close="onCloseDetail"
        >
        <TTable :tableData="detailsDataList" :columns="detailsColumns" :emptyText="errorMessage"></TTable>
        <!-- <p v-else-if="detailsDataList.length <= 0">{{errorMessage}}</p> -->
        <!-- 分页 -->
        <pagination
            v-show="detailsTotal > 0"
            ref="pages"
            :total="detailsTotal"
            :page.sync="detailsParams.page"
            :limit.sync="detailsParams.limit"
        />
        </el-dialog>
    </div>
</template>

<script>
import TTable from "@/components/TTable/TTable";
import Pagination from "@/components/Pagination";
import { APIWechatFans } from '@/api/wechat-fans.js';
export default {
    name: "mass-list",
    components: { TTable, Pagination },
    data() {
        return {
            buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
            searchParams: {
                subject: "",
                page: 1,
                limit: 10000
            },
            placeholder: "可输入消息主题",
            dataList: [

            ],
            // 群发详细数组
            detailsDataList: [],
            detailsColumns: [
                { prop: "nickname", title: "发送对象", fixed: "left" },
                { prop: "status", title: "发送状态" },
                { prop: "send_time", title: "发送时间" },
            ],
            columns: [
                { prop: "subject", title: "消息主题", fixed: "left" },
                { prop: "template_first", title: "内容摘要(链接详情)" },
                { prop: "self_group_name", title: "发送分组" },
                { prop: "create_time", title: "创建时间" },
                {
                    action: true,
                    title: "操作",
                    fixed: "right",
                    actions: [
                        /* {
                            fnName: "update",
                            title: "修改",
                            type: "primary",
                            icon: "el-icon-edit",
                            size: "small"
                        }, */
                        {
                            fnName: "delete",
                            title: "删除",
                            type: "danger",
                            icon: "el-icon-delete",
                            size: "small"
                        },
                        {
                            fnName: "details",
                            title: "发送明细",
                            type: "success",
                            icon: "el-icon-tickets",
                            size: "small"
                        }
                        /* { fnName: "delete", title: "删除", type: "danger" , icon: 'el-icon-delete', size: 'small'}, */
                    ]
                }
            ],
            total: 0,
            isDetailsShow: false,
            detailsTotal: 0,
            detailsParams: {
              page: 1,
              limit: 10
            },
            errorMessage: '', //详情错误信息

        };
    },
    mounted() {

    },
    activated() {
      this.getGroupSender();
    },
    created() {
      this.getGroupSender();
    },
    methods: {
        //获取群发列表
        getGroupSender() {
          let reqBody = {
            subject: this.searchParams.subject,
            page_index: this.searchParams.page,
            page_size: this.searchParams.limit
          };
          APIWechatFans.getGroupSender(reqBody)
            .then(res => {
              console.log("res::", res);
              this.dataList = res.data.rows;
              this.total = res.data.totals;
            })
        },
        // 搜索
        onSearch() {
          this.getGroupSender();
        },
        // 清空输入框
        onClear() {
          this.searchParams.subject = '';
          this.getGroupSender();
        },
        onUpdate() {

        },
        onDelete(value) {
          let that = this;
          this.$confirm("是否删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          }).then(() => {
            APIWechatFans.deleteGroupSender(value.id)
              .then(res => {
                if(res.code === 20000) {
                  this.$message({
                    type: "success",
                    message: "删除成功"
                  });
                }
              })
          }).catch(error => {
            this.$message({
              type: "error",
              message: `删除失败！${error.message}`
            });
          })
        },
        // 群发明细
        onDetails(value) {
          console.log("value", value);
          //this.$router.push({name: 'send-details'});
          this.isDetailsShow = true;
          this.getGroupSenderDetails(value.id);
        },
        // 获取单个群发明细
        getGroupSenderDetails(id) {
          let reqBody = {
            page_index: 1,
            page_size: 10,
          };
          APIWechatFans.getGroupSenderDetails(id,reqBody)
            .then(res => {
              console.log("res", res);
              if(res.data !== null) {
                this.detailsDataList = res.data.rows.map(item => {
                 item.status = item.status === 1 ? '发送成功' : '发送失败';
                 return item
                });
                this.detailsTotal = res.data.totals;
              } else {
                this.errorMessage = res.message;
              }
            })
          console.log("reqBody", reqBody);
        },
        // 关闭群发明细
        onCloseDetail() {
          this.getGroupSender();
        }
    }
};
</script>

<style scoped lang="scss">
.search-input {
    width: 350px;
    margin-left: 20px;
}
.search-btn {
    margin-left: 20px;
    width: 100px;
}
</style>
