<template>
  <!-- 工票检验页面 -->
  <div class="entryWrap" id="entry">
    <div class="divborder newSearchDiv Fristbg" style="margin:0px;">
      <!-- 工位信息 -->
      <div class="filter">
        <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="processname"></span></p>
        <p><span>计划开始时间</span>：<span class="starttime"></span></p>
      </div>
    </div>
    <div class="Fourthbg tab">
      <div class="tab_list">
        <ul>
          <li @click="firstClick" :style="{ backgroundColor: isactive}" :value="1">首检</li>
          <li @click="tourClick" :value="2">巡检</li>
          <li @click="completeClick" :value="3">完工检</li>
          <li @click="fullClick" :value="4">全检</li>
        </ul>
      </div>
      <div class="tab_con">
        <div v-show="firstCheck">
          <div class="divborder newTableDiv">
            <Table
              highlight-row
              class="tableClass"
              max-height="300px"
              :data="tableData1"
              :columns="tableColumns1"
              @on-current-change="handleRowChange"
            ></Table>
          </div>
        </div>
        <div class="item" v-show="tourCheck">
          <div class="divborder newTableDiv">
            <Table
              highlight-row
              class="tableClass"
              max-height="300px"
              :data="tableData1"
              :columns="tableColumns1"
              @on-current-change="handleRowChange"
            ></Table>
          </div>
        </div>
        <div class="item" v-show="completeCheck">
          <div class="divborder newTableDiv">
            <Table
              highlight-row
              class="tableClass"
              max-height="300px"
              :data="tableData1"
              :columns="tableColumns1"
              @on-current-change="handleRowChange"
            ></Table>
          </div>
        </div>
        <div class="item" v-show="fullCheck">
          <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>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      firstCheck: true, // 首检
      tourCheck: false, // 巡检
      completeCheck: false, //  完工检
      fullCheck: false, // 全检
      datalevel: [], // 工位数据
      leveldata: [],
      personnelinfor: "", // 人员信息
      personnelList: [], // 人员数据
      tableData1: [],
      standardProduct: 0, // 合格品数量
      industrialWaste: 0, // 工废数量
      materialWaste: 0, //  料废数量
      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("950169"), // 项目
          key: ""
        },
        {
          title: this.$t("950245"), // 标准
          key: ""
        },
        {
          title: this.$t("200059"), // 上限
          key: ""
        },
        {
          title: this.$t("200060"), // 下限
          key: ""
        },
        {
          title: this.$t("800195"), // 结果
          key: ""
        },
        {
          title: this.$t("920168"), // 值
          key: ""
        }
      ],
      isactive: '#347AB2',
      detailobj: {}
    };
  },
  created() {
    this.initlevel();
    this.GetUsers();
  },
  // 事件处理函数
  methods: {
    // 首检事件
    firstClick() {
      this.firstCheck = true;
      this.tourCheck = false;
      this.completeCheck = false;
      this.fullCheck = false;
      // 获取元素
      let tab_list = document.querySelector(".tab_list");
      let lis = tab_list.querySelectorAll("li");
      for (let i = 0; i < lis.length; i++) {
        lis[i].className = "";
      }
      // this.className = "current";
    },
    // 巡检事件
    tourClick() {
      this.firstCheck = false;
      this.tourCheck = true;
      this.completeCheck = false;
      this.fullCheck = false;
    },
    // 完工检事件
    completeClick() {
      this.firstCheck = false;
      this.tourCheck = false;
      this.completeCheck = true;
      this.fullCheck = false;
    },
    // 完检事件
    fullClick() {
      this.firstCheck = false;
      this.tourCheck = false;
      this.completeCheck = false;
      this.fullCheck = true;
    },

    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;
          }
        });
    },
    // 获取人员信息
    GetUsers() {
      axios
        .request({
          url: "/config/user/GetUsers",
          method: "get"
        })
        .then(res => {
          let result =res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.personnelList = result;
          }else {
            this.personnelList = [];
          }
        });
    },
    // 监听全屏事件
    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;
    },
    handlelevelchange(value) {
      console.log(value);
      this.leveldata = value;
    },
    // 点击表格事件
    handleRowChange(cur) {
      this.detailobj = cur;
    }
  }
};
</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;
}
.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;
}
.one_div_type {
  float: left;
  width: 33%;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  margin-left: 100px;
}
.Thirdbg {
  width: 100%;
  height: 200px;
  background-color: #ddd;
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  min-width: 800px;
}
.Fourthbg {
  width: 100%;
  height: 300px;
  background-color: #ddd;
  margin-top: 30px;
}
.tab_list {
  overflow: hidden;
}
.tab_list > ul > li {
  float: left;
  width: 24.5%;
  height: 50px;
  line-height: 50px;
  margin-right: 8px;
  background-color: #147dd8;
  // opacity: 0.3;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.tab_list > ul > li:first-child {
  opacity: 1;
}
.entryWrap {
  position: relative;
  background-color: #f5f7f9;
  overflow-y: auto;
  overflow-x: hidden;
}
.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.layoutChild {
  margin-bottom: 10px;
  margin-top: 15px;
  > label {
    font-size: 16px;
    font-weight: bold;
  }
}
</style>