<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-input v-model="params.search_name" type="text" placeholder="代理名称" style="width: 300px" />
    <el-select v-model="params.activity_id" style="width: 300px">
      <!-- <el-option label="全部" value="" /> -->
      <el-option v-for="item in activitys" :key="item.id" :label="item.title" :value="item.id" />
    </el-select>
    <el-select v-model="params.level" style="width: 300px">
      <!-- <el-option label="全部" value="" /> -->
      <el-option label="代理公司" value="3" />
      <el-option label="销售经理" value="2" />
      <!-- <el-option label="销售主管" value="1" /> -->
    </el-select>
    <el-button type="primary" @click="params.page_index = 1;demoteList()">搜索</el-button>

    <el-table
      :data="lists"
      :header-cell-style="{ background: '#f8fbfc' }"
      border
      stripe
      style="margin: 20px 0"
    >
      <el-table-column
        prop="nickname"
        label="代理昵称"
        align="center"
      />
      <el-table-column
        prop="mobile"
        label="代理手机号"
        align="center"
      />
      <el-table-column
        prop="warea_name"
        label="所在战区"
        align="center"
      />
      <el-table-column
        label="代理等级"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag
            :color="levelStatus(row.level).color"
            style="color:#ffffff;"
          >
            {{ levelStatus(row.level).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="account"
        label="订货金额"
        align="center"
      />
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" @click="toDemote(row)">降级</el-button>
          <el-button type="primary" @click="cancelDemote(row)">不降级</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination :total="total" :limit="params.page_size" :page="params.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
import { demoteList, demoteCol, cancelDemoteCol } from '@/api/order/demote'
import { activityList } from '@/api/giftB'
// 公共方法
import {
  levelStatus
} from '@/filters/common'
export default {
  data() {
    return {
      loadingFull: false,
      params: {
        page_index: 1,
        page_size: 10,
        search_name: '',
        level: '3',
        activity_id: ''
      },
      activitys: [],
      lists: [],
      total: 0
    }
  },
  created() {
    this.levelStatus = levelStatus
    this.activityList(() => {
      this.demoteList()
    })
  },
  methods: {
    toDemote({ id }) {
      this.$confirm('确认代理降级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        demoteCol({
          user_id: id,
          activity_id: this.params.activity_id
        }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success(res.message)
            this.demoteList()
          } else {
            this.$message.error(res.message)
          }
        }).catch(e => {
          this.loadingFull = false
          this.$message.error('降级失败')
        })
      }).catch(e => {})
    },
    cancelDemote({ id }) {
      this.$confirm('确认取消代理降级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        cancelDemoteCol({
          user_id: id,
          activity_id: this.params.activity_id
        }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success(res.message)
            this.demoteList()
          } else {
            this.$message.error(res.message)
          }
        }).catch(e => {
          this.loadingFull = false
          this.$message.error('取消降级失败')
        })
      }).catch(e => {})
    },
    async demoteList() {
      try {
        this.loadingFull = true
        const res = await demoteList(this.params)
        this.loadingFull = false
        if (res.code === 200) {
          this.lists = res.data.list
          this.total = res.data.total
        }
      } catch (e) {
        this.loadingFull = false
      }
    },
    async activityList(cb) {
      this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.params.activity_id = item.id
            }
          })
          cb && cb.bind(this)()
        }
      }).catch(e => {
        this.loadingFull = false
        cb && cb()
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.params.page_size = limit
      this.params.page_index = page
      this.demoteList()
    }
  }
}
</script>
