<template>
   <div class="pane-up-wrap right-list-toolbar right-list-panel-fieldset" v-loading="dataLoading">
      <el-toolbar>
        <el-button v-if="!!id && id!='root' && !createFlag" @click="emitData" :disabled="!id || id=='root'">
          <i class="fa fa-floppy-o" aria-hidden="true"></i>保存
        </el-button>
        <el-button-group>
          <el-button @click="addFilterBlock" :disabled="(!id || id=='root') && !createFlag">
            <i class="fa fa-plus" aria-hidden="true"></i>新增过滤块
          </el-button>
          <el-button @click="removeFilterBlock" :disabled="filterBlock.length<=1 || (!id || id=='root') && !createFlag">
            <i class="fa fa-minus" aria-hidden="true"></i>删除过滤块
          </el-button>
        </el-button-group>
        &nbsp;&nbsp;
        <el-checkbox v-model="isautowrap">自动换行</el-checkbox>
      </el-toolbar>
      <div>
        <template v-for="item in filterBlock" v-if="(!!id && id!='root') || createFlag">
          <div class="panel-fieldset" :key="item.rowNo">
            <h4 class="panel-legend"></h4>
            <el-input :class="{autowrapoff:!isautowrap}" type="textarea" v-model="item.content" :autosize="{minRows: 6, maxRows:15}" placeholder=""></el-input>
          </div>
        </template>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      initData: {},
      formData: {},
      isautowrap: true,
      filterBlock: [{ rowNo: 1, content: '' }],
      interval: null, // interval
      dataLoading: false // 数据加载状态
    }
  },
  methods: {
    init(id) {
      //  console.log('inputID:' + id 'currentID:' + this.id)
      this.id = !this.id || this.id !== id ? id : this.id
      // console.log('fromwebtaskfilter  do init....id:' + this.id)
      this.loadFilterBlock(id)
    },

    // 新增过滤块
    addFilterBlock() {
      if (this.filterBlock.length < 1) {
        this.filterBlock.push({ rowNo: 1, content: '' })
      } else {
        this.filterBlock.push({ rowNo: this.filterBlock[this.filterBlock.length - 1].rowNo + 1, content: '' })
      }
    },

    // 删除过滤块
    removeFilterBlock() {
      this.filterBlock.splice(this.filterBlock.length - 1, 1)
    },

    // 加载过滤块数据
    loadFilterBlock(id) {
      if (!this.id || this.id === 'root') {
        return
      }

      this.dataLoading = true

      axios.get(`/ui/fromweb/${this.id}/filterlist`).then(res => {
        let data = res.data
        this.filterBlock = data.status === 1 ? data.data : this.filterBlock
        !this.filterBlock.length && this.addFilterBlock()
        // console.log(this.filterBlock)
        this.dataLoading = false
      })
    },

    emitData() {
    // console.log('emitData....')

      let emitData = {}
      emitData['ID'] = this.id
      for (var i = 0; i < this.filterBlock.length; i++) {
        emitData['filterblock' + (i + 1)] = this.filterBlock[i].content
      }

      let data = {
        type: 'Filter',
        data: emitData,
        flag: true
      }
      this.$emit('getData', data)
    },

    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },

    // 消息显示封装
    MsgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  },
  created() {
    this.id = this.taskID
    //  this.emitBasicInfo=Object.assign({}this.basicInfo);
    if (this.createFlag && this.createFlag === 'screate') {
      this.init()
    }
  },
  components: {},
  props: {
    taskID: {
      type: [String, Number],
      default: 0
    },
    createFlag: {
      type: [String],
      default: ''
    }
  },
  watch: {
    // id:'init'
  }
}
</script>

<style scoped>
.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.info-form-wrap {
  margin-top: 10px;
  padding: 10px 0;
  width: 560px;
}

.tag-item,
.title {
  line-height: 1.5;
  margin: 0.2em 0 0.3em 0;
}

.tag-item .tag-label {
  display: inline-block;
  text-align: right;
  width: 100%;
}

.title {
  margin-top: 1em;
  font-size: 20px !important;
}

</style>
<style>
label {
  margin: 0 !important;
  font-weight: normal !important;
}

.title .el-checkbox__label {
  font-size: inherit;
}
.autowrapoff textarea {
  word-wrap: normal;
}
</style>
