<template>
  <div>
    <el-dialog title="修图" :visible.sync="RevisionStatus" width="100%" :close-on-click-modal="false"
      :before-close="cancel" top="0" fullscreen :modal-append-to-body="false">
      <div class="box">
        <div class="oneBox">
          <el-table tooltip-effect="dark" :data="tableData" border :max-height="tableHeight" highlight-current-row
            size="mini" :row-key="getRowKeys" @row-click="clickTableRow">
            <el-table-column prop="file_name" label="文件名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="高清存在" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.file_remark">是</div>
                <div v-else>否</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="oneTwo">
          <el-card class="parameterSet" :body-style="{ padding: '10px' }">
            <span style="letter-spacing: 2px;">高清参数: </span>
            <span style="padding:0 5px" class="name"> 深度 </span>
            <el-select filterable default-first-option allow-create v-model="higDeSet.percentage" placeholder
              size="mini" style="width:75px">
              <el-option v-for="(item,key) in percentageList" :key="key" :label="item" :value="item"></el-option>
            </el-select>
            <span style="padding: 9px" class="name"> 填充色 </span>
            <input type="color" class="colorBtn" v-model="higDeSet.color_1">
            <span style="padding: 0 3px" class="name"> 被填充色 </span>
            <input type="color" class="colorBtn" v-model="higDeSet.color_2">


            <span style="letter-spacing: 2px;padding-left: 45px">扣取图章配置: </span>
            <span style="padding:0 5px" class="name">渲染深度</span>
            <el-select filterable default-first-option allow-create v-model="parameterset.percentage" placeholder
              size="mini" style="width:75px">
              <el-option v-for="(item,key) in percentageList" :key="key" :label="item" :value="item"></el-option>
            </el-select>
            <span style="padding: 9px" class="name"> 填充色 </span>
            <input type="color" class="colorBtn" v-model="parameterset.color_1">
            <span style="padding: 0 5px" class="name"> 被填充色 </span>
            <input type="color" class="colorBtn" v-model="parameterset.color_2">
            <span style="letter-spacing: 2px;padding-left: 45px">橡皮擦颜色: </span>
            <input type="color" class="colorBtn" v-model="eraser" id="eraser">
          </el-card>
          <div class="content">

            <el-card class="center" :body-style="{ padding: '0px' }">
              <div style="padding:5px 2px">
                <div class="title">
                  原版图片
                </div>
                <div style="padding:5px;height:36px">
                  <el-button :disabled="!clickRow.hasOwnProperty('id') || num===-1" @click="btnSet(1)" type="primary"
                    size="mini">撤回
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id') || num===-1 " @click="btnSet(2)" type="primary"
                    size="mini">重载
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(3)" type="primary" size="mini">缩小
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(4)" type="primary" size="mini">放大
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(5)" type="primary" size="mini">
                    实际大小
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(6)" type="primary" size="mini">纠偏
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(7)" type="primary" size="mini">
                    手动旋转
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(8)" type="primary" size="mini">裁剪
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(9)" type="primary" size="mini">复制
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(10)" type="primary" size="mini">
                    抠章
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet(11)" type="primary" size="mini">
                    高清
                  </el-button>
                </div>
                <div class="father">
                  <div
                    :style="{maxWidth:imgW+'px', position: 'absolute',top:'50%',left:'50%',transform: 'translate(-50%, -50%)',cursor: 'move'}"
                    id="box">
                    <img :src="src_1 " alt="" :style="{maxWidth:imgW+'px'}" id="img_1" @mousedown="vControl">
                    <div class="moveBox" id="active_box"></div>
                  </div>
                </div>
              </div>
            </el-card>
            <el-card class="right" :body-style="{ padding: '0px' }">
              <div style="padding:5px 2px">
                <div class="title">
                  高清图片
                </div>
                <div style="padding:5px;height:36px">
                  <el-button :disabled="!clickRow.hasOwnProperty('id') || gqNum===0" @click="btnSet_1(5)" type="primary"
                    size="mini">
                    撤回
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet_1(1)" type="primary" size="mini">
                    缩小
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet_1(2)" type="primary" size="mini">
                    放大
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet_1(3)" type="primary" size="mini">
                    实际大小
                  </el-button>
                  <el-button :disabled="!clickRow.hasOwnProperty('id')" @click="btnSet_1(4)" type="primary" size="mini">
                    橡皮擦
                  </el-button>
                </div>
                <div class='father_2'>
                  <div
                    :style="{maxWidth:imgW_1+'px', position: 'absolute',top:'50%',left:'50%',transform: 'translate(-50%, -50%)',cursor: 'move'}"
                    id="box_1">
                    <img lazy :src="src_2" alt="" :style="{maxWidth:imgW_1+'px'}" id="img_2" @mousedown="vControl_2" />
                    <div class="moveBox" id="active_box_1"></div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

    </el-dialog>
    <Rectification @getUPDATA='getUPDATA' :RectificationStatus='RectificationStatus'
      :RectificationForm='RectificationForm' :clickRow='clickRow' @cancel='cancels' />
  </div>
