<template>
  <box title="业绩比较基准" class="compares-box">
    <ul>
      <li v-for="(item, index) in inputList" :key="index">
        <div class="input-box">
          <input type="text" class="input1" placeholder="请输入" v-model="item.input1">
          <div class="icon-x"></div>
          <div class="character-input">
            <div class="character">%</div>
            <input type="text" class="input2" placeholder="请输入" v-model="item.input2">
          </div>
          <div class="el-icon-remove" @click="inputRemove(index)"></div>
        </div>
        <div class="jia-icon" v-if="inputList.length -1 != index"></div>
      </li>
    </ul>
    <div class="add el-icon-circle-plus" @click="inputAdd"></div>
  </box>
</template>

<script>
import Box from './Box.vue'
export default {
  components: { Box },
  data() {
    return {
      inputList: [
        { input1: '', input2: '' },
        { input1: '', input2: '' }
      ]
    }
  },
  methods: {
    inputAdd() {
      this.inputList.push({ input1: '', input2: '' })
    },
    inputRemove(index) {
      if (this.inputList.length <= 2) {
        this.$message('最少俩条')
        return
      }
      this.inputList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
ul{
  padding-left: 20px;
  padding-top: 23px;
  li{
    .input-box{
      display: flex;
      align-items: center;
    }
    .jia-icon{
      width: 28px;
      height: 28px;
      background: url(https://webapp-pub.ezijing.com/x-training-new/jia.png);
      background-size: 100% 100%;
      margin: 16px 0 16px 282px;
    }
    input{
      background: #68B8A4;
      box-shadow: 0px 3px 7px 0px rgba(4, 0, 0, 0.29) inset;
      border-radius: 6px;
      font-size: 16px;
      color: #FFFFFF;
      padding-left: 15px;
      box-sizing: border-box;
      height: 41px;
      &::-webkit-input-placeholder{
        color: #fff;
      }
    }
    .input1{
      width: 263px;
    }
    .input2{
      width: 210px;
      padding-right: 38px;
    }
    .character-input{
      position: relative;
      .character{
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
        font-size: 16px;
        color: #FFFFFF;
      }
    }
    .el-icon-remove{
      font-size: 30px;
      cursor: pointer;
      color: rgb(204,204,204);
      margin-left: 5px;
    }
    .icon-x{
      width: 26px;
      height: 26px;
      background: url(https://webapp-pub.ezijing.com/x-training-new/cheng.png);
      background-size: 100% 100%;
      margin: 0 20px;
    }
  }
}
.compares-box{
  position: relative;
  .add{
    position: absolute;
    right: 20px;
    bottom: 35px;
    font-size: 30px;
    cursor: pointer;
    color: rgb(204,204,204);
  }
}
</style>
