<template>
  <div class="main_con">
    <div class="main_con_add" @click="handleAdd">
      <img src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png" alt="" />
      添加
    </div>
    <div class="main_con_optionList">
      <div class="optionList_left">
        <div v-for="item in form[0].form.triggerList.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="form[0].form">
          <div v-for="(item, indexB) in list" :key="indexB">
            <el-form-item>
              <span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-select v-model="item.triggerValue">
                <el-option
                  v-for="it in item.list"
                  :key="it.value"
                  :label="it.label"
                  :value="it.value"
                  :disabled="it.disabled"
                >
                </el-option>
              </el-select>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span class="optionList_right_text">对目标用户进行触达</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </el-form-item>
            <el-form-item>
              <img
                src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
                @click="handleDelete(item, indexB)"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  mounted() {
    console.log(this.form, '----')
  },
  computed: {
    list() {
      return this.form[0].form.triggerList.map(item => {
        item.list = item.list.map(i => {
          i.disabled = !!this.form[0].form.triggerList.find(item => item.triggerValue === i.value)
          return i
        })
        return item
      })
    }
  },
  methods: {
    handleAdd() {
      console.log('000')
      if (this.form[0].form.triggerList.length < this.form[0].form.triggerList[0].list.length) {
        const item = Object.assign({}, this.form[0].form.triggerList[0])
        item.triggerValue = ''

        // eslint-disable-next-line vue/no-mutating-props
        this.form[0].form.triggerList.push(item)
      } else {
        this.$message.warning('添加项不能超过下拉选项个数')
      }
    },
    handleDelete(item, indexB) {
      if (this.form[0].form.triggerList.length > 1) {
        // eslint-disable-next-line vue/no-mutating-props
        this.form[0].form.triggerList.splice(indexB, 1)
      } else {
        this.$message.warning('默认至少有一条数据')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main_con {
  display: flex;
  flex-direction: column;
  .main_con_add {
    align-self: flex-end;
    padding: 0 130px 30px 0;
  }
  .main_con_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_text {
          font-size: 16px;
          font-weight: 400;
          color: #333333;
        }
        .optionList_right_del {
          width: 12px;
          height: 12px;
          opacity: 1;
        }
      }
    }
  }
}
</style>
