<template>
  <!-- 工票报工页面 -->
  <div class="entryWrap" id="entry">
    <div class="divborder newSearchDiv Fristbg" style="margin:0px;">
      <!-- 工位信息 -->
      <div class="filter stationInfor">
        <label>{{ $t("950237") }}：</label>
        <Cascader
          class="searchSelect"
          trigger="click"
          :clearable="true"
          :data="datalevel"
          :value="leveldata"
          @on-change="handlelevelchange"
          change-on-select
          style="width: 200px"
        ></Cascader>
      </div>
      <!-- 人员信息 -->
      <div class="filter">
        <label>{{ $t("950238") }}：</label>
        <Select
          clearable
          filterable
          label-in-value
          class="searchSelect"
          v-model="personnelinfor"
        >
          <Option v-for="item in personnelList" :value="item.id" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </div>
      <!-- 全屏按钮 -->
      <div class="searchBtn fullScreen">
        <div class="expand" id="full" @click="handleFullScreen">
          <Icon type="md-expand" size="50" />
        </div>
      </div>
    </div>

    <div class="Secondbg">
      <Input
        class="searchInput Input"
        type="text"
        size="large"
        placeholder="请刷二维码"
        style="width: 85%"
      />
      <Button type="primary" size="small" class="confirmSave">{{ $t("900306") }}</Button>
    </div>
    <div class="Thirdbg">
      <div class="one_div_type">
        <p><span>工单</span>：<span class="ordernum"></span></p>
        <p><span>数量</span>：<span class="number"></span></p>
        <p><span>已报工数量</span>：<span class="reportnum"></span></p>
      </div>
      <div class="one_div_type">
        <p><span>产品编号</span>：<span class="productcode"></span></p>
        <p><span>工位</span>：<span class="section"></span></p>
        <p><span>人员</span>：<span class="username"></span></p>
      </div>
      <div class="one_div_type">
        <p><span>产品名称</span>：<span class="productname"></span></p>
        <p><span>计划开始时间</span>：<span class="starttime"></span></p>
      </div>
    </div>
    <div class="Fourthbg">
      <div class="filter layout">
        <!--  -->
        <div class="layoutChild">
          <label>{{ $t("950233") }}：</label>
          <InputNumber
            style="width:200px"
            v-model="standardProduct"
            size="large"
            type="text"
            :min="0"
          />
        </div>
        <div class="layoutChild">
          <label>{{ $t("950234") }}：</label>
          <InputNumber
            style="width:200px"
            v-model="industrialWaste"
            size="large"
            type="text"
            :min="0"
          />
        </div>
        <div class="layoutChild">
          <label>{{ $t("950235") }}：</label>
          <InputNumber
            style="width:200px"
            v-model="materialWaste"
            size="large"
            type="text"
            :min="0"
          />
        </div>
        <div class="layoutChild">
          <label>{{ $t("950475") }}: </label>
          <InputNumber
            style="width:200px"
            v-model="sampleQuantity"
            size="large"
            type="text"
            :min="0"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      stationinfor: "", // 工位信息
      personnelinfor: "", // 人员信息
      personnelList: [],
      datalevel: [], // 工位数据
      leveldata: [],
      standardProduct: 0, // 合格品数量
      industrialWaste: 0, // 工废数量
      materialWaste: 0, // 料废数量
      sampleQuantity: 0 // 试料数量
    };
  },
  created() {
    this.GetUsers();
    this.initlevel();
  },
  methods: {
    // 工位信息

    // 获取人员信息
    GetUsers() {
      axios
        .request({
          url: "/config/user/GetUsers",
          method: "get"
        })
        .then(res => {
          this.personnelList = [];
          if (res.data.ret === 1) {
            this.personnelList = res.data.data;
          }
        });
    },
    initlevel() {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          methods: "get"
        })
        .then(res => {
          const arr = [];
          if (
            res.data.ret === 1 &&
            res.data.data != null &&
            res.data.data != undefined &&
            res.data.data.length
          ) {
            this.datalevel = res.data.data;
            this.leveldata = arr;
          }
        });
    },
    handlelevelchange(value) {
      // console.log(value);
      this.leveldata = value;
    },
    // 监听全屏事件
    handleFullScreen() {
      let element = document.getElementById("entry");
      // 判断是否已经是全屏
      // 如果是全屏, 退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 否则, 进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      // 改变当前全屏状态
      if (this.fullscreen) {
        this.isNeedFullScreen = false;
      }
      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>

<style lang="less" scoped>
.Fristbg {
  width: 100%;
  height: 70px;
  line-height: 45px;
  background-color: #ddd;
  display: flex;
  justify-content: space-between;
  min-width: 800px;
}
.stationInfor {
  margin-left: 60px;
}
.Secondbg {
  width: 100%;
  height: 80px;
  background-color: #ddd;
  margin-top: 30px;
  min-width: 800px;
  display: flex;
  justify-content: space-between;
}
.Input {
  margin-top: 25px;
  margin-left: 100px;
  height: 100px;
}
.confirmSave {
  margin-right: 50px;
  margin-top: 25px;
  margin-bottom: 20px;
}
.Thirdbg {
  width: 100%;
  height: 200px;
  background-color: #ddd;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  min-width: 800px;
}
.Fourthbg {
  width: 100%;
  height: 260px;
  background-color: #ddd;
  margin-top: 30px;
}
.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.layoutChild {
  margin-bottom: 10px;
  margin-top: 15px;
  > label {
    font-size: 16px;
    font-weight: bold;
  }
}
.one_div_type {
  float: left;
  width: 33%;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  margin-left: 100px;
}
.entryWrap {
  position: relative;
  background-color: #f5f7f9;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>