<template>
<div class="container">
  <my-nav @listener-in="inHandle" @listener-helper="helperHandle"></my-nav>
  <div class="content">
    <div class="reading" v-if="reading">
      入库扫描中<br/>
      请将需要入库的物料推入感应门
    </div>
    <div v-else style="height: 100%">
      <div style="display: flex;justify-content: space-between;align-items: center">
        <div style="width: 108px"></div>
        <div class="title">入库扫描</div>
        <div style="padding: 0 10px">
          <Button type="primary" @click="scanShow=true">辅助扫描</Button>
        </div>
      </div>
      <div class="main">
        <div class="list-wrap">
          <div class="list" style="margin-right: 20px;">
            <div class="sub-title">已贴标物料</div>
            <div style="height: calc(100% - 46px);overflow: auto">
              <div class="row" v-for="(item, index) in data" :key="index">
                <div class="col" style="width: 50px;align-items: center;">
                  <Icon type="ios-checkmark-circle" color="red" size="18" v-if="item.checked"/>
                </div>
                <div class="col" style="flex: 1">
                  <div>{{ item.materialName }}</div>
                  <div>物料长度：{{ item.quantity }}米</div>
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <div class="sub-title">本次入库</div>
            <div style="height: calc(100% - 46px);overflow: auto">
              <div class="row" v-for="(item, index) in scanData.rfidTagItems" :key="index">
                <div class="col" style="width: 50px;align-items: center;"></div>
                <div class="col" style="flex: 1"  :style="{ color: item.scanRfidStatus === 1 ? 'orange' : item.scanRfidStatus === 2? 'red': '#fff'}">
                  <div>{{ item.materialName }}</div>
                  <div>物料长度：{{ item.quantity || 0 }}米</div>
                </div>
                <div class="col" style="flex: 1"  :style="{ color: item.scanRfidStatus === 1 ? 'orange' : item.scanRfidStatus === 2? 'red': '#fff'}">
                  <div>标签值：{{ item.rfidCode }}</div>
                </div>
                <div class="col" style="width: 50px;">
                  <Icon type="ios-trash" size="20" color="red" @click="del(item, index)" style="cursor: pointer"/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="list-wrap bottom">
          <div class="list">
            <div class="sub-title">
              本次统计
              <a class="remark" href="#" @click="show = true">填写备注</a>
            </div>
            <div style="height: calc(100% - 46px);overflow: auto">
              <div class="row"
                   v-for="(item, index) in scanData.materialItems"
                   :key="index">
                <div class="col" style="flex: 3;" :style="{ color: item.scanRfidStatus === 1 ? 'orange' : item.scanRfidStatus === 2? 'red': '#fff'}">
                  <div>{{ item.materialName }}</div>
                </div>
                <div class="col" style="flex: 2" :style="{ color: item.scanRfidStatus === 1 ? 'orange' : item.scanRfidStatus === 2? 'red': '#fff'}">
                  <div>入库件数：{{ item.tagCount }}</div>
                </div>
                <div class="col" style="flex: 2" :style="{ color: item.scanRfidStatus === 1 ? 'orange' : item.scanRfidStatus === 2? 'red': '#fff'}">
                  <div>入库数量：{{ item.totalQuantity }}米</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <Button type="error" size="large" style="margin-right: 20px" @click="pass(0)">重新扫描</Button>
        <Button type="success" size="large" @click="pass(1)">确认无误</Button>
      </div>
    </div>
  </div>
  <div class="remark-content">
    <Modal
        v-model="modal"
        :mask-closable="false"
        :closable="false"
        :fullscreen="true"
        :footer-hide="true"
        >
      <Progress :percent="percent" :stroke-color="['#108ee9', '#87d068']" :hide-info="true" style="width: 400px"/>
    </Modal>
  </div>
  <!-- 填写备注 -->
  <Modal
      v-model="show"
      :closable="false"
      :footer-hide="true"
      class-name="vertical-center-modal"
      @on-cancel="cancel"
     >
    <div class="remark-content">
      <div class="title">填写备注</div>
      <Input v-model="remark" type="textarea" :rows="10"/>
      <div class="btn">
        <Button @click="cfm" type="success" style="width: 120px">确定</Button>
      </div>
    </div>
  </Modal>
  <!-- 辅助扫描 -->
  <Modal
      v-model="scanShow"
      class-name="vertical-center-modal"
      @on-cancel="cancel"
  >
    <div class="scan-title" slot="header">辅助扫描</div>
    <div class="scan-btn" slot="footer">
      <Button type="primary" style="width: 80px" @click="scanShow = false">关闭</Button>
    </div>
    <div class="scan-content" v-if="otherData.length > 0">
      <div class="item" v-for="(item, index) in otherData" :key="index">
        <div class="left">
          <div class="row">RFID标签：{{ item.rfidCode }}</div>
          <div class="row">物料编码：{{ item.materialCode }}</div>
          <div class="row">物料名称：{{ item.materialName }}</div>
          <div class="row">最近操作：{{ item.lastOpera }}</div>
        </div>
        <div class="right">
          <Button type="primary" ghost @click="add(item)" v-if="item.lastOpera.indexOf('入库') === -1">入库</Button>
        </div>
      </div>
    </div>
    <div v-else style="padding: 10px 0;color: #FFFFFF">暂无数据</div>

  </Modal>
