<template>
  <div class="innerCheck">
    <div class="login" v-if="isShow == 1">
      <loginView ref="page2" :isShow="isShow" :status="screen" @fullscreenEven="fullscreenEven" @login="login" />
    </div>
    <detail  v-if="isShow == 2" @exit="exit" ref="detail" />
  </div>
</template>
<script>

import loginView from './components/login'
import detail from './components/detail'
import {mapState} from 'vuex'
import {fullScreen, eleFullScreen, checkFull, queryFormItems} from './components/config'

export default {
  name: 'InnerCheck',
  components: { loginView, detail },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
      isShow: 2,
      screen: false,
      videoDom: '',

    }
  },
  mounted() {
    window.onresize = () => {
      if (!checkFull()) {
        this.screen = false
      }
    }
    // this.setoutFull(this.screen)
  },
  computed: {
    ...mapState(['checkPerson'])
  },
  watch: {
    isShow: {
      handler(v) {
        // console.log(this.screen,'2222222222')
        // eleFullScreen(this.$refs.detail, true)
        // this.$refs.page2.exit()

      }
    }
    
  },
  methods: {
    setoutFull(screen) {
      setTimeout(() =>{
        if (screen) {
          eleFullScreen(this.$refs.Main, screen)
        }
      },100)
    },
    login(Show, screen, videoDom) {
      this.isShow = Show
      this.videoDom = videoDom
      this.screen = screen

      // if (screen) {
      //   eleFullScreen(this.$refs.Main, screen)
      // } 
      // this.screen = checkFull()
    },
    fullscreenEven(Show, screen, videoDom) {
        console.log(Show,screen,videoDom)
      if (screen == false) {
        this.screen = true
        eleFullScreen(videoDom, this.screen)
          
      } else {
        this.screen = false
        eleFullScreen(videoDom, screen)
      }
        // }
    },
    qpclick() {
      // console.log('全屏状态1',this.screen ,checkFull())
      // alert('全屏')
      if (this.screen) {
        eleFullScreen(this.$refs.Main, false)
        this.screen = false
      } else {
        eleFullScreen(this.$refs.Main, true)
        this.screen = true

      }
    },
    exit() {
      this.isShow = 1

    }
  }
}
</script>

<style lang="less" scoped>
.inner-table {
  background: #fff;
  margin-top: 16px;
  padding: 20px 18px;
}
.squery {
    // position: absolute;
    // right: 20px;
    // top: 20px;
    display: inline-block;
    background: rgb(170, 187, 200);
}
.innerCheck {
  .header {
    display: flex;
    justify-content: space-between;
  }
  .Main {
    background:#F0F2F5
  }
  .item {
    display: inline-block;
    margin-left: 10px;
  }
  // .login{
  //   height: 75vh;
  //   background-image: url('./components/imgs/bg.png');
  //   // background: violet;
  // }
  /deep/ .ant-result-title {
    font-family: PingFangSC-Medium;
    font-size: 30px;
    color: #52c41a;
  }
  /deep/ .ant-card-head-title {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #666666;
  }
  /deep/ .ant-descriptions-title {
    font-size: 20px;
    color: #1890ff;
  }
  .wrapperCol{

  }
  .blod-font {
    font-family: PingFangSC-Medium;
    font-size: 28px;
    color: #333333;
    line-height: 32px;
  }
  .thin-font {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #333333;
  }
  .show-title {
    font-family: PingFangSC-Medium;
    font-size: 20px;
    color: #1890ff;
  }
  .info {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .label {
        font-family: PingFangSC-Medium;
        font-size: 24px;
        color: #666666;
      }
      .thin-label {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #666666;
      }
    }
  }
}
.num-group {
  display: flex;
  justify-content: space-between;
  .num-item {
    position: relative;
    flex: 1;
    &::after {
      position: absolute;
      content: '';
      height: 30px;
      width: 1px;
      background: #d8d8d8;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    &:last-child {
      &::after {
        display: none;
      }
    }
    .title {
      font-size: 14px;
      color: #666666;
      text-align: center;
    }
    .num {
      font-family: Rubik-Medium;
      font-size: 18px;
      color: #333333;
      text-align: center;
      margin-top: 4px;
    }
  }
}
</style>