<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="top-search">
      <el-input
        v-model="search_content"
        placeholder="请输入代理公司昵称/手机号"
        style="width: 250px"
      />
      <el-button type="primary" size="small" @click="search"> 查询 </el-button>
    </div>
    <el-table
      :data="stockList.list"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column prop="nickname" label="昵称" align="center" />
      <el-table-column prop="realname" label="真实姓名" align="center" />
      <el-table-column label="所属战区" align="center">
        <template slot-scope="{ row }">
          {{ row.warea && row.warea.name }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column label="最近出库时间" align="center">
        <template slot-scope="{ row }">
          {{
            row.get_out_storage &&
              row.get_out_storage[0] &&
              row.get_out_storage[0].out_time
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            plain
            @click="cancelRemand(1, row)"
          >取消提醒</el-button>
        </template>
      </el-table-column>
    </el-table>
    <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>
</template>
<script>
// api
import { stockRemind, cancelRemind } from '@/api/stock/remind'
export default {
  data() {
    return {
      search_content: '',
      dialogSku: {
        vis: false,
        list: []
      },
      searchParams: {
        page_index: 1,
        page_size: 10
      },
      stockList: '',
      tableTotal: 0,
      loadingFull: false,
      cancelId: ''
    }
  },
  created() {
    this.stockRemind()
  },
  methods: {
    // 获取皇冠库存
    async stockRemind() {
      this.loadingFull = true
      const params = {
        page_index: this.searchParams.page_index,
        page_size: this.searchParams.page_size,
        search_content: this.search_content
      }
      const { data } = await stockRemind(params)
      console.log(data)
      this.stockList = data
      this.tableTotal = data.total
      this.loadingFull = false
    },
    // 点击查询
    search() {
      this.stockRemind()
    },
    // 取消提醒
    cancelRemand(row, event) {
      console.log(event, 'event')
      this.id = event.id
      this.cancelRemind()
    },
    async cancelRemind() {
      const params = {
        user_id: this.id
      }
      this.$confirm('此操作将取消短信提醒, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          cancelRemind(params).then((res) => {
            this.stockRemind()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '操作取消'
          })
        })
    },
    // 分页页码变化
    changePagination(data) {
      this.loadingFull = true
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.stockRemind()
      this.loadingFull = false
    }
  }
}
</script>
<style lang="scss" scoped>
.tableBorder {
  border: 1px solid #ebeef5;
  margin: 20px 0;
}
.top-search {
  margin-top: 30px;
}
</style>
