<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("900053") }}：</label>
      </div>
      <!-- 工艺顺序 -->
      <div class="filter">
        <label>{{ $t("950213") }}：</label>
      </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">
        <span>结果</span>：
        <span class="one_div_green" id="result">ok</span>
      </div>
      <div class="one_div_type">
        <span>合格品数</span>：
        <span class="one_div_green" id="oknum">0</span>
      </div>
      <div class="one_div_type">
        <span>不合格品数</span>：
        <span class="one_div_red" id="noknum">0</span>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        max-height="300px"
        :data="tableData1"
        :columns="tableColumns1"
        @on-current-change="handleRowChange"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
    </div>
    <div class="fourthBg"></div>
    <div class="fifthBg"></div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      total: 0, // 总条数
      page: 1, // 当前页数
      pagesize: 10, // 每一页显示条数
      datalevel: [], // 工位数据
      leveldata: [], // 下拉框选择数据
      personnelList: [], // 人员数据
      personnelinfor: "", // 人员信息
      tableData1: [],
      detailobj: {}, // 点击当前表格获取到数据
      tableColumns1: [
        {
          type: "sort",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "80px"
        },
        {
          title: this.$t("100089"), // 产品编号
          key: ""
        },
        {
          title: this.$t("950223"), // 操作时间
          key: ""
        },
        {
          title: this.$t("800195"), // 结果
          key: ""
        }
      ]
    };
  },
  created() {
    this.initlevel();
    this.GetUsers();
  },
  methods: {
    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;
    },
    // 人员信息
    GetUsers() {
      axios
        .request({
          url: "/config/user/GetUsers",
          method: "get"
        })
        .then(res => {
          this.personnelList = [];
          if (res.data.ret === 1) {
            this.personnelList = res.data.data;
          }
        });
    },
    // 表格点击事件
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    // 页码改变的回调, 返回改变后的页码
    changePage(value) {
      this.page = value;
      // this.tableData1 = this.tableSearch(this.page, this.pagesize);
    },
    // 切换每一条数据时的回调, 返回切换后的每一页条数
    handlePageSize(value) {
      this.pagesize = value;
      // this.tableData1 = this.tableSearch(this.page, this.pagesize)
    },
    // 监听全屏事件
    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;
}
.confirmSave {
  margin-right: 50px;
  margin-top: 25px;
  margin-bottom: 20px;
}
.Thirdbg {
  width: 100%;
  height: 100px;
  background-color: #ddd;
  margin-top: 30px;
  min-width: 800px;
  display: flex;
  justify-content: space-around;
}
.one_div_type {
  display: inline-block;
  width: 33%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  margin-left: 100px;
  margin-top: 20px;
}
.one_div_green {
  font-size: 40px;
  color: green;
}
.one_div_red {
  font-size: 40px;
  color: red;
}
.fourthBg {
  width: 100%;
  height: 150px;
  background-color: #ddd;
  margin-top: 20px;
}
.fifthBg {
  width: 100%;
  height: 150px;
  background-color: #ddd;
  margin-top: 20px;
}
.entryWrap {
  position: relative;
  background-color: #f5f7f9;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>