<template>
  <view class="common-container">
    <!--    <view class="common-head">-->
    <!--      <view class="header">-->
    <!--        <view class="title">-->
    <!--          MES宝申科技-->
    <!--        </view>-->
    <!--        <view class="workstation" @click="handleCommand('workstation')">-->
    <!--          {{ this.vuex_workstation == null ? '请选择工作站' : this.vuex_workstation.workstationName }}-->
    <!--          <u-icon name="edit-pen-fill" size="46" color="#2979ff"></u-icon>-->
    <!--        </view>-->
    <!--        <view class="user" @tap="handleUserTaped">-->
    <!--          <view class="user-icon">-->
    <!--            <img :src="userInfo.avatar"></img>-->
    <!--          </view>-->
    <!--          <view class="user-text">-->
    <!--            {{ this.vuex_user.nickName }}-->
    <!--          </view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </view>-->
    <view class="header">
      <view class="title">
        <image mode="widthFix" style="width: 160rpx;margin: 40rpx 20rpx;display: block;"
               src="@/static/logo.png"></image>
      </view>
      <TabHeader></TabHeader>
      <u-button style="position: absolute;bottom: 50rpx;margin: 0 auto;" @click="handleUserTaped">
        <u-icon name="setting" size="35"></u-icon>
        设置
      </u-button>
    </view>
    <view class="common-main">
      <ProdReport v-if="tabIndex === 'PRO'"></ProdReport>
      <GxContent v-else-if="tabIndex ==='GX'"></GxContent>
      <QcContent v-else-if="tabIndex ==='QC'"></QcContent>
      <ProContent v-if="tabIndex === 'DV'"></ProContent>
    </view>
    <u-modal width="1680rpx" v-model="showWorkstationFlag" :showConfirmButton="false" :showCancelButton="true"
             title="请选择工作站" content="操作内容">
      <!-- 	<u-tabs :list="processList" :is-scroll="true" :current="currentFlag" name="processName"
            @change="getWorkstationList">
          </u-tabs> -->
      <uv-tabs :list="processList" :current="currentFlag" keyName="processName" @change="getWorkstationList"
               v-if="showWorkstationFlag"></uv-tabs>

      <view class="station_list">
        <u-empty text="暂无工作站" mode="list" v-if="workstationList.length==0"
                 style="margin: 0 auto;display: block;height: 360rpx;padding: 100rpx 0;"></u-empty>
        <template v-else>
          <u-card class="station_card" :show-foot="false" :title="'工作站'+card.workstationCode" :key="index"
                  v-for="(card,index) in workstationList">
            <view class="station_card_text" slot="body">
              {{ '工作站名称：' + card.workstationName }}
              <u-button type="primary" @click="setWorkstation(card)"
                        style="margin-top: 30rpx;">选择
              </u-button>
            </view>
          </u-card>
        </template>
      </view>
    </u-modal>

    <u-modal v-model="showLogoutMenu" :showConfirmButton=false :showCancelButton="true" width="400px"
             title="请选择操作">
      <view class="logoutmenu">
        <u-button shape="circle" class="menu_button" @click="" type="primary">更改密码</u-button>
        <u-button shape="circle" class="menu_button" @click="handleCommand('workstation')" type="warning">切换工作站
        </u-button>
        <u-button shape="circle" class="menu_button" @click="handleCommand('exit')" type="error">退出登录</u-button>
      </view>
    </u-modal>
  </view>
</template>

<script>
import TabHeader from "./TabHeader.vue"
import ProContent from "../mes/pro/index.vue"
import GxContent from "../mes/gx/index.vue"
import QcContent from "../mes/qc/index.vue"
import ProdReport from "../mes/prodReport/index.vue"

export default {
  name: 'HomePage',
  components: {
    TabHeader,
    ProContent,
    GxContent,
    QcContent,
    ProdReport
  },
  data() {
    return {
      tabIndex: "PRO",
      showWorkstationFlag: false,
      showLogoutMenu: false,
      activeProcess: null,
      userInfo: {
        nickName: '张三',
        avatar: require("@/static/images/head.png"),
      },
      processList: [], //工序清单
      workstationList: [], //工作站清单
      currentFlag: 0
    }
  },
  created() {
    uni.$on('switchTab', (indexCode) => {
      this.tabIndex = indexCode;
    })
    uni.$on('changeWorkstation', (indexCode) => {
      this.handleCommand('workstation');
    })

    this.checkWorkstation();
    this.getProcessList();
  },
  destroyed() {
    uni.$off('switchTab');
    uni.$off('changeWorkstation');
  },
  methods: {
    //用户部分点击
    handleUserTaped() {
      console.log("TAPED")
      // this.$refs.menu_dialog.open();
      this.showLogoutMenu = true;
    },

    //检查工作站设置情况
    checkWorkstation() {
      if (this.vuex_workstation == null) {
        this.showWorkstationFlag = true;
        this.$u.toast("请设置当前触控屏的工作站！");
      }
    },
    //获取工序清单
    getProcessList() {
      this.$u.api.getProcessList({}).then(res => {
        if (res.code === 200) {
          this.processList = res.data;
          this.activeProcess = res.data[0].processCode;
          this.getWorkstationList(0);
        } else {
          this.$u.toast("获取工序清单异常" + res.msg);
        }

      });
    },
    //获取工作站清单
    getWorkstationList(item) {
      this.currentFlag = item.index;
      this.activeProcess = this.processList[item.index].processCode;
      this.$u.api.getWorkstationList({
        processCode: this.activeProcess
      }).then(res => {
        if (res.code === 200) {
          this.workstationList = res.data;
        } else {
          this.$u.toast("获取工作站清单异常" + res.msg);
        }
      });
    },
    //设置当前触控屏的工作站
    setWorkstation(station) {
      this.$u.vuex('vuex_workstation', station);
      this.showWorkstationFlag = false;
      uni.$emit('switchWorkstation', station);
    },
    handleCommand(command) {
      if (command === 'exit') {
        this.loading = true;
        this.$u.api.logout().then(res => {
          this.loading = false;
          if (res.msg) {
            this.$u.toast(res.msg);
          }

          if (res.code == '200') {
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/sys/login/login'
              });
            }, 500);
          }
        })
      } else if (command == 'workstation') {
        this.showLogoutMenu = false;
        this.showWorkstationFlag = true;
      }
    }
  }
}
</script>

<style>
.common-container {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: 100px 1fr;
}

.common-head {
  height: 40px;
  background-color: rgb(3, 26, 60);
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.header {
  width: 200rpx;
  background-color: #132138;
  color: aliceblue;
  font-size: 25px;
  font-family: 华文楷体;
  line-height: 80rpx;
  height: inherit;
}

.header .divItem {
  height: 100%;
  align-items: center;
}

.header .title {
  width: 30%;
}

.header .workstation {
  text-align: center;
  flex-grow: 1;
}

.header .user {
  width: 30%;
}

.header .user .user-icon {
  float: right;
}

img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-left: 10px;
}

.header .user .user-text {
  float: right;
}

.logoutmenu {
  width: 100%;
  display: flex;
  justify-content: center;
}

.menu_button {
  width: 100px;
  margin: 10px;
}

.station_modal {
}

.station_list {
  display: flex;
  flex-wrap: wrap;
}

.station_card {
  width: 250px;
  height: 150px;
}

.common-main {
  padding: 6px 6px 6px 0;
  margin: 0;
  width: 100%;
  overflow: auto;
  background-image: linear-gradient(to top right, rgb(19 26 56), rgb(33 64 128));
}
</style>
