<template>
  <div class="container">
    <div class="search-form">
      <el-form :inline="true" :model="searchFrom" size="small">
        <el-form-item label="赠品名称" label-width="100px">
          <el-input v-model="searchFrom.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型" label-width="100px">
          <el-select v-model="searchFrom.type" placeholder="请选择" clearable>
            <el-option label="渠道赠品" value="1"></el-option>
            <el-option label="活动赠品" value="2"></el-option>
            <el-option label="关联赠品" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getDataList">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" plain icon="el-icon-plus" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-form">
      <el-table :data="dataList" size="mini" style="width: 100%">
        <el-table-column prop="id" label="ID">
          <template slot-scope="scope">
            <span>{{scope.row.id | idFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="赠品名称"></el-table-column>
        <el-table-column prop="gift_type" label="赠品类型">
          <template slot-scope="scope">
            <div v-if="scope.row.gift_type == 1">渠道赠品</div>
            <div v-if="scope.row.gift_type == 2">活动赠品</div>
            <div v-if="scope.row.gift_type == 3">关联赠品</div>
          </template>
        </el-table-column>
        <el-table-column prop="cost_price" label="成本价"></el-table-column>
        <el-table-column prop="gift_num" label="赠品总数">
        </el-table-column>
        <el-table-column prop="stock_num" label="库存数量"></el-table-column>
        <el-table-column prop="get_num" label="领取数量"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1">上架</div>
            <div v-if="scope.row.status == 2">下架</div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" plain @click="edit(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status == 1" type="warning" size="mini" plain @click="onDown(scope.row)">下架
            </el-button>
            <el-button v-if="scope.row.status == 2" type="success" size="mini" plain @click="onDown(scope.row)">上架
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    </div>
    <dialog-com :dialogObj="dialogObj" @reflash="getDataList"/>
  </div>
</template>

<script>
    import page from "../framework/page";
    import {relationGiftApi, giftSoldoutApi} from "../../service/api";
    import dialogCom from './dialog';

    export default {
        name: "index",
        components: {
            page,
            dialogCom
        },
        filters: {
            idFilter(val) {
                val = val.toString();
                if (val.length == 1) {
                    return `000${val}`
                } else if (val.length == 2) {
                    return `00${val}`
                } else if (val.length == 3) {
                    return `0${val}`
                } else {
                    return val
                }
            }
        },
        data() {
            return {
                searchFrom: {
                    name: '',
                    type: ''
                },
                dataList: [],
                nowPage: 1,
                total: 0,
                limit: 10,
                dialogObj: {
                    type: 0,
                    show: false,
                    id: '',
                    title: ''
                }
            }
        },
        methods: {
            getDataList() {
                let json = {
                    name: this.searchFrom.name,
                    type: this.searchFrom.type,
                    limit: this.limit,
                    page: this.nowPage
                };
                relationGiftApi(json).then(res => {
                    this.dataList = res.list;
                    this.total = res.total;
                });
            },
            add() {
                this.dialogObj = {
                    type: 0,
                    show: true,
                    id: '',
                    title: '新增赠品'
                }
            },
            edit(data) {
                this.dialogObj = {
                    type: 1,
                    show: true,
                    id: data.id,
                    title: '编辑赠品',
                    name: data.name,
                    cost_price: data.cost_price,
                    gift_num: data.gift_num,
                    stock_num: data.stock_num,
                    gift_type: data.gift_type
                };
            },
            onDown(data) {
                this.$confirm('此操作将下架该商品?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    giftSoldoutApi(data.id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.getDataList();
                    });
                }).catch(() => {

                });
            },
            changeShow(data) {
                this.dialogObj.show = data;
            },
            onPageChange(val) {
                this.nowPage = val;
                this.getDataList();
            },
            onSizeChange(val) {
                this.limit = val;
                this.nowPage = 1;
                this.getDataList();
            }
        },
        created() {
            this.getDataList();
        }
    }
</script>

<style scoped>
  .container {
    padding: 20px;
  }
</style>