</template>
<script>
  import {
    getOneTable,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    load
  } from '@/api/scanIndex'
  import Rectification from "./components/Rectification.vue"
  import localStronge from "@/api/localData";
  import {
    message
  } from '@/utils/common';
  export default {
    props: {
      RevisionStatus: {
        type: Boolean,
        default: () => false,
      },
      Revisionparams: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        //撤回记录
        tableData: [],
        clickRow: {},
        src_1: "",
        src_2: "",
        imgW: 480,
        imgW_1: 480,
        tableHeight: window.innerHeight - 55,
        parameterForm: {
          buckleColor: "",
          buckleEndColor: "",
          percentage: "",
          filePath: "",
          fileNameServer: "",
          fileNameOptimized: "",
          fileNameRandom: "",
          height: "",
          width: "",
          showWidth: '',
          x: "",
          y: "",
          id: ''
        },
        parameterset: {
          percentage: '50%',
          color_1: "#FE003E",
          color_2: "#EE6B47"
        },
        percentageList: ['20%', '30%', '40%', '50%'],
        //高清
        higDeSet: {
          color_1: "#0A0A0A",
          color_2: "#3B7EF2",
          percentage: "40%"
        },
        //橡皮擦form
        eraser: '#FDFDD3',
        eraserForm: {},
        RectificationForm: {
          degrees: ""
        },
        //裁剪form 
        cutForm: {
          filePath: "",
          fileNameServer: "",
          height: "",
          width: "",
          x: "",
          y: "",
          showWidth: "",
          id: "",
          // srcImagePath: "",
        },
        higDeForm: {
          percentage: "",
          buckleColor: "",
          buckleEndColor: "",
          filePath: "",
          fileNameServer: "",
          tableName: "",
          id: ''
        },
        //矩形框
        isMouseDown: false,
        isMouseDown_1: false
      }
    },
    computed: {
      num: {
        get() {
          return this.$store.state.scanIndex.num;
        },
        set(val) {
          this.$store.state.scanIndex.num = val;
        },
      },
      gqNum: {
        get() {
          return this.$store.state.scanIndex.gqNum;
        },
        set(val) {
          this.$store.state.scanIndex.gqNum = val;
        },
      },
      RectificationStatus: {
        get() {
          return this.$store.state.scanIndex.RectificationStatus;
        },
        set(val) {
          this.$store.state.scanIndex.RectificationStatus = val;
        },
      },
    },
    watch: {
      num: {
        handler(val, oldval) {
          if (val === -1 && oldval === -2) {
            let data = {
              fileName: this.clickRow.file_name_server,
              filePath: this.clickRow.file_path
            }
            this.$store.dispatch('scanIndex/save', data).then(res => {

            })
          }
        }
      },
      src_1: {
        handler(val, oldval) {
          if (val.split('data')[0] != oldval.split('data')[0]) {
            var active_box = document.getElementById('active_box')
            active_box.style.width = "0px";
            active_box.style.height = "0px";
          }
        }
      },
      src_2: {
        handler(val, oldval) {
          if (val.split('data')[0] != oldval.split('data')[0]) {
            var active_box = document.getElementById('active_box_1')
            active_box.style.width = "0px";
            active_box.style.height = "0px";
          }
        }
      }
    },
    components: {
      Rectification,
    },
    methods: {
      getRowKeys(row) {
        return row.id;
      },
      getUPDATA() {
        getOneTable(this.Revisionparams).then((res) => {
          //原文表
          this.tableData = res.body.list;
          this.clickRow = this.tableData.filter(item => item.id === this.clickRow.id)[0]
          this.clickTableRow(this.clickRow)
        })
      },
      vControl(event) {
        let startX, startY
        startX = event.offsetX;
        startY = event.offsetY;
        var active_box = document.getElementById('active_box')
        active_box.style.top = startY + 'px';
        active_box.style.left = startX + 'px';
        active_box.style.width = "0px";
        active_box.style.height = "0px";
        this.isMouseDown = true
        let _that = this
        let data = this.cutForm
        let clickRow = this.clickRow
        var box = document.getElementById('box')
        let oEvent = event;

        if (this.btnType === 8) {
          event.preventDefault();
          data.x = oEvent.offsetX
          data.y = oEvent.offsetY
          data.showWidth = _that.imgW
          data.filePath = this.clickRow.file_path
          data.fileNameServer = this.clickRow.file_name_server
          data.id = clickRow.id
          box.onmousemove = function (ew) {
            if (document.getElementById("active_box") !== null && _that.isMouseDown) {
              var ab = document.getElementById("active_box");
              ab.style.width = ew.offsetX - startX + 'px';
              ab.style.height = ew.offsetY - startY + 'px';
            }
          }
          box.onmouseup = function (ev) {
            _that.isMouseDown = false
            data.height = active_box.style.height.split('p')[0]
            data.width = active_box.style.width.split('p')[0]
            _that.$store.dispatch('scanIndex/cutting', data).then(res => {
              _that.getUPDATA()
              active_box.style.width = "0px"
              active_box.style.height = "0px"

            })
          }
        } else if (this.btnType === 9) {
          event.preventDefault();
          data.x = oEvent.offsetX
          data.y = oEvent.offsetY
          data.showWidth = _that.imgW
          data.fileNameOptimized = this.clickRow.file_remark
          data.filePath = this.clickRow.file_path
          data.fileNameServer = this.clickRow.file_name_server
          data.id = clickRow.id
          box.onmousemove = function (ew) {
            if (document.getElementById("active_box") !== null && _that.isMouseDown) {
              var ab = document.getElementById("active_box");
              ab.style.width = ew.offsetX - startX + 'px';
              ab.style.height = ew.offsetY - startY + 'px';
            }
          }
          box.onmouseup = function (ev) {
            _that.isMouseDown = false
            data.height = active_box.style.height.split('p')[0]
            data.width = active_box.style.width.split('p')[0]
            _that.$store.dispatch('scanIndex/copy', data).then(res => {
              _that.getUPDATA()
            })
          }
        } else if (this.btnType === 10) {
          event.preventDefault();
          _that.parameterForm.x = oEvent.offsetX
          _that.parameterForm.y = oEvent.offsetY
          _that.parameterForm.showWidth = _that.imgW
          _that.parameterForm.id = clickRow.id
          _that.parameterForm.filePath = clickRow.file_path
          _that.parameterForm.fileNameServer = clickRow.file_name_server
          _that.parameterForm.fileNameOptimized = clickRow.file_remark
          _that.parameterForm.buckleColor = _that.parameterset.color_1
          _that.parameterForm.buckleEndColor = _that.parameterset.color_2
          _that.parameterForm.percentage = _that.parameterset.percentage
          box.onmousemove = function (ew) {
            if (document.getElementById("active_box") !== null && _that.isMouseDown) {
              var ab = document.getElementById("active_box");
              ab.style.width = ew.offsetX - startX + 'px';
              ab.style.height = ew.offsetY - startY + 'px';
            }
          }
          box.onmouseup = function (ev) {
            _that.isMouseDown = false
            _that.parameterForm.height = active_box.style.height.split('p')[0]
            _that.parameterForm.width = active_box.style.width.split('p')[0]
            _that.$store.dispatch('scanIndex/buckleSeal', _that.parameterForm).then(res => {

              _that.getUPDATA()
            })
          }
        } else {

          let oEvent = event;
          event.preventDefault();
          box.onmouseup = function (ev) {
            let oEvents = ev;
            let x, y
            if (oEvents.clientX < oEvent.clientX) {
              x = box.offsetLeft + oEvents.clientX - oEvent.clientX;
            } else {
              x = box.offsetLeft + oEvents.clientX - oEvent.clientX;
            }
            if (oEvents.clientY < oEvent.clientY) {
              y = box.offsetTop + oEvents.clientY - oEvent.clientY;
            } else {
              y = box.offsetTop + oEvents.clientY - oEvent.clientY;
            }
            box.style.left = x + 'px'
            box.style.top = y + 'px'
            box.onmousemove = null;
            box.onmouseup = null;
          }
        }
      },
      vControl_2(event) {
        let _that = this
        let data = this.eraserForm
        let clickRow = this.clickRow
        let startX, startY
        startX = event.offsetX;
        startY = event.offsetY;
        var box = document.getElementById('box_1')
        var active_box_1 = document.getElementById('active_box_1')
        active_box_1.style.top = startY + 'px';
        active_box_1.style.left = startX + 'px';
        active_box_1.style.width = "0px";
        active_box_1.style.height = "0px";
        this.isMouseDown_1 = true
        let oEvent = event;
        if (this.btnType_1 === 4) {
          event.preventDefault();

          data.x = oEvent.offsetX
          data.y = oEvent.offsetY
          data.showWidth = _that.imgW_1
          data.color = this.eraser
          box.onmousemove = function (ew) {
            if (document.getElementById("active_box_1") !== null && _that.isMouseDown_1) {
              var ab = document.getElementById("active_box_1");
              ab.style.width = ew.offsetX - startX + 'px';
              ab.style.height = ew.offsetY - startY + 'px';
            }
          }
          box.onmouseup = function (ev) {
            _that.isMouseDown_1 = false
            data.height = active_box_1.style.height.split('p')[0]
            data.width = active_box_1.style.width.split('p')[0]
            data.fileNameOptimized = _that.clickRow.file_remark
            data.filePath = _that.clickRow.file_path
            data.fileNameServer = _that.clickRow.file_name_server
            data.id = clickRow.id
            _that.$store.dispatch('scanIndex/eraser', data).then(res => {
              _that.getUPDATA()
            })
            _that.clickTableRow(clickRow)
          }
        } else {
          let oEvent = event;
          event.preventDefault();
          box.onmouseup = function (ev) {
            let oEvents = ev;
            let x, y
            if (oEvents.clientX < oEvent.clientX) {
              x = box.offsetLeft + oEvents.clientX - oEvent.clientX;
            } else {
              x = box.offsetLeft + oEvents.clientX - oEvent.clientX;
            }
            if (oEvents.clientY < oEvent.clientY) {
              y = box.offsetTop + oEvents.clientY - oEvent.clientY;
            } else {
              y = box.offsetTop + oEvents.clientY - oEvent.clientY;
            }
            box.style.left = x + 'px'
            box.style.top = y + 'px'
            box.onmousemove = null;
            box.onmouseup = null;
          }
        }
      },
      clickTableRow(val) {
        if (this.clickRow.hasOwnProperty('id') && val.id === this.clickRow.id) {
          this.num = this.num
        } else {
          this.num = -1
          this.gqNum = 0
        }
        this.imgW = 480
        this.imgW_1 = 480
        this.clickRow = val
        if (val.file_name_server) {
          this.src_1 = process.env.NODE_ENV === 'development' ? 'http://' +
            localStronge.getServiceip().ip + ':' + localStronge
            .getServiceip().host + "/point-strategy/v/fileAudit/showImg?type=1&fileNameServer=" + this.clickRow
            .file_name_server +
            "&filePath=" + this.clickRow.file_path + '&data=' + new Date() :
            'http://' + window.location.host + "/point-strategy/v/fileAudit/showImg?type=1&fileNameServer=" + this
            .clickRow
            .file_name_server +
            "&filePath=" + this.clickRow.file_path + '&data=' + new Date()
        } else {
          this.src_1 = val.file_name_server
        }
        if (val.file_remark) {
          this.src_2 = process.env.NODE_ENV === 'development' ? 'http://' +
            localStronge.getServiceip().ip + ':' + localStronge
            .getServiceip().host + "/point-strategy/v/fileAudit/showImg?type=2&fileNameServer=" + this.clickRow
            .file_remark +
            "&filePath=" + this.clickRow.file_path + '&data=' + new Date() :
            'http://' + window.location.host + "/point-strategy/v/fileAudit/showImg?type=2&fileNameServer=" + this
            .clickRow
            .file_remark +
            "&filePath=" + this.clickRow.file_path + '&data=' + new Date()

        } else {
          this.src_2 = val.file_remark
        }
      },
      //原始图片操作
      btnSet(num) {
        this.btnType = num
        var box = document.getElementById('box')
        box.style.cursor = 'move'
        var active_box = document.getElementById('active_box')
        active_box.style.width = "0px";
        active_box.style.height = "0px";
        switch (num) {
          case 1:
            let recallData = {
              fileNameRandom: this.clickRow.file_name_server,
              filePath: this.clickRow.file_path,
              type: 1,
            }
            this.$store.dispatch('scanIndex/recall', recallData).then(res => {
              this.num--
              this.getUPDATA()
            })
            break;
          case 2:
            let loadData = {
              fileNameServer: this.clickRow.file_name_server,
              filePath: this.clickRow.file_path
            }
            load(loadData).then(res => {
              message('success', '重载成功', 4000)
              this.src_1 = process.env.NODE_ENV === 'development' ? 'http://' +
                localStronge.getServiceip().ip + ':' + localStronge
                .getServiceip().host + "/point-strategy/v/fileAudit/showImg?type=1&fileNameServer=" + this.clickRow
                .file_name_server +
                "&filePath=" + this.clickRow.file_path + '&data=' + new Date() :
                'http://' + window.location.host + "/point-strategy/v/fileAudit/showImg?type=1&fileNameServer=" +
                this
                .clickRow
                .file_name_server +
                "&filePath=" + this.clickRow.file_path + '&data=' + new Date()
            }).catch(err => {})
            break;
          case 3:
            this.imgW = this.imgW - 50
            break;
          case 4:
            this.imgW = this.imgW + 50
            break;
          case 5:
            this.imgW = 480
            var box = document.getElementById('box')
            box.style.left = '50%'
            box.style.top = '50%'
            box.style.transform = 'translate(-50%, -50%)'
            break;
          case 6:
            let muData = {
              id: this.clickRow.id,
              filePath: this.clickRow.file_path,
              fileNameServer: this.clickRow.file_name_server
            }
            this.$store.dispatch('scanIndex/rectification', muData).then(res => {
              this.getUPDATA()
              this.num++
            })
            break;
          case 7:
            this.RectificationForm.degrees = ''
            this.RectificationStatus = true
            break;
          case 8:
            this.show_1 = true
            box.style.cursor = 'crosshair'
            break;
          case 9:
            this.show_1 = true
            box.style.cursor = 'crosshair'
            break;
          case 10:
            this.show_1 = true
            box.style.cursor = 'crosshair'
            break;
          case 11:
            this.higDeForm.buckleColor = this.higDeSet.color_1
            this.higDeForm.buckleEndColor = this.higDeSet.color_2
            this.higDeForm.filePath = this.clickRow.file_path
            this.higDeForm.fileNameServer = this.clickRow.file_name_server
            this.higDeForm.tableName = this.Revisionparams.commonMap.tableName
            this.higDeForm.id = this.clickRow.id
            this.higDeForm.percentage = this.higDeSet.percentage
            this.$store.dispatch('scanIndex/hd', this.higDeForm).then(res => {
              this.getUPDATA()
            })
            break;
        }
      },
      //高清图片操作
      btnSet_1(num) {
        var box = document.getElementById('box_1')
        box.style.cursor = 'move'
        var active_box = document.getElementById('active_box_1')
        active_box.style.width = "0px";
        active_box.style.height = "0px";
        this.btnType_1 = num
        switch (num) {
          case 1:
            this.imgW_1 = this.imgW_1 - 50
            break;
          case 2:
            this.imgW_1 = this.imgW_1 + 50
            break;
          case 3:
            this.imgW_1 = 480
            var box = document.getElementById('box_1')
            box.style.left = '50%'
            box.style.top = '50%'
            box.style.transform = 'translate(-50%, -50%)'
            break;
          case 4:
            box.style.cursor = 'crosshair'
            break;
          case 5:
            let recallData = {
              fileNameOptimized: this.clickRow.file_remark,
              filePath: this.clickRow.file_path,
              type: 2,
            }
            this.$store.dispatch('scanIndex/recallTwo', recallData).then(res => {
              this.gqNum--
              this.getUPDATA()
            })
            break;
        }
      },
      cancel() {
        this.$emit("cancel")
      },
      cancels() {
        this.RectificationStatus = false
      },
    }
  }

