<template>
    <div @click.stop="closeModal" class="n_container">
        <div class="n_header">
            <div class="n_header_h1">
                <h1>晟华生产数</h1>
            </div>
        </div>
        <div class="n_body_container">
            <div class="n_body_container_wraper">
                <div class="box1">
                    <div class="status_wrap">
                        <div class="status_item">
                            <div class="status_tip green"></div>
                            <div class="status_name">运行中</div>
                        </div>
                        <div class="status_item">
                            <div class="status_tip yellow"></div>
                            <div class="status_name">待机</div>
                        </div>
                        <div class="status_item">
                            <div class="status_tip gray"></div>
                            <div class="status_name">关机</div>
                        </div>
                        <div class="status_item">
                            <div class="status_tip red"></div>
                            <div class="status_name">故障</div>
                        </div>
                    </div>
                    <div class="machine_wrap yao_wrap">
                      <div class="yaosb">
                        <img src="../../../images/workshop/yao.png" alt="">
                      </div>
                      <div class="sh_machine yjbyx_1">
                        <img src="../../../images/workshop/yjbyx.png" alt="">
                      </div>
                      <div class="sh_machine yjbyx_2">
                        <img src="../../../images/workshop/yjbyx.png" alt="">
                      </div>
                      <div class="machine_wrap mtp_wrap_3 yao_left">
                        <div v-for="(e,i) in [1,2,3,4]" :key="i" class="mtp">
                          <img src="../../../images/workshop/mtp.png" alt="">
                        </div>
                      </div>
                      <div class="machine_wrap mtp_wrap_3 yao_right">
                        <div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" :key="i" class="mtp">
                          <img src="../../../images/workshop/mtp.png" alt="">
                        </div>
                      </div>
                      <div v-if="FinishedProductShelfList.length > 0" class="machine_wrap mtp_wrap_3 mtp_wrap_4">
                        <!-- <div v-for="(e,i) in FinishedProductShelfList.slice(0, 26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)" @mouseover="mouseoverHandle(e)" @mouseout="mouseoutHandle(e)"> -->
                        <div v-for="(e,i) in FinishedProductShelfList.slice(0, 26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)">
                          <!-- <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt=""> -->
                          <!-- <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""> -->
                          <div v-show="String(e.point_status) === '0'" class="img1" :class="{yellow:(pkId && e.bglight)}"></div>
                          <div v-show="String(e.point_status) === '1'" class="img2" :class="{yellow:(pkId && e.bglight)}"></div>
                          <div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
                            <div class="foldline foldline_left" :class="foldlineStyle" style="display: block;"></div>
                            <div class="popup_bg">
                              <div class="popup_block">
                                <div class="pop_header">
                                  <div class="pop_name">{{pkObj.point_code + '/' + pkObj.point_name}}</div>
                                  <div class="pop_status">
                                    <!-- <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
                                    <div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div> -->
                                  </div>
                                </div>
                                <div class="pop_content">
                                  <div class="pop_item">
                                    <div class="pop_label">状态</div>
                                    <div class="pop_val">{{pkObj.point_status_name}}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">载具</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">BOM号</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">物料编码</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.material_code }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">数量</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.qty }}</div>
                                    <div class="pop_unit">块</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">机台</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.device_name }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">碾次</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">入库时间</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
                          </div>
                        </div>
                      </div>
                      <div v-if="FinishedProductShelfList.length > 0" class="machine_wrap mtp_wrap_3 mtp_wrap_4 mtp_wrap_5">
                        <!-- <div v-for="(e,i) in FinishedProductShelfList.slice(26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)" @mouseover="mouseoverHandle(e)" @mouseout="mouseoutHandle(e)"> -->
                        <div v-for="(e,i) in FinishedProductShelfList.slice(26)" :key="i" class="mtp" @click.stop="getInfo1(e, i)">
                          <!-- <img v-show="String(e.point_status) === '0'" src="../../../images/workshop/ktp_gray.png" alt=""> -->
                          <!-- <img v-show="String(e.point_status) === '1'" src="../../../images/workshop/mtp.png" alt=""> -->
                          <div v-show="String(e.point_status) === '0'" class="img1" :class="{yellow:(pkId && e.bglight)}"></div>
                          <div v-show="String(e.point_status) === '1'" class="img2" :class="{yellow:(pkId && e.bglight)}"></div>
                          <div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
                            <div class="foldline foldline_left" :class="foldlineStyle" style="display: block;"></div>
                            <div class="popup_bg">
                              <div class="popup_block">
                                <div class="pop_header">
                                  <div class="pop_name">{{pkObj.point_code + '/' + pkObj.point_name}}</div>
                                  <div class="pop_status">
                                    <!-- <div class="pop_status_dot" :class="{green:pkObj.status ==='2',red:pkObj.status ==='5',yellow:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
                                    <div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div> -->
                                  </div>
                                </div>
                                <div class="pop_content">
                                  <div class="pop_item">
                                    <div class="pop_label">状态</div>
                                    <div class="pop_val">{{pkObj.point_status_name}}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">载具</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">BOM号</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">物料编码</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.material_code }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">数量</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.qty }}</div>
                                    <div class="pop_unit">块</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">机台</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.device_name }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">碾次</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
                                  </div>
                                  <div class="pop_item">
                                    <div class="pop_label">入库时间</div>
                                    <div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tooltip_wrap left_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
          <div class="tooltip_arrow pointer" @click.stop="expandTooltip" v-text="expand ? '&gt;&gt;' : '&lt;&lt;'"></div>
          <div class="tooltip_pages" :style="expand ? 'width: 300px' : 'width: 0'">
            <router-link to="/setup" class="tooltip_page">配置</router-link>
            <router-link to="/homepageone" class="tooltip_page">1</router-link>
            <router-link to="/hnlkone" class="tooltip_page">2</router-link>
            <router-link to="/takeshapeone" class="tooltip_page">3</router-link>
            <div class="tooltip_page current_page pointer">4</div>
            <router-link to="/sortpackone" class="tooltip_page">5</router-link>
            <router-link to="/pdone" class="tooltip_page">6</router-link>
          </div>
        </div>
    </div>
