<template>
  <div id="output">
    <div
      style="display: flex; margin-bottom: 12px;"
    >
     <el-input v-model="outputDesc" />
    </div>
    <div class="comFile">
      <p>
        <el-tag effect="dark" @click="item.type ? '' : openUrl(item)" @close="close(item, i)" v-for="(item, i) in output" :key="item.id" closable>{{ item.newName || item.docname }}</el-tag>
      </p>
      <div class="button-group">
        <el-button type="primary"  @click="clickUpload">点击上传</el-button>
        <el-button type="primary"  @click="clickManageEleFile">上传管理要素</el-button>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      output: [],
      outputDesc: ""
    };
  },
  watch:{
    outputDesc: {
      handler(val){
        window.basFlow.controls[this.$root.control.id].outputDesc = val
      }
    }
  },
  mounted() {
    if(this.$root.control.output && this.$root.control.output.length > 0) {
      this.output = this.$root.control.output;
    }
    this.outputDesc = this.$root.control.outputDesc
  },
  methods: {
    clickUpload(){
      $("#outputUpdateFile").click();
    },
    clickManageEleFile(){
      $("#updateOutputManageEleFile").click();
    },
    close(item, index){
      if (!window.basFlow.curId[0]) {
        window.basFlow.alertBox(jq.i18n.prop("firstChooseNode") + "! ", 'danger');
        return false
      }
      window.deleteFile(item.id, 'output', item.id)
      // this.output.splice(index, 1)
      // window.basFlow.controls[this.$root.control.id] = {
      //   ...window.basFlow.controls[this.$root.control.id],
      //   output: this.output
      // }
    },
    openUrl(item) {
      window.open(window.basFlow.baseUrl + '/document/print/' + item.id)
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-tag{
  padding: 0 8px;
  overflow: hidden;
  margin-right: 10px;
  cursor: pointer;
  .el-tag__close {
    transform: scale(1);
  }
}
.el-button {
  font-size: 12px !important;
}
.comFile {
  display: flex;
  flex-wrap: wrap;

  p {
    width: 330px;
  }
  .button-group {
    width: 185px;
    text-align: right;
  }
}
</style>
