<template>
    <div class="app-container">
<!--      储值卡-->
          <el-card  style="margin-bottom: 20px">
            <el-radio-group v-model="isonline" @input="getlist()">
              <el-radio-button label="0">可用</el-radio-button>
              <el-radio-button label="1">已下线</el-radio-button>
            </el-radio-group>
          </el-card>
          <el-card  style="margin-bottom: 20px">
            <div style="margin-bottom: 10px">
              <el-alert
                title="当前配置为储值卡活动、按照升数锁价充值活动请在锁价活动列表配置,每个卡类型最多可创建50个充值活动
                      关于支付即储值功能说明: 功能按照档次大于等于用户实付金额的可充值档次进行处理,不符合规则的档次则无法进行充值"
                type="info">
              </el-alert>
            </div>
            <div style="margin: 10px 0px">
              <el-button type="primary" icon="el-icon-plus" @click="addblock()">新增储值活动</el-button>
            </div>
            <el-table
              :data="tableData"
              align="center"

              style="width: 100%">

              <el-table-column
                prop="groupOriented"
                label="面向群体"
                width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.groupOriented == 1">普通群体</span>
                  <span v-if="scope.row.groupOriented == 2">等级会员</span>
                </template>

              </el-table-column>
              <el-table-column label="活动信息">
                <el-table-column
                  prop="rechargeBalance"
                  label="充值金额"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="giftBalance"
                  label="赠送金额"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="points"
                  label="赠送积分"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="growthValue"
                  label="赠送成长值"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="refuelMoney"
                  label="赠送加油金"
                  width="120">
                </el-table-column>

              </el-table-column>
              <el-table-column
                prop="activeTime"
                label="活动时间"
                width="200">
                <template slot-scope="scope">
                  <span v-if="scope.row.activeTime == 1">不限时间</span>
                  <span v-if="scope.row.activeTime == 2">自定义时间</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="activeStatus"
                label="活动进度"
                width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.activeStatus == 1"> <el-tag>启用</el-tag></span>
                  <span v-if="scope.row.activeStatus == 2"> <el-tag type="danger">禁用</el-tag></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="paymentValue"
                label="支付即充值"
                width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.paymentValue == 1"><el-tag>启用</el-tag></span>
                  <span v-if="scope.row.paymentValue == 2"><el-tag type="danger">禁用</el-tag></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="activeStatus"
                label="状态"
                width="80">
                <template slot-scope="scope">
<!--                  <span v-if="scope.row.activeStatus == 1"> <el-tag>在用</el-tag> </span>-->
<!--                  <span v-if="scope.row.activeStatus == 2"> <el-tag type="success">挂失</el-tag> </span>-->
<!--                  <span v-if="scope.row.activeStatus == 3"> <el-tag type="danger">停用</el-tag> </span>-->
                  <el-switch
                    v-model="scope.row.status"
                    :active-value="'1'"
                    :inactive-value="'3'"
                    active-color="#409EFF"
                    inactive-color="#909399"
                    @change="posteid(scope.row)"
                  >
                  </el-switch>
                </template>

              </el-table-column>
              <el-table-column
                prop="participationNo"
                label="参与次数"
                width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.participationNo == 0">不限制次数</span>
                  <span v-if="scope.row.participationNo != 0">{{scope.row.participationNo}} 次</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="sort"
                label="排序"
                width="100">
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="更新时间"
                width="120">
              </el-table-column>
              <el-table-column
                prop="date"
                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row.id)"
                  >删除</el-button>
                </template>

              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="pageNo"
              :limit.sync="pageSize"
              @pagination="getlist"
            />
          </el-card>
      <el-drawer
        title="添加-汽油卡"
        :visible.sync="dialog"
        size="50%"
        ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="form"  :rules="rules" :inline="true" >
            <el-form-item label="面向群体" :label-width="formLabelWidth">
              <el-radio-group v-model="form.groupOriented">
                <el-radio :label="1">不限群体</el-radio>
                <el-radio :label="2">会员等级</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="充值金额" :label-width="formLabelWidth" prop="rechargeBalance">
              <el-input v-model="form.rechargeBalance" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="赠送金额" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.giftBalance" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="赠送积分" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.points" autocomplete="off">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
            <el-form-item label="赠送成长值" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.growthValue" autocomplete="off">
                <template slot="append">成长值</template>
              </el-input>
            </el-form-item>
            <el-form-item label="赠送加油金" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.refuelMoney" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>

            <el-form-item label="赠送特权" :label-width="formLabelWidth" prop="name">
              <el-radio-group v-model="form.resource">
                <el-radio label="1">显示</el-radio>
                <el-radio label="2">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="参与次数" :label-width="formLabelWidth">
              <el-input-number v-model="form.participationNo" controls-position="right" :min="1" :max="10"></el-input-number>
            </el-form-item>
            <el-form-item label="员工提成" :label-width="formLabelWidth" prop="name">
              <el-radio-group v-model="form.employeeCommission">
                <el-radio label="1">仅会员首次充值提成</el-radio>
                <el-radio label="2">会员每次充值提成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="提成类型" :label-width="formLabelWidth" prop="name">
              <el-radio-group v-model="form.royaltyType">
                <el-radio label="1">无</el-radio>
                <el-radio label="2">按提成金额</el-radio>
                <el-radio label="3">按充值金额*提成比例</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="提成金额" v-if="form.royaltyType == 2" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.amountCommission" autocomplete="off">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="提成比例" v-if="form.royaltyType == 3" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.percentageCommissions" autocomplete="off">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="活动时间" :label-width="formLabelWidth" prop="name">
              <el-radio-group v-model="form.activeTime">
                <el-radio label="1">不限时间</el-radio>
                <el-radio label="2">自定义时间</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="时间范围" v-if="form.activeTime == 2" :label-width="formLabelWidth" prop="name">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="开始日期">
                </el-date-picker>
              -
              <el-date-picker
                v-model="form.endTime"
                type="date"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="活动状态" :label-width="formLabelWidth" prop="name">
              <el-radio-group v-model="form.activeStatus">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="支付储值" :label-width="formLabelWidth" prop="name">
              <el-radio-group v-model="form.paymentValue">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" :label-width="formLabelWidth" prop="name">
              <el-input-number v-model="form.sort" controls-position="right"  :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-form>
