<script >
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      findex:0,
      priceList:[
        "¥100",
        "¥150",
        "¥200",
        "¥300",
      ],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    setIndex(index){
      this.findex = index
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="input-box">
        <div>已选油品</div>
        <div>汽油92#</div>
      </div>
      <div class="input-box">
        <div>已选油枪</div>
        <div>1号枪</div>
      </div>
      <div class="input-box">
        <div>油品单价</div>
        <div>8.5元/L</div>
      </div>
      <el-input v-model="ruleForm.name" style="width: 490px" placeholder="请输入加油金额">
        <template slot="append">元</template>
      </el-input>
      <div class="box-">
          <div class="fo-box" @click="setIndex(index)" :class="{ 'active' : findex == index }" v-for="(item,index) in priceList" :key="index">
            {{item}}
          </div>
      </div>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.hui-size{
  font-size: 12px;
  color: #999999;
}
.input-box{
  width: 490px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #eceff1;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px auto;
  font-size: 14px;
  color: #FF9655;
}
.box-{
  width: 490px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px auto;
}
.fo-box{
  width: 72px;
  height: 36px;
  background: #D8D8D8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  color: #333333;

  cursor: pointer;
}
.active{
  background: #FF9655 !important;
  color: #fff !important;
}
</style>
