<template>
  <div class="container-wrap">
    <div class="container">
      <div class="top">
        <div class="top-left">
          <div class="top-left-top">
            <div class="card">
              <div class="content" style="height: 100%;">
                <div class="over-view">
                  <div class="over-view-item" @click="toHandle('schedule')">
                    <div class="item-icon">
                      <img :src="dspPic" alt="">
                    </div>
                    <div class="item-info">
                      <p class="item-info-title">待审批</p>
                      <p>
                        <span class="num">{{ zlData.waitCheck }}</span>
<!--                        <span>同比</span>-->
<!--                        <Icon :type="zlData.isDown? 'md-arrow-down' : 'md-arrow-up'" :color="zlData.isDown? '#ff635f' : '#5cd9b4'"/>-->
<!--                        <span>0%</span>-->
                      </p>
                    </div>
                  </div>
                  <!-- <div class="over-view-item" @click="toHandle('apply_manage')">
                    <div class="item-icon">
                      <img :src="dckPic" alt="">
                    </div>
                    <div class="item-info">
                      <p class="item-info-title">待出库</p>
                      <p>
                        <span class="num">{{ zlData.waitOutStock }}</span>
                       <span>同比</span>
                       <Icon :type="zlData.isDown? 'md-arrow-down' : 'md-arrow-up'" :color="zlData.isDown? '#ff635f' : '#5cd9b4'"/>
                       <span>0%</span>
                      </p>
                    </div>
                  </div> -->
                  <div class="over-view-item" @click="toHandle('store_warning')">
                    <div class="item-icon">
                      <img :src="kcyjPic" alt="">
                    </div>
                    <div class="item-info">
                      <p class="item-info-title">库存预警</p>
                      <p>
                        <span class="num">{{ zlData.stockwarning }}</span>
<!--                        <span>同比</span>-->
<!--                        <Icon :type="zlData.isDown? 'md-arrow-down' : 'md-arrow-up'" :color="zlData.isDown? '#ff635f' : '#5cd9b4'"/>-->
<!--                        <span>0%</span>-->
                      </p>
                    </div>
                  </div>
                  <div class="over-view-item" @click="toHandle('material_stranded')">
                    <div class="item-icon">
                      <img :src="zlwlPic" alt="">
                    </div>
                    <div class="item-info">
                      <p class="item-info-title">滞留物料</p>
                      <p>
                        <span class="num">{{ zlData.delayMaterial }}</span>
<!--                        <span>同比</span>-->
<!--                        <Icon :type="zlData.isDown? 'md-arrow-down' : 'md-arrow-up'" :color="zlData.isDown? '#ff635f' : '#5cd9b4'"/>-->
<!--                        <span>0%</span>-->
                      </p>
                    </div>
