<template>
  <div class="capture-box">
    <div class="capture-box-header">
        <span>拍照上传</span>
        <i class="el-icon-error" @click="cancel"></i>
    </div>
    <div class="capture-box-content">
      <div class="capture-box-video">
        <div class="video_">
            <div id="non-video" class="non-video">
              <img src="../images/non-video-icon.png"/>
              <div class="title">没有连接到摄像头!</div>
            </div>
            <video id="video" ref="video" autoplay style="display:none"></video>
            <video id="video_bak" autoplay></video>
        </div>
        <div class="button_">
          <el-button :type="$parent.navigatorStream&&$parent.navigatorStream.active?'primary':'info'" @click="picture">
            <img src="../images/cut-pic.png" />拍照
          </el-button>
          <el-button :type="$parent.exArray.length>1?'primary':'info'" @click="switchStream">切换摄像头</el-button>
          <el-button :type="$parent.navigatorStream&&$parent.navigatorStream.active&&imagesData.length>0?'primary':'info'" @click="next">下一步</el-button>
        </div>
      </div>
      <div class="capture-box-pic" id="pictures-box" :style="!expandStatus?'width: 80px;':''">
        <el-dialog
          class="attachment-manage-progress"
          width="130px"
          :visible.sync="progressDialog"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :show-close="false"
          append-to-body
        >
          <el-progress type="circle" :percentage="~~(percentageValue / imagesData.length * 50)"></el-progress>
        </el-dialog>
        <!--  -->
        <div class="pic-expand" :title="expandStatus?'收起':'展开'" @click="expandStatus=!expandStatus">
            <svg viewBox="64 64 896 896" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" v-if="expandStatus">
            <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"></path>
            </svg>
            <svg viewBox="64 64 896 896" class="" data-icon="menu-unfold" width="1em" height="1em" fill="currentColor" aria-hidden="true" v-else>
            <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"></path>
            </svg>
        </div>
        <ul class="pic-list">
            <li
                v-for="(item, itemIndex) in imagesData"
                :key="itemIndex"
                :class="expandStatus?'active':''"
            >
                <img :src="item" alt="" @dblclick="preview = item; viewVisible = true">
                <el-button type="text" icon="el-icon-error" @click="deletePic(itemIndex)"></el-button>
            </li>
        </ul>
        <div class="pic-info" v-if="expandStatus">
            <el-select v-model="upload_info.type">
                <el-option
                  v-for="(opt, optIndex) in typeData"
                  :key="optIndex"
                  :label="opt.label"
                  :value="opt.value"
                ></el-option>
            </el-select>
            <el-button type="primary" @click="upload">保存</el-button>
        </div>
      </div>
    </div>

    <!-- 预览 -->
    <el-dialog
      class="attachment-manage-dialog"
      title="预览"
      width="640px"
      :visible.sync="viewVisible"
      :close-on-click-modal="false"
      append-to-body
    >
      <img :src="preview" alt="" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import ElButton from 'element-ui-qz/packages/button';
import ElDialog from 'element-ui-qz/packages/dialog';
import ElForm from 'element-ui-qz/packages/form';
import ElFormItem from 'element-ui-qz/packages/form-item';
import ElProgress from 'element-ui-qz/packages/progress';

export default {
  components: {
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElProgress
  },
  props: {
    interfaceUrl: String,
    typeData: Array,
    data: Object
  },
  watch: {
    imagesData(value) {
      if (value.length === 0) {
        this.expandStatus = false;
      }
    }
  },
  data() {
    return {
      imagesData: [],
      expandStatus: false,
      percentageValue: 0,
      upload_info: {
        type: 'KHWJ',
        remark: ''
      },
      viewVisible: false,
      preview: null,
      progressDialog: false
    };
  },
  methods: {
    cancel() {
      this.$parent.navigatorStream && this.$parent.navigatorStream.getTracks() && this.$parent.navigatorStream.getTracks()[0] && this.$parent.navigatorStream.getTracks()[0].stop();
      this.$parent.buttons_type = '';
    },
    picture() {
      if (!this.$parent.navigatorStream || !this.$parent.navigatorStream.active) {
        return;
      }
      // 3703 x 2614
      let canvas_node = document.createElement('canvas');
      let video = this.$refs.video;
      canvas_node.width = 3703;
      canvas_node.height = 2614;
      let context = canvas_node.getContext('2d');
      context.drawImage(video, 0, 0, 3703, 2614);
      // base64
      this.imagesData.push(canvas_node.toDataURL('image/png'));
    },
    switchStream() {
      this.$parent.exArray.reverse();
      this.$parent.navigatorStream && this.$parent.navigatorStream.getTracks() && this.$parent.navigatorStream.getTracks()[0] && this.$parent.navigatorStream.getTracks()[0].stop();
      this.$parent.startVideo();
    },
    next() {
      if (!this.$parent.navigatorStream || !this.$parent.navigatorStream.active || this.imagesData.length === 0) {
        return;
      }
      this.expandStatus = true;
    },
    deletePic(index) {
      this.imagesData.splice(index, 1);
    },
    upload: function() {
      if (!this.imagesData || this.imagesData.length === 0) {
        this.$message.warning('请先拍摄！');
        return;
      }
      this.progressDialog = true;
      // 保存
      const callback = () => {
        if (this.imagesData.length === this.percentageValue / 2) {
          this.progressDialog = false;
          this.cancel();
          this.$parent.getTableData && this.$parent.getTableData();
        }
      };
      const saveImg = (data) => {
        const obj = data.obj.obj;
        const params = Object.assign({
          file_name: obj.name,
          file_prn: obj.prn,
          file_size: obj.file_size,
          file_uri: obj.file_uri,
          bus_type: this.upload_info.type,
          remark: '拍摄',
          source: '拍摄',
          busin_co: '',
          encr_lev: ''
        }, this.data);
        // this.$http.post(`${this.interfaceUrl}add`, Object.assign({
        this.$http.post(`${this.interfaceUrl}saveFileDatas?JID=${this.data.JID}`, {
          fileDatasStr: JSON.stringify(params)
        }, {
          emulateJSON: true
        }).then((res) => {
          if (!res.body.status) {
            this.$message.error(res.body.error);
          }
          this.percentageValue++;
          callback();
        }, (error) => {
          console.log(error);
        });
      };
      // 上传
      this.imagesData.forEach((item, itemIndex) => {
        this.$http.post(`${this.interfaceUrl}dataUpload`, Object.assign({
          bus_type: this.upload_info.type,
          data: item
        }, this.data), {
          emulateJSON: true
        }).then((res) => {
          if (res.body.status) {
            saveImg(res.body);
            this.percentageValue++;
          } else {
            this.$message.error(`第${itemIndex + 1}张上传失败`);
            this.percentageValue = this.percentageValue + 2;
            callback();
          }
        }, (error) => {
          console.log(error);
        });
      });
    }
  },
  beforeDestroy() {
    this.cancel();
  }
};
</script>

<style lang="scss" scoped>

</style>

