<template>
  <div>
    <i-page-header class="product_tabs" title="优惠券列表">
    </i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
		<div class="fx-r" style="padding: 20px 0;">
			<el-select v-model="detial.status" placeholder="请选择是否显示">
				<el-option label="选择是否显示" value=""></el-option>
			    <el-option label="显示" value="1"></el-option>
				<el-option label="隐藏" value="0"></el-option>
			</el-select>
		    <el-button type="primary" style="margin-left: 6px;" @click="tapSeach">查询</el-button>
			<div class="fx-g1"></div>
		    <el-button type="danger" style="margin-left: 6px;" @click="tapAdd">添加优惠券</el-button>
		</div>
	  <el-table :data="detial.data" v-loading="detial.loading" :stripe="true" :border="true" >
	      <el-table-column
	              prop="id"
	              label="ID"
	  			width="80"
	              align="center">
	      </el-table-column>
	  	<el-table-column
	  	        prop="title"
	  	        label="标题">
	  	</el-table-column>
		<el-table-column
		        prop="price"
		        label="面值">
		</el-table-column>
		<el-table-column
		        prop="limit_price"
		        label="满减标准">
				<template slot-scope="scope">
					满{{scope.row.limit_price}}可用
				</template>
		</el-table-column>
		<el-table-column
		        prop="day"
		        label="有效期">
				<template slot-scope="scope">
					自领取之日开始{{scope.row.day}}天有效
				</template>
		</el-table-column>
	  	<el-table-column
	  	         prop="status"
	  	         label="是否显示"
	  			 width="80"
	  	         align="left">
	  	     <template slot-scope="scope">
	  			<el-tag type="success" size="mini" v-if="scope.row.status == 1">显示</el-tag>
	  			<el-tag type="danger" size="mini" v-else>隐藏</el-tag>
	  	     </template>
	  	 </el-table-column>
		 <el-table-column
		         prop="seq"
		         label="排序">
		 </el-table-column>
		 <el-table-column
		         prop="time"
		         label="添加时间">
		 </el-table-column>
	  	<el-table-column  align="center" label="操作"     prop="handle" width="150">
	  	    <template slot-scope="scope">
	  			<div>
					<el-button plain size="mini" @click="tapEdit(scope.row)" type="primary">编辑</el-button>
					<el-button plain size="mini" @click="tapDel(scope.row)" type="danger">删除</el-button>
				</div>
	  	    </template>
	  	</el-table-column>
	  </el-table>
	  <div class="acea-row row-right page">
	      <Page :total="detial.pageCount" show-elevator show-total @on-change="tapPage" :page-size="detial.pageSize"/>
	  </div>
    </Card>
    <Modal v-model="dialogVisible" :title="title" @on-cancel="editClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="优惠券标题" prop="title" :rules="[{ required: true, message: '请输入优惠券标题'}]">
          <el-input placeholder="请输入优惠券标题" autocomplete="off" v-model="form.title"></el-input>
        </el-form-item>
		<el-form-item label="面值" prop="price" :rules="[{ required: true, message: '请输入优惠券面值'}]">
		  <el-input placeholder="请输入优惠券面值" autocomplete="off" v-model="form.price"></el-input>
		</el-form-item>
		<el-form-item label="满减标准" prop="limit_price" :rules="[{ required: true, message: '请输入满减标准'}]">
		  <el-input placeholder="请输入满减标准" autocomplete="off" v-model="form.limit_price"></el-input>
		  <div>满多少元可用</div>
		</el-form-item>
		<el-form-item label="有效天数" prop="day" :rules="[{ required: true, message: '请输入有效天数'}]">
		  <el-input placeholder="请输入有效天数" autocomplete="off" v-model="form.day" type="number"></el-input>
		  <div>自领取之日后多少天有效</div>
		</el-form-item>
        <el-form-item label="排序" prop="seq">
          <el-input  placeholder="排序越高越前面" v-model="form.seq" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" style="margin-bottom: 0;" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subAdmin">确 定</el-button>
        </span>
    </Modal>

  </div>
</template>