<!--                    <div class="label"></div>-->
<!--                    <div class="value">{{ zlData.delayMaterial }}</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="top-left-bottom">
            <div class="top-left-bottom-left">
              <!-- 最新申购 -->
              <div class="card">
                <div class="title" @click="toHandle('material_apply')">
                  <span>最新申购（实时滚动）</span>
                </div>
                <div class="content">
                  <div class="row">
                    <div class="col-5 th">物料名称</div>
                    <div class="col-3 th">库存数量</div>
                    <div class="col-3 th">申购数量</div>
                    <div class="col-3 th">申购人</div>
                  </div>
                  <div class="row-wrap">
                    <div class="row"  v-for="(item, index) in zxsgData" :key="index">
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.stockQty }}</div>
                      <div class="col-3">{{ item.applyPurQty }}</div>
                      <div class="col-3">{{ item.userName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="top-left-bottom-right">
              <!-- 实时出库 -->
              <div class="card">
                <div class="title">
                  <span>
                    实时出库监控（北京时间{{ $dayjs(nowTime).format('hh:mm') }}）
                  </span>
                  <div style="display: flex">
                    <span class="normal">
                      <span class="idot"></span>
                      正常出库
                    </span>
                    <span class="err" @click="toErrorOut">
                      <span class="idot"></span>
                      异常出库{{ abnormalNum || 0 }}条
                    </span>
                  </div>
                </div>
                <div class="content">
                  <div class="row">
                    <div class="col-1"></div>
                    <div class="col-3 th">时间</div>
                    <div class="col-5 th">物料名称</div>
                    <div class="col-3 th">数量</div>
                    <div class="col-3 th">操作员</div>
                  </div>
                  <div class="row-wrap">
                    <div class="row"
                         :class="item.abnormalOut? 'err' : ''"
                         v-for="(item, index) in sskcData" :key="index">
                      <div class="col-1 center"><Icon type="md-warning" v-if="item.abnormalOut" /></div>
                      <div class="col-3">{{ item.stockOutTime }}</div>
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.quantity }}</div>
                      <div class="col-3">{{ item.userName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="top-left-bottom">
            <div class="top-left-bottom-left">
              <!-- 核心品类出库排名（24小时/30日切换） -->
              <div class="card">
                <div class="title" style="justify-content: space-between;">
                  <span @click="toHandle('store_out_record')" style="margin-right: 10px;">核心品类出库排名</span>
<!--                  <i-switch size="large" true-color="#2db7f5" false-color="#19be6b">-->
<!--                    <span slot="open">30日</span>-->
<!--                    <span slot="close">24h</span>-->
<!--                  </i-switch>-->
                  <RadioGroup v-model="hxmlModel1" @on-change="hxmlToggle" type="button" button-style="solid" size="small">
                    <Radio :label="0">24h</Radio>
                    <Radio :label="1">30日</Radio>
                  </RadioGroup>
                </div>
                <div class="content">
                  <div class="row">
                    <div class="col-5 th">物料名称</div>
                    <div class="col-3 th">库存数量</div>
                    <div class="col-3 th">出库数量</div>
                  </div>
                  <div class="row-wrap">
                    <div class="row" v-for="(item, index) in hxml1Data" :key="index">
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.stockQty }}</div>
                      <div class="col-3">{{ item.consumeQty }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="top-left-bottom-right">
              <!-- 库存滞留排名（24小时/30日切换） -->
              <div class="card">
                <div class="title" style="justify-content: space-between;">
                  <span style="margin-right: 10px;">库存滞留排名</span>
<!--                  <i-switch size="large" true-color="#2db7f5" false-color="#19be6b">-->
<!--                    <span slot="open">30日</span>-->
<!--                    <span slot="close">24h</span>-->
<!--                  </i-switch>-->
                  <RadioGroup v-model="kczlModel" @on-change="kczlToggle" type="button" button-style="solid" size="small">
                    <Radio :label="0">24h</Radio>
                    <Radio :label="1">30日</Radio>
                  </RadioGroup>
                </div>
                <div class="content">
                  <div class="row">
                    <div class="col-5 th">物料名称</div>
                    <div class="col-3 th">数量</div>
                    <div class="col-3 th">滞留时间</div>
                    <div class="col-3 th">周转率</div>
                  </div>
                  <div class="row-wrap">
                    <div class="row" v-for="(item, index) in kczlData" :key="index">
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.quantity }}</div>
                      <div class="col-3">{{ item.delayDay }}</div>
                      <div class="col-3">{{ item.turnoverRate }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="top-right" >
            <!-- 实时库存盘点和ROI监控 -->
              <div class="card">
                <div class="title" @click="toHandle('use_today')">
                  <span>实时库存盘点和ROI监控</span>
                  <span class="err">
                    <span style="color: #a5c4ff;">当前总价值：{{ kcjkData.totalValue }}万元 </span>
                  </span>
                </div>
                <div class="content" style="overflow: auto">
                  <div class="row">
                    <div class="col-5 th">物料名称</div>
                    <div class="col-3 th">库存数量</div>
                    <div class="col-3 th">周转率</div>
<!--                    <div class="col-3 th">回报率</div>-->
                  </div>
                  <div class="row" v-for="(item, index) in kcjkData.stockMaterials" :key="index">
                    <div class="col-5">{{ item.materialName }}</div>
                    <div class="col-3">{{ item.quantity }}</div>
                    <div class="col-3">{{ item.rate }}</div>
<!--                    <div class="col-3">{{ item.rate }}</div>-->
                  </div>
                  <div class="charts">
                    <chart-pie style="height: 300px" :value="kcjkData.pieVal" :name="kcjkData.pieName"></chart-pie>
                  </div>
                </div>
              </div>
        </div>
      </div>
      <!-- 供应链管理实时监控系统 -->
      <div class="bottom">
        <div class="card">
          <div class="title">
            <span @click="toPaySite">供应链管理实时监控系统</span>
          </div>
          <div class="content">
            <div class="row" style="height: 100%;overflow: hidden">
              <div class="col-1">
                <div class="card">
                  <div class="sub-title">
                    <Icon custom="iconfont icon-fix-full" :size="16" color="#0066ff" style="margin-right: 10px;"/>
                    <span>供应商货物贴码</span>
                  </div>
                  <div class="content">
                    <div class="row" v-for="(item, index) in cgjdData.printerItems" :key="index">
                      <div style="padding: 0 10px">{{ $dayjs(item.dateTime).format('YYYY-MM-DD') }}</div>
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-5">{{ item.supplierName }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-1">
                <div class="card">
                  <div class="sub-title">
                    <Icon custom="iconfont icon-fix-full" :size="16" color="#0066ff" style="margin-right: 10px;"/>
                    <span>供应商发货监控 </span>
                  </div>
                  <div class="content">
                    <div class="row" v-for="(item, index) in cgjdData.shipItems" :key="index">
                      <div style="padding: 0 10px">{{ $dayjs(item.dateTime).format('YYYY-MM-DD') }}</div>
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.arriveInfo }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-1">
                <div class="card">
                  <div class="sub-title">
                    <Icon custom="iconfont icon-fix-full" :size="16" color="#0066ff" style="margin-right: 10px;"/>
                    <span>到货换贴RFID监控 </span>
                  </div>
                  <div class="content">
                    <div class="row" v-for="(item, index) in cgjdData.labelItems" :key="index">
                      <div style="padding: 0 10px">{{ $dayjs(item.dateTime).format('YYYY-MM-DD') }}</div>
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.userName }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-1">
                <div class="card">
                  <div class="sub-title">
                    <Icon custom="iconfont icon-fix-full" :size="16" color="#0066ff" style="margin-right: 10px;"/>
                    <span>货物RFID实时入库监控 </span>
                  </div>
                  <div class="content">
                    <div class="row" v-for="(item, index) in cgjdData.inStockItems" :key="index">
                      <div style="padding: 0 10px">{{ $dayjs(item.dateTime).format('HH:mm:ss') }}</div>
                      <div class="col-5">{{ item.materialName }}</div>
                      <div class="col-3">{{ item.userName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as signalR from '@microsoft/signalr'
import { MessagePackHubProtocol } from '@microsoft/signalr-protocol-msgpack'
import {
  GetRealTimeStockOut,
  GetLatestApplyPurchase,
  GetCoreMateriaConsume,
  GetPurchaseProgress,
  GetTotalView,
  GetStockMonitor,
  GetStockDetailDelay
} from '@/api/storageHome'
import ChartPie from './chart-pie'
import dspPic from '@/assets/images/dsp.png'
import dckPic from '@/assets/images/dck.png'
import kcyjPic from '@/assets/images/kcyj.png'
import zlwlPic from '@/assets/images/zlwl.png'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
  name: 'board',
  data () {
    return {
      connection: null,
      hxmlModel1: 0,
      kczlModel: 0,
      nowTime: '',
      nowTimer: null,
      lxTimer: null,
      dspPic,
      dckPic,
      kcyjPic,
      zlwlPic,
      abnormalNum: 0,
      sskcData: [],
      zlData: [],
      zxsgData: [],
      cgjdData: [],
      hxml1Data: [],
      kczlData: [],
      kcjkData: [],
      pieData: [
        { value: 335, name: '涤纶布' },
        { value: 310, name: '弹力布' },
        { value: 234, name: '针织布' },
        { value: 135, name: '篷布' }
      ]
    }
  },
  components: {
    ChartPie
  },
  methods: {
    toErrorOut () {
      this.$router.push({
        name: 'error_out'
      })
    },
    toPaySite () {
      this.$router.push({
        name: 'pay_transit'
      })
    },
    // SignalR长连接
    SRConnection () {
      console.log('???????????????')
      console.log(baseUrl)
      let _this = this
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl(`${baseUrl}/plcHub`)
        .withAutomaticReconnect()
        .withHubProtocol(new MessagePackHubProtocol())
        .build()
      // // 监听扫码
      // this.connection.on('inStorageDataCheck', res => {
      //   console.log('入库----------------')
      //   console.log(res)
      //   this.connection.invoke('ReturnSureMes', res.MesId)
      //   this.getList()
      // })
      this.connection.start().then(() => {
        console.log('连接成功--')
      }).catch(err => {
        console.log('err--')
        console.log(err)
        re_start()
      })
      // 监听网络断开
      this.connection.onclose(() => {
        this.connection = null
        console.log('网络已断开！')
        // this.$Message.error('网络连接断开')
        // this.$router.go(0)
      })
      // 异常重启
      async function re_start () {
        try {
          await _this.connection.start()
        } catch (err) {
          setTimeout(() => re_start(), 5000)
        }
      }
    },
    /* 核心品类切换 */
    kczlToggle () {
      this.getStockDetailDelay()
    },
    /* 核心品类切换 */
    hxmlToggle () {
      this.getCoreMateriaConsume()
    },
    /* 获取库存滞留 */
    getStockDetailDelay () {
      GetStockDetailDelay({
        isHiddenSpin: true,
        showNum: 10,
        stockDelayType: this.kczlModel
      }).then(res => {
        if (res.code === 0) {
          this.kczlData = res.result
        }
      })
    },
    /* 获取核心品类 */
    getCoreMateriaConsume () {
      GetCoreMateriaConsume({
        isHiddenSpin: true,
        showNum: 10,
        consumeType: this.hxmlModel1
      }).then(res => {
        if (res.code === 0) {
          this.hxml1Data = res.result.consumeItems
        }
      })
    },
    /* 通用页面跳转 */
    toHandle (name) {
      this.$router.push({
        name
      })
    },
    getList () {
      GetRealTimeStockOut({
        isHiddenSpin: true,
        showNum: 10
      }).then(res => {
        if (res.code === 0) {
          this.sskcData = res.result.stockOutItems
          this.abnormalNum = res.result.abnormalNum
        }
      })
      GetTotalView({
        isHiddenSpin: true
      }).then(res => {
        if (res.code === 0) {
          this.zlData = res.result
        }
      })
      GetLatestApplyPurchase({
        isHiddenSpin: true,
        showNum: 10
      }).then(res => {
        if (res.code === 0) {
          this.zxsgData = res.result
        }
      })
      GetStockMonitor({
        isHiddenSpin: true,
        showNum: 10
      }).then(res => {
        if (res.code === 0) {
          this.kcjkData = res.result
        }
      })
      GetPurchaseProgress({
        isHiddenSpin: true,
        showNum: 10
      }).then(res => {
        if (res.code === 0) {
          this.cgjdData = res.result
        }
      })
      this.getCoreMateriaConsume()
      this.getStockDetailDelay()
    },
    getTime () {
      this.nowTimer = setInterval(() => {
        this.nowTime = new Date()
      }, 1000)
    }
  },
  mounted () {
    this.getList()
    // this.SRConnection()
    /* 10秒轮询一次 */
    this.lxTimer = setInterval(() => {
      this.getList()
    }, 30000)
    this.getTime()
  },
  destroyed () {
    clearInterval(this.nowTimer)
    clearInterval(this.lxTimer)
    // this.connection.stop()
  } 
}
</script>

<style lang="less" scoped>
  .container-wrap {
    height: 100%;
    min-width: 780px;
    overflow: auto;
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      div {
        flex-shrink: 0;
        flex-grow: 0;
      }
      .card {
        position: relative;
        padding: 0 10px;
        height: 100%;
        background-color: #2c3034;
        color: #d7d7d7;
        border-radius: 4px;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 7px;
          padding-left: 12px;
          position: relative;
          height: 41px;
          line-height: 31px;
          font-size: 18px;
          font-weight: bold;
          border-bottom: 1px solid #444;
          cursor: pointer;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 4px;
            height: 17px;
            transform: translateY(-50%);
            background-color: #3F92F9;
          }
          .err, .normal {
            display: flex;
            align-items: center;
            font-size: 14px;
          }
          .err {
            color: #ff635f;
            .idot {
              background: #ff635f;
            }
          }
          .normal {
            margin-right: 20px;
            color: #d7d7d7;
          }
          .idot {
            margin-right: 5px;
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #FFFFFF;
          }
        }
        .sub-title {
          text-align: left;
          font-size: 14px;
          font-weight: bold;
          border-bottom: 1px solid #dcdee2;
        }
        .content {
          padding: 5px 0;
          height: ~"calc(100% - 41px)";
          overflow: hidden;
          font-size: 14px;
          .row-wrap  {
            height: calc(100% - 24px) ;
            overflow: auto
          }
          .row {
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            overflow: auto;
            &:last-child {
              margin-bottom: 0;
            }
            .col-1 {
              flex: 1;
            }
            .col-3 {
              flex: 3;
            }
            .col-5 {
              flex: 5;
            }
            .col-1, .col-3, .col-5 {
              padding: 0 5px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .th {
              padding: 0 5px;
              color: #a5c4ff;
              font-size: 16px;
            }
            .center {
              display: flex;
              justify-content: center;
              align-items: center;
            }
            &.err {
              color: #ec808d;
            }
          }
          .footer-wrap {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            .footer {
              display: flex;
              justify-content: space-around;
              .item {
                padding: 5px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .block {
                  margin-right: 5px;
                  width: 12px;
                  height: 12px;
                  background-color: #000000;
                  &.err {
                    background-color: #ec808d;
                  }
                }
              }
            }
          }
          .over-view {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            .over-view-item {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              .item-icon {
                max-width: 51px;
                width: 30%;
                img {
                  width: 100%;
                }
              }
              .item-info {
                padding: 0 10px;
                box-sizing: border-box;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: 16px;
                color: #FFFFFF;
                p {
                  line-height: 1;
                }
                .item-info-title {
                  margin-bottom: 5px;
                  font-size: 18px;
                  color: #0077ff;
                }
                .num {
                  padding-right: 5px;
                  font-size: 30px;
                  font-weight: bold;
                  line-height: 1;
                  vertical-align: sub;
                }
              }
            }
          }
        }
      }
      .top {
        flex: 6;
        margin-bottom: 18px;
        min-height: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-left {
          flex: 2;
          margin-right: 18px;
          height: 100%;
          min-width: 700px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          .top-left-top {
            flex: 2;
            min-height: 120px;
            margin-bottom: 18px;
          }
          .top-left-bottom {
            flex-shrink:0;
            flex: 4;
            overflow: hidden;
            margin-bottom: 18px;
            display: flex;
            &:last-child {
              margin-bottom: 0;
            }
            .top-left-bottom-left {
              flex-shrink:0;
              flex: 1;
              margin-right: 18px;
              overflow: hidden;
            }
            .top-left-bottom-right {
              flex-shrink:0;
              flex: 1;
              overflow: hidden;
            }
          }
        }
        .top-right {
          flex: 1;
          height: 100%;
          min-width: 370px;
        }
      }
      .bottom {
        flex: 2;
        min-height: 160px;
        overflow: hidden;
        .col-1 {
          height: 100%;
        }
        .sub-title {
          padding: 10px 0;
          font-size: 16px;
          border-bottom: none;
          color: #4072d0;
        }
        .content {
          overflow: auto;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    //width: 0px; /*对垂直流动条有效*/
    //height: 0px; /*对水平流动条有效*/
    width: 0; /*对垂直流动条有效*/
    height: 1px;
    background-color: #FFFFFF;
  }
  /deep/ .ivu-switch-inner {
    top: 50%;
    transform: translateY(-50%);
  }
  /deep/ .ivu-radio-wrapper-checked {
    background: #0077ff;
    border-color: #0077ff;
    color: #333333;
  }
</style>
