<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"
                :uploadId="id" />
      </div>
      <div v-if="!isView"
           class="box-right">
        <p-upload :uploadId="id"
                  @uploadEnd="uploadEnd" />
      </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
    },
    id: {
      type: String,
      default: ''//1000000035
    },
    isView: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      confirmLoading: false,
    }
  },

  methods: {

    uploadEnd() {
      this.$refs.view.queryList();
    },

    handleOk(e) {
      this.$emit('completed')
      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>