<template>
  <view class="page-raw">
    <view class="header">
      <view class="welcome">
        <!-- <view class="name">Hi, {{ session.user.userName }}</view> -->
        <view style="font-weight: 500; line-height: 80rpx">
          <!-- <view v-if="factoryList.value != ''">选择工厂</view> -->
          <jPicker sureColor="#ff0000" :moren="moren" @bindpicker="selectProductCode" showKey="label" valKey="value" :val="factoryList.value" :options="areas" />
        </view>
        <view class="name">首页</view>
        <view class="logout" @click="uni.navigateTo({ url: page.me })">
          <!-- <u-icon name="info-circle"></u-icon> -->
          <text style="margin: auto">我的</text>
        </view>
      </view>
      <!-- <view class="date">{{ today }}</view> -->
    </view>
    <view v-for="item in newmenuList" :key="item.path">
      <view class="container">
        <u-row :gutter="30">
          <u-col :span="16" style="padding: 0px">
            <u-button @click.native="togopage(item.path)">
              <u-icon size="80" name="/static/icons/icon-02.png"></u-icon>
              <!-- <text class="name"> {{ session.lang == 'en' ? index + 1 + ' ' + item.engResourceName : index + 1 + ' ' + item.resourceName }}</text> -->
              <text class="name">{{ item.menuName }}</text>
            </u-button>
          </u-col>
        </u-row>
      </view>
    </view>
    <!-- <view class="container">
      <u-row :gutter="30">
        <u-col :span="16" style="padding: 0px">
          <u-button
            @click.native="
              uni.navigateTo({
                url: `/pages/wms/index`,
              })
            "
          >
            <u-icon size="80" name="/static/icons/icon-02.png"></u-icon>
            <text class="name">wms</text>
          </u-button>
        </u-col>
      </u-row>
    </view> -->
  </view>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import { BasePage } from '@/components/base/page';
import { Factory, area } from '../login/area/model';
import { session } from '@/store/modules/session';
import dayjs from 'dayjs';
import model from './model';
import jPicker from '@/components/J-Picker/jPicker.vue';
//import { session } from '@/store/modules/session';

@Component({
  components: {
    jPicker,
  },
})
export default class RawHome extends BasePage {
  //获取工厂
  get areas(): Array<Factory> {
    return area.areas;
  }
  model = model;
  menuList = session.getMenus;
  newmenuList: any = [];
  moren = '选择工厂';
  factoryList: any = {};
  today = dayjs().format('YYYY-MM-DD dddd');
  onReady() {
    if (session.FactoryCode != undefined) {
      this.factoryList.value = session.FactoryCode;
    } else {
      this.factoryList.value = this.areas[0].factory;
      const factory: string = this.areas[0].factory;
      const poolName: string = this.areas[0].poolName;
      session.setFactory({
        factoryCode: factory,
        poolName: poolName,
      });
    }
    this.newmenuList = this.menuList.filter((item) => item.perms == 'wms' || item.perms == 'mes' || item.perms == 'equipment' || item.perms == 'quality');
    console.log('1234', this.menuList);
  }
  onLoad() {
    //console.log('sssss', area.areas);
    // this.model.getMenuList();
  }
  async tomes() {
    // await model.getpage();
    uni.navigateTo({
      url: `/pages/mes/index`,
    });
  }
  togopage(path) {
    //console.log('guoguo',session.FactoryCode)
    if (session.FactoryCode == undefined) {
      this.customToast('请选择工厂');
    } else {
      uni.navigateTo({
        url: path,
      });
    }
  }
  selectProductCode(e: any) {
    this.factoryList = e.pickerName;
    const factory: string = this.factoryList.factory;
    const poolName: string = this.factoryList.poolName;
    console.log('ccccc', this.factoryList);
    session.setFactory({
      factoryCode: factory,
      poolName: poolName,
    });
    console.log('gongchang', session.factory);
  }
}
</script>

<style lang="scss" scoped>
.page-raw {
  background-color: #f4f7fc;
  min-height: 100%;

  .header {
    background-color: #d9001b;
    padding: 72rpx 30rpx 22rpx;
    color: #fff;
    box-shadow: 0 1rpx 5rpx #ee596c;
    .welcome {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 44rpx;
        font-weight: 500;
        // margin-left: 62rpx;
      }
      .logout {
        border: 2rpx solid;
        width: 100rpx;
        border-radius: 8rpx;
        text-align: center;
        display: flex;
      }
    }
    .date {
      margin-top: 30rpx;
      font-size: 28rpx;
      font-weight: 400;
      opacity: 0.7;
    }
  }

  .container {
    margin-top: 8rpx;
    // padding: 30rpx 15rpx 0;
    .u-row {
    }
    .u-col {
      // margin-bottom: 30rpx;
      // margin-left: 12px;
      flex: 1;
    }
    .u-btn {
      height: 160rpx;
      // padding: 0 30rpx;
      border: 1px solid #f0f5fc;
      color: #42465a;
      font-size: 30rpx;
      font-weight: 400;
      &:after {
        border-color: #f0f5fc;
        border-radius: 4rpx;
      }
      .name {
        flex: 1;
        margin-left: 32rpx;
        text-align: left;
      }
    }
  }
}
</style>
