<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <cmmssn-search @search="reload" @exportLgMoney="exportLgMoney"/>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        cache-key="systemUserTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            class="ele-btn-icon"
            @click="sendBatch"
          >
            批量标记发放
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-download"
            class="ele-btn-icon"
            @click="exportData"
          >
            导出
          </el-button>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            v-if="row.ifSend!=='1'"
            type="primary"
            :underline="false"
            @click="setSend(row)"
          >
            标记已发放
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
import CmmssnSearch from './components/cmmssn-search.vue'
import { pageCmmssn, exportCmmssn, updateCmmssnSend, exportCmmssnLgMoney } from '@/api/cmmssn/cmmssn'
import { utils, writeFile } from 'xlsx'

export default {
  name: 'cmmssn',
  components: { CmmssnSearch },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 50,
          align: 'center',
          fixed: 'left'
        },
        {
          prop: 'mobile',
          label: '线索',
          width: 120,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'bizName',
          label: '解锁门店',
          showOverflowTooltip: true,
          width: 120,
          align: 'center'
        },
        {
          prop: 'centerName',
          label: '中心',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center'
        },
        {
          prop: 'orgName',
          label: '机构',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'userName',
          label: '坐席',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center'
        },
        {
          prop: 'userCode',
          label: '坐席工号',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center'
        },
        {
          prop: 'typeCn',
          label: '类型',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          prop: 'unlockTime',
          label: '解锁时间',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue)
          }
        },
        {
          prop: 'orderTime',
          label: '订单时间',
          showOverflowTooltip: true,
          minWidth: 110,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue)
          }
        },
        {
          prop: 'money',
          label: '佣金',
          align: 'center',
          width: 80,
          resizable: false,
          showOverflowTooltip: true
        },
        {
          prop: 'sendCn',
          label: '是否发放',
          showOverflowTooltip: true,
          minWidth: 80,
          align: 'center'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 100,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ],
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
      title: '用户佣金',
      title1: '未发放佣金大于100用户',
      loading: false
    }
  },
  methods: {
    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return pageCmmssn({ ...where, ...order, page, limit })
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where: where })
    },
    /* 打开编辑弹窗 */
    openEdit(row) {
      this.current = row
      this.showEdit = true
    },
    exportData() {
      const loading = this.$loading({ lock: true })
      this.$refs.table.doRequest(({ where, order }) => {
        exportCmmssn({ ...where, ...order })
          .then((data) => {
            loading.close()
            const array = [data.columns]
            data.list.forEach((d) => {
              let arrayItem = []
              for (let key in d) {
                arrayItem.push(d[key])
              }
              array.push(arrayItem)
            })
            writeFile(
              {
                SheetNames: ['Sheet1'],
                Sheets: {
                  Sheet1: utils.aoa_to_sheet(array)
                }
              },
              this.title + '.xlsx'
            )
          })
          .catch((e) => {
            loading.close()
            this.$message.error(e.message)
          })
      })
    },
    setSend(row) {
      if (this.loading) {
        return
      }
      this.$confirm('确定要标记【' + row['mobile'] + '】已发放吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        updateCmmssnSend({ ids: [row.id] }).then((res) => {
          this.$message.success(res)
          this.reload()
        }).catch((e) => {
          this.$message.error(e.message)
        }).finally(() => {
          this.loading = false
        })
      })
    },
    sendBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据')
        return
      }
      if (this.loading) {
        return
      }
      this.$confirm('确定要批量标记发放选中数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        updateCmmssnSend({ ids: this.selection.map((d) => d.id) }).then((res) => {
          this.$message.success(res)
          this.reload()
        }).catch((e) => {
          this.$message.error(e.message)
        }).finally(() => {
          this.loading = false
        })
      })
    },
    exportLgMoney() {
      const loading = this.$loading({ lock: true })
      this.$refs.table.doRequest(({ where, order }) => {
        exportCmmssnLgMoney({ ...where, ...order })
          .then((data) => {
            loading.close()
            const array = [data.columns]
            data.list.forEach((d) => {
              let arrayItem = []
              for (let key in d) {
                arrayItem.push(d[key])
              }
              array.push(arrayItem)
            })
            writeFile(
              {
                SheetNames: ['Sheet1'],
                Sheets: {
                  Sheet1: utils.aoa_to_sheet(array)
                }
              },
              this.title1 + '.xlsx'
            )
          })
          .catch((e) => {
            loading.close()
            this.$message.error(e.message)
          })
      })
    },
  }
}
</script>
