<template>
  <div class="main_content">
    <!-- 步骤一 -->
    <el-card class="box_card">
      <div slot="header" class="clearfix">
        <span>{{ cardList.cardTitle }}</span>
        <div style="display: flex" class="box_card_add" @click="handleAdd">
          <img src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png" alt="" class="box_card_add_btn" />
          <div class="box_card_add_text">添加</div>
        </div>
      </div>
      <div class="optionList">
        <div class="optionList_left">
          <div v-for="item in cardList.form.personAttribute.length - 1" :key="item">
            <div class="optionList_left_line"></div>
            <div class="optionList_left_text">且</div>
          </div>
        </div>
        <div class="optionList_right">
          <el-form :inline="true" :model="cardList.form">
            <div v-for="(item, indexB) in list" :key="indexB">
              <el-form-item>
                <el-select v-model="item.personal">
                  <el-option
                    v-for="it in item.personalMap"
                    :key="it.value"
                    :label="it.label"
                    :value="it.value"
                    :disabled="it.disabled"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="item.equal">
                  <el-option v-for="it in item.equalMap" :key="it.value" :label="it.label" :value="it.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="item.range">
                  <template v-if="item.personalMap.length > 0 && item.personalMap.find(i => item.personal === i.value)">
                    <el-option
                      v-for="it in item.personalMap.find(i => item.personal === i.value).children"
                      :key="it.value"
                      :label="it.label"
                      :value="it.value"
                    >
                    </el-option>
                  </template>
                </el-select>
              </el-form-item>
              <el-form-item>
                <img
                  class="optionList_right_del"
                  src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
                  @click="handleDelete(item, indexB)"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  props: {
    cardList: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    list() {
      return this.cardList.form.personAttribute.map(item => {
        item.personalMap = item.personalMap.map(i => {
          i.disabled = !!this.cardList.form.personAttribute.find(item => item.personal === i.value)
          return i
        })
        return item
      })
    }
  },
  methods: {
    // 增加
    handleAdd() {
      if (this.cardList.form.personAttribute.length < this.cardList.form.personAttribute[0].personalMap.length) {
        const item = Object.assign({}, this.cardList.form.personAttribute[0])
        item.personal = ''
        item.equal = ''
        item.range = ''
        // eslint-disable-next-line vue/no-mutating-props
        this.cardList.form.personAttribute.push(item)
      } else {
        this.$message.warning('添加项不能超过下拉选项个数')
      }
    },
    // 删除
    handleDelete(item, indexB) {
      if (this.cardList.form.personAttribute.length > 1) {
        // eslint-disable-next-line vue/no-mutating-props
        this.cardList.form.personAttribute.splice(indexB, 1)
      } else {
        this.$message.warning('默认至少有一条数据')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.main_content {
  display: flex;
  justify-content: space-around;

  .box_card {
    .box_card_add {
      float: right;
      padding-right: 104px;
      cursor: pointer;
      .box_card_add_text {
        font-size: 14px;
        font-weight: 400;
        color: #707070;
        text-align: center;
        line-height: 20px;
        margin-left: 8px;
      }
    }

    .optionList {
      display: flex;
      .optionList_left {
        position: relative;
        display: flex;
        flex-direction: column;
        .optionList_left_line {
          width: 0px;
          height: 85px;
          border: 1px solid #c5c5c5;
          opacity: 1;
        }
        .optionList_left_text {
          border-radius: 50%;
          width: 25px;
          height: 25px;
          background: #fff;
          border: 1px solid #c5c5c5;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          line-height: 25px;
          color: #49bba2;
          margin-left: -12px;
          margin-top: -60px;
        }
      }
      .optionList_right {
        margin-left: 16px;
        .el-form-item {
          padding-top: 0;
          .optionList_right_del {
            width: 12px;
            height: 12px;
            opacity: 1;
            cursor: pointer;
          }
        }
      }
    }
  }
}
::v-deep .el-card {
  border-radius: 16px;
  width: 826px;
  margin-bottom: 30px;
}
</style>
