<template>
  <el-container class="th-sms--left-table">
    <el-header height="auto">
      <search
        ref="search"
        :sms-device-options="smsDeviceOptions"
        :sms-type-options="smsTypeOptions"
        :sms-sheet-type-options="smsSheetTypeOptions"
        :sms-send-obj-options="smsSendObjOptions"
        @onSearch="onSearch"
        @onExport="onExport"
      />
    </el-header>
    <el-main>
      <th-table
        v-bind="list"
        @row-click="handleDetail"
        @handleSelectionChange="handleSelectionChange"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </el-main>
    <th-export-excel :data="exportData" v-bind="exportProps" @exportExcelAll="exportExcelAll" />
  </el-container>
</template>

<script>
import baseTable from '../../../src/mixins/baseTable'
import ThTable from '../../table/src/main'
import ThExportExcel from '../../export-excel/src/main'
import Search from './search'
import { serialize } from '../../../src/utils/util'

const columns = [
  {
    prop: 'SENDTIME',
    label: '发送时间',
    minWidth: '150',
    align: 'center'
  },
  {
    prop: 'SHEETTYPELABEL',
    label: '工单类型',
    minWidth: '120',
    align: 'center'
  },
  {
    prop: 'MSGTYPENAME',
    label: '短信类型',
    minWidth: '100',
    align: 'center'
  },
  {
    prop: 'MESSAGECONTENT',
    label: '短信内容',
    minWidth: '260',
    align: 'center'
  },
  {
    prop: 'SUCCESSTOTALLABEL',
    label: '状态(成功数/总数)',
    minWidth: '140',
    align: 'center'
  }
]
export default {
  components: {
    ThTable,
    ThExportExcel,
    Search
  },
  mixins: [baseTable],
  props: {
    smsTypeOptions: {
      type: Array,
      default: () => []
    },
    smsSheetTypeOptions: {
      type: Array,
      default: () => []
    },
    smsSendObjOptions: {
      type: Array,
      default: () => []
    },
    request: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: {
        data: [],
        columns,
        params: {
        },
        handleColumn: []
      },
      exportProps: {
        ref: 'exportDialog',
        placeholder: '短信查询',
        autoFilter: false,
        columns: columns.map(d => d.prop),
        captions: columns.map(d => d.label)
      },
      smsDeviceOptions: []
    }
  },
  computed: {
    exportData() {
      return this.getExportData(this.list.data, this.smsSheetTypeOptions)
    }
  },
  methods: {
    // 接口请求
    fetchTableApi(row) {
      if (row) {
        this.$refs.search.initData(row)
      }
      const params = {}
      params.params = JSON.stringify({
        filter: serialize(this.$refs.search.form.data),
        pageIndex: this.list.pageNo,
        pageSize: this.list.pageSize
      })
      this.list.loading = true
      this.$refs.search.loading = true
      this.request.fetchSmsList && this.request.fetchSmsList(params).then(res => {
        this.hideTableLoading()
        this.$refs.search.loading = false
        if (res.data.successful === true) {
          this.list.data = res.data.resultValue.items.map(d => {
            d.SUCCESSTOTALLABEL = `${d.SUCCESSTOTAL}/${d.SENDTOTAL}`
            const item = this.smsSheetTypeOptions.find(t => t.value === d.SHEETTYPE)
            if (item) {
              d.SHEETTYPELABEL = item.label
            } else {
              d.SHEETTYPELABEL = ''
            }
            return d
          })
          this.list.totalCount = res.data.resultValue.itemCount
          if (this.$length(res.data.resultValue.dicts)) {
            const item = res.data.resultValue.dicts.find(d => d.name === 'smsType')
            if (item) {
              this.smsDeviceOptions = item.values.map(d => {
                return {
                  value: d.key,
                  label: d.value
                }
              })
            }
          }
        }
      }).catch(this.hideTableLoading)
    },
    // 点击查询按钮
    onSearch() {
      this.list.pageNo = 1
      this.fetchTableApi()
    },
    // 点击某行
    handleDetail(row, column) {
      this.$emit('select', row)
    },
    // 点击导出
    onExport() {
      if (this.$length(this.list.data)) {
        this.$refs.exportDialog.showDialog()
      } else {
        this.$message.warning('请先搜索数据!')
      }
    },
    // 转换导出数据
    getExportData(data, smsSheetTypeOptions) {
      return data.map(d => {
        const arr = []
        this.exportProps.columns.forEach(c => {
          arr.push(d[c] || '')
        })
        return arr
      })
    },
    // 导出所有数据
    exportExcelAll(fb) {
      const params = {}
      params.params = JSON.stringify({
        filter: serialize(this.$refs.search.form.data),
        pageIndex: 1,
        pageSize: this.list.totalCount
      })
      this.request.fetchSmsList && this.request.fetchSmsList(params).then(res => {
        if (res.data.successful) {
          fb(this.getExportData(res.data.resultValue.items, this.smsSheetTypeOptions))
        }
      })
    }
  }
}
</script>
