<template>
  <div class="app-container">
    <div class="search-form">
      <el-form ref="searchForm" :model="queryParams" inline :label-width="'100px'">
        <el-form-item label="请求标识" prop="requestId">
          <el-input v-model="queryParams.requestId" type="text" placeholder="请求标识" />
        </el-form-item>
        <el-form-item label="发送方式" prop="channel">
          <el-select v-model="queryParams.channel" clearable placeholder="发送方式">
            <el-option
              v-for="item in channels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="searchItem" :label-width="'50px'">
          <el-button type="primary" @click="handleSearch">{{ $t('ec.table.query') }}</el-button>
          <el-button type="default" @click="handleReset">{{ $t('ec.table.reset') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxe-grid
      ref="vxe"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      class="vxe-table-element"
      :loading="loading"
      :start-index="(page.currentPage - 1) * page.pageSize"
      :pager-config="page"
      :columns="columns"
      :data="tableData"
      :toolbar="tableToolbar"
      @toolbar-button-click="toolbarButtonClickEvent"
      @page-change="handlePageChange"
    >
      <template v-slot:status="{row}">
        <span v-if="row.smsStatus">
          sms: {{ row.smsStatus }}
        </span>
        <span v-if="row.emailStatus">
          email: {{ row.emailStatus }}
        </span>
        <span v-if="row.wxStatus">
          wx: {{ row.wxStatus }}
        </span>
        <span v-if="row.appStatus">
          app: {{ row.appStatus }}
        </span>
      </template>
      <template v-slot:detail_content="{ row }">
        <div v-if="row.smsStatus">
          sms: {{ row.smsStatus }}
        </div>
        <div v-if="row.emailStatus">
          email: {{ row.emailStatus }}
        </div>
        <div v-if="row.wxStatus">
          wx: {{ row.wxStatus }}
        </div>
        <div v-if="row.appStatus">
          app: {{ row.appStatus }}
        </div>
      </template>
      <template v-slot:role_toolbar_btns>
        <el-button v-permission="['smsSendLog:remove']" type="danger" @click="remove()">
          {{ $t('ec.table.delete') }}
        </el-button>
        <el-button @click="handleSearch">{{ $t('ec.table.reset') }}</el-button>
      </template>

    </vxe-grid>

  </div>
</template>

<script>
import mixin from 'ecip-web/utils/common-mixin'
import { getData, remove } from 'ecip-web/api/vue/message/messageSendLogApi'

export default {
  name: 'ModulesMessageMessageSendLogView',
  components: {},
  mixins: [...mixin],
  data() {
    return {
      tableToolbar: {
        id: 'modules.sms.smsSendLogView-toolbar',
        export: true, // 导出按钮
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      showSearch: false,
      loading: false,
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      tableData: [],
      columns: [
        { type: 'seq', width: 60, fixed: 'left', align: 'center' },
        { type: 'expand', width: 60, align: 'center', slots: { content: 'detail_content' }},
        { title: '业务请求标识', key: 'requestId', field: 'requestId', minWidth: 100, showOverflow: true },
        { title: '发送方式', key: 'channel', field: 'channel', minWidth: 100, showOverflow: true },
        { title: '应用模块', key: 'bizService', field: 'bizService', minWidth: 100, showOverflow: true },
        { title: '应用版本', key: 'bizVersion', field: 'bizVersion', minWidth: 50, showOverflow: true },
        { title: '业务请求时间', key: 'bizTime', field: 'bizTime', minWidth: 100, showOverflow: true },
        { title: '发送时间', key: 'createDate', field: 'createDate', minWidth: 100, showOverflow: true },
        { title: '发送结果', key: 'id', field: 'id', minWidth: 300, showOverflow: true, slots: { default: 'status' }}
      ],
      queryParams: {
        requestId:'',
        channel:''
      },
      channels: [
        { value: 'sms', label: '短信' },
        { value: 'email', label: '邮件' },
        { value: 'wx', label: '微信' },
        { value: 'app', label: 'APP推送' }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    toolbarButtonClickEvent({ code }, event) {
      switch (code) {
        case 'search':
          this.showSearch = !this.showSearch
          break
        case 'reset':
          this.handleSearch()
          break
      }
    },
    getData() {
      this.loading = true
      getData(Object.assign({}, { size: this.page.pageSize, current: this.page.currentPage }),
        this.queryParams).then(res => {
        const data = res.data
        this.tableData = data.records
        this.page.total = data.total
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getData()
    },
    add() {
      this.$router.push(`/messageSendLogAdd`)
    },
    edit(id) {
      this.$router.push(`/messageSendLogEdit/${id}`)
    },
    remove(id) {
      const deleteIds = []
      if (id) {
        deleteIds.push(id)
      } else {
        this.$refs.vxe.getSelectRecords().forEach(row => {
          const id = row.id
          deleteIds.push(id)
        })
      }
      if (deleteIds.length > 0) {
        this.$confirm(this.$t('ec.message.delConfirm'), this.$t('ec.message.prompt'), {
          confirmButtonText: this.$t('ec.message.confirm'),
          cancelButtonText: this.$t('ec.message.cancel'),
          type: 'warning'
        }).then(() => {
          remove(deleteIds).then(res => {
            this.getData()
            this.$notify.success(this.$t('ec.message.delSuccess'))
          })
        }
        )
      } else {
        this.$message({
          message: this.$t('ec.message.selectEmpty'),
          type: 'warning'
        })
      }
    },
    handleSearch() {
      this.page.currentPage = 1
      this.getData()
    },
    handleReset() {
      this.$refs['searchForm'].resetFields()
      this.handleSearch()
    }
  }
}
</script>

<style scoped>

</style>