</div>
</template>

<script>
import MyNav from '@/components/my-nav'
import * as signalR from '@microsoft/signalr'
import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack'
import withUrl from '@/config/withUrl'
import {GetHasTagMaterialList, PlcStorageIn, ReScan, GetScanRfidStocInOut, DelScanRfid} from '@/api/integrated'
import store from "@/store";
import {logOut} from "@/libs/util";
export default {
  name: "store-in",
  data() {
    return {
      scanShow: false,
      show: false,
      modal: false,
      percent: 0,
      addTimer: null,
      overTimer: null,
      reading: false,
      connection: null,
      data: [], // 左侧数据列表
      scanData: {}, // 扫描数据
      otherData: [], // 扫描辅助数据
      tempDelData: [], // 临时删除列表
      remark: ''
    }
  },
  components: {
    MyNav
  },
  methods: {
    add (item) {
      item.totalQuantity = item.qty
      item.quantity = item.qty
      // 辅助扫描的添加一个isTemp 标识以供删除区分
      if (this.scanData.rfidTagItems.find(scan => scan.materialCode === item.materialCode)) {
        this.$Message.error('物料已添加')
      } else {
        this.scanData.rfidTagItems.push({...item, isTemp: true})
        this.scanData.materialItems.push({...item, isTemp: true})
        this.$Message.info('添加成功')
      }
    },
    cancel () {
      this.remark = ''
    },
    cfm () {
      this.show = false
    },
    /* 临时删除 */
    del (item, index) {
      if (item.isTemp) {
        this.scanData.rfidTagItems.splice(index, 1)
        this.scanData.materialItems.splice(index, 1)
        /* 添加一个临时删除数据 用于再次扫描数据时过滤已临时删除的数据 */
        this.tempDelData.push(item)
      } else {
        DelScanRfid({
          rfid: item.rfidCode,
          plcStationCode: sessionStorage.getItem('plcCode')
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info('删除成功！')
            this.tempDelData.push(item)
            this.getScanList()
          }
        })
      }
    },
    /* 辅助扫描通知 */
    helperHandle (data) {
      this.otherData = data
    },
    /* 入库通知 */
    inHandle() {
      this.getScanList()
      clearTimeout(this.overTimer)
      this.overTimer = setTimeout(() => {
        clearInterval(this.addTimer)
        this.percent = 100
        setTimeout(() => {
          this.modal = false
        }, 500)
      }, 3000)
    },
    /* 是否通过 0否 1是 */
    pass(type) {
      if (type === 0) {
        this.$Message.info('请重新扫描入库！')
        this.scanData.rfidTagItems = []
        this.scanData.materialItems = []
        ReScan({
          reScanType: 0,
          storageType: sessionStorage.getItem('plcCode'),
          storageDoor: sessionStorage.getItem('door')
        })
      } else if (type === 1) {
        // 入库
        PlcStorageIn({
          storageDoor: sessionStorage.getItem('door'),
          plcStationCode: sessionStorage.getItem('plcCode'),
          rfidList: this.scanData.rfidTagItems.map(item => item.rfidCode),
          remark: this.remark
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info('入库成功！')
            logOut()
            // this.$store.commit('setHasGetInfo', false)
            // this.$store.commit('setToken', '')
            // setTimeout(() => {
            //   this.$router.push({
            //     name: 'Home',
            //     query: {
            //       plcCode: sessionStorage.getItem('plcCode'),
            //       door: sessionStorage.getItem('door')
            //     }
            //   })
            // }, 500)
          }
        })
      }
    },
    getList() {
      /* 获取已贴标数据 */
      GetHasTagMaterialList().then(res => {
        if (res.code === 0) {
          this.data = res.result
        }
      })
    },
    getScanList () {
      GetScanRfidStocInOut({
        storagePlcCode: sessionStorage.getItem('plcCode'),
        stockInOutScanType: 0
      }).then(scanRes => {
        if (scanRes.code === 0) {
          this.reading = false
          this.scanData = scanRes.result
          /* 临时删除的数据不可再添加到出入库列表中 */
          this.tempDelData.forEach(temp => {
            for (const index in this.scanData.rfidTagItems) {
              if (temp.materialCode === this.scanData.rfidTagItems[index].materialCode) {
                this.scanData.rfidTagItems.splice(index, 1)
              }
            }
            for (const index in this.scanData.materialItems) {
              if (temp.materialCode === this.scanData.materialItems[index].materialCode) {
                this.scanData.materialItems.splice(index, 1)
              }
            }
          })
          this.data.forEach(item => {
            this.scanData.rfidTagItems.forEach(scan => {
              if (item.rfidCode === scan.rfidCode) {
                item.checked = true
              }
            })
          })
        }
      })
    }
  },
  mounted() {
    this.tempDelData = []
    this.getList()
    this.getScanList()
    this.addTimer = setInterval(() => {
      this.percent += 1
      if (this.percent === 100) {
        clearInterval(this.addTimer)
        clearTimeout(this.overTimer)
        this.modal = false
      }
    }, 100)
    this.overTimer = setTimeout(() => {
      clearInterval(this.addTimer)
      this.percent = 100
      setTimeout(() => {
        this.modal = false
      }, 500)
    }, 3000)
  },
  destroyed() {
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    //background: rgba(2, 125, 180, 1);
    background-image: linear-gradient(270deg,
        #2c3034 0%,
        #50575e 49%,
        #2c3034 100%);
    .content {
      margin: 10px;
      height: calc(100% - 121.6px);
      overflow: hidden;
      box-sizing: border-box;
      //background: rgba(1, 84, 120, 1);
      border-radius: 10px;
      .reading {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        font-weight: bold;
        color: #00FFFF;
      }
      .title {
        padding-bottom: 10px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        color: #2dc57c;
      }
      .main {
        height: calc(100% - 113.6px);
        display: flex;
        flex-direction: column;
        .list-wrap {
          flex: 2;
          overflow: hidden;
          padding: 0 10px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .list {
            position: relative;
            //padding: 0 10px;
            flex: 1;
            height: 100%;
            overflow: hidden;
            //background: rgba(2, 125, 180, 0.486274509803922);
            background: #2c3034;
            border-radius: 4px;
            border: solid 1px #3879e7;
            .sub-title {
              position: relative;
              padding: 5px 0;
              font-size: 24px;
              color: #0077ff;
              font-weight: bold;
              .remark {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 16px;
                font-weight: normal;
                color: #0077ff;
              }
            }
            .row {
              padding: 5px 0;
              display: flex;
              justify-content: space-between;
              align-items: center;
              //background: rgba(2, 167, 240, 1);
              border-top: 1px solid #2655ad;
              //border-radius: 5px;
              &:last-child {
                border-bottom: 1px solid #2655ad;
              }
              .col {
                padding: 0 5px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                text-align: left;
                color: #ffffff;
              }
            }
            .total {
              padding: 5px 10px;
              //position: absolute;
              left: 0;
              bottom: 0;
              text-align: left;
              font-size: 20px;
              font-weight: bold;
              color: #F59A23;
              .top {
                font-size: 24px;
              }
              .label {
                margin-left: 40px  ;
                display: inline-block;
                width: 100px;
              }
            }
          }
        }
        .bottom {
          margin-top: 20px;
          flex: 1;
          .row {
            border: none !important;
          }
          .col {
            padding: 0 20px !important;
          }
        }
      }
      .footer {
        padding: 10px 0;
        padding-bottom: 0;
        /deep/ .ivu-btn-large {
          border-radius: 20px;
          font-weight: bold;
          width: 150px;
        }
      }
    }
  }
  /deep/.ivu-modal-content {
    background: #2c3034;
  }
  /deep/.ivu-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  /deep/.remark-content {
    padding: 16px;
    width: 100%;
    .title {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: #FFFFFF;
      padding-bottom: 10px;
    }
    .btn {
      text-align: center;
      padding-top: 10px;
    }
  }
  /deep/ .ivu-modal-header {
    border-bottom: none;
  }
  /deep/ .ivu-modal-footer {
    border-top: none;
  }
  .scan-title {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
  }
  .scan-btn {
    text-align: center;
  }
  .scan-content {
    padding: 10px 16px;
    width: 100%;
    max-height: 40vh;
    overflow: auto;
    background-color: #3D3D3D;
    color: #FFFFFF;
    .item {
      margin-bottom: 5px;
      border-bottom: 1px solid #FFFFFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:last-child {
        margin-bottom: 0;
        border-bottom: none;
      }
      .left {
        flex: 1;
        overflow: hidden;
      }
      .right {
        width: 60px;
        /deep/ .ivu-btn-primary {
          background-color: rgb(204, 228, 255);
        }
      }
      .row {
        margin-bottom: 5px;
        word-break: break-all;
      }
    }
  }
</style>
