<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div>
      <el-form ref="searchForm" inline :model="searchParams" :rules="searchRules">
        <el-form-item>
          <el-input v-model="searchParams.search_name" placeholder="请输入销售名称" size="small" style="width:250px" />
        </el-form-item>
        <el-form-item prop="time">
          <el-date-picker
            v-model="searchParams.time"
            type="month"
            placeholder="选择结算月份"
            size="small"
            value-format="yyyy-MM"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="handleSearch"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectedDisabled"
      />
      <el-table-column
        prop="nickname"
        label="销售昵称"
        align="center"
      />
      <el-table-column
        prop="level"
        label="销售等级"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ changeLevel(row.level) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="agent"
        label="上级销售"
        align="center"
      />
      <el-table-column
        prop="warea"
        label="所属战区"
        align="center"
      />
      <el-table-column
        prop="account"
        label="总消费"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ `￥${row.account}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="rewards"
        label="待结算奖励"
        align="center"
      >
        <template slot-scope="{ row }">
          {{ `￥${row.rewards}` }}
        </template>
      </el-table-column>
      <el-table-column
        prop="finished"
        label="结算状态"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.finished === 1 ? 'success' : 'info'">{{ row.finished === 1 ? ' 当月已结算' : '当月未结算' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="text" :disabled="row.finished === 1" @click="handleRewardOne(row)">结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-control">
      <el-button type="primary" size="mini" @click="handleManyReward">批量结算</el-button>
      <div class="batch-container">
        <!-- 分页 -->
        <pagination
          :total="tableTotal"
          :limit="searchParams.page_size"
          :page="searchParams.page_index"
          style="margin-top:0"
          @pagination="changePagination"
          @update:limit="changePagination"
        />
      </div>
    </div>
  </div>
</template>
<script>
// api
import { getAgentSaleList, setAgentSaleRes } from '@/api/finance/memberSaleAward'
export default {
  data() {
    return {
      searchParams: {
        page_index: 1,
        page_size: 10,
        search_name: '',
        time: `${new Date().getFullYear()}-${new Date().getMonth()}`
      },
      table: [],
      tableTotal: 0,
      searchRules: {
        time: [
          { required: true, message: '请选择查询月份', trigger: 'change' }
        ]
      },
      loadingFull: false
    }
  },
  created() {
    this.getAgentSaleList()
  },
  methods: {
    // 获取销售销售业绩与预奖励金额列表
    async getAgentSaleList() {
      this.loadingFull = true
      try {
        const { search_name, page_index, page_size, time } = this.searchParams
        const res = await getAgentSaleList({
          search_name,
          page_index,
          page_size,
          time: time || ''
        })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取销售销售业绩与与奖励金额失败:${e}`)
      }
      this.loadingFull = false
    },
    // 代理等级
    changeLevel(level) {
      let out = ''
      switch (level) {
        case 0:
          out = '公司'
          break
        case 1:
          out = '代理公司'
          break
        case 2:
          out = '销售经理'
          break
        default:
          out = '销售主管'
      }
      return out
    },
    // 个人结算
    handleRewardOne(row) {
      const { id, nickname, rewards } = row
      this.$confirm(`确认为销售: ${nickname}结算${this.searchParams.time}奖金共￥${rewards}元`, '奖励结算', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setAgentSaleRes({
          userids: [id],
          time: this.searchParams.time
        })
      })
    },
    // 结算
    async setAgentSaleRes(data) {
      try {
        const res = await setAgentSaleRes(data)
        const { code, message } = res
        if (code === 200) {
          this.getAgentSaleList()
          this.$message.success(message)
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        this.$message.error('个人结算失败!!')
      }
    },
    // 批量结算
    handleManyReward() {
      const members = this.$refs.multipleTable.selection
      if (members.length < 1) {
        this.$message.warning('请先选择销售')
        return false
      }
      const ids = []
      members.map(item => {
        ids.push(item.id)
      })
      this.$confirm(`确认为选择销售进行奖励结算`, '奖励结算', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.setAgentSaleRes({
          userids: ids,
          time: this.searchParams.time
        })
      })
    },
    // 查询搜索
    handleSearch() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.searchParams.page_index = 1
          this.getAgentSaleList()
        } else {
          return false
        }
      })
    },
    // 结算过的复选框禁用
    selectedDisabled(row, index) {
      if (row.finished === 1) {
        return false
      } else {
        return true
      }
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getAgentSaleList()
    }
  }
}
</script>