<!--          赠送卡券-->
          <div class="box-popup">
              <div class="dis-bit"><div>赠送卡券(选填)</div>  <el-button type="primary" icon="el-icon-plus" round>添加卡券</el-button> </div>
            <el-table
              :data="tableDatas"
              border
              style="width: 100%">
              <el-table-column
                prop="date"
                label="卡券名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="券类型"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="券详情">
              </el-table-column>
              <el-table-column
                prop="address"
                label="有效期">
              </el-table-column>
              <el-table-column
                prop="address"
                label="赠送数量">
              </el-table-column>
              <el-table-column
                prop="address"
                label="操作">
              </el-table-column>
            </el-table>
          </div>
<!--          附加特权-->
          <div class="box-popup">
            <div class="dis-bit">附加特权</div>
            <el-input
              type="textarea"
              placeholder="请输入内容"
              maxlength="225"
              show-word-limit
            >
            </el-input>
          </div>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="saveblockabb()" >确定</el-button>
          </div>
        </div>
      </el-drawer>



    </div>
</template>

<script>
  import { getList,addList,eitList,deleteList } from "@/api/EventMarketing/SaveBlock";
  export default {
    name: 'index',
    data(){
      return{
        isonline: '0',
        dialog: false,
        rules: {
          rechargeBalance: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
        },
        form: {
          sort:1,
          groupOriented:1,
          rechargeBalance:'',
          giftBalance:'',
          points:'',
          growthValue:'',
          refuelMoney:'',
          participationNo:0,
          employeeCommission:'1',
          royaltyType:'1',
          resource:'1',
          activeTime:'1',
          activeStatus:'1',
          paymentValue:'1',
          amountCommission:'',
          percentageCommissions:'',
        },
        tableDatas: [],
        formLabelWidth: '160px',
        timer: null,

        options: [
          {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        total:0,
        pageNo:1,
        pageSize:10,
        value: '',
        tableData: [
          {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]

      }
    },
    mounted() {
      this.getlist()
    },
    methods:{

        getlist(){
          let data = {
            isonline:this.isonline,
            pageNo:this.pageNo,
            pageSize:this.pageSize,
          }
          getList(data).then(res=>{
            this.tableData = res.data.records
            this.total = res.data.total;
          })
        },
      handleUpdate(data){
        console.log(data)
        this.form = data
        this.dialog = true
      },
      chongzhi(){
        this.form = {
          sort:1,
          groupOriented:1,
          rechargeBalance:'',
          giftBalance:'',
          points:'',
          growthValue:'',
          refuelMoney:'',
          participationNo:0,
          employeeCommission:'1',
          royaltyType:'1',
          resource:'1',
          activeTime:'1',
          activeStatus:'1',
          paymentValue:'1',
        }
        console.log('归零')
      },
      addblock(){
        this.chongzhi()
        console.log(this.from)
        this.dialog = true
      },
      posteid(data){
        eitList(data).then(res=>{
          if (res.code == 200){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getlist()
          }else {
            this.$message.error('修改失败');
          }
        })
      },
      handleDelete(id){
        deleteList(id).then(res=>{

          if (res.code == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getlist()
          }else {
            this.$message.error('删除失败');
          }
        })
      },
      saveblockabb(){
          if(this.form.id){
            eitList(this.form).then(res=>{
              if (res.code == 200){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.getlist()
              }else {
                this.$message.error('修改失败');
              }
            })
          }else{
            addList(this.form).then(res=>{
              if (res.code == 200){
                this.$message({
                  message: '新增成功',
                  type: 'success'
                });
                this.getlist()
              }else {
                this.$message.error('新增失败');
              }
            })

          }
        this.dialog = false
        this.chongzhi()
      },


      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      }
    }
  }
</script>

<style scoped>
  .demo-drawer__footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .box-popup{
    width: 90%;
    margin: 10px auto;
  }
  .dis-bit{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }
</style>