</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 0px;


    .box {
      display: flex;
      justify-content: space-around;

      .oneBox {
        width: 16%;
        height: 100%;
        background: red;
      }

      .oneTwo {
        height: 100%;
        width: 84%;
        // background: green;


        // background: yellow;
        .parameterSet {
          display: flex;
          font-size: 16px;
          font-weight: 700;
          background: #F4F4F4;

          .name {
            font-weight: 600;
            font-size: 13px;
          }
        }

        .content {
          display: flex;

          .center {
            width: 50%;
            height: 100%;
            background: #F4F4F4;

            .title {
              width: 100%;
              text-align: center;
              padding: 8px 0;
              // background: rgba(221, 227, 243, 0.6);
              border-radius: 5px;
              color: #686464;
              font-size: 16px;
              font-weight: 600;
              letter-spacing: 4px;
            }

            .father {
              overflow: hidden;
              height: 720px;
              width: 100%;
              position: relative;
            }


          }

          .right {
            width: 50%;
            height: 100%;
            background: #F4F4F4;
            height: 800px;

            .title {
              text-align: center;
              font-size: 15px;
              font-weight: 600;
              padding: 8px 0;
              color: #686464;
              letter-spacing: 4px;
              // background: rgba(221, 227, 243, 0.6);
              border-radius: 5px
            }

            .father_2 {
              overflow: hidden;
              height: 720px;
              width: 100%;
              position: relative;
            }

          }
        }
      }
    }
  }

  .el-button--mini {
    padding: 5px 4px;
    margin-left: 7px;
  }

  ::v-deep .el-table__body tr.current-row>td {
    background-color: #95AAEE !important;
    color: #fff;
    font-weight: bolder;
  }

  .moveBox {
    z-index: 10000;
    background: #868585;
    -moz-opacity: 0.2;
    position: absolute;
    opacity: 0.3;
    border: 2px #363636 dashed;
    // display: none;
  }

</style>
