<template>
    <ai-list class="Learning" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
      <ai-title
        slot="title"
        title="弹窗消息"
        tips="点击“一键已读”之后，需要回到“卖家中心”刷新界面，弹窗即可消失"
        isShowBottomBorder>
        <template #rightBtn>
          <div class="title-right">
            <div>
              <el-button type="primary" @click="readAllMsg">一键全部已读</el-button>
            </div>
          </div>
        </template>
      </ai-title>
      <template slot="content">
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :isShowPagination="false"
          style="margin-top: 8px;"
          @getList="getList">
          <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
            <template v-slot="{ row }">
              <div class="table-options">
                <el-button type="text" @click="edit(row)">处理</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
        <AiDialog
          title="未读消息列表"
          :visible.sync="isShow"
          :close-on-click-modal="false"
          customFooter
          width="80%">
            <el-tabs tab-position="left" style="height: 500px;">
                <el-tab-pane v-for="item in msgList" :label="item.title" :key="item.id"><div v-html="item.content"></div></el-tab-pane>
            </el-tabs>
          <div class="dialog-footer" slot="footer">
            <el-button @click="isShow = false">关闭</el-button>
            <el-button @click="readAll()" type="primary">一键已读</el-button>
          </div>
         </AiDialog>
      </template>
    </ai-list>
  </template>
  
  <script>
    import { mapState } from 'vuex'
    import {sendChromeAPIMessage} from '@/api/chromeApi'
    import { Message } from 'element-ui'
    export default {
      data () {
        return {
          colConfigs: [
            { prop: 'mallName', label: '店铺名称', align: 'left' },
            { prop: 'unreadNum', label: '未读数量', align: 'left' }
          ],
          tableData: [],
          dataList: [],
          msgList: [],
          total: 0,
          isShow: false,
          id: '',
          currentMallId: '',
          isLoading: false
        }
      },
  
      created () {
        this.getList()
      },
      computed: {
        ...mapState(['mallList']),
      },
  
      methods: {
        async getList () {
            this.isLoading = true
            for (let i = 0; i < this.mallList.length; i++) {
                let mallInfo = this.mallList[i]
                let res = await sendChromeAPIMessage({
                    url: 'bg/quick/api/merchant/msgBox/unreadMsgDetail',
                    needMallId: true,
                    mallId: mallInfo.mallId,
                    data: {}})
                if (res.success && res.errorCode == 1000000) {
                    this.dataList.push({mallId: mallInfo.mallId, data: res.result.unreadPopMsg})
                    this.tableData.push({mallId: mallInfo.mallId, mallName: mallInfo.mallName, unreadNum: (res.result.unreadPopMsg ? res.result.unreadPopMsg.length: 0)})
                }
            }
            this.isLoading = false
        },
        edit(row) {
            let temp = this.dataList.filter(item => {
                return item.mallId == row.mallId
            })
            this.msgList = temp[0].data
            this.currentMallId = temp[0].mallId
            this.isShow = true
        },
        async readAllMsg() {
          for (let i = 0; i < this.dataList.length; i++) {
            let tempMallId = this.dataList[i].mallId
            let tempMsgList = this.dataList[i].data

            for (let j = 0; j < tempMsgList.length; j++) {
              let res = await sendChromeAPIMessage({
                url: 'bg/quick/api/merchant/msgBox/read',
                needMallId: true,
                mallId: tempMallId,
                data: {msgId: tempMsgList[j].id}})
              if (!res.success || res.errorCode != 1000000) {
                Message.error("一个信息标记已读失败")
              }
            }
            let temp = this.tableData.filter(item => {
                return item.mallId == tempMallId
            })
            temp[0].unreadNum = 0
          }
          Message.success("消息标记已读完成，刷新卖家中心弹窗即可消失")
        },
        async readAll() {
            if (!this.currentMallId) {
                Message.error("请选择要标记已读的店铺")
                return
            }
            let count = this.msgList.length
            for (let i = 0; i < this.msgList.length; i++) {
                let res = await sendChromeAPIMessage({
                    url: 'bg/quick/api/merchant/msgBox/read',
                    needMallId: true,
                    mallId: this.currentMallId,
                    data: {msgId: this.msgList[i].id}})
                if (!res.success || res.errorCode != 1000000) {
                    Message.error("一个信息标记已读失败")
                } else {
                    count--
                }
            }
            for (let j = 0; j < this.tableData.length; j++) {
                if (this.tableData[j].mallId == this.currentMallId) {
                    this.tableData[j].unreadNum = count
                    break
                }
            }
            Message.success("消息标记已读完成，刷新卖家中心弹窗即可消失")
            this.isShow = false
        }
      }
    }
  </script>
  
  <style scoped lang="scss">
  </style>
  