<script>
    import IPageHeader from "@/layouts/system/page-header/index";
    import { mapState, mapActions } from 'vuex';
    import UiUpload from "@/ui/upload/index";
    import Setting from "@/setting";
    import util from "@/libs/util";
    import {SystemGoodsCoupon,SystemGoodsCouponAdd,SystemGoodsCouponDel} from "../../../api/system/goods";
    export default {
        name: "SystemGoodsCoupon",
        components: { UiUpload, IPageHeader},
        computed: {
        },
        data() {
            return {
                title:"优惠券列表",
                dialogVisible:false,
                upHeaders:{},
                upUrl:"",
                detial: {
                	data      : [],
                	status   : "",
                    page      : 1,
                	loading   : true,
                    pageSize  : 0,
                    pageCount : 0,
                },
                form:{
                    seq         : 0,
                    status      : 1,
					price       : "",
					limit_price : "",
					day         : "",
					title       : "",
                },
            }
        },
        mounted(){
            this.initView();
        },
        methods: {
            initView : function(){
                var upHeaders = {};
                this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
                const token = this.$utils.util.cookies.get('system_token');
                if (token) {
                    upHeaders['SYSTEM-ACC-TOKEN'] = token;
                }
                this.upHeaders = upHeaders;
                this.getData();
            },


            /**
             * 获取数据
             */
            getData:function () {
				var data = {};
				this.detial.loading = true;
				data.page      = this.detial.page;
				data.status   = this.detial.status;
				SystemGoodsCoupon(data)
				    .then(res => {
				        this.detial.loading   = false;
				        this.detial.data      = res.data.list;
				        this.detial.pageSize  = res.data.pageSize;
				        this.detial.pageCount = res.data.pageCount;
				    })
				    .catch(err => {
				        this.detial.loading = false;
				        this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
				    });
			
            },
			//搜索栏目
			tapSeach:function () {
			    this.detial.page = 1;
			    this.getData();
			},

            //关闭
            editClose:function(){
                this.dialogVisible = false;
            },
            /**
             * 添加分类
             */
            tapAdd:function(sassid){
                this.dialogVisible = true;
                this.$refs['form'].resetFields();
                this.form = this.$utils.resetFields(this.form, {status:0,seq:0});
            },

            /**
             * 分页
             */
            tapPage:function(index){
                this.page.page = index;
                this.getData();
            },
            /**
             * 修改数据
             */
            subAdmin:function(e){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let loading = this.$loading("提交数据中...");
                        var data = {};
                        for(var i in this.form) {
                            data[i] = this.form[i];
                        }
                        data['data'] = JSON.stringify(this.dataAr);
                        SystemGoodsCouponAdd(data)
                            .then(res => {
                                loading.close();
                                if (res.code == 200) {
                                    this.dialogVisible = false;
                                    this.$Message.success("操作成功");
                                    this.getData();
                                } else {
                                    this.$alert(res.msg, '系统提示');
                                }
                            })
                            .catch(err => {
                                loading.close();
                                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                            });
                    }
                });
            },
            /**
             * 上传文件
             * @param res
             */
            onUpload:function (res) {
                if(res.code == -1) {
                    Notice.error({ title : "系统提示", content:res.msg});
                } else {
                    this.form.img = res.data.img;
                }
            },
			tapEdit:function(row){
				this.form = JSON.parse(JSON.stringify(row));
				this.dialogVisible = true;
				this.title = "编辑优惠券";
			},
            // 删除
            tapDel (row) {
                this.$confirm('此操作将永久删除该优惠券, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$utils.loading(this, "删除数据中...");
                    SystemGoodsCouponDel({id: row.id})
                        .then(res => {
                            this.$utils.loadingClose();
                            this.loading = true;
                            if (res.code == 200) {
                                this.getData();
                            } else {
                                this.$alert(res.msg);
                            }
                        })
                        .catch(err => {
                            this.$utils.loadingClose();
                            this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                        });
                }).catch((e)=>{});
            },
        }
    }
</script>
<style scoped>
  .platform-img{width: 20px;height: 20px;background: #f2f2f2; margin-right: 4px;}
  .platform-img img{ width: 100%;}
</style>
