FE_bankTeaching/src/pages/counter/list/index.vue

<template>
  <div class="wrap minWidthJudge overflow-hidden">
    <back-Button />
    <!-- <img class="sth bg" v-lazy="lazyImg[2]" alt="" /> -->
    <!-- <img class="sth guide" src="@/assets/img/guide.png" alt="" /> -->
    <img class="sth man cp" v-lazy="lazyImg[0]" alt="" @click="changePeopleJudge" />
    <img slot="reference" class="sth man cp" v-lazy="lazyImg[0]" alt="" ref="manPhoto" @click="changePeopleJudge" />

    <div class="sth man cp" style="z-index: 10;" @click="changePeopleJudge" ref="manDiv"></div>

    <img class="sth counter" v-lazy="lazyImg[1]" alt="" />

    <div v-if="!isCredit" class="sth cipher-machine cp" @click="showData('密码器', 8)">
      <img v-lazy="lazyImg[20]" alt="" ref="cipherPhoto" />
      <!-- <img v-lazy="finishPng" class="absolute" style="top: 0px;left: 0px;" v-if="finishGoods.printer"> -->
    </div>

    <!--        点击打开密码器-->
    <el-tooltip placement="top" popper-class="sth-popper" offset="50" style="z-index: 10">
      <div slot="content">
        <img v-lazy="lazyImg[19]" class="contentHeight" alt="" />
      </div>
      <div class="sth cipher-machine cp" ref="cipherDiv" @click="showData('密码器', 8)">
        <div class="sth cipher-machine cp"></div>
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0px;left: 0px;" v-if="finishGoods.printer"> -->
      </div>

    </el-tooltip>

    <img class="sth glass" v-lazy="lazyImg[2]" alt="" />

    <!-- 系统录入 height: 178px;position:relative;top:-450px;right:20px-->
    <el-tooltip placement="top" popper-class="sth-popper" close-delay="0">
      <div slot="content" class="computerContent" @click="showManage" v-show="!manageVisible">
        <img v-lazy="lazyImg[3]" style="height: 100px;" alt="" />
      </div>
      <div class="bg-gray-50 " @click="showManage">
        <img class="sth computer cp" v-lazy="lazyImg[4]" alt="" @click="showManage" />
      </div>
    </el-tooltip>
    <!--        点击打开传票栏-->
    <el-tooltip placement="top" popper-class="sth-popper" offset="50">
      <div slot="content">
        <img v-lazy="lazyImg[5]" class="contentHeight" alt="" />
      </div>

      <div class="sth summons cp" @click="showData('传票栏', 1)">
        <img v-lazy="lazyImg[6]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0" alt="" v-if="finishGoods.cultureIn"> -->
      </div>

    </el-tooltip>
    <!--        点击打开普通凭证箱-->
    <el-tooltip v-if="!isCredit" placement="top-start" popper-class="sth-popper" offset="250">
      <div slot="content">
        <img v-lazy="lazyImg[7]" class="contentHeight" alt="" />
      </div>
      <div class="sth voucher-box cp" @click="showData('普通凭证箱', 2)">
        <img class="" v-lazy="lazyImg[8]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0" alt="" v-if="finishGoods.proofBox"> -->
      </div>

    </el-tooltip>
    <!--        点击打开重要凭证箱-->
    <el-tooltip v-if="!isCredit" placement="top-start" popper-class="sth-popper" offset="250">
      <div slot="content">
        <img v-lazy="lazyImg[9]" class="contentHeight" alt="" />
      </div>
      <div class="sth important cp" @click="showData('重要空白凭证箱', 3)">
        <img v-lazy="lazyImg[10]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: -40px;" alt="" v-if="finishGoods.proofImportantBox"> -->
      </div>

    </el-tooltip>
    <!--        点击打开钱箱-->
    <el-tooltip v-if="!isCredit" placement="left-start" popper-class="sth-popper">
      <div slot="content">
        <img v-lazy="lazyImg[11]" class="contentHeight" alt="" />
      </div>
      <div class="sth money-box cp" @click="showData('钱箱', 4)">
        <img v-lazy="lazyImg[12]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0px;left: 0px;" title="钱箱已操作" v-if="finishGoods.moneyBox"> -->
      </div>

    </el-tooltip>
    <!--        点击打开印章盒-->
    <el-tooltip v-if="!isCredit" placement="top" popper-class="sth-popper" offset="-100">
      <div slot="content" @click="showData('印章盒', 5)">
        <img v-lazy="lazyImg[13]" class="contentHeight" alt="" @click="showData('印章盒', 5)" />
      </div>
      <div class="sth seal-box cp" @click="showData('印章盒', 5)">
        <img v-lazy="lazyImg[14]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0px;left: 0px;" v-if="finishGoods.sealBox"> -->
      </div>

    </el-tooltip>

    <!--        点击打开验钞机-->
    <el-tooltip v-if="!isCredit" placement="top" popper-class="sth-popper" offset="-100">
      <div slot="content">
        <img v-lazy="lazyImg[15]" class="contentHeight" alt="" />
      </div>
      <div class="sth currency-detector cp" @click="showData('验钞机', 6)">
        <img v-lazy="lazyImg[16]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0px;left: 0px;" v-if="finishGoods.currencyDetector"> -->
      </div>

    </el-tooltip>

    <!--        点击打开打印机-->
    <el-tooltip placement="top" popper-class="sth-popper" offset="-400">
      <div slot="content">
        <img v-lazy="lazyImg[17]" style="height: 50px;" alt="" />
      </div>
      <div class="sth printer cp" @click="showData('打印机', 7)">
        <img v-lazy="lazyImg[18]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: 0px;left: 0px;" v-if="finishGoods.printer"> -->
      </div>

    </el-tooltip>

    <div class="employee-wrap sth">
      <el-tooltip placement="top" popper-class="sth-popper" offset="50">
        <img v-lazy="lazyImg[21]" alt="" />
      </el-tooltip>

      <el-tooltip placement="top" popper-class="sth-popper" offset="-50">
        <div slot="content" @click="showData('资料', 9)">
          <img v-lazy="lazyImg[22]" class="contentHeight" @click="showData('资料', 9)" alt="" />
        </div>
        <p class="employeeText" @click="showData('资料', 9)">资料</p>
      </el-tooltip>
    </div>

    <!--        点击打开刷卡器-->
    <el-tooltip v-if="!isCredit" placement="top" popper-class="sth-popper" offset="00">
      <div slot="content">
        <img v-lazy="lazyImg[23]" class="contentHeight" alt="" />
      </div>
      <div class="sth card-machine cp" @click="showData('刷卡器', 10)">
        <img v-lazy="lazyImg[24]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: -20px;left: 0px;" v-if="finishGoods.swipingCard"> -->
      </div>

    </el-tooltip>
    <!--        点击打开身份证-->
    <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
      <div slot="content">
        <img v-lazy="lazyImg[25]" class="contentHeight" alt="" />
      </div>
      <div class="sth idCard-scanner cp" @click="showData('身份证扫描仪', 11)">
        <img v-lazy="lazyImg[26]" alt="" />
        <!-- <img v-lazy="finishPng" class="absolute" style="top: -20px;left: 0px;" v-if="finishGoods.idCard"> -->
      </div>

    </el-tooltip>

    <!-- 物品栏 -->
    <div ref="goods" class="goods-dia" :class="{ active: showGoods }">
      <!-- goodsShelfTotalData goods2 -->
      <div :id="item.name" v-for="(item) in goodsShelfTotalData" :key="item.id" class=" justify-center img-wrap"
        :class="{ checked: checkList.includes(item.id), file: true }" @click="goodsDblClickFn(item)">
        <!-- <img :style="item.name==='开户申请书'?'margin-top:10px;':''" :src="item.src" alt="" /> -->
        <el-image style="width: 110px; height: 70px; margin-top: 10px;" :src="item.src" fit="fit" :title="item.name"
          :alt="item.name"></el-image>
        <p :title="item.name">{{ item.name }}</p>
        <img src="@/assets/img/seal/sealed.png" alt="" style="width: 50%; right: -40px;top: 40px;" class="absolute"
          v-if="finishSealedArr.includes(item.id)">
      </div>
    </div>
    <div class="goods" :class="{ active: showGoods }" @click="toggleGoods">
      <span class="">物品栏</span>
      <img class="icon" v-lazy="lazyImg[27]" alt="" />
    </div>

    <!-- 硬件交互--弹框 -->

    <div v-show="showPop" width="900px" class="data-dia  z500 max-h-screen 2xl:-mt-20;" ref="dataDia" v-drag>
      <div class="dia-header h-1/6">
        <div class="data-title">{{ popText }}</div>
        <div class="close-wrap">
          <img class="close" v-lazy="lazyImg[28]" alt="" @click="closePop" />
        </div>
      </div>

      <p v-if="popText == '密码器'" class="tips"></p>
      <p v-else-if="popText == '重要空白凭证箱' || popText == '普通凭证箱'" class="tips">- 请从以下物品中选取所需材料 -</p>
      <div v-else-if="needBackMoney && popText == '钱箱'">
        <p class="tips" v-if="backMoneyArr.length === 0">- 请领取您所需要的现金 -</p>
        <p class="tips" v-else style="text-align: left">
          <span>您将领取:</span>
          <span v-for="(item, index) in backMoneyArr" :key="item.key">
            <span>{{ item.name + ' * ' + item.num + ' = ' + consumeMoney(item.name, item.num) }}</span>
            <span v-if="index < backMoneyArr.length - 1">，</span>
            <span v-else>。</span>
          </span>
          总金额为: {{ backMoneyTotal + '元' }}
        </p>
      </div>

      <p v-else class="tips">- 请从物品栏选中或拖拽所需材料 -</p>

      <!-- 动画开始 -->
      <div v-if="popText === '密码器'" style="width:800px;padding-right:150px;padding-top:80px">
        <el-form :model="passwordForm" :rules="passwordRules" ref="form" label-width="180px"
          key="passwordFormpasswordAgain" class="flex flex-col justify-center">
          <el-form-item class="password-wrap" label="密码" prop="passwordAgain">
            <el-input v-focus v-model.trim="passwordForm.passwordAgain" maxlength="6"
              onkeyup="{this.value=this.value.replace(/\D/g,'')}" autocomplete="new-password"
              auto-complete="new-password" show-password></el-input>
          </el-form-item>
          <el-form-item class="password-wrap" label="确认密码" prop="password2" key="passwordFormpassword2"
            v-if="needPasswordAgain">
            <el-input v-model.trim="passwordForm.password2" maxlength="6"
              onkeyup="this.value=this.value.replace(/\D/g,'')" autocomplete="off" auto-complete="off"
              show-password></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div v-else-if="popText === '印章盒'" class=" seal 2xl:w-7/12 xl:w-9/12 lg:w-full h-5/6 max-h-full ">
        <div class="left min-h-full sealLeft">
          <!-- dblClickFn(item) -->
          <div v-for="(item, index) in sealArr" :key="item.id"
            :class="{ checked: sealChecked.includes(item.id), file: true, sealFile: true }" @click="checkSeal(item.id)">
            <img :src="item.src" :alt="item.name" :title="item.name" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <div class="bg-gray-400 box right min-h-full sealRight" ref="popUpSeal">
          <!-- receptionList -->
          <div class="img-wrap2 relative" :class="{ checked: commonChecked.includes(item.id) }"
            v-for="(item, index) in goodState" @click='dislodgeItem(index)' :key="item.id">
            <img v-if="item.name.includes('复印件')" :src="item.src" class="fileSeal" :alt="item.name"
              :title="item.name" />
            <el-image width="100%" v-else :src="item.src" class="fileSeal max-h-96" :alt="item.name" :title="item.name"
              fit="contain"></el-image>
            <div class="absolute flex justify-end w-full flex-wrap" style="bottom:2vh;">
              <!-- <img v-for="item in sealCoverIt" :key="item.id" :src="item.src" :alt="item.name" :title="item.name" style="height: 100px;width: 100px;" /> -->
              <seal-name v-for="item in sealCoverIt" :key="item.id" :item="item">
              </seal-name>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="popText === '重要空白凭证箱'" class="seal content-center" style="width:1250px;">
        <div class="left else content-center ">
          <div v-for="(item) in importanceArr" :key="item.id"
            :class="{ checked: importantChecked.includes(item.id), file: true, importanceArrClass: true }"
            @click="dblClickFn(item)">
            <!-- <img :src="item.src" alt="" /> -->
            <el-image style="width: 100px; height: 70px;margin-top: 10px;" :src="item.src" fit="scale-down"></el-image>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div v-else-if="popText === '普通凭证箱'" class="seal content-center" style="width:1250px;">
        <div class="left else content-center">
          <div v-for="(item) in commonArr" :key="item.id"
            :class="{ checked: commonChecked.includes(item.id), file: true }" @click="dblClickFn(item)">
            <!-- <img :src="item.src" alt="" /> -->
            <el-image style="width: 100px; height: 70px;margin-top: 10px;" :src="item.src" :fit="fit"></el-image>
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div v-else-if="popText === '身份证扫描仪'" class="list " ref="popUp">
        <div class="img-wrap" :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }"
          v-for="(item, index) in receptionList" :key="item.id" @click='dislodgeItem(index)'>
          <!-- <img :src="item.src" class="file"  alt="" /> -->
          <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
          <p class="text">{{ item.name }}</p>
        </div>
      </div>
      <div v-else-if="popText === '身份证扫描器'" class="list " ref="popUp">
        <div class="img-wrap" v-for="(item, index) in receptionList"
          :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }" :key="item.id"
          @click='dislodgeItem(index)'>
          <!-- <img :src="item.src" class="file"  alt="" /> -->
          <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
          <p class="text">{{ item.name }}</p>
        </div>
      </div>

      <div v-else-if="popText === '刷卡器' || popText === '导入报表'" ref="popUp" class="list  ">
        <div class="img-wrap" v-for="(item, index) in receptionList"
          :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }" @click='dislodgeItem(index)'
          :key="item.id">
          <!-- <img :src="item.src" class="file"  alt="" /> -->
          <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
          <p class="text">{{ item.name }}</p>
        </div>
      </div>

      <!-- 客户签字 -->
      <div v-else-if="popText === '客户签字'" class="list  " ref="popUp">
        <div class="img-wrap" v-for="(item, index) in goodState"
          :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }" @click='dislodgeItem(index)'
          :key="item.id">
          <!-- <img :src="item.src" class="file"  alt="" /> -->
          <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
          <p class="text">{{ item.name }}</p>
        </div>
      </div>
      <div v-else-if="popText === '返还资料'" class="list  " ref="popUp">
        <div class="img-wrap" v-for="(item, index) in goodState"
          :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }" @click='dislodgeItem(index)'
          :key="item.id">
          <!-- <img :src="item.src" class="file"  alt="" /> -->
          <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
          <p class="text">{{ item.name }}</p>
        </div>
      </div>

      <div v-else-if="popText === '钱箱'" class="list  " ref="popUp">
        <template v-if="!needBackMoney">
          <div class="img-wrap" v-for="(item, index) in goodState"
            :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }" @click='dislodgeItem(index)'
            :key="item.id">
            <!-- <img :src="item.src" class="file"  alt="" /> -->
            <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
            <p class="text">{{ item.name }}</p>
          </div>
        </template>
        <div v-else class="backMoneyBox">
          <!-- cashboxGoodsShelf2 -->
          <div class="backMoney" v-for="item in cashboxGoodsShelf2" :key="item.id">
            <img :src="item.src" :alt="item.name" :title="item.name">
            <!-- <el-image src="item.src" :alt="item.name" :title="item.name" /> -->
            <input :class="{ isInputMoney: item.num > 0 }" placeholder="请输入张数" v-model.trim="item.num"
              @keyup="inputChange(item)" />
          </div>
        </div>
      </div>

      <!-- 暂时未确定是否公共使用一个弹框  receptionList-->
      <div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框  -->
        <div class="img-wrap" v-for="(item, index) in goodState" @click='dislodgeItem(index)'
          :class="{ checked: commonChecked.includes(item.id), 'img-wrap': true }" :key="item.id">
          <!-- <img :src="item.src" class="file"  alt="" /> -->
          <el-image :src="item.src" class="file" :alt="item.name" :title="item.name" fit="scale-down"></el-image>
          <p class="text" :title="item.name">{{ item.name }}</p>
        </div>
      </div>

      <div class="dia-footer">
        <button v-throttle @click="popSure" class="w-20" type="button">确定</button>
        <!-- <el-button type="primary" v-throttle @click="popSure">确定</el-button> -->
      </div>
    </div>

    <!-- 蒙版 -->
    <div v-show="showPop" class="masking"></div>
    <!-- 商业银行系统的全屏功能实现  v-if="manageVisible" -->
    <div :class="full || isCredit ? 'fullScreenSystem' : 'system'" class="systemconfig" v-show="manageVisible">
      <!-- <transition name='systemComputer' enter-active-class="Down" leave-active-class="animate__animated animate__bounceOutDown">
                <router-view></router-view>
            </transition> -->
      <router-view></router-view>
    </div>

    <div v-show="showImg" style="z-index: 9999;">
      <!-- <div class="relative w-screen h-screen" v-drag> -->
      <!-- <div class="dia-header absolute text-center hover:bg-gray-400" style="top: -27px;z-index: 9991;width: 100%;height: 50px;line-height: 50px;" ref="imgCheckDrag">--单击此处可拖拽--</div> -->
      <check-photo :imgSrc="imgSrc" :imgSrcId='imgSrcId' :imgSrcName="imgSrcName" :showImg.sync="showImg"
        style="width: 850px;z-index: 9990; margin-top: 100px;">
        <div class="absolute flex justify-end w-full flex-wrap" style="bottom:7vh; right: 4vw">
          <seal-name v-for="item in isSeal(imgSrcId)" :key="item.id" :item="item">
          </seal-name>
        </div>
      </check-photo>
      <!-- </div> -->
    </div>

    <!-- 客户返还资料或签字的对话框 -->
    <el-dialog :show-close="false" :visible.sync="peopleJudge" custom-class="bgNone" center>
      <div class="data-dia peopleDialog" ref="dataDia2" v-drag>
        <div class="dia-header h-1/6">
          <div class="data-title2">客户对话中</div>
          <div class="close-wrap">
            <img class="close" v-lazy="lazyImg[28]" alt="" @click="closePeopleJudge" />
          </div>
        </div>
        <h2>请选择以下一个业务进行办理</h2>
        <div class="dia-footer">
          <button v-throttle @click="peopleDoing(1)" class="w-20" type="button"
            style="margin-bottom: 10px;">客户签字</button>
          <button v-throttle @click="peopleDoing(2)" class="w-20" type="button">返还资料</button>
          <!-- <el-button type="primary" v-throttle @click="popSure">确定</el-button> -->
        </div>
      </div>
    </el-dialog>

    <!-- 提示对话框 -->
    <el-dialog :show-close="false" :visible.sync="tipsDialog" custom-class="bgNone" center>
      <div class="data-dia tipsDialog" ref="dataDia2">
        <div class="dia-header h-2/6">
          <div class="data-title2">提示</div>
          <div class="close-wrap">
            <img class="close" v-lazy="lazyImg[28]" alt="" @click="changeTipsDialog(false)" />
          </div>
        </div>
        <h3>您已选择:</h3>
        <h3 v-for="item in backMoneyArr" :key="item.key">面额 {{ item.name }} <img
            :src="require('@/assets/img/cash/乘号3.svg')" /> {{ item.num + '张' }} = {{ parseInt(item.name) * item.num +
              '元'
          }}
        </h3>
        <h3>总额 {{ backMoneyTotal + '元' }}</h3>
        <h3 style="margin-top: 60px;margin-bottom: 60px;">确定从钱箱取出吗?</h3>
        <div class="dia-footer">
          <button v-throttle @click="getMoneyTotal(false)" class="hover:bg-red-700" type="button">取消</button>
          <button v-throttle @click="getMoneyTotal(true)" class="hover:bg-red-700" type="button">确定</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
