<template>
  <div id="files-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <data-table :fields="fields" :opera="opera" :data="list" :usePage="false" @view="toView">
            <template slot="btn">
              <el-button type="primary" size="mini" @click="heFile">高拍仪资料添加</el-button>
              <el-button type="primary" size="mini" @click="heDown">资料查看</el-button>
              <el-button type="primary" size="mini" @click="show = true">添加</el-button>
            </template>
            <!-- <template #custom="{ item, row }">
              <template v-if="item.model === 'el_img'">
                <el-image :src="row.el_img" style="width: 60px; height: 60px" @click="viewImage(row.el_img)"></el-image>
              </template>
            </template> -->
          </data-table>
        </el-col>
        <el-col :span="24" class="two">
          <el-col :span="24" class="txt">申请所需电子资料</el-col>
          <el-col :span="24" class="info">
            <el-col :span="24" v-html="info.type_seven.content"> </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog class="dialog" title="电子资料信息管理" :visible.sync="show" width="30%" :before-close="close" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" label-width="130px">
        <el-form-item label="电子资料类型" prop="type">
          <el-input v-model="form.type" placeholder="请输入电子资料类型"></el-input>
        </el-form-item>
        <el-form-item label="电子资料名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入电子资料名称"></el-input>
        </el-form-item>
        <el-form-item label="电子资料文件" prop="el_img">
          <s-upload :limit="1" :data="form.el_img" type="el_img" listType="" :url="'/files/baoan/elimg/upload'" @upload="uplSuc" @delete="uplDel"></s-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog class="twoDialog" title="高拍仪资料上传" :visible.sync="twoShow" width="50%" :before-close="twoClose" :close-on-click-modal="false">
      <el-table :data="heFileList" border>
        <el-table-column prop="type" label="电子资料类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.type" placeholder="请输入电子资料类型"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="name" label="电子资料名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.name" placeholder="请输入电子资料名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column property="el_img" label="电子资料文件" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-image :src="scope.row.el_img" style="width: 60px; height: 60px" @click="viewImage(scope.row.el_img)"></el-image>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="uploadBtn(scope.$index, scope.row)" type="text" size="small">上传</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog class="thrDialog" title="电子资料信息资料" :visible.sync="thrShow" width="50%" :before-close="thrClose" :close-on-click-modal="false">
      <el-col :span="24" class="info">
        <el-col :span="12" class="left"> <img id="streamimage" class="xform" src="http://127.0.0.1:38088/video=stream&camidx=0" /> </el-col>
        <el-col :span="12" class="right">
          <el-button type="primary" size="mini" @click="RotateLeft()">左转90</el-button>
          <el-button type="primary" size="mini" @click="RotateRight()">右转90</el-button>
          <el-button type="primary" size="mini" @click="GrabImage()">拍照保存在本地</el-button>
        </el-col>
      </el-col>
    </el-dialog>
  </div>
</template>

