<template>
  <p-modal :title="isView?$lang('查看资源'):$lang('上传资源')"
           :visible="value"
           :width="isView?580:900"
           :confirm-loading="confirmLoading"
           @ok="handleOk"
           @cancel="handleCancel">
    <div class="box"
         v-if="value">
      <div class="box-left">
        <p-view ref="view"
                :urlList="viewUrllist"
                :uploadIdArray="uploadIdlist"
                :isView="isView"
                @deleteEvet="deleteEvet"
                 />
      </div>
      <div v-if="!isView"
           class="box-right">
        <p-upload 
                  @uploadEnd="uploadEnd"
                  :fileNum="fileNum" />
      </div>
    </div>
  </p-modal>
</template>

<script>
import PUpload from "./upload";
import PView from "./view";

export default {

  components: {
    'p-upload': PUpload,
    'p-view': PView
  },

  props: {
    value: {
      type: Boolean,
      default: false
    },
    viewUrllist: {
      type: Array,
      default() {
        return []
      }
    },
    isView: {
      type: Boolean,
      default: false
    },
    uploadIdlist: {
      type: Array,
      default() {
        return []
      }

    },
    fileNum: {
      type: Number,
      default: 10,
    }
  },

  data() {
    return {
      confirmLoading: false,
      resList: []
      
    }
  },

  methods: {

    uploadEnd(data) {
      let arr = []
      data.forEach(item => {
        arr.push(item.id)
      });
      this.$refs.view.queryList(arr);
      // console.log(data)
      let datalist = [...data,...this.$refs.view.fileList,...this.$refs.view.Pdflist]
      this.resList = datalist
    },
    deleteEvet(data){
      this.resList = data
    },
    handleOk(e) {
      // console.log(this.resList,'completedcompletedcompletedcompletedcompletedcompletedcompletedv')
      let imglist = this.$refs.view.fileList
      let pdflist = this.$refs.view.Pdflist
      // let data = this.resList.length  == 0 ? [...imglist,...pdflist] : this.resList
      let data =  [...imglist,...pdflist]
      console.log(data,'data')
      // data.map(item => {
      //   if(item.loadPath) {
      //     item.path = item.loadPath
      //     delete item.loadPath
      //     return item
      //   }
      // })
      this.$emit('completed',data)
      this.handleCancel();
    },
    handleCancel(e) {
      this.$emit('input', false)
      this.confirmLoading = false;
    },

  }

}
</script>

<style scoped>
.box {
  overflow: hidden;
  height: 50vh;
}
.box > div {
  padding: 10px 15px;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: #f7f7f7;
}
.box > div > h2 {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333333;
}
.box-left {
  float: left;
  width: 550px;
}
.box-right {
  float: right;
  width: calc(100% - 560px);
}
</style>