<template>
  <div class="main_con">
    <div class="optionList">
      <div @click="handleAdd" style="float: right; padding: 0 130px">添加</div>

      <div class="optionList_left">
        <div>
          <div class="optionList_left_line"></div>
          <div class="optionList_left_text">且</div>
        </div>
      </div>
      <div class="optionList_right">
        <el-form :inline="true" :model="form">
          <div v-for="(item, indexB) in list" :key="indexB">
            <el-form-item>
              当用户做过
              <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>
              对目标用户进行触达
            </el-form-item>
            <el-form-item>
              <el-button type="text" @click="handleDelete(item, indexB)" icon="el-icon-close"></el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        triggerList: [
          {
            triggerValue: '',
            list: [
              { value: '0', label: '启动APP' },
              { value: '1', label: '用户登录' },
              { value: '2', label: '购买基金商品' },
              { value: '3', label: '购买理财产品' },
              { value: '4', label: '购买保险产品' },
              { value: '5', label: '浏览基金产品' },
              { value: '6', label: '浏览理财产品' },
              { value: '7', label: '浏览保险产品' },
              { value: '8', label: '关闭APP' }
            ]
          }
        ]
      }
    }
  },
  computed: {
    list() {
      return this.form.triggerList.map(item => {
        item.list = item.list.map(i => {
          i.disabled = !!this.form.triggerList.find(item => item.triggerValue === i.value)
          return i
        })
        return item
      })
    }
  },
  methods: {
    handleAdd() {
      console.log('000')
      if (this.form.triggerList.length < this.form.triggerList[0].list.length) {
        const item = Object.assign({}, this.form.triggerList[0])
        item.triggerValue = ''

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

<style lang="scss" scoped>
.main_content {
  display: flex;
  justify-content: space-around;

  .box_card {
    .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;
          }
        }
      }
    }
  }
}
</style>