<script>
const { digital_files } = require('@common/src/layout/deploy/dict');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: map_digital_files } = createNamespacedHelpers('digital_files');
const { mapActions: mapUpload } = createNamespacedHelpers('upload');
const { mapActions: security_guard_base } = createNamespacedHelpers('security_guard_base');
const moment = require('moment');
import axios from 'axios';
export default {
  name: 'files-1',
  props: {
    basic_id: { type: String },
  },
  components: {},
  data: function () {
    return {
      // 列表
      fields: [
        { label: '电子材料类型', model: 'type' },
        { label: '电子材料名称', model: 'name' },
        { label: '文件地址', model: 'el_img' },
      ],
      opera: [{ label: '下载', method: 'view' }],
      list: [],
      // 添加
      show: false,
      form: {},
      rules: {
        type: [{ required: false, message: '请输入电子资料类型', trigger: 'blur' }],
        name: [{ required: false, message: '请输入电子资料名称', trigger: 'blur' }],
        el_img: [{ required: false, message: '请选择', trigger: 'change' }],
      },
      // 高拍仪
      twoShow: false,
      heFileList: [],
      // 高拍仪资料获取
      thrShow: false,
      // 电子资料说明
      info: digital_files,
    };
  },
  created() {
    if (this.id) this.search();
  },
  methods: {
    ...map_digital_files(['query', 'create', 'update', 'gpyTest']),
    ...mapUpload(['uploadCreate']),
    ...security_guard_base({ baseFetch: 'fetch' }),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      info.main_id = this.id;
      let res = await this.query({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          if (data.id) {
            let res = await this.update(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
              this.show = false;
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          } else {
            let res = await this.create(data);
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `操作成功` });
              this.$emit('basicBtn', res.data);
              this.show = false;
            } else {
              this.$message({ type: `success`, message: `${res.errmsg}` });
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 查看
    toView({ data }) {
      window.open(`${process.env.VUE_APP_HOST}${data.el_img}`, '_blank');
    },
    // 取消添加
    close() {
      this.form = {};
      this.show = false;
    },
    // 上传图片
    uplSuc({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
    uplDel({ type }) {
      this.$set(this.form, `${type}`, null);
    },
    // 高拍仪获取资料添加
    heFile() {
      this.thrShow = true;
    },
    // 左转90
    async RotateLeft() {
      var params = '{"camidx":"' + '0' + '","rotate":"' + '90' + '"}';
      // const ax = axios.create({ baseURL: 'http://127.0.0.1:38088/' });
      // const res = await ax.request({
      //   url: 'video=rotate',
      //   method: 'post',
      //   data: params,
      //   responseType: 'json',
      // });
      // if (res.code == 0) {
      //   var time = new Date().toLocaleString();
      //   console.log(time + '\t' + '设置旋转角度成功');
      // } else {
      //   var time = new Date().toLocaleString();
      //   conslole.log(time + '\t' + '设置旋转角度失败');
      // }
      $.ajax({
        url: 'http://127.0.0.1:38088/video=rotate',
        type: 'post',
        dataType: 'json',
        data: params,
        success: (res) => {
          if (res.code == 0) {
            var res = new Date().toLocaleString();
            console.log(res + '\t' + '设置旋转角度成功');
          } else {
            var res = new Date().toLocaleString();
            conslole.log(res + '\t' + '设置旋转角度失败');
          }
        },
      });
    },
    async RotateRight() {
      var params = '{"camidx":"' + '0' + '","rotate":"' + '270' + '"}';
      // const ax = axios.create({ baseURL: 'http://127.0.0.1:38088/' });
      // const res = await ax.request({
      //   url: 'video=rotate',
      //   method: 'post',
      //   data: params,
      //   responseType: 'json',
      // });
      // if (res.code == 0) {
      //   var time = new Date().toLocaleString();
      //   console.log(time + '\t' + '设置旋转角度成功');
      // } else {
      //   var time = new Date().toLocaleString();
      //   conslole.log(time + '\t' + '设置旋转角度失败');
      // }
      $.ajax({
        url: 'http://127.0.0.1:38088/video=rotate',
        type: 'post',
        dataType: 'json',
        data: params,
        success: (res) => {
          if (res.code == 0) {
            var res = new Date().toLocaleString();
            console.log(res + '\t' + '设置旋转角度成功');
          } else {
            var dresate = new Date().toLocaleString();
            console.log(res + '\t' + '设置旋转角度失败');
          }
        },
      });
    },
    // 拍照保存到本地
    async GrabImage() {
      var cutpage = 0;
      var params = '{"filepath":"' + `` + '","rotate":"' + '0' + '","camidx":"' + '0' + '","cutpage":"' + '0' + '"}';
      // const ax = axios.create({ baseURL: 'http://127.0.0.1:38088/' });
      // const res = await ax.request({
      //   url: 'video=grabimage',
      //   method: 'post',
      //   data: params,
      //   responseType: 'json',
      // });
      // if (res.code != 0) {
      //   console.log(res);
      // } else {
      //   this.uploadImg(res);
      // }
      $.ajax({
        url: `http://127.0.0.1:38088/video=grabimage`,
        type: 'post',
        dataType: 'json',
        data: params,
        success: (res) => {
          if (res.code != 0) {
            console.log(res);
          } else {
            this.uploadImg(res);
          }
        },
      });
    },
    async uploadImg(data) {
      let res = await this.baseFetch({ id: this.id });
      if (this.$checkRes(res)) {
        let p1 = {
          name: data.uuid,
          uri: `/baoan/hightBeat/${moment().format('YYYYDDMM')}/${res.data.card}/upload`,
          extension: 'jpg',
          code: `data:image/jpg;base64,${data.photoBase64}`,
        };
        let p2 = await this.uploadCreate(p1);
        if (this.$checkRes(p2)) {
          this.heFileList.push({ el_img: p2.data.uri });
          this.thrClose();
        }
      }
    },
    // 高拍仪获取资料关闭
    thrClose() {
      this.thrShow = false;
    },
    // 高拍仪资料上传
    heDown() {
      this.twoShow = true;
    },
    // 资料上传
    async uploadBtn(index, data) {
      data.main_id = this.basic_id;
      let res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `操作成功` });
        this.search();
        this.twoClose();
      } else {
        this.$message({ type: `success`, message: `${res.errmsg}` });
      }
      this.heFileList.splice(index, 1);
    },
    // 关闭
    twoClose() {
      this.twoShow = false;
    },
    // 图片查看
    viewImage(data) {
      console.log(data);
      window.open(data);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    basic_id: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$set(this.form, `main_id`, this.basic_id);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      margin: 0 0 10px 0;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .two {
    .txt {
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0;
      text-align: center;
    }
    .info {
      /deep/p {
        padding: 5px;
        margin: 0 0 8px 0;
        border: 1px dashed #cccccc;
      }
    }
  }
}
.dialog {
  /deep/.el-dialog__body {
    padding: 10px;
  }
  .btn {
    text-align: center;
  }
}
.twoDialog {
  /deep/.el-dialog__body {
    padding: 10px;
    height: 425px;
    overflow-y: auto;
  }
}
.thrDialog {
  /deep/.el-dialog__body {
    padding: 10px;
    height: 425px;
    overflow-y: auto;
  }
  .info {
    .left {
      .xform {
        width: 100%;
        height: 420px;
      }
    }
    .right {
      padding: 0 10px;
    }
  }
}
</style>
