<template>
  <box title="业绩比较基准" class="compares-box" :id="firstItem.id" :isErrorBtn="isErrorBtn()" @errorResolution="errorResolution">
    <ul>
      <li v-for="(item, index) in inputList" :key="index">
        <div class="input-box">
          <input type="text" :class="`input1 isDomActive ${isClass()}`" placeholder="请输入" v-model="item.input1" />
          <div class="icon-x"></div>
          <div class="character-input">
            <div class="character">%</div>
            <input type="text" :class="`input2 isDomActive ${isClass()}`" 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 {
  props: {
    data: { type: Object }
  },
  components: { Box },
  data() {
    return {
      inputList: [{ input1: '', input2: '' }]
    }
  },
  computed: {
    firstItem() {
      const [first = {}] = this.data.completions
      return first
    }
  },
  methods: {
    isErrorBtn() {
      const findErr = this.data.completions.findIndex(item => !item.is_correct)
      return findErr + 1
    },
    errorResolution() {
      this.$emit('errorResolution', this.data)
    },
    isClass() {
      if (this.$route.path === '/product-analysis/result') {
        return this.data.completions[0].is_correct ? '' : 'active'
      }
      return ''
    },
    inputAdd() {
      this.inputList.push({ input1: '', input2: '' })
    },
    inputRemove(index) {
      if (this.inputList.length <= 1) {
        this.$message('最少一条')
        return
      }
      this.inputList.splice(index, 1)
    }
  },
  created() {
    if (this.firstItem.commit_answer !== '') {
      this.inputList = []
      this.firstItem.commit_answer.split(';').forEach(item => {
        const val = item.split(',')
        this.inputList.push({ input1: val[0], input2: val[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;
      &.active{
        background: #FFFFFF;
        border: 1px solid #CF4C4C;
        box-shadow: none;
        color: rgba(102, 102, 102, 1);
        &::-webkit-input-placeholder{
          color: rgba(207, 25, 25, 1);
        }
      }
    }
    .input2 {
      width: 210px;
      padding-right: 38px;
      &.active{
        background: #FFFFFF;
        border: 1px solid #CF4C4C;
        box-shadow: none;
        color: rgba(102, 102, 102, 1);
        &::-webkit-input-placeholder{
          color: rgba(207, 25, 25, 1);
        }
      }
    }
    .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>
