<template>
  <view class="page-area-select">
    <view
      class="header"
      :style="{ backgroundColor: `rgba(242, 242, 242, ${scrollTop / 100})` }"
    >
      <view class="left">
        <u-icon
          class="icon"
          name="arrow-left"
          color="#1a1a1a"
          @click="uni.navigateBack()"
        />
      </view>
      <view
        class="title"
        :style="{ color: `rgba(0, 0, 0, ${(scrollTop - 24) / 100})` }"
      >
        {{ $t("message.workArea_Title") }}
      </view>
      <view class="right"></view>
    </view>
    <view class="content-header">
      <view class="left">
        <view class="title">{{ $t("message.workArea_Title") }}</view>
        <view class="title-sub">{{ $t("message.workArea_SubTitle") }}</view>
      </view>
      <view class="right">
        <u-image width="80rpx" height="80rpx" :src="image.workarea.image1" />
      </view>
    </view>
    <view class="content">
      <view class="title">{{ $t("message.workArea_Selelct") }}</view>
      <view class="table">
        <wyb-table
          :headers="headers"
          :contents="areas"
          enable-check="single"
          :show-vert-border="false"
          :font-size="[24]"
          :padding="[4, 8]"
          header-ft-color="#999"
          header-bg-color="#f8f8fc"
          :header-weight="false"
          border-color="#f8f8f8"
          first-col-bg-color="#fff"
          checker-cell-bg-color="#fff"
          checker-border-color="#ededed"
          checker-color="#fff"
          checker-bg-color="#255dea"
        />
      </view>
    </view>
    <view class="bottom-bar">
      <view class="container">
        <u-row>
          <u-col :span="12">
            <u-button
              :custom-style="{
                backgroundColor: 'rgba(31, 51, 89, 1)',
                color: '#fff',
              }"
              hover-class="button-hover"
              @click="onOk"
            >
              {{ $t("message.workArea_Confirm") }}
            </u-button>
          </u-col>
        </u-row>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import { Area, area } from "./model";
import { page } from "@/utils/page";
import { headers } from "./config";
import { BasePage } from "@/components/base/page";
import { session } from "@/store/modules/session";

@Component
export default class AreaPage extends BasePage {
  // 工作区列表
  get areas(): Array<Area> {
    return area.areas;
  }

  headers = headers;

  async onOk() {
    const selection: any = area.areas.find((a: any) => a.checked);
    if (selection === undefined) {
      // uni.showToast({
      //   icon: "none",
      //   title: this.$t("message.workArea_SelelctOne") as string,
      // });
      this.customToast(this.$t('message.workArea_SelelctOne') as string);
      return;
    }
    if (selection.warehouseType === "1") {
      uni.navigateTo({ url: page.raw.index });
    } else if (selection.warehouseType === "2") {
      uni.navigateTo({ url: page.product.index });
    } else {
      uni.navigateTo({ url: page.SemiProduct.index });
    }
    session.setArea(selection);
  }

  navBack(): void {
    uni.navigateBack({ delta: 1 });
  }
}
</script>

<style lang="scss" scoped>
.page-area-select {
  background-color: #f2f2f2;
  padding: 100rpx 0 122rpx;
  min-height: 100%;
  color: #fff;

  .header {
    position: fixed;
    top: 36rpx;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    height: 88rpx;
    line-height: 88rpx;
    color: #fff;
    font-size: 34rpx;
    font-weight: 500;
    text-align: center;

    .title {
      flex: 3;
    }

    .left,
    .right {
      flex: 1;
    }

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 88rpx;
      height: 88rpx;
    }
  }

  .content-header {
    margin: 0 30rpx;
    display: flex;
    align-items: center;

    .left {
      flex: 4;

      .title {
        color: #000;
        font-size: 40rpx;
        font-weight: 600;
      }

      .title-sub {
        margin-top: 12rpx;
        color: #999;
        font-size: 26rpx;
      }
    }

    .right {
      flex: 1;
    }
  }

  .content {
    margin-top: 42rpx;
    border-top-left-radius: 18rpx;
    border-top-right-radius: 18rpx;
    padding: 32rpx 28rpx 0;
    background-color: #fff;

    .title {
      color: #000;
      font-size: 24rpx;
    }
    .table {
      margin-top: 32rpx;
      overflow-x: scroll;
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;

    .container {
      background: #ffffff;
      box-shadow: 0 1rpx 20rpx 0 rgba(128, 128, 128, 0.2);
      padding: 20rpx;
    }

    .extra {
      background-color: #fff;
      margin: 5px;
      border-radius: 5px;
      padding: 0 10px;
    }

    .bottom-info {
      .u-form-item {
        padding: 0;
      }
    }
  }

  ::v-deep .wyb-table-scroll-view {
    border: none !important;
  }

  ::v-deep .wyb-table-header {
    border: none !important;

    & uni-view:first-child {
      border-top-left-radius: 16rpx;
      border-bottom-left-radius: 16rpx;
    }

    & uni-view:last-child {
      border-top-right-radius: 16rpx;
      border-bottom-right-radius: 16rpx;
    }
  }

  ::v-deep .wyb-table-header-item {
    min-height: 56rpx !important;
    padding: 4rpx !important;
  }

  ::v-deep .wyb-table-content-item {
    min-height: 94rpx !important;
    font-weight: 500;
  }
}

.button-hover {
  opacity: 0.7;
}
</style>