import Sortable from 'sortablejs'
import manage from '../../manage/index';
import { addOperation, getOperation } from '@/api/http';
import backButton from '@/components/backButton'
import { myConfig } from './myConfig.js'
import saveSystemModule from '@/mixins/saveSystemModule'
import CheckPhoto from '@/components/checkPhoto'
import { inputListen } from '@/utils/utilFunction.js'
import sealName from '@/components/sealName'

export default {
  name: 'index',
  components: {
    manage: manage,
    backButton,
    CheckPhoto,
    sealName
    // TipDialog
  },
  mixins: [saveSystemModule],
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordForm.passwordAgain && /^[0-9]*$/.test(this.passwordForm.passwordAgain) && this.passwordForm.passwordAgain.length === 6) {
          // this.$refs.passwordForm.validateField('password');
          callback();
        } else {
          callback(new Error('请注意密码格式以及密码长度'))
        }
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value.length < 6) {
        callback(new Error('密码长度小于6位!'));
      } else if (value !== this.passwordForm.passwordAgain) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      viewPassword1: false,
      viewPassword2: false,
      voucherCardGet: false,
      voucherCardNumber: 0,
      // 方便操作的数据：调整弹出框高度
      fit: 'scale-down',
      controlGoodsDblClickFn: null,
      // cultureIn: [], // 传票栏
      // peopleSign: [],
      // moneyBox: [],
      peopleJudge: false,
      tipsDialog: false,
      peopleDo: 1,
      showBusiness: false,
      manageVisible: false, // 显示系统录入
      checkList: [],// 物品栏选中
      boxStart: [], // 起始箱子物品
      boxStart2: [], // 起始物品栏
      elseBoxCheck: [],/* 所有其他可从物品栏拖拽物品进入的弹框 */
      //身份证扫描仪//审核资料//验钞机//选择重要空白凭证
      // 拿业务的东西替换掉
      magnifyData: {},
      //系统录入 //选择普通空白凭证
      systemInputGoodsShelf: [
        {
          name: '身份证', src: require('@/assets/img/goods/idCard.png'), id: 13,
          userName: '啧啧啧',
          sex: '男',
          nation: '汉',
          dateBirthYear: '1994',
          dateBirthMonth: '4',
          dateBirthDay: '1',
          address: '奥斯卡巅峰计划拉水电费啥地方',
          idCardNo: '465852346854168479'
        },
        { name: '开户申请书', src: require('@/assets/img/goods/khsqs.png'), id: 14 },
        { name: '现金', src: require('@/assets/img/goods/cash-sm.png'), id: 15 },
        { name: '银行卡', src: require('@/assets/img/goods/bankCard.png'), id: 16, cardNub: '1865 3549 5675 5589' },
        { name: '身份证复印件', src: require('@/assets/img/idCard-copy-sm.png'), id: 23 },
      ],
      // 这里id只是起到v-key避免重复的作用 因为后台只需要判断值的和是否等于判分点
      cashboxGoodsShelf2: [
        { name: '100元', src: require('@/assets/img/cash/100元.png'), id: 15, num: '' },
        { name: '50元', src: require('@/assets/img/cash/50元.png'), id: 4399, num: '' },
        { name: '20元', src: require('@/assets/img/cash/20元.png'), id: 4400, num: '' },
        { name: '10元', src: require('@/assets/img/cash/10元.png'), id: 4401, num: '' },
        { name: '5元', src: require('@/assets/img/cash/5元.png'), id: 4402, num: '' },
        { name: '1元', src: require('@/assets/img/cash/1元.png'), id: 4403, num: '' },
        { name: '5角', src: require('@/assets/img/cash/5角.png'), id: 4404, num: '' },
        { name: '1角', src: require('@/assets/img/cash/1角.png'), id: 4405, num: '' },
      ],
      popArr: [/* 弹窗展示的物品 */
        { name: '银行承兑汇票一联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 582 },
        { name: '银行承兑汇票二联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 581 },
        { name: '银行承兑汇票三联（解讫通知）', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 580 },
        { name: '银行承兑汇票四联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 583 },
        { name: '预留印鉴卡（一）', src: require('@/assets/img/goods/预留印鉴卡.png'), id: 469 },
        { name: '预留印鉴卡（二）', src: require('@/assets/img/goods/预留印鉴卡.png'), id: 470 },
        { name: '预留印鉴卡（三）', src: require('@/assets/img/goods/预留印鉴卡.png'), id: 471 },
        { name: '二类银行卡', src: require('@/assets/img/goods/bankCard.png'), id: 563 },
        { name: '银行卡', src: require('@/assets/img/goods/bankCard.png'), id: 16, cardNub: '1865 3549 5675 5589' },
        { name: '定期存单', src: require('@/assets/img/seal/paid.png'), id: 428 },
        { name: '预留印鉴卡', src: require('@/assets/img/seal/paid.png'), id: 439 },
        { name: '转账支票', src: require('@/assets/img/goods/xd-zzzp.png'), id: 412 },
        { name: '银行承兑汇票', src: require('@/assets/img/seal/paid.png'), id: 584 },
        { name: '银行承兑汇票一联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 582 },
        { name: '银行承兑汇票二联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 581 },
        { name: '银行承兑汇票三联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 580 },
        { name: '银行承兑汇票四联', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 583 },
        { name: '现金支票', src: require('@/assets/img/goods/xjzp.png'), id: 411 },
        { name: '取款凭条', src: require('@/assets/img/goods/qkpt.png'), id: 425 },
        { name: '转账凭条', src: require('@/assets/img/goods/zzpt.png'), id: 426 },
        { name: '业务收费凭证', src: require('@/assets/img/goods/ywsfpz.png'), id: 479 },
        { name: '利息清单', src: require('@/assets/img/goods/lxqd.png'), id: 427 },
        { name: '普通空白凭证', src: require('@/assets/img/goods/ptkbpz.png'), id: 438 },
        {
          name: '身份证', src: require('@/assets/img/goods/idCard.png'), id: 13,
          userName: '啧啧啧',
          sex: '男',
          nation: '汉',
          dateBirthYear: '1994',
          dateBirthMonth: '4',
          dateBirthDay: '1',
          address: '奥斯卡巅峰计划拉水电费啥地方',
          idCardNo: '465852346854168479'
        },
        { name: '身份证复印件', src: require('@/assets/img/idCard-copy-sm.png'), id: 23 },
        { name: '开户申请书', src: require('@/assets/img/goods/khsqs.png'), id: 14 },
        { name: '现金', src: require('@/assets/img/goods/cash-sm.png'), id: 15 },
        { name: '存款凭条', src: require('@/assets/img/goods/ckpt.png'), id: 17 },
        // 以下是我自己加的 本来没有，业务需要
        { name: '开户申请书凭证联', src: require('@/assets/img/goods/khsqs.png'), id: 24 },
        { name: '开户申请书回单', src: require('@/assets/img/goods/khsqs.png'), id: 21 },
        { name: '存款凭条凭证联', src: require('@/assets/img/goods/ckpt.png'), id: 269 },
        { name: '存款凭条回单', src: require('@/assets/img/goods/ckpt.png'), id: 22 },
        { name: '取款凭条凭证联', src: require('@/assets/img/goods/qkpt.png'), id: 420 },
        { name: '取款凭条回单', src: require('@/assets/img/goods/qkpt.png'), id: 421 },
        { name: '转账凭条凭证联', src: require('@/assets/img/goods/zzpt.png'), id: 419 },
        { name: '转账凭条回单', src: require('@/assets/img/goods/zzpt.png'), id: 418 },
        { name: '利息清单凭证联', src: require('@/assets/img/goods/lxqd.png'), id: 422 },
        { name: '利息清单回单', src: require('@/assets/img/goods/lxqd.png'), id: 424 },
        { name: '旧定期存单', src: require('@/assets/img/seal/paid.png'), id: 430 },
        { name: '新定期存单', src: require('@/assets/img/seal/paid.png'), id: 429 },
        { name: '新定期存单凭证联', src: require('@/assets/img/seal/paid.png'), id: 485 },
        { name: '新定期存单回单', src: require('@/assets/img/seal/paid.png'), id: 486 },
        { name: '法人身份证', src: require('@/assets/img/goods/idCard.png'), id: 442 },
        { name: '法人身份证复印件', src: require('@/assets/img/idCard-copy-sm.png'), id: 431 },
        { name: '开立银行结算账户申请书', src: require('@/assets/img/goods/ApplicationBankSettlement.png'), id: 432 },
        { name: '统一社会信用代码证', src: require('@/assets/img/goods/营业执照.png'), id: 434 },
        { name: '统一社会信用代码证复印件', src: require('@/assets/img/goods/营业执照复印件.png'), id: 435 },
        { name: '开户许可证', src: require('@/assets/img/goods/开户许可证.png'), id: 436 },
        { name: '开户许可证复印件', src: require('@/assets/img/goods/开户许可证复印件.png'), id: 437 },
        { name: '开立银行结算账户申请书凭证联', src: require('@/assets/img/goods/ApplicationBankSettlement.png'), id: 432 },
        { name: '开立银行结算账户申请书回单', src: require('@/assets/img/goods/ApplicationBankSettlement.png'), id: 433 },
        { name: '现金存款凭证', src: require('@/assets/img/goods/CashCertificate.png'), id: 409 },
        { name: '现金存款凭证联', src: require('@/assets/img/goods/CashCertificate.png'), id: 487 },
        { name: '现金存款凭证回单', src: require('@/assets/img/goods/CashCertificate.png'), id: 441 },
        { name: '现金支票本联', src: require('@/assets/img/goods/xjzp.png'), id: 473 },
        { name: '现金支票存根', src: require('@/assets/img/goods/xjzp.png'), id: 472 },
        { name: '转账支票本联', src: require('@/assets/img/goods/sy-zzzp.png'), id: 476 },
        { name: '转账支票存根', src: require('@/assets/img/goods/sy-zzzp.png'), id: 474 },
        { name: '特殊业务申请书', src: require('@/assets/img/goods/businessSpecialApplication.png'), id: 407 },
        { name: '特殊业务申请书凭证联', src: require('@/assets/img/goods/businessSpecialApplication.png'), id: 478 },
        { name: '特殊业务申请书回单', src: require('@/assets/img/goods/businessSpecialApplication.png'), id: 477 },
        { name: '密码挂失申请书', src: require('@/assets/img/goods/businessReportMissUser.png'), id: 406 },
        { name: '密码挂失申请书凭证联', src: require('@/assets/img/goods/businessReportMissUser.png'), id: 466 },
        { name: '密码挂失申请书回单', src: require('@/assets/img/goods/businessReportMissUser.png'), id: 468 },
        { name: '密码挂失申请书银行留存联', src: require('@/assets/img/goods/businessReportMissUser.png'), id: 467 },
        { name: '支票领购单', src: require('@/assets/img/goods/CheckCoupons.png'), id: 413 },
        { name: '支票领购单回单', src: require('@/assets/img/goods/CheckCoupons.png'), id: 480 },
        { name: '支票领购单凭证联', src: require('@/assets/img/goods/CheckCoupons.png'), id: 488 },
        { name: '业务收费凭证回单', src: require('@/assets/img/goods/ywsfpz.png'), id: 481 },
        { name: '业务收费凭证凭证联', src: require('@/assets/img/goods/ywsfpz.png'), id: 482 },
      ],
      // 这个是临时展示的
      receptionList: [

      ],
      sealArr: [/* 印章盒物品 */ // 不要改动id和name! 要出问题的
        { name: '收讫章', src: require('@/assets/img/seal/paid.png'), id: '收讫章' },
        { name: '销户章', src: require('@/assets/img/seal/closing.png'), id: '销户章' },
        { name: '私章', src: require('@/assets/img/seal/personal.png'), id: '私章' },
        { name: '附件章', src: require('@/assets/img/seal/accessory.png'), id: '附件章' },
        { name: '付讫章', src: require('@/assets/img/seal/paid.png'), id: '付讫章' },
        { name: '业务专用章', src: require('@/assets/img/seal/business.png'), id: '业务专用章' },
        { name: '转讫章', src: require('@/assets/img/seal/Transfer.png'), id: '转讫章' },
      ],
      commonArr: [/* 普通凭证箱 */
        { name: '存款凭条', src: require('@/assets/img/goods/ckpt.png'), id: 17 },
        { name: '取款凭条', src: require('@/assets/img/goods/qkpt.png'), id: 425 },
        { name: '转账凭条', src: require('@/assets/img/goods/zzpt.png'), id: 426 },
        { name: '业务收费凭证', src: require('@/assets/img/goods/ywsfpz.png'), id: 479 },
        { name: '利息清单', src: require('@/assets/img/goods/lxqd.png'), id: 427 },
        { name: '普通空白凭证', src: require('@/assets/img/goods/ptkbpz.png'), id: 438 },
      ],
      // 用来展示完成Logo,后来说不需要
      finishPng: require('@/assets/img/finish.png'),
      finishGoods: {
        moneyBox: false,
        peopleSign: false,
        cultureIn: false,
        sealBox: false,
        // currencyDetector: false,
        printer: false,
        resource: false,
        backPeople: false,
        proofBox: false,
        proofImportantBox: false,
        swipingCard: false,
        idCard: false,
        currencyDetector: false,
        printer: false
      },
      finishSealedArr: JSON.parse(sessionStorage.getItem('finishSealedArr')) || [],
      sealChecked: [],/* 印章盒选中 */
      importantChecked: [],// 重要凭证选中
      commonChecked: [],// 普通凭证选中
      passwordForm: {
        password: '',
        password2: '',
        passwordAgain: ''
      },
      systemId: '',
      passwordRules: {
        password2: [
          { validator: validatePass2, trigger: 'blur' },
        ],
        passwordAgain: [
          { validator: validatePass, trigger: 'blur' },
        ]
      },
      clickNum: 0,
      clickNum2: 0,
      showImg: false,
      imgSrc: '',
      imgSrcId: '',
      imgSrcName: '',
      nbm: 0,
      lazyImg: [
        require('@/assets/img/man.png'),
        require('@/assets/img/counter.png'),
        require('@/assets/img/glass.png'),
        require('@/assets/img/tooltip/system.png'),
        require('@/assets/img/computer.png'),
        require('@/assets/img/tooltip/cpl.png'),
        require('@/assets/img/summons.png'),
        require('@/assets/img/tooltip/ptpzx.png'),
        require('@/assets/img/voucher-box.png'),
        require('@/assets/img/tooltip/zk.png'),
        require('@/assets/img/important.png'),
        require('@/assets/img/tooltip/qx.png'),
        require('@/assets/img/money-box.png'),
        require('@/assets/img/tooltip/yzh.png'),
        require('@/assets/img/seal-box.png'),
        require('@/assets/img/tooltip/ycj.png'),
        require('@/assets/img/currency-detector.png'),
        require('@/assets/img/tooltip/dyj.png'),
        require('@/assets/img/printer.png'),
        require('@/assets/img/tooltip/mmq.png'),
        require('@/assets/img/cipher-machine.png'),
        require('@/assets/img/employee.png'),
        require('@/assets/img/tooltip/data.png'),
        require('@/assets/img/tooltip/skj.png'),
        require('@/assets/img/card-machine.png'),
        require('@/assets/img/tooltip/sfz.png'),
        require('@/assets/img/idCard-scanner.png'),
        require('@/assets/svg/arrow-right.svg'),
        require('@/assets/svg/close.svg'),
        require('@/assets/img/selectBusiness.png')
      ]
    };
  },
  computed: {
    ...mapState('system', ['isCredit', 'creditImportIndex', 'creditImportIds']),
    // 是否是信贷部
    isCredit: function () {
      return this.$store.state.system.isCredit;
    },
    // 印章盒的印章id与名字对应，其他地方有用，易于操作
    isSeal () {
      const stampMap2 = {
        429: '业务专用章',
        428: '业务专用章',
        432: '业务专用章',
        438: '业务专用章',
        467: '业务专用章',
        23: '附件章',
        435: '附件章',
        437: '附件章',
        431: '附件章',
        468: '附件章',
        430: '销户章',
        439: '销户章'
      }
      // 还有一个证件能盖两种章的，开多一个map结构来存
      const stampMap3 = {
        428: '销户章'
      }
      return (id) => {
        if (!this.finishSealedArr.includes(id)) {
          return []
        } else {
          return this.sealArr.filter(item => {
            // && this.finishSealedArr.includes(item.id)
            if (item.name.includes(stampMap2[id])) {
              return item
            }
            if (item.name.includes(stampMap3[id])) {
              return item
            }
          })
        }

      }
    },
    // sealChecked 印章盒选中的印章盖上去，展示在页面中
    sealCoverIt () {
      return this.sealChecked.reduce((all, item) => {
        const itemFind = this.sealArr.find(sealItem => sealItem.id === item)
        all.push(itemFind)
        return all
      }, [])
    },
    // 业务一和其他业务的银行卡不一样
    consumeMoney () {
      return (name, num) => {
        if (name.includes('元')) {
          return parseInt(name) * num + '元'
        } else {
          return (parseInt(name) * num * 0.1).toFixed(1) + '元'
        }
      }
    },

    // 将拿了多少钱渲染上页面，依赖于cashboxGoodsShelf2
    backMoneyArr () {
      return this.cashboxGoodsShelf2.filter(item => item.num > 0)
    },

    // 计算一共从钱箱中拿了多少钱
    backMoneyTotal () {
      return this.cashboxGoodsShelf2.reduce((total, item) => {
        if (item.name.includes('元')) {
          return Number((total + Number((parseInt(item.name) * item.num).toFixed(1))).toFixed(1))
        } else {
          return Number((total + Number((parseInt(item.name) * item.num * 0.1).toFixed(1))).toFixed(1))
        }

      }, 0)
      // return 666
    },

    // 这些id是需要输入确认密码的 然后needPasswordAgain属性可以拿去执行一些判断
    needPasswordAgain () {
      if (this.id == '62,1' || this.id == '62,2' || this.id == '62,3' || this.id == '129' || this.id == '167' || this.id == '301') {
        return true
      } else {
        return false
      }
    },
    importanceArr () {
      const arr = [
        { name: '定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 428 },
        { name: '预留印鉴卡', src: require('@/assets/img/goods/预留印鉴卡.png'), id: 439 },
        { name: '转账支票', src: require('@/assets/img/goods/xd-zzzp.png'), id: 412 },
        { name: '银行承兑汇票', src: require('@/assets/img/goods/银行承兑汇票.png'), id: 584 },
        { name: '现金支票', src: require('@/assets/img/goods/xjzp.png'), id: 411 },
        // {name:'新定期存单',src:require('@/assets/img/goods/储蓄存单.png'),id:429},
      ]
      // 业务一的银行卡和其他业务的不一样
      if (this.businessKey === '业务一') {
        // arr.unshift({name:'二类银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'})
        arr.unshift({ name: '二类银行卡', src: require('@/assets/img/goods/bankCard.png'), id: 563, cardNub: '1865 3549 5675 5589' })
        arr.unshift({ name: '一类银行卡', src: require('@/assets/img/goods/bankCard.png'), id: 16, cardNub: '1865 3549 5675 5589' })

        arr.pop()
      } else {
        arr.unshift({ name: '银行卡', src: require('@/assets/img/goods/bankCard.png'), id: 16, cardNub: '1865 3549 5675 5589' })
      }

      if (this.businessKey === '业务四') {

        const findIt2 = arr.findIndex(item => item.id === 429)

        const findIt = arr.findIndex(item => item.id === 428)
        // if(findIt !== -1) {
        //     arr.splice(findIt, 1)
        // } 
        // 如果新定期存单不存在
        if (findIt2 === -1) {
          // 如果定期存单存在，那么删掉定期存单的同时将新定期存单插入到原来定期存单的位置
          if (findIt !== -1) {
            arr.splice(findIt, 1, { name: '新定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 429 })
          } else {
            arr.push({ name: '新定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 429 })
          }
        } else {
          if (findIt !== -1) {
            arr.splice(findIt, 1, { name: '新定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 429 })
          }
        }
      } else {
        const findIt = arr.findIndex(item => item.id === 429)

        const findIt2 = arr.findIndex(item => item.id === 428)
        if (findIt2 === -1) {
          if (findIt !== -1) {
            arr.splice(findIt, 1, { name: '定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 428 })
          } else {
            arr.push({ name: '定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 428 })
          }
        } else {
          if (findIt !== -1) {
            arr.splice(findIt, 1, { name: '定期存单', src: require('@/assets/img/goods/储蓄存单.png'), id: 428 })
          }
        }


      }

      return arr
    },

    // 依赖于当前选中了哪个业务
    businessKey () {
      return this.$store.state.system.businessKey
    },
    // 依赖于vuex中的全屏，让后一些方法可以改变它的值。
    full: function () {
      return this.$store.state.system.fullScreen;
    },

    // 展示弹框
    showPop: function () {
      const dataDia = this.$refs.dataDia
      // 每次显示弹框时重置方位
      if (dataDia) {
        dataDia.style.top = '68px'
        dataDia.style.left = '50%'
      }

      this.$refs.dataDia
      this.receptionList = []
      this.passwordForm.passwordAgain = ''
      this.passwordForm.password2 = ''
      if (!this.showGoods) this.checkList = []
      return this.$store.state.system.showPop;

    },
    popText: function () {/* 文字 */
      return this.$store.state.system.popText;
    },
    id: function () {/* 文字 */
      return this.$store.state.system.id;
    },
    showGoods: function () {
      return this.$store.state.system.showGoods
    },
    // 用做对照表 相应的popText对应相应的数组名字 这个和vuex中的businessSelect中的信息是耦合的，要确保名称抄对，便于物品的交互
    myMap () {
      if (this.popText === '钱箱') {
        return 'moneyBox'
      } else if (this.popText === '客户签字') {
        return 'peopleSign'
      } else if (this.popText == '传票栏') {
        return 'cultureIn'
      } else if (this.popText == '印章盒') {
        return 'sealBox'
      } else if (this.popText == '验钞机') {
        return 'currencyDetector'
      } else if (this.popText == '打印机') {
        return 'printer'
      } else if (this.popText == '资料') {
        return 'resource'
      } else if (this.popText == '返还资料') {
        return 'backPeople'
      } else {
        return ''
      }
    },
    ...mapGetters({
      goodsShelfTotalData: 'system/goods2',
      cultureIn: 'system/cultureIn', // 传票栏
      peopleSign: 'system/peopleSign',
      goodState: 'system/goodState',
      getSelectList: 'system/getSelectList',
      needBackMoney: 'system/needBackMoney',
      businessId: "system.businessId"
    }),



    ...mapState({
      businessKey: state => state.system.businessKey
    })
  },
  watch: {

    // 如果图片放大器被关了，则重置信息
    showImg (newVal) {
      if (!newVal) {
        this.imgSrc = ''
        this.imgSrcId = ''
        this.imgSrcName = ''
      } else {


      }
    },
    '$route.path': function (val) {
      // 控制弹框显隐
      let arr = val.split('/').slice(-2);
      if (arr.pop() === 'manage' || arr[0] === 'manage') {
        this.manageVisible = true;
      } else {
        this.manageVisible = false;
      }
    },

    // 打开电脑录入的时候关闭物品栏
    manageVisible (newVal) {
      if (newVal === false) {
        this.changeShowGoods(false)
      }
    },

    // 展开交互的物品栏
    showPop (newVal) {
      if (newVal) {
        if (this.popText === '重要空白凭证箱') {
          this.$nextTick(() => {
            const importanceArrClassArr = document.getElementsByClassName('importanceArrClass')
            for (let i = 0; i < this.importanceArr.length; i++) {
              new Sortable(importanceArrClassArr[i], {
                animation: 150,
                group: {
                  name: 'shared',
                  pull: 'clone',// 是否可以被移出或克隆
                  put: false// 禁止拖入
                },
                sort: false,// 禁止排序
                onEnd: evt => { // 结束拖拽
                  if (this.judgePosition(evt)) {
                    const getIt = evt.target.textContent
                    for (var i = 0; i < this.goods.length; i++) {
                      if (this.goods[i].name == getIt) {
                        return this.setTipsOperate('物品栏中已有该物品')
                      }
                    }
                    for (let i = 0; i < this.popArr.length; i++) {
                      if (this.popArr[i].name === getIt) {
                        console.log('wokaio')
                        // this.$store.commit('system/changeGoods',{push:[this.popArr[i]]})
                        return
                      }
                    }
                  } else {
                    this.setTipsOperate('非可拖拽的交互！')
                  }
                }
              })
            };
          })
        } else if (this.myMap) {
          this.boxStart = this.goodState.map(item => item.id)
          this.boxStart2 = this.goodsShelfTotalData.map(item => item.id)
        }
      } else {
        this.commonChecked = []
        this.sealChecked = []
        this.importantChecked = []
        // 去掉临时存储的证件
        this.boxStart = []
        this.boxStart2 = []

      }
    },
    id (newVal) {
    },
  },
  created () {
    if (!sessionStorage.getItem('firstLoad')) {
      const loading = this.$loading({
        lock: true,
        // text: 'Loading',
        text: '努力加载中，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
        sessionStorage.setItem('firstLoad', true)
      }, 1000);
    }


    let arr = this.$route.path.split('/').slice(-2);
    if (arr.pop() === 'manage' || arr[0] === 'manage') {
      this.manageVisible = true;
    } else {
      this.manageVisible = false;
    }

    //在页面加载时读取localStorage里的状态信息
    if (sessionStorage.getItem('businessKey')) {
      this.$store.commit('system/setBusinessKey', sessionStorage.getItem('businessKey'))
    }
    if (sessionStorage.getItem('businessSelect')) {
      // 调试时注释掉
      this.$store.commit('system/setBusinessSelect', JSON.parse(sessionStorage.getItem('businessSelect')))
    }
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem('businessKey', this.$store.state.system.businessKey)
      sessionStorage.setItem('businessSelect', JSON.stringify(this.$store.state.system.businessSelect))
    })
    this.startPlay()

    // this.getThingsCache();
    // 或许电脑中的其中一个选项栏

  },
  mounted () {
    let that = this

    if (this.$refs.manPhoto) {
      this.$refs.manPhoto.onload = function () {
        that.$refs.manDiv.style.width = this.width + 'px';
        that.$refs.manDiv.style.height = (this.height - 70) + 'px';
      }
    }

    if (this.$refs.cipherPhoto) {
      this.$refs.cipherPhoto.onload = function () {
        that.$refs.cipherDiv.style.width = this.width + 'px';
        that.$refs.cipherDiv.style.height = this.height + 'px';
      }
    }

    // 图片查看器允许拖拽
    this.$nextTick(() => {
    })
    // 拖拽-物品栏
    new Sortable(this.$refs.goods, {
      animation: 150,
      group: {
        name: 'shared',
        pull: 'clone',// 是否可以被移出或克隆
        put: false// 禁止拖入
      },
      sort: false,// 禁止排序
      onEnd: function (/**Event*/evt) { // 结束拖拽
        // 判断拖拽的地址 popUp和popUpSeal都是可以被拖拽上去的
        if (!that.$refs.popUp && !that.$refs.popUpSeal) return that.setTipsOperate('非可拖拽的交互！')
        let targetDom
        if (that.$refs.popUp) {
          targetDom = that.$refs.popUp.getBoundingClientRect()
        } else if (that.$refs.popUpSeal) {
          targetDom = that.$refs.popUpSeal.getBoundingClientRect()
        }
        if (evt.originalEvent.pageX < targetDom.right && evt.originalEvent.pageX > targetDom.left) {
          if (evt.originalEvent.pageY < targetDom.bottom && evt.originalEvent.pageY > targetDom.top) {
            /* oldindex识别是拖拽了哪个文件 */
            // console.log(that.goodsShelfTotalData[evt.oldIndex].name,'执行拖拽2');
            // that.clickList.push(that.goodsShelfTotalData[evt.oldIndex].name)

            if (that.$refs.popUp) {
              if (that.myMap) {
                const id = that.goodsShelfTotalData[evt.oldIndex].id
                // 将物品从物品栏中取出
                that.outThingsGoods([id])
                // 将物品放入物品栏
                that.pushThings({ idArr: [id], name: that.myMap })
              } else {
                for (var i = 0; i < that.popArr.length; i++) {
                  if (that.goodsShelfTotalData[evt.oldIndex].name == that.popArr[i].name) {
                    if (that.receptionList == null) {
                      that.receptionList = []
                    }
                    if (that.receptionList.length) {
                      for (var j = 0; j < that.receptionList.length; j++) {
                        if (that.receptionList[j].name == that.goodsShelfTotalData[evt.oldIndex].name) {
                          return;
                        }
                      }
                      that.receptionList.push(that.popArr[i])
                    } else {
                      that.receptionList.push(that.popArr[i])
                    }
                  }
                }
              }
            }

            // 印章的拖拽
            else if (that.$refs.popUpSeal) {

              const id = that.goodsShelfTotalData[evt.oldIndex].id
              that.outThingsGoods([id])
              that.pushThings({ idArr: [id], name: that.myMap })

            }

          }
        }
      },
    });
    // (item, index) in importanceArr" :ref="'importanceArr'+index
    // 拖拽-弹框
    new Sortable(this.$refs.popUp, {
      animation: 150,
      group: {
        name: 'shared',
        pull: 'clone',// 是否可以被移出或克隆
        put: false
      },
      sort: false,// 禁止排序
      // 结束拖拽
      onEnd: function (/**Event*/evt) {
        if (!that.$refs.goods) return that.setTipsOperate('非可拖拽的交互！')
        let targetDom = that.$refs.goods.getBoundingClientRect()
        if (evt.originalEvent.pageX < targetDom.right && evt.originalEvent.pageX > targetDom.left) {
          if (evt.originalEvent.pageY < targetDom.bottom && evt.originalEvent.pageY > targetDom.top) {
            /* oldindex识别是拖拽了哪个文件 */
            that.checkList.push(that.importanceArr[evt.oldIndex].name)
            // 如果拖拽后拖拽目标中有东西，则判断东西中是否有拖拽的东西，如果没有就加入，如果有就不加入
            if (that.goodsShelfTotalData.length > 0) {
              for (var i = 0; i < that.goodsShelfTotalData.length; i++) {
                if (that.goodsShelfTotalData[i].name == that.importanceArr[evt.oldIndex].name) {
                  return
                }
              }
              // that.goodsShelfTotalData.push(that.importanceArr[evt.oldIndex])
              that.addGoods(that.importanceArr[evt.oldIndex])
            }
          }
        }
        // // console.log(refParamBox,'目标dom',refParamBox.getBoundingClientRect());
        // // 判断拖拽的地址
        // let targetDom = that.$refs.goods.getBoundingClientRect()
        // console.log(evt.oldIndex)
        // if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){
        //     if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){
        //         console.log(evt)
        //         // this.importanceArr[evt.oldIndex]
        //         // this.importanceArr
        //         alert('拉入到弹框')
        //     }
        // }
      },
    });

  },
  methods: {
    ...mapMutations({
      startPlay: 'system/startPlay',
      replaceThingsGoods: 'system/replaceThingsGoods',
      replaceThings: 'system/replaceThings',
      setShowBusiness: 'system/setShowBusiness',
      changeShowGoods: 'system/changeShowGoods',
      setBusinessKey: 'system/setBusinessKey',
      addGoods: 'system/addGoods',
      deleteGoods: 'system/deleteGoods',
      stampJudge: 'system/stampJudge',
      payMoney: 'system/payMoney',
      backPeople: 'system/backPeople',
      backCulture: 'system/backCulture',
      pushThings: 'system/pushThings',
      pushThingsGoods: 'system/pushThingsGoods',
      outThings: 'system/outThings',
      outThings2: 'system/outThings2',
      outThingsGoods: 'system/outThingsGoods',
      setTipsOperate: 'system/setTipsOperate',
      initCreditImportIds: 'system/initCreditImportIds',
      setCreditImportIds: 'system/setCreditImportIds',
    }),

    // 获取桌面上物品的缓存信息
    getThingsCache () {

      // 初始化印章缓存
      this.finishSealedArr.splice(0, this.finishSealedArr.length)

      // 传票栏
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,4'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          const list = data.data.judgmentRuleReqs.map(item => item.answerId)
          if (list.length) {
            this.outThingsGoods([...list])
            this.pushThings({ idArr: [...list], name: 'cultureIn' })
          }
          this.finishGoods.cultureIn = true
        } else {
          this.finishGoods.cultureIn = false
        }
      })
      // 重要空白凭证箱
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,2'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          const list = data.data.judgmentRuleReqs.map(item => item.answerId)
          if (list.length) {
            // this.pushThings({ idArr: [...list], name: 'cultureIn'})
            this.pushThingsGoods([...list])
          }
          this.finishGoods.proofImportantBox = true
        } else {
          this.finishGoods.proofImportantBox = false
        }
      })

      // 普通凭证箱
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,3'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          const list = data.data.judgmentRuleReqs.map(item => item.answerId)
          if (list.length) {
            this.pushThingsGoods([...list])
          }
          this.finishGoods.proofBox = true
        } else {
          this.finishGoods.proofBox = false
        }
      })

      // 印章盒 暂时得等Obj对应
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,8'
      }).then((data) => {
        console.log('data=>', data)
        const stampJudge = {
          18: { add: [24, 21], delete: [14] },
          452: { add: [432, 433] },
          458: { add: [419, 418], delete: [426] },
          459: { add: [478, 477], delete: [407] },
          460: { add: [466, 468, 467], delete: [406] },
          463: { add: [480, 488], delete: [413] },
          464: { add: [482, 481], delete: [479] },
          444: { add: [420, 421], delete: [425] },
          445: { add: [422, 424], delete: [427] },
          446: { add: [419, 418], delete: [426] },
          447: { add: [269, 22], delete: [17] },
          455: { add: [487, 441], delete: [409] },
          456: { add: [473, 472], delete: [411] },
          457: { add: [476, 474], delete: [412] }
        }
        const stampMap = {
          449: 429,
          19: 428,
          452: 432,
          465: 438,
          461: 467,
          20: 23,
          435: 435,
          436: 437,
          484: 431,
          462: 468,
          448: 430,
          454: 439
        }

        if (data.status == 200 && data.data.judgmentRuleReqs) {
          const list = data.data.judgmentRuleReqs.map(item => item.answerId)
          const allKeys = Object.keys(stampJudge)
          if (list.length) {
            for (let i = 0; i < list.length; i++) {
              if (allKeys.includes(list[i])) {
                this.outThingsGoods([...stampJudge[list[i]].delete])
                this.pushThingsGoods([...stampJudge[list[i]].add])
              } else {
                this.finishSealedArr.push(stampMap[list[i]])
              }
            }
          }

          this.finishGoods.sealBox = true
        } else {
          this.finishGoods.sealBox = false
        }
      })

      // 钱箱
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,1'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          const list = data.data.judgmentRuleReqs.map(item => item.answerId)
          if (list.length) {
            if (this.needBackMoney) {
              this.pushThingsGoods([...list])
              this.outThings2({ name: 'moneyBox', index: 0 })
            } else {
              this.outThingsGoods([...list])
              this.pushThings({ idArr: [...list], name: 'moneyBox' })
            }
          }
          this.finishGoods.moneyBox = true
        } else {
          this.finishGoods.moneyBox = false
        }
      })

      // 返还资料
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,556'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          const list = data.data.judgmentRuleReqs.map(item => item.answerId)
          if (list.length) {
            this.outThingsGoods([...list])
            this.pushThings({ idArr: [...list], name: 'backPeople' })
          }
          this.finishGoods.backPeople = true
        }
      })

      // 刷卡器
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,6'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          this.finishGoods.swipingCard = true
        } else {
          this.finishGoods.swipingCard = false
        }
      })

      // 身份证
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,7'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          this.finishGoods.idCard = true
        } else {
          this.finishGoods.idCard = false
        }
      })

      // 验钞机
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,9'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          this.finishGoods.currencyDetector = true
        } else {
          this.finishGoods.currencyDetector = false
        }
      })

      // 打印机
      getOperation({
        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,10'
      }).then((data) => {
        if (data.status == 200 && data.data.judgmentRuleReqs) {
          this.finishGoods.printer = true
        } else {
          this.finishGoods.printer = false
        }
      })
    },
    voucherCardGetIt (number) {
      if (number === 2) {

      }
      this.voucherCardGet = false
    },
    // 钱箱取钱确认框
    changeTipsDialog (changeIt = false) {
      this.tipsDialog = changeIt
    },
    // 确认取钱，关闭弹框并将钱放入物品栏
    getMoneyTotal (changeIt) {
      // 如果是确认，执行一些东西
      if (changeIt) {
        if (this.backMoneyTotal > 0) {
          // this.setTipsOperate('取钱成功!')
          this.pushThingsGoods([15])
        }
      }
      this.tipsDialog = false
    },
    // 弹出客户对话框
    changePeopleJudge () {
      this.peopleJudge = true;
    },
    // 关闭客户对话框
    closePeopleJudge () {
      this.peopleJudge = false;
    },
    // 点击客户后选择想做的事
    peopleDoing (peopleDo) {
      this.peopleDo = peopleDo;
      this.peopleJudge = false;
      if (peopleDo === 1) {
        this.showData('客户签字', 0)
      } else {
        this.showData('返还资料', 0)
      }
    },
    // 物品交互的时候，如果是能存放物品的则将物品取出并在物品栏中添加该物品（这些物品名称在myMap中，而且打开这个容器的时候默认会识别出来这个名字），
    // 若为刷卡器这种临时存放物品的，则只需将该物品从刷卡器中删掉就行了，不需要将该物品存入物品栏中
    dislodgeItem (index) {
      // 点一下飞回来
      if (this.myMap) {
        const tmpId = this.goodState[index].id
        this.outThings2({ name: this.myMap, index }) // 用下标解决bug
        this.pushThingsGoods([tmpId])

      } else {
        // 
        // const index = this.receptionList.findIndex(item => item.id === id)
        this.receptionList.splice(index, 1);
      }
      // this.receptionList.splice(index,1);
    },
    toggleGoods () {
      this.changeShowGoods(!this.showGoods)
    },
    showData (type, nbm) {/* 展示弹窗-type为弹窗标题文字 */
      this.nbm = nbm
      // 显示物品栏
      this.changeShowGoods(true)
      if (type !== '系统') {
        this.$store.commit('system/changePop', { show: true, text: type, id: this.id })
      }
    },
    dblClickFn (item, val) {/* 选中/预览  单/双击函数 */
      let that = this
      this.clickNum++
      if (this.clickNum === 2) {  //  处理双击事件
        this.clickNum = 0;
        this.showImg = true
        this.imgSrc = item.src
        this.imgSrcId = item.id
        this.imgSrcName = item.name
      }
      setTimeout(function () {
        let arr
        switch (that.popText) {
          case '普通凭证箱': arr = that.commonChecked
            break;
          case '印章盒': arr = that.sealChecked
            break;
          case '重要空白凭证箱': arr = that.importantChecked
            break;
          default:
            break;
        }
        if (val === 'goods') arr = that.checkList
        if (that.clickNum === 1) {//  处理单击事件
          that.clickNum = 0;
          if (that.popText === '印章盒') {
            arr.splice(0, 1, item.id)
          } else if (val === 'goods' && that.popText === '印章盒') {
            that.checkList.length = 0
            that.checkList.push(item.id)
          } else {
            // console.log(item.id)
            arr.includes(item.id) ? arr.splice(arr.indexOf(item.id), 1) : arr.push(item.id);
          }
        }
      }, 200)
    },
    goodsDblClickFn (item) {/* 选中/预览  单/双击函数 */
      this.clickNum2++;

      if (this.clickNum2 === 2) {  //  处理双击事件
        // 有些东西图片不放大
        if (this.controlGoodsDblClickFn) {
          clearTimeout(this.controlGoodsDblClickFn)
          this.controlGoodsDblClickFn = null
        }
        if (this.finishSealedArr.includes(item.id)) return false // 盖章过的不能双击放大
        const judge = item.name.includes('本联') || item.name.includes('凭证联') || (item.name.includes('回单') && !item.name.includes('客户回单'))
          || (item.name.includes('复印件') && !item.name.includes('身份证复印件')) || item.name.includes('（二）') || item.name.includes('（三）')
        if (!(judge)) {
          this.clickNum2 = 0;
          this.showImg = true
          this.magnifyData = item
          this.imgSrc = item.src
          this.imgSrcId = item.id
          this.imgSrcName = item.name
        }
      } else {
        this.controlGoodsDblClickFn = setTimeout(() => {
          if (this.myMap) {
            this.outThingsGoods([item.id])
            this.pushThings({ idArr: [item.id], name: this.myMap })
          } else {
            const index = this.receptionList.findIndex(item2 => item2.id === item.id)
            if (index === -1) {
              this.receptionList.push(item)
            }
          }
          this.clickNum2 = 0
        }, 200)
      }
    },
    checkSeal (id) {/* 选中印章 */
      this.sealChecked.includes(id) ? this.sealChecked.splice(this.sealChecked.indexOf(id), 1) : this.sealChecked.push(id);
    },
    checkImportant (id) {/* 选中重空凭证 */
      this.importantChecked.includes(id) ? this.importantChecked.splice(this.importantChecked.indexOf(id), 1) : this.importantChecked.push(id);
    },
    checkCommon (item) {/* 选中普通凭证 */
      this.commonChecked.includes(id) ? this.commonChecked.splice(this.commonChecked.indexOf(id), 1) : this.commonChecked.push(id);
    },
    closePop () {// 关闭弹窗
      if (this.myMap) {
        if (this.myMap === 'sealBox') {
          if (this.goodState.length) {
            const { id } = this.goodState[0]
            this.outThings({ name: this.myMap, idArr: [id] })
            this.pushThingsGoods([id])
          }
        } else {
          this.replaceThings({ name: this.myMap, idArr: [...this.boxStart] })
          this.replaceThingsGoods([...this.boxStart2])
        }
      }

      // 取消掉v-drag拖拽事件 防止点击关闭时触发到拖拽事件，会比较难关掉
      document.onmousemove = null
      document.onmouseup = null

      this.receptionList = [];
      this.changeShowGoods(false)
      this.$store.commit('system/changePop', { show: false, text: '' })
    },
    closeData () {
      this.checkList = [];
    },
    showManage () {// 展示系统管理
      this.manageVisible = true;
      this.$router.push(sessionStorage.getItem('computerPath') || (this.isCredit ? '/counter/list/manage/personalLoans' : '/counter/list/manage/consumerClient'))
    },
    popSure () {/* 弹框-确定 */
      // 拦截 由于下面太多没拦截的，所以在这拦截舒服
      if (this.popText.includes('刷卡')) {
        if (this.receptionList.length === 0) {
          this.setTipsOperate('刷卡失败!请放入银行卡或存折!')
          return
        }

        for (let i = 0; i < this.receptionList.length; i++) {
          if (this.receptionList[i].id !== 16 && this.receptionList[i].id !== 563) {
            this.setTipsOperate('刷卡失败!请放入银行卡或存折!')
            return
          }
        }
      } else if (this.popText.includes('密码器')) {
        // if(this.systemId == '62,1' || this.systemId == '62,2' || this.systemId == '62,3') {
        //     if(this.passwordForm.password2 !== this.passwordForm.passwordAgain) {
        //         this.setTipsOperate('两次输入密码不一致')
        //         return
        //     }
        // }
        if (this.passwordForm.passwordAgain.length !== 6) {
          this.setTipsOperate('您输入的密码不足6位!')
          return
        } else if (this.needPasswordAgain && this.passwordForm.password2 !== this.passwordForm.passwordAgain) {
          this.setTipsOperate('两次输入密码不一致')
          return
        }
      } else if (this.popText.includes('身份证扫描')) {
        if (this.receptionList.length === 0) {
          this.setTipsOperate('刷卡失败!请放入身份证!')
          return
        }
        for (let i = 0; i < this.receptionList.length; i++) {
          if (this.receptionList[i].id !== 13 && this.receptionList[i].id !== 442) {
            this.setTipsOperate('刷卡失败!请放入身份证!')
            return
          }
        }
      }

      if (this.popText === '身份证扫描仪' || this.popText === '刷卡器' || this.popText === '密码器') {
        if (this.$store.state.system.id == '33' && this.popText === '身份证扫描仪') {
          this.nbm = 33
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomClientIdentity', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '34' && this.popText === '身份证扫描仪') {
          this.nbm = 34
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('firmClientIdentity', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '63' && this.popText === '刷卡器') {
          this.nbm = 63
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomBusinessDepositCard', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '64' && this.popText === '刷卡器') {
          this.nbm = 64
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomCurrentWithdrawalCard', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '64,2' && this.popText === '密码器') {
          this.nbm = 64
          if (this.passwordForm.passwordAgain) {
            let accountPassword = '';
            accountPassword = this.passwordForm.passwordAgain
            sessionStorage.setItem('nomCurrentWithdrawalPassword', accountPassword)
          }
          this.showManage()
        } else if (this.$store.state.system.id == '65' && this.popText === '刷卡器') {
          this.nbm = 65
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomCurrentTransferCard', JSON.stringify("getIt"))
          }
          this.showManage()
          // if (this.passwordForm.passwordAgain){
          //     let accountPassword = '';
          //     accountPassword = this.passwordForm.passwordAgain
          //     sessionStorage.setItem('nomCurrentTransferPassword', accountPassword)
          // }
        } else if (this.$store.state.system.id == '66' && this.popText === '刷卡器') {

          this.nbm = 66
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomCurrentSettleCard', JSON.stringify("getIt"))
          }
          this.showManage()
          // if (this.passwordForm.passwordAgain){
          //     let accountPassword = '';
          //     accountPassword = this.passwordForm.passwordAgain
          //     sessionStorage.setItem('nomCurrentSettlePassword', accountPassword)
          // }
        } else if (this.$store.state.system.id == '66,2' && this.popText === '密码器') {

          this.nbm = 66
          if (this.passwordForm.passwordAgain) {
            let accountPassword = '';
            accountPassword = this.passwordForm.passwordAgain
            sessionStorage.setItem('nomCurrentSettlePassword', accountPassword)
          }
          this.showManage()
        } else if (this.$store.state.system.id == '67,1' && this.popText === '刷卡器') {
          this.nbm = 67
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomCurrentCancellCard1', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '67,2' && this.popText === '身份证扫描仪') {
          this.nbm = 67
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomCurrentCancellCard2', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '33') {
          this.nbm = 33
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('nomClientIdentity', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '34') {
          this.nbm = 34
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('firmClientIdentity', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (myConfig[this.$store.state.system.id]) { // myConfig[this.$store.state.system.id]

          const { nbm, name, isPassword, machine } = myConfig[this.$store.state.system.id]
          this.nbm = nbm
          if (!isPassword) {
            if (this.receptionList.length > 0 && machine === this.popText) {
              sessionStorage.setItem(name, JSON.stringify("getIt"))
            }
          } else {
            if (this.passwordForm.passwordAgain) {
              let accountPassword = '';
              accountPassword = this.passwordForm.passwordAgain
              sessionStorage.setItem(name, accountPassword)
            }
          }
          this.showManage()

        } else if (this.$store.state.system.id == '67,3') {
          this.nbm = 67
          if (this.passwordForm.passwordAgain) {
            let accountPassword = '';
            accountPassword = this.passwordForm.passwordAgain
            sessionStorage.setItem('nomCurrentCancellPassword', accountPassword)
          }
          this.showManage()
        } else if (this.$store.state.system.id == '62,1' && this.popText === '刷卡器') {
          this.nbm = 62
          if (this.receptionList.length > 0) {
            sessionStorage.setItem('accountVoucher', JSON.stringify("getIt"))
          }
          this.showManage()
        } else if (this.$store.state.system.id == '62,1' && this.popText === '密码器') {
          this.nbm = 62
          if (this.passwordForm.passwordAgain) {
            let accountPassword = '';
            accountPassword = this.passwordForm.passwordAgain
            sessionStorage.setItem('accountPassword', accountPassword)
          }
          this.showManage()
        } else if (this.$store.state.system.id == '62,2' && this.popText === '刷卡器') {
          this.nbm = 62

          if (this.receptionList.length > 0) {
            if (this.receptionList[0].id == 563) {
              sessionStorage.setItem('accountVoucherTwo', JSON.stringify("getIt"))
            }
          }
          this.showManage()
        } else if (this.$store.state.system.id == '62,2' && this.popText === '密码器') {
          this.nbm = 62
          if (this.passwordForm.passwordAgain) {
            let accountPasswordTwo = ''
            accountPasswordTwo = this.passwordForm.passwordAgain
            sessionStorage.setItem('accountPasswordTwo', accountPasswordTwo)
          }
          this.showManage()
        } else if (this.$store.state.system.id == '62,3' && this.popText === '刷卡器') {
          this.nbm = 62
          if (this.receptionList.length > 0) {
            if (this.receptionList[0].id == 563) {
              sessionStorage.setItem('accountVoucherThree', JSON.stringify("getIt"))
            }
          }
          this.showManage()
        } else if (this.$store.state.system.id == '62,3' && this.popText === '密码器') {
          this.nbm = 62
          if (this.passwordForm.passwordAgain) {
            let accountPasswordThree = ''
            accountPasswordThree = this.passwordForm.passwordAgain
            sessionStorage.setItem('accountPasswordThree', accountPasswordThree)
          }
          this.showManage()
        }


        if (this.popText === '刷卡器') { //刷卡器
          const formList = []
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.receptionList.length; i++) { formList.push({ "answerId": this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,6," + this.receptionList[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,6',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('成功刷银行卡!')
            this.finishGoods.swipingCard = true
          }).catch((error) => {
          })
        } else if (this.popText === '身份证扫描仪') { //身份证扫描仪
          const formList = []
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.receptionList.length; i++) { formList.push({ "answerId": this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,7," + this.receptionList[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,7',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('成功刷身份证!')
            this.finishGoods.idCard = true
          }).catch((error) => {
          })
        } else if (this.popText === '密码器') {
          this.setTipsOperate('输入密码成功!')

        }
        // this.showGoods = false
        this.changeShowGoods(false)

      } else {
        let formList = []
        // nbm为0时， 客户签字  或者 返还资料
        if (this.nbm == 0) {
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')

          // 如果是在签字，返还资料。
          if (this.peopleDo === 1) {
            if (this.goodState.length === 0) {
              this.setTipsOperate('请放入签字物品!')
              return
            }

            for (var i = 0; i < this.goodState.length; i++) { formList.push({ "answerId": this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,555," + this.goodState[i].id, "type": "" }) }
            const tmpGoods = this.goodState.map(item => item.id)
            let params = {
              parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,555',
              lcJudgmentRuleReq: formList,
              projectId: +projectId,
              startTime: startTime,
            }
            addOperation(params).then((data) => {
              this.setTipsOperate('签字成功!')
            }).catch((error) => {
            })
          } else {
            if (this.goodState.length === 0) {
              this.setTipsOperate('请放入返还资料!')
              return
            }
            for (var i = 0; i < this.goodState.length; i++) { formList.push({ "answerId": this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,556," + this.goodState[i].id, "type": "" }) }
            let params = {
              parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,556',
              lcJudgmentRuleReq: formList,
              projectId: +projectId,
              startTime: startTime,
            }

            addOperation(params).then((data) => {
              this.setTipsOperate('返还资料成功!')
            }).catch((error) => {
            })
          }
        } else if (this.nbm == 1) { // nbm为1时，传票栏
          if (this.goodState.length === 0) {
            this.setTipsOperate('传票栏中未放入物品!')
            return
          }
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.goodState.length; i++) { formList.push({ "answerId": this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,4," + this.goodState[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,4',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }

          addOperation(params).then((data) => {
            this.setTipsOperate('成功入库')
          }).catch((error) => {
          })
        } else if (this.nbm == 2) { //普通凭证箱
          let clickList = this.commonChecked
          this.pushThingsGoods([...clickList])
          if (clickList.length === 0) return this.setTipsOperate(`请选择物品后再确定！`)
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          const proofBox = JSON.parse(sessionStorage.getItem('proofBox'))
          let formList = []
          if (proofBox) {
            formList.push(...proofBox)
          }
          for (var i = 0; i < clickList.length; i++) {
            if (formList.findIndex(item => item.answerId === clickList[i]) === -1) {
              formList.push({ "answerId": clickList[i], "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,3," + clickList[i], "type": "" })
            }
          }
          // const proofBox = sessionStorage.setItem('proofBox', JSON.stringify(formList))
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,3',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          const tmp = [...clickList]
          addOperation(params).then((data) => {
            this.finishGoods.proofBox = true
            const tmp2 = [];
            this.commonArr.map(item => {
              if (tmp.findIndex(item2 => item2 === item.id) !== -1) {
                tmp2.push(item.name)
              }
            })
            this.setTipsOperate('成功取出:' + tmp2.join(','))
            sessionStorage.setItem('proofBox', JSON.stringify([...formList]))
          }).catch((error) => {
          })
          clickList = []
        } else if (this.nbm == 3) { //重要空白凭证箱
          let clickList = this.importantChecked
          // 项目11 从重要空白凭证箱中取出预留印鉴卡(439)的判断
          if (clickList.length === 1 && clickList[0] === 439) {

          } else {
            this.pushThingsGoods(clickList)
          }
          // (clickList.length === 1 && clickList[0] === 439) || this.pushThingsGoods(clickList)
          if (clickList.findIndex(item => item === 439) !== -1) {
            this.pushThingsGoods([469, 470, 471])
          }


          if (clickList.length === 0) return this.setTipsOperate(`请选择物品后再确定！`)


          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          let formList = []

          // 这个可以缓存判分信息 比如先拿1后拿2 判分点要求拿1和2 这样也算对
          const proofImportantBox = JSON.parse(sessionStorage.getItem('proofImportantBox'))
          if (proofImportantBox) {
            formList.push(...proofImportantBox)
          }
          for (var i = 0; i < clickList.length; i++) {
            if (formList.findIndex(item => item.answerId === clickList[i]) === -1) {
              formList.push({ "answerId": clickList[i], "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,2," + clickList[i], "type": "" })
            }
          }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,2',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          const tmp = [...clickList]
          addOperation(params).then((data) => {
            this.finishGoods.proofImportantBox = true
            const tmp2 = []
            // this.setTipsOperate('成功取货')
            this.importanceArr.map(item => {
              if (tmp.findIndex(item2 => item2 === item.id) !== -1) {
                tmp2.push(item.name)
              }
            })
            sessionStorage.setItem('proofImportantBox', JSON.stringify([...formList]))
            this.setTipsOperate('成功取出:' + tmp2.join(','))
            // importanceArr
          }).catch((error) => {
          })
          clickList = []
        } else if (this.nbm == 4) { //钱箱
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          let formList = [];
          if (this.needBackMoney) {
            const cash = this.cashboxGoodsShelf2
            const val = []
            cash.map(e => {
              if (e.num) {
                const unit = e.name.replace(/\d*/, '') // 货币单位
                const count = e.name.replace(/\D/, '')
                val.push((unit === '元' ? count : '0.' + count) + '-' + e.num)
              }
            })
            this.tipsDialog = true
            // {"answerId":'40',"emptyOne": "19", "emptyTwo": this.form.idType, "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,5,25,33,40", "type": "1"}
            let params = {
              parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,1',
              lcJudgmentRuleReq: [
                {
                  "answerId": 565,
                  "emptyOne": "104",
                  "emptyTwo": val.join(),
                  "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,1," + 565,
                  "type": "6"
                }
              ],
              projectId: +projectId,
              startTime: startTime,
            }
            addOperation(params).then((data) => { }).catch((error) => { })
            // 如果需要钱箱取钱并且满足了

          } else {
            for (var i = 0; i < this.goodState.length; i++) {
              if (this.goodState[i].id !== 15) {
                this.setTipsOperate('请放入现金!')
                return
              }
              formList.push(
                {
                  "answerId": this.goodState[i].id,
                  "emptyOne": "",
                  "emptyTwo": "",
                  "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,1," + this.goodState[i].id,
                  "type": ""
                }
              )
            }
            if (this.goodState.length > 0) {
              let params = {
                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,1',
                lcJudgmentRuleReq: formList,
                projectId: +projectId,
                startTime: startTime,
              }
              addOperation(params).then((data) => {
                this.setTipsOperate('存入成功!')
              }).catch((error) => {
              })
            } else {
              // this.setTipsOperate('')
            }
          }
        } else if (this.nbm == 5) { //印章盒
          if (this.goodState.length === 0) {
            this.setTipsOperate('请放入证件进行盖章!')
            return
          }
          if (this.sealChecked.length === 0) {
            this.setTipsOperate('请选择印章!')
            return
          }
          // 进去会排序 多的不用管
          const sealArr = [...this.sealChecked]
          console.log('sealArr=>', sealArr)
          this.stampJudge({
            sealArr,
            cb: (successId) => {
              if (successId instanceof Array) {
                this.finishSealedArr.push(...successId)
                sessionStorage.setItem('finishSealedArr', JSON.stringify(this.finishSealedArr))
              } else {
                this.finishSealedArr.push(successId)
                sessionStorage.setItem('finishSealedArr', JSON.stringify(this.finishSealedArr))
              }

            }
          })
          this.sealChecked = []
        } else if (this.nbm == 6) { //验钞机
          if (this.goodState.length === 0 || this.goodState[0].id !== 15) {
            this.setTipsOperate('请放入现金!')
            return
          }
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.goodState.length; i++) { formList.push({ "answerId": this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,9," + this.goodState[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,9',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('验钞成功!')
          }).catch((error) => {
          })

          // that.outThingsGoods([that.goodsShelfTotalData[evt.oldIndex].id])
        } else if (this.nbm == 7) { //打印机
          if (this.goodState.length === 0) {
            this.setTipsOperate('请放入打印资料')
            return
          }
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          let id
          for (var i = 0; i < this.goodState.length; i++) {
            if (this.goodState[i].id == 432) {
              id = 443
            } else {
              id = this.goodState[i].id
            }
            formList.push({ "answerId": id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,10," + id, "type": "" })
          }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,10',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('打印成功!')
          }).catch((error) => {
          })
        } else if (this.nbm == 8) {  // 密码器
          let formList = []
          let ruleReqs = sessionStorage.getItem('ruleReqs')
          if (ruleReqs) { formList = JSON.parse(ruleReqs); } else { formList = [] }
          for (var i = 0; i < this.receptionList.length; i++) { formList.push({ "emptyOne": "18", "emptyTwo": this.passwordForm.passwordAgain, "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,282," + this.receptionList[i].id, "type": "3" }) }
          sessionStorage.setItem('ruleReqs', JSON.stringify(formList))

          if (this.passwordForm.password && this.passwordForm.passwordAgain) {
            if (this.passwordForm.password.length >= 6 && this.passwordForm.passwordAgain.length >= 6) {
              if (this.passwordForm.password == this.passwordForm.passwordAgain) {
                this.$store.commit('system/changePop', { show: false, text: '' })
                this.setTipsOperate('成功输入密码!')
              }
            }
          } else {
            this.setTipsOperate('两次输入密码不一致!')
          }
        } else if (this.nbm == 9) {//资料
          if (this.goodState.length === 0) {
            this.setTipsOperate('请放入资料!')
            return
          }
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.goodState.length; i++) { formList.push({ "answerId": this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,11," + this.goodState[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,11',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('成功审核资料!')
          }).catch((error) => {
          })
        } else if (this.nbm == 10) { //刷卡器
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.receptionList.length; i++) { formList.push({ "answerId": this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,6," + this.receptionList[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,6',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('刷卡成功!')
          }).catch((error) => {
          })
        } else if (this.nbm == 11) { //身份证扫描仪 一般进来要先验证身份证
          let projectId = sessionStorage.getItem('projectId')
          let startTime = sessionStorage.getItem('startTime')
          for (var i = 0; i < this.receptionList.length; i++) { formList.push({ "answerId": this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ",287,7," + this.receptionList[i].id, "type": "" }) }
          let params = {
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',287,7',
            lcJudgmentRuleReq: formList,
            projectId: +projectId,
            startTime: startTime,
          }
          addOperation(params).then((data) => {
            this.setTipsOperate('验证身份成功!')
          }).catch((error) => {
          })
        } else if (this.nbm == 12) {
          this.setCreditImportIds(this.receptionList[0].id)
          this.setTipsOperate('导入成功!')
        }
        // 如果不是钱箱或传票栏或印章盒或传票栏或客户，刷卡后返回
        if (this.nbm !== 4 && this.nbm !== 1 && this.nbm !== 5 && this.nbm !== 1 && !(this.nbm === 0 && this.peopleDo !== 1)) {
          const tmpGoods = this.goodState.map(item => item.id)
          this.outThings({ name: this.myMap, idArr: [...tmpGoods] })
          this.pushThingsGoods([...tmpGoods])

        }
        this.nbm !== 5 && this.$store.commit('system/changePop', { show: false, text: '' }) // 关闭弹窗
      }
      // }

      if (this.nbm !== 5) {
        // 印章盒特殊处理
        this.closePop()
        this.$store.commit('system/changePop', { show: false, text: '' })
      }
      // this.$message({
      //     message: '提交成功',
      //     type: 'success'
      // });

    },
    toPart () {
      this.$router.push('/index' + '?' + window.location.href.split('?')[1])
    },
    judgePosition (evt) {
      const targetDom = this.$refs.goods.getBoundingClientRect()
      return evt.originalEvent.pageX < targetDom.right && evt.originalEvent.pageX > targetDom.left && evt.originalEvent.pageY < targetDom.bottom && evt.originalEvent.pageY > targetDom.top
    },
    inputChange (item) { //输入框值改变
      item.num = item.num.replace(/[^\d]/g, '')
    },
  }
};
</script>

<style lang="scss" scoped>
.password-wrap {
  position: relative;

  .password-input {
    font-family: 'password';
  }

  .view {
    position: absolute;
    top: 13px;
    right: 12px;
    cursor: pointer;
  }
}

.contentHeight {
  max-width: 300px;
  max-height: 60px;
}

.businessClass {
  width: 300px;
  height: 100px;
  background-color: skyblue;
  text-align: center;
  line-height: 100px;
  font-size: 23px;
}

@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .computerContent {
    position: absolute;
    top: 10vh;
    width: 200px;
    left: -10vw;
    z-index: 100;
  }
}

@media screen and (min-width: 1920px) {
  .computerContent {
    position: absolute;
    top: -10px;
    width: 200px;
    left: -100px;
    z-index: 100;
  }
}

.wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 68px);
  overflow: hidden;
  background: url('../../../assets/img/integrated-counter-bg.png');

  .counter {
    top: 6%;
    left: 19%;
    width: 68%;
  }

  .glass {
    // 玻璃窗
    top: -18%;
    left: 47%;
    width: 36.5%;
  }

  .employee-wrap {
    // 柜员
    top: 29%;
    left: 43%;
    width: 18%;
    cursor: pointer;
  }

  // 先放着
  .employeeText {
    // 资料文字
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 13vh;
    left: 13.5vw;
    width: 100px;
    height: 100px;
    color: #000;
    transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
    font-size: 18px;
    cursor: pointer;
    z-index: 100;
  }

  .man {
    // 人
    top: 0;
    left: 69%;
    width: 14%;
  }

  .money-box {
    // 钱箱
    top: 36%;
    left: 23%;
    width: 8%;
  }

  .important {
    // 重空箱
    top: 34%;
    left: 27%;
    width: 8%;
  }

  .voucher-box {
    // 普通箱
    top: 16%;
    left: 32%;
    width: 8%;
  }

  .summons {
    // 传票栏
    top: 20%;
    left: 37%;
    width: 8%;
  }

  .computer {
    top: 9%;
    left: 43%;
    width: 12%;
  }

  .card-machine {
    top: 33%;
    left: 55%;
    width: 4%;
  }

  .idCard-scanner {
    top: 38.5%;
    left: 57.5%;
    width: 3.5%;
    z-index: 110;
  }

  .seal-box {
    top: 39.5%;
    left: 61%;
    width: 4%;
    z-index: 60;
  }

  .currency-detector {
    top: 42%;
    left: 65%;
    width: 7%;
  }

  .printer {
    top: 50%;
    left: 70%;
    width: 8%;
  }

  .cipher-machine {
    top: 26%;
    left: 62%;
    width: 4.5%;
  }

  @media screen and (max-width: 1680px) {
    .money-box {
      top: 33%;
    }

    .important {
      top: 31%;
    }

    .card-machine {
      top: 31%;
    }

    .idCard-scanner {
      top: 35.5%;
      left: 58%;
    }

    .seal-box {
      top: 38%;
      left: 62%;
    }

    .cipher-machine {
      top: 22%;
    }

    .employeeText {
      width: 60px;
      height: 80px;
      line-height: 80px;
      top: 8vh;
      left: 13vw;
    }
  }

  @media screen and (max-width: 1440px) and (min-height: 650px) {
    .money-box {
      top: 29%;
    }

    .important {
      top: 27%;
    }

    .voucher-box {
      top: 14%;
    }

    .summons {
      top: 16%;
    }

    .card-machine {
      top: 27%;
    }

    .idCard-scanner {
      top: 31%;
      left: 58%;
    }

    .seal-box {
      top: 33%;
    }

    .cipher-machine {
      top: 19%;
      left: 60%;
    }

    .currency-detector {
      top: 34%;
    }

    .printer {
      top: 41%;
    }

    .glass {
      top: -13%;
    }

    .employeeText {
      width: 50px;
      height: 80px;
      line-height: 80px;
      top: 7vh;
      left: 14vw;
    }
  }

  // 配合公共样式---------------

  .goods {
    position: fixed;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    // height: 150px;
    height: 130px;
    cursor: pointer;
    z-index: 998;
    background-color: rgb(87, 134, 252);
    border-radius: 5px;
    // background: url(../../../assets/img/sth-bg.png) 0 0/100% 100% no-repeat;
    background-size: 40px 130px;

    span {
      width: 16px;
      line-height: 18px;
      margin-bottom: 10px;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }

    .icon {
      width: 28px;
      transition: all 0.5s;
    }

    &:hover {
      opacity: 0.9;
    }

    &.active {
      .icon {
        transform: rotate(180deg);
      }
    }
  }

  .goods-dia {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: fixed;
    bottom: 0;
    left: -100%;
    padding: 20px 300px 20px 300px;
    transition: all 0.5s;
    background-color: rgba(255, 255, 255, 0.95);
    min-height: 140px;

    .file {
      position: relative;
      min-width: 140px;
      height: 140px;
      text-align: center;
      background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
      cursor: pointer;
      margin: 0 10px;

      img {
        width: 95%;
        max-height: 90px;
        margin: auto;
        position: absolute;
        top: 0.5vh;
        left: 50%;
        transform: translateX(-50%);
        // margin-top: 40px;
        margin-top: 5px;
      }

      p {
        position: absolute;
        left: 5%;
        bottom: 0;
        width: 90%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        color: #000;
      }

      &.checked {
        background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
          url(../../../assets/svg/checked.svg) 160px 7% / auto no-repeat;

        p {
          color: #fff;
        }
      }
    }

    &.active {
      left: 0;
      z-index: 998;
    }

    img {
      cursor: pointer;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  // 兼容小屏幕的goods-dia
  @media screen and (min-width: 1200px) and (max-width: 1919px) {
    .goods-dia {
      height: 18vh;
      width: 100%;

      .justify-center {
        //max-height: 13vh;
      }

      .file {
        top: 0;

        //max-height: 13vh;
        img {
          max-height: 90px;
          margin: auto;
          margin-top: 1vh;
        }

        p {
          //top: 9vh;
          line-height: 40px;
          font-size: 18px;
        }
      }
    }
  }
}

.imgPop {
  max-width: 100%;
  margin-top: 20px;
}

.masking {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.5;
  background: #e6e6e6;
  z-index: 99;
}

.data-dia {
  min-height: 60vh;
  border-radius: 16px;
  // margin-top: 4vh !important;
  background: #fff;
  position: fixed;
  // top: 7%;
  // margin-top: 7vh!important;
  margin-top: 2vh;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 0 15px 15px;
  z-index: 2900;
  // border: 1px solid #e6e6e6;
  // border-color: black;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.04);

  // max-height: 600px;
  //overflow: auto;
  .dia-header {
    position: relative;

    .data-title {
      height: 50px;
      width: 250px;
      margin: 0 auto;
      line-height: 50px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat;
      // background: url(../../../assets/img/dia-title.png);
      background-size: 250px 50px;
    }

    .data-title2 {
      height: 72px;
      width: 300px;
      margin: 0 auto;
      font-size: 24px;
      line-height: 72px;
      font-weight: 600;
      letter-spacing: 0.29px;
      font-family: PingFangBold;
      text-align: center;
      color: #fff;
      background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat;
      // background-position-x: 25px;
      // background: url(../../../assets/img/dia-title.png);
      background-size: 300px 72px;
    }

    .close-wrap {
      position: absolute;
      top: 15px;
      right: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
  }

  // 业务选择中的
  .take-list2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    height: 40vh;
    overflow: auto;

    li {
      display: inline-flex;
      align-items: center;
      width: 30%;
      height: 10vh;
      margin: 1vh 0;
      border: 4px solid #dbdbdb;
      border-radius: 20px;
      cursor: pointer;
      background-color: rgba(216, 216, 216, 0.1);

      // &:first-child{
      //     margin: 0 0px 50px 0;
      // }
      // &:last-child{
      //     margin-left: 50px;
      // }
      img {
        width: 20%;
        margin: 0;
        //height: 154px;
        //margin: 0 45px;
      }

      p {
        font-size: 14px;
        color: #000;
        text-align: center;
        padding: 0 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &.checked {
        background: rgba(97, 145, 255, 0.1) url(../../../assets/svg/checked.svg) 96% 7% / auto no-repeat;
        border-color: #6191ff;
      }
    }
  }

  .dia-header2 {
    position: relative;
    height: 50px;
    line-height: 50px;
    background-color: skyblue;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;

    .data-title2 {
      position: absolute;
      left: 15px;
      height: 50px;
      line-height: 50px;
      color: #fff;
    }

    .close {
      height: 50px;
      position: absolute;
      right: 15px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;

      img {
        vertical-align: center;
      }
    }
  }

  .tips {
    // margin: 20px 0 50px;
    text-align: center;
    font-size: 18px;
    color: #000;
  }

  .tips2 {
    margin: 1vh 0 2vh 0;
    text-align: left;
    font-size: 20px;
    color: #000;
  }

  .list {
    width: 940px;
    max-height: 50vh;
    min-height: 30vh;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;

    .img-wrap {
      background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
      width: 140px;
      height: 140px;
      display: flex;
      justify-content: center;
      margin: 5px 10px;
      position: relative;
      cursor: pointer;

      .file {
        position: relative;
        max-width: 135px;
        max-height: 90px;
        text-align: center;
        margin: 10px 10px;

        img {
          margin-top: 45px;
        }

        p {
          position: absolute;
          bottom: 0;
          width: 100%;
          line-height: 40px;
          text-align: center;
          font-size: 18px;
          color: #000;
        }
      }

      .text {
        width: 100%;
        font-size: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translate(-50%, 0);
        overflow: hidden;
      }

      &.checked {
        background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
          url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat;

        p {
          color: #fff;
        }
      }
    }

    .backMoneyBox {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      .backMoney {
        width: 50%;
        display: flex;
        justify-content: center;
        margin: 10px 0;

        img {
          width: 148px;
          height: 73.5px;
          margin-right: 10px;
          // box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
        }

        input {
          width: 204px;
          height: 72px;
          text-align: center;
          opacity: 0.5;
          border: 4px solid rgba(219, 219, 219, 1);
          border-radius: 16px;

          &:focus {
            outline: none;
            opacity: 1;
            border: 4px solid rgba(97, 145, 255, 1);
          }
        }

        .isInputMoney {
          opacity: 1;
          border: 4px solid rgba(97, 145, 255, 1);
        }
      }
    }
  }

  .seal {
    width: 1100px;
    margin-top: -5vh;
    min-height: 35vh;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .box {
      border: 2px solid #e6e6e6;
      width: 45%;
      min-height: 40vh;
      border-radius: 10px;
      padding: 10px;

      height: 100%;
      // opacity: 0.5;
      background: #fcfcfc;
      border: 4px solid #dbdbdb;
      border-radius: 16px;
    }

    .left {
      display: flex;
      width: 50%;
      flex-wrap: wrap;

      // max-height: 35vh;
      // overflow: auto;
      .file {
        position: relative;
        width: 160px;
        height: 160px;
        text-align: center;
        background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
        cursor: pointer;
        margin: 5px 7px;

        &.sealFile {
          width: 135px;
          height: 135px;

          img,
          .el-image {
            width: 70px;
            height: 70px;
            top: 6px;
            left: 50%;
          }

          &.checked {
            background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
              url(../../../assets/svg/checked.svg) 105px 7% / auto no-repeat;

            p {
              color: #fff;
            }
          }
        }

        &:last-child {
          margin-right: 0;
        }

        &:nth-child(n > 1) {
          margin-top: 0;
        }

        img,
        .el-image {
          position: absolute;
          width: 90px;
          height: 70px;
          max-height: 90px;
          top: 17px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 9;
        }

        p {
          position: absolute;
          bottom: 0;
          width: 100%;
          line-height: 37px;
          text-align: center;
          font-size: 18px;
          color: #000;
        }

        &.checked {
          background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
            url(../../../assets/svg/checked.svg) 130px 7% / auto no-repeat;

          p {
            color: #fff;
          }
        }
      }

      &.active {
        left: 0;
        z-index: 9999;
      }

      img {
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .right {
      margin-left: 5%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .else {
      width: 100%;
    }

    .img-wrap2 {
      width: 95%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      img {
        width: 300px;
        height: 200px;
      }

      // .el-image {
      //     img {
      //         min-height: 500px;
      //     }
      // }
      // .fileSeal {
      //     min-height: 50%;
      // }
    }
  }

  .dia-footer {
    margin-top: 30px;
    text-align: center;

    button {
      width: 7vw;
    }

    // button {
    //     width: 100px;
    //     line-height: 60px;
    //     color: #fff;
    //     font-size: 24px;
    //     background-color: rgb(81, 147, 255);
    //     border: 0;
    //     border-radius: 20px;
    //     cursor: pointer;
    //     &:hover {
    //         opacity: 0.9;
    //     }
    // }
  }

  .dia-footer2 {
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .busyButtonBox {
      display: flex;
      justify-content: space-between;
    }
  }

  .dia-footer3 {
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;

    .busyButtonBox {
      display: flex;
      justify-content: space-between;
    }
  }
}

// 兼容小的data-dia
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .data-dia {
    top: -3%;
    left: 50%;
    min-height: 65vh;
    z-index: 9980;

    .seal {
      margin-top: -3vh;

      // max-height: 40vh;
      //overflow: auto;
      //display: flex;
      //justify-content: space-around;
      //flex-wrap: wrap;
      .left {
        min-height: 35vh;
        overflow: auto;
        display: flex;
        //justify-content: space-around;
        flex-wrap: wrap;

        .file {

          //height: 10vh;
          img {
            //height: 10vh;
            //width: 5vw;
            margin: 10px auto 0;
            z-index: 9;
          }

          p {
            line-height: 4vh;
          }

          &.sealFile {
            width: 120px;
            height: 120px;

            img,
            .el-image {
              width: 50px;
              height: 50px;
              top: 6px;
              left: 50%;
            }

            &.checked {
              background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
                url(../../../assets/svg/checked.svg) 90px 7% / auto no-repeat;

              p {
                color: #fff;
              }
            }
          }
        }
      }

      // 将印章盒的特殊区别开 加多一个类优先级更高
      .sealRight {
        min-height: 42vh !important;
      }

      .box {
        //background-color: red;
        border: 2px solid #e6e6e6;
        min-height: 50vh;
        border-radius: 10px;
        padding: 10px;

        // opacity: 0.5;
        background: #fcfcfc;
        border: 4px solid #dbdbdb;
        border-radius: 16px;
      }

      .else {
        width: 100%;
      }
    }

    .dia-footer {
      //position: absolute;
      //bottom: 1vh;
      //left: 50%;
      //transform: translateX(-50%);
    }
  }
}

.systemconfig {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

// .system {
//   margin-top: -8vh;
//   top: 50%;
//   width: 1280px;
// }

.fullScreenSystem {
  width: 100vw;
  max-height: none;
  height: 200vh;
  left: 0;
  transform: translateX(0);
}

/deep/ .view .el-dialog__body {
  padding: 0 !important;
  background: #f5f6f8;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sth {
  position: absolute;
  z-index: 1;

  &.cp {
    cursor: pointer;
  }
}

.guide {
  top: 80px;
  left: 10px;
  width: 120px;
  cursor: pointer;
  background: url(../../../assets/img/lobby-btn-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 45px;
  font-size: 20px;
  text-align: center;
  color: #fff;

  &:hover {
    opacity: 0.9;
  }
}

.imgIndex {
  z-index: 9999 !important;
}

/deep/.z500 {
  z-index: 5000;
}

/deep/.bgNone {
  background-color: transparent;
  box-shadow: 0 0 0 0 !important;

  .peopleDialog {
    width: 580px;
    padding-bottom: 100px;
    min-height: 466px;
    height: 466px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 0 0 !important;

    h2 {
      margin-top: calc(154px - 72px);
      // opacity: 0.8;

      font-family: MyAppleFont1;
      font-size: 30px;
      color: #000000;
      letter-spacing: 0.36px;
      // font-weight: 500;
      text-align: center;
    }

    .dia-footer {
      margin-top: 10vh;

      button {
        width: 512px;
        height: 60px;
        margin: 10px 0 0 0;
        background: #6191ff;
        border-radius: 16px;
        font-size: 30px;
        color: #ffffff;
        letter-spacing: 0.36px;
        text-align: center;
        font-weight: 600;
      }
    }
  }

  .tipsDialog {
    width: 580px;
    // height: 520px;
    min-height: 300px;
    padding-bottom: 50px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 0 0 0 !important;
    font-family: MyAppleFont1;

    h3 {
      // opacity: 0.8;
      font-size: 30px;
      padding-left: 40px;
      color: #000000;
      letter-spacing: 0.36px;
      line-height: 42px;
      font-weight: 500;
      height: 42px;

      img {
        width: 18px;
        height: 42px;
        // line-height: 24px;
        display: inline-block;
        font-size: 30px;
        font-weight: 400;
        color: green;
      }
    }

    .dia-footer {
      display: flex;
      justify-content: center;
      align-items: center;

      button {
        // font-style: ;
        font-size: 30px;
        color: #ffffff;
        letter-spacing: 0.36px;
        text-align: center;
        font-weight: 600;
        margin: 0 10px;

        &:nth-child(1) {
          width: 240px;
          height: 60px;
          opacity: 0.3;
          background: #6191ff;
          border-radius: 16px;
        }

        &:nth-child(2) {
          width: 240px;
          height: 60px;
          background: #6191ff;
          border-radius: 16px;
        }
      }
    }
  }

  @media (max-width: 1900px) {

    .tipsDialog,
    .peopleDialog {
      margin-top: 25vh;
    }
  }

  .checked {
    background: rgba(97, 145, 255, 0.1) url(../../../assets/svg/checked.svg) 96% 7% / auto no-repeat;
    border-color: #6191ff;
  }
}
</style>