<template>
  <div class="saas-manage card">
    <div class="search">
      <el-form :model="searchForm" size="small" :inline="true">
        <el-form-item label="创建时间">
          <el-date-picker
            style="width: 360px"
            v-model="period"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:ss:mm"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="route">
          <el-input
            size="small"
            style="width: 160px"
            clearable
            v-model.trim="searchForm.route"
            placeholder="请输入route"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            :loading="searchLoading"
            icon="el-icon-search"
            @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="warning"
            size="small"
            :loading="sendLoading"
            icon="el-icon-s-promotion"
            @click="resendMsg()">
            批量发送
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      class="table_wrap"
      style="min-height: 50%; max-height: 90%; padding: 0">
      <table-view
        :sourceData="messageLists"
        :serialNumber="true"
        :tableColumns="tableColumns"
        ref="multipleTable"
        @selectionChange="selectionChange"
        :selection="true"></table-view>
    </div>
    <div class="pagination">
      <el-pagination
        layout="sizes, total, prev, pager, next, jumper"
        background
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="sizeChange"
        @current-change="onCurrentChange"></el-pagination>
    </div>
    <el-dialog
      title="查看详情"
      :visible.sync="detailsVisible"
      :close-on-click-modal="false"
      width="700px">
      <json-viewer :value="jsonData" :expand-depth="5"></json-viewer>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMqMessagePage,
  getMessageDetails,
  getMessageReSend
} from '@/common/api/message'
import tableView from '@/common/components/base/tableView.vue'
import JsonViewer from 'vue-json-viewer' // 下载vue-json-viewer插件
export default {
  name: 'exceptionMessage',
  components: { tableView, JsonViewer },
  data() {
    return {
      detailsVisible: false,
      jsonData: {},
      period: [],
      messageLists: [],
      searchForm: {},
      editForm: {
        domain: ''
      },
      total: 0,
      pageSize: 50,
      currentPage: 1,
      selection: [],
      searchLoading: false,
      sendLoading: false,
      loading: false
    }
  },
  computed: {
    tableColumns() {
      return [
        {
          label: 'route',
          key: 'route'
        },
        {
          label: '发送状态',
          key: 'statusStr'
        },
        {
          label: '创建时间',
          key: 'createTime'
        },
        {
          label: '操作',
          width: 150,
          render: (item) => (
            <div>
              <span
                class="icon-view icon-tools-view"
                title="详情"
                onClick={() => this.lookJson(item.id)}>
                <i class="el-icon-tickets"></i>
              </span>
              <span
                class="icon-view icon-edit-view"
                title="重新发送"
                onClick={() => this.resendMsg(item)}>
                <i class="el-icon-s-promotion"></i>
              </span>
            </div>
          )
        }
      ]
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    async resendMsg(row) {
      const arr = row ? [row] : this.selection
      if (arr.length === 0) {
        this.$message.error('请至少选择一条记录')
        return
      }
      try {
        await this.$confirm('确认发送？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        const ids = arr.map((item) => item.id)

        const loading = this.$loading({
          background: 'rgba(0, 0, 0, 0.3)'
        })
        this.sendLoading = true
        try {
          const res = await getMessageReSend(String(ids))
          if (res.code === 200) {
            this.$message.success('发送成功')
            this.selection = []
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        } finally {
          this.sendLoading = false
          loading.close()
        }
      } catch {}
    },
    async lookJson(id) {
      this.jsonData = {}
      const res = await getMessageDetails(id)
      if (res.code === 200) {
        this.jsonData = res.data || {}
        this.detailsVisible = true
      }
    },
    async getList() {
      this.searchLoading = true
      this.loading = true
      const params = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        route: this.searchForm.route,
        startTime: this.period && this.period[0],
        endTime: this.period && this.period[1]
      }
      try {
        const res = await getMqMessagePage(params)
        this.messageLists = res.data.records || []
        this.total = res.data.total || 0
      } catch (e) {
        console.error(e)
      } finally {
        this.searchLoading = false
        this.loading = false
      }
    },
    search() {
      this.getList()
    },
    selectionChange(selection) {
      this.selection = selection
    },
    onCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .jv-light {
  background-color: #ececec !important;
}
.saas-manage {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &::v-deep {
    .el-table .el-table__cell {
      padding: 6px 0;
    }

    .el-input__inner {
      padding: 0 4px;
    }

    .el-input--small .el-input__inner {
      height: 30px;
      line-height: 30px;
    }

    .el-icon-time:before {
      content: '';
    }

    .el-dialog__footer {
      text-align: center;

      .el-button--small {
        padding: 9px 50px;
      }
    }

    .el-dialog__body {
      padding: 10px 20px;
    }

    .el-range-editor--small .el-range-separator {
      line-height: 31px;
    }

    .header-row-class-name th {
      background-color: #f8f8f9;
    }

    .el-input-group__append {
      padding-left: 0;
    }
  }
}

.search {
  background: #fff;
}

.table-wrap {
  background: #fff;
  flex: 1;
  overflow: hidden;
}
</style>
