<template>
  <div class="h100">
    <Layout class="main terminal_system h100">
      <Layout>
        <Header class="header-con">
          <div class="section" v-if="isLogin">
            <div class="cascader">
              <span class="label">工位：</span>
              <Cascader
                trigger="click"
                change-on-select
                class="searchCascader fontSize"
                :data="levelData"
                :value="curLevel"
                :disabled="isLock"
                size="large"
                @on-change="cascaderChange"
              ></Cascader>
            </div>
          </div>
          <User class="user" :userName="userName"></User>
        </Header>
        <div class="tagList">
          <router-link v-for="(v, i) in tagList" :to="v.to" :key="i">
            <Button
              type="primary"
              size="large"
              class="tagItem"
              :disabled="signDetail.type != 1 && v.sign_required"
              :class="{ btn_active: curRoute == v.to.name }"
            >
              {{ v.text }}
            </Button>
          </router-link>
        </div>
        <Content class="main-content-con">
          <Layout class="main-layout-con">
            <Content class="content-wrapper">
              <router-view
                :curLevel="curLevel"
                :levelNums="levelNums"
                :signDetail="signDetail"
              ></router-view>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import User from "./user";
import { getToken, setToken } from "@/libs/util";
import { mapState, mapActions } from "vuex";

export default {
  name: "terminal",
  inject: ["reload"],
  data() {
    return {
      // 产线层级数据源
      levelData: [],
      // 产线层级深度
      levelNums: 0,
      // 当前工站
      curLevel: [],
      // tag 列表
      tagList: [
        {
          text: "签到签出",
          to: {
            name: "t_sign",
          },
          sign_required: false,
        },
        {
          text: "工单执行",
          to: {
            name: "t_woex",
          },
          sign_required: true,
        },
        {
          text: "程序调用",
          to: {
            name: "t_pgcl",
          },
          sign_required: true,
        },
        {
          text: "工艺图纸",
          to: {
            name: "t_rtdw",
          },
          sign_required: true,
        },
        {
          text: "质量检验",
          to: {
            name: "t_qtck",
          },
          sign_required: true,
        },
        {
          text: "安灯管理",
          to: {
            name: "t_admg",
          },
          sign_required: true,
        },
        {
          text: "设备效率",
          to: {
            name: "t_mcoe",
          },
          sign_required: true,
        },
      ],
      // 是否需要锁定当前工位
      isLock: false,
      // 当前工位的签到详情
      signDetail: {
        type: 0,
        name: "",
        time: "",
      },
      // 全屏好看的 Loading
      loading: null,
    };
  },
  mounted() {
    const _this = this;
    _this.getLevelData();
    if (_this.isLogin) {
      _this.getUserInfo();
    }
  },
  components: {
    User,
  },
  computed: {
    ...mapState({
      avatar: (state) => state.user.avatarImgPath,
      userName: (state) => state.user.userName,
    }),
    isLogin() {
      return getToken();
    },
    curRoute() {
      return this.$route.name;
    },
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    // 监听工站变化
    cascaderChange(v) {
      const _this = this;
      _this.curLevel = v;
      // 当选择到具体工位，且当前页面是签到签出页面时获取当前登录人关联当前工位的签到详情
      if (_this.$route.name == "t_sign") {
        if (_this.curLevel.length == _this.levelNums) {
          // 调用接口获取详情
          /**
           * 当前工位无人签到  上班签到
           * 当前工位有人签到--当前登录人签到  签到详情，下班签出
           * 当前工位有人签到--其他人签到  签到详情，上班签到
           */
          let params = {
            section: _this.curLevel[_this.curLevel.length - 1],
          };
          _this.loading = _this.$loading();
          _this.axios
            .request({
              url: "/CNC/ProduceWorking/WorkingType",
              params,
              method: "get",
            })
            .then((res) => {
              _this.loading.close();
              let result = res.data;
              if (result.ret == 1) {
                let data = result.data;
                _this.signDetail = data;
              } else {
                _this.$Message.error(_this.$t(result.msg));
              }
            })
            .catch((err) => {
              _this.loading.close();
              _this.$Message.error("系统异常，请联系管理员！");
            });
        }
      }
    },
    // 获取工站数据源
    getLevelData() {
      const _this = this;
      _this.loading = _this.$loading();
      _this.axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          _this.loading.close();
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.levelData = [];
            _this.levelNums = 0;
            if (data && Array.isArray(data) && data.length) {
              _this.levelData = data;
              _this.levelNums = _this.getMaxFloor(data);
              if (localStorage.getItem("sign_curlevel")) {
                _this.cascaderChange(
                  JSON.parse(localStorage.getItem("sign_curlevel"))
                );
                localStorage.removeItem("sign_curlevel");
              }
            }
          } else {
            // _this.$Message.error(_this.$t(result.msg));
          }
        })
        .catch((err) => {
          _this.loading.close();
          _this.$Message.error("系统异常，请联系管理员！");
        });
    },
    // 根据树形结构数据算出树形结构数据的深度
    getMaxFloor(treeData) {
      let floor = 0;
      let max = 0;
      function each(data, floor) {
        data.forEach((e) => {
          e.floor = floor;
          if (floor > max) {
            max = floor;
          }
          if (e.children.length > 0) {
            each(e.children, floor + 1);
          }
        });
      }
      each(treeData, 1);
      return max;
    },
  },
  watch: {
    // 监听路由变化，当前路由不是签到签出时，锁定当前工位
    $route: function (v) {
      const _this = this;
      if (v.name == "t_sign") {
        _this.isLock = false;
      } else {
        _this.isLock = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  .header-con {
    background-color: #fff;
    padding: 0px 36px;
    width: 100%;
    height: 75px;
    position: relative;

    .section {
      height: 100%;
    }

    .user {
      width: 220px;
      height: 100%;
      position: absolute;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .tagList {
    border-top: 1px solid #797979;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 24px;

    .tagItem {
      margin-right: 14px;
    }
  }

  .main-content-con {
    height: ~"calc(100% - 145px)";
    overflow: hidden;
  }

  .main-layout-con {
    height: 100%;
    overflow: hidden;
  }

  .content-wrapper {
    padding: 0 10px 10px 10px;
    height: ~"calc(100% - 155px)";
    overflow: auto;
  }
}
.cascader {
  height: 100%;
  display: flex;
  align-items: center;
  .label {
    color: #515a6e;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    height: 45px;
    line-height: 45px;
  }
  .searchCascader {
    display: inline-block;
    width: 320px;
  }
}
.h100 {
  height: 100%;
}
.btn_active {
  background-color: #3fc984;
  border-color: #3fc984;
}
.btn_active:hover {
  background-color: #3fc984;
  border-color: #3fc984;
}
</style>
<style lang="less">
.terminal_system {
  .ivu-input-large {
    height: 45px;
    font-size: 20px;
    border-radius: 8px;
  }
  .ivu-btn-large {
    font-size: 20px;
    border-radius: 8px;
    height: auto;
  }
  .ivu-input-wrapper-large .ivu-input-icon {
    font-size: 20px;
    height: 45px;
    line-height: 45px;
    width: 45px;
    cursor: pointer;
  }
  .ivu-cascader .ivu-cascader-menu-item {
    font-size: 16px !important;
  }
  .ivu-avatar-large {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    margin-right: 12px;
  }
  .ivu-btn > span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
