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

export default {
  data() {
    return {
      file: [],
      workResults: ""
    };
  },
  watch:{
    workResults: {
      handler(val){
        window.basFlow.controls[this.$root.control.id].workResults = val
      }
    }
  },
   mounted() {
    if(this.$root.control.file && this.$root.control.file.length > 0) {
      this.file = this.$root.control.file;
    }
    this.workResults = this.$root.control.workResults
  },
  methods: {
    clickUpload(){
      $("#workResultUpdateFile").click();
    },

    close(item, index){
      if (!window.basFlow.curId[0]) {
        window.basFlow.alertBox(jq.i18n.prop("firstChooseNode") + "! ", 'danger');
        return false
      }
      window.deleteFile(item.id, 'file', item.id)
      // this.file.splice(index, 1)
      // window.basFlow.controls[this.$root.control.id] = {
      //   ...window.basFlow.controls[this.$root.control.id],
      //   file: this.file
      // }
    },
    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>