</template>

<script>
import { firingAndDryingPopover } from '@js/getData0'
export default {
  name: 'one',
  data () {
    return {
      expand: false,
      top: '',
      left: '',
      youModel: '',
      foldlineStyle: '',
      pkId: '',
      pkObj: {
        aaa: 'aaa',
        num: '3'
      },
      FinishedProductShelfList: []
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    expandTooltip () {
      this.expand = !this.expand
    },
    mouseoverHandle (e) {
      this.FinishedProductShelfList.map(el => {
        if (e.material_code !== '-' && e.material_code === el.material_code) {
          el.bglight = true
        } else {
          el.bglight = false
        }
      })
    },
    mouseoutHandle (e) {
      this.FinishedProductShelfList.map(el => {
        el.bglight = false
      })
    },
    getInfo1 (e, i) {
      this.pkId = this.pkId ? '' : e.point_code
      // this.pkId = e.point_code
      this.pkObj = e
      console.log(i)
      if (i > 13 && i < 26) {
        console.log(i, 666)
        this.youModel = 'popup_block_wraper2'
        this.foldlineStyle = 'foldline_left2'
      } else {
        this.youModel = ''
        this.foldlineStyle = ''
      }
    },
    closeModal () {
      this.pkId = ''
      this.pkObj = {}
    },
    async initData () {
      let res = await firingAndDryingPopover()
      this.FinishedProductShelfList = res.result.FinishedProductShelfList
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
    _wh(100%, 100%)
.n_header
    _wh(100%, 8%)
    _bis('../../../images/bg_header.jpg')
.n_header_h1
    _wh(100%, 100%)
    _fj(row, flex-end)
    _bis('../../../images/top_left.png',auto,,right)
    h1
        _font(32px, 1, #fff,,right)
        padding-bottom 2%
        letter-spacing 6px
        font-family "阿里妈妈数黑体" !important
        margin-right -3px
.n_body_container
    _wh(100%, 92%)
    padding 40px 0 20px 20px
    _bis('../../../images/bg_content.jpg')
.n_body_container_wraper
    _wh(100%, 100%)
    _fj()
.status_wrap
    position absolute
    top 0px
    right 40px
    z-index 1
    _fj(row)
.status_item
    _fj(row)
    +.status_item
        margin-left 20px
.status_tip
    _wh(15px, 15px)
    border-radius 50%
    margin-right 10px
    box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.status_name
    _font(16px, 1, #fff)
.green
  background-color $green2 !important
.yellow
  background-color $yellow !important
.gray
  background-color $gray1 !important
.red
  background-color $orange !important
.box1
  position relative
  _wh(100%, 100%)
.machine_wrap
  position absolute
  z-index 2
.sh_machine
  position absolute
  top 0
  left 0
  z-index 3
  width 100%
  img
    position absolute
    top 0
    left 0
    z-index 4
    _wh(100%, auto)
.mtp_wrap_1
  width 2.5%
  top 39%
  left 1%
  .mtp
    position relative
    width 100%
    // img
    //   _wh(100%, auto)
.img1
  display inline-block
  _wh(60px, 43px)
  background center center / 100% 100% url(../../../images/workshop/ktp_gray.png) no-repeat
  color #f00
.img2
  display inline-block
  _wh(60px, 43px)
  background center center / 100% 100% url(../../../images/workshop/mtp.png) no-repeat
  color #f00
.gtssj_wrap_1
  width 2.5%
  top 39%
  left 7.6%
  .gtssj
    width 100%
    img
      _wh(100%, auto)
.cpj_wrap_1
  width: 4%;
  top: 42%;
  left: 6.3%;
  .cpj
    width 100%
    img
      _wh(100%, auto)
.cdz_wrap_1
  width: 3%;
  top: 9%;
  left: 3.5%;
  .cdz
    width 100%
    img
      _wh(100%, auto)
.cdz_wrap_2
  top: 16%;
.yao_wrap
  width 90%
  top 7%
  left auto
  right 6%
  background-color #676767
  .yaosb
    width 100%
    img
      _wh(100%, auto)
  .yjbyx_1
    width: 4%;
    top: -2%;
    left: 2%;
    img
      _wh(100%, auto)
  .yjbyx_2
    width: 4%;
    top: -2%;
    left: auto;
    right: 2%;
    img
      _wh(100%, auto)
.mtp_wrap_3
  width: 3.5%;
  height: 10%;
  // top: 85%;
  top: 125%;
  left: -0.8%;
  transform rotate(-90deg)
  z-index 4
  .mtp
    position relative
    width 100%
    margin-bottom 10%
    img
      _wh(100%, auto)
.mtp_wrap_4
  left 18.3%
  // top: 87%
  top: 127%
.mtp_wrap_5
  // top 105%
  top 145%
  z-index 0
.popup_block_wraper
  position absolute
  // top: 706%;
  // left: -27%;
  top: 650%;
  left: -557%;
  z-index 1
  transform rotate(90deg)
.popup_block_wraper2
  position absolute
  top: -1080%;
  left: -557%;
  z-index 10
  transform rotate(90deg)
.foldline_left2
  left 530px
  transform rotateY(0)
.yao_left
  margin-left 20px
  margin-top -160px
.yao_right
  margin-right 300px
  position absolute
  top 72%
  left 49.6%
</style>
