<template>
  <div class="flexbox form__box" :style="{ width: width || '100%' }">
    <div class="title form__title" v-if="title">
      <span class="red2" v-if="emphasize">*</span>
      {{ title }}
    </div>
    <div class="flex">
      <div class="form-autoEdit-list">
        <div class="form-autoEdit-item flexbox" v-for="(item,j) in dataArray" :key="j">
          <div class="form-autoEdit-item-i txt">{{j+1}}</div>
          <div class="con flex">
            <ts-select
              v-model="item.model"
              :placeholder="item.placeholder"
              :source="deploy"
              :name="item.name"
              width="95%"
              @selected="onSelect($event,item)"
            ></ts-select>
            <ts-button
              id="deleteAutoEdit"
              type="text"
              icon="iconfont icon-Group-17"
              @click="onRelation('delete',item.i)"
              v-if="canDel&&j!=0"
            ></ts-button>
            <ts-button
              v-if="canAdd&&j===0"
              id="addAutoEdit"
              type="text"
              icon="iconfont icon-Group-13"
              @click="onRelation('add',item.i)"
              class="form-autoEdit-item-add-btn"
            ></ts-button>
          </div>
        </div>
      </div>
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tsAutoEdit',
  props: {
    biCustom: Object,
    width: String,
    title: String,
    canAdd: Boolean,
    canDel: Boolean,
    emphasize: Boolean,
    dataList: Array
  },
  data() {
    return {
      dataArray: this.dataList
    }
  },
  computed: {
    deploy() {
      return {
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: (this.biCustom && this.biCustom.norm) || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 选择后赋值
    onSelect(row, item) {
      item.id = row.id
      item.name = row._name
      item.measureName = row.measureName
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = { ...this.dataList[0] }
          relation.id = this.$utils.uuid(16)
          this.dataArray.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.dataArray.length; i++) {
            if (this.dataArray[i].i == index && index != 0) {
              this.dataArray.splice(i, 1)
              break
            }
          }
          break
      }
    }
  },
  watch: {
    dataList(val) {
      this.dataArray = [...this.dataList]
    }
  }
}
</script>

<style lang="scss">

</style>
