<template>
  <div class="box-centenr">
    <div style="width: 40%">
      <el-alert
        title="警告提示的文案"
        type="error"
        description="为了保证加油站商户日常在线支付业务的稳定性，油客里里目前支持多通道支付
可以有效的避免单支付通道带来不稳定性，从而造成油站不能正常支付问题
加油站一旦出现不能正常支付的情况，可以随时手工切换支付通道，来保证加油站支付收款业务"
        :closable="false"
      >
      </el-alert>
    </div>
    <div class="content-box">
      <el-card class="box-card" shadow="hover" v-for="(item,index) in 10" :key="index">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>
        </div>
        <div>商户编号:1861975</div>
      </el-card>
    </div>
    <el-divider></el-divider>
    <div class="cont-box">
      <div style="width: 40%">
        <el-alert
          title="使用说明"
          type="error"
          description="添加/编辑对应的规则->规则配置正常->发布规则->规则生效
注意:功能状态启用且通道规则发布生效后当前功能才有效,否则使用系统单商户号模式"
          :closable="false"
        >
        </el-alert>
      </div>

      <div style="display: flex;align-items: center">
        <div class="mingc">规则周期</div>
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">永久</el-radio-button>
          <el-radio-button label="right">单日</el-radio-button>
        </el-radio-group>
        <div class="mingc">功能状态</div>
        <el-switch
          v-model="value"
        >
        </el-switch>
      </div>
    </div>

    <div class="cont-box" >
      <div><el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加规则</el-button></div>
      <div><el-button type="success" icon="el-icon-s-promotion" @click="open">发布规则</el-button></div>
    </div>
    <div class="hangbox" v-for="(item,index) in 3" :key="index">
      <div>{{index + 1}}.通道</div>
      <div class="jiaong"> 名称 </div>
      <div> 商户号 </div>
      <div class="jiaong"> 1231213213212</div>
      <div> 交易满 </div>
      <div class="jiaong"> 2 </div>
      <div> 笔更换支付通道 参与次数  </div>
      <div class="jiaong"> 不固定次数 </div>

      <el-button type="primary" icon="el-icon-edit">编辑</el-button>
      <el-button type="danger" icon="el-icon-close">删除</el-button>
    </div>
    <div class="hsize">注:规则按照顺序进行处理并自动更换支付通道，新增或变更规则后需要发布当前规则才生效,发布生效后的规则将从序号1的配置生效</div>

    <el-dialog title="编辑通道规则" :visible.sync="dialogFormVisible">
      <el-form :model="form">

        <el-form-item label="支付通道" :label-width="formLabelWidth" width="300px">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消费满笔数" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
          <div>消费笔数满足后切换到下一个支付通道</div>
        </el-form-item>
        <el-form-item label="参与次数" :label-width="formLabelWidth">
          <el-radio-group v-model="form.resource" >
            <el-radio label="不固定次数"></el-radio>
            <el-radio label="固定次数"></el-radio>
          </el-radio-group>
          <div>是否限制当前配置在生效期间内的参与次数</div>
        </el-form-item>

        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number v-model="form.num" controls-position="right"  :min="1" :max="100"></el-input-number>
          <div>数值越大顺序越在前</div>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'peizhi',
  data(){
    return{
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible:false,
      value:'false',
      labelPosition: 'right',
    }
  },
  methods:{
    open() {
      this.$confirm('此操作会发布件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '发布成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });
    }
  }


}
</script>

<style scoped>
.box-centenr{
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.content-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.box-card{
  width: 24%;
  margin-right: 15px;
  margin-bottom: 15px;
}
.cont-box{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 20px 0px;
}
.hangbox{
  width: 100%;
  border-bottom: 1px solid #f4f5f6;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 15px 0px;
}
.jiaong{
  text-align: center;
  box-sizing: border-box;
  padding: 5px 20px;
  background: #F2F6FC;
  color: #409EFF;
  font-weight: bold;
  margin: 0px 5px;
  border-radius: 4px;

}
.mingc{
  margin: 0px 10px;
  color: #999;
}
.hsize{
  color: #999;
}


</style>