<template>
  <view class="main">
    <title-block style="flex-shrink: 0;width: 100%" title="寄存"></title-block>
    <view class="order" @click="goConsignmen">
      <view class="order-item">
        <image src="@/static/image/write.png" mode="scaleToFill" style="width: 63rpx;height: 62rpx" />
        <view style="color: #fff;margin-top:10rpx">填写下单</view>
      </view>
      <view class="order-item" style="background:#76C458;" @click.stop="scanOrder">
        <image src="@/static/image/scan.png" mode="scaleToFill" style="width: 57rpx;height: 57rpx" />
        <view style="color: #fff;margin-top:10rpx">扫码下单</view>
      </view>
    </view>
    <view class="list">
      <view style="color: #76C458">目前可用寄存仓库地址</view>
      <u-divider :dashed="true" lineColor="#4E964D"></u-divider>
      <view v-for="(item,index) in addressList" :key="item.ID">
        <view class="list-item">
          <view>{{item.address}}</view>
          <view>剩余{{item.leftNum}}位置</view>
        </view>
        <u-divider :dashed="true" lineColor="#4E964D" v-if="index !== addressList.length-1"></u-divider>
      </view>
    </view>
    <tabbar :current="0"></tabbar>
  </view>
</template>
<script>
import tabbar from "../../components/uiq-tabbar/uiq-tabbar.vue";

export default {
  name: "index",
  onLoad() {
    uni.hideTabBar();
  },
  onShow() {
    this.getAddress();
  },
  components: {
    tabbar
  },
  data() {
    return {
      addressList: []
    };
  },
  methods: {
    scanOrder() {
      uni.scanCode({
        onlyFromCamera: false,
        success: res => {
          console.log("条码类型：" + res.scanType);
          console.log("条码内容：" + res.result);
          uni.navigateTo({
            url: "/pages/consignment-painting/index?url=" + res.result
          });
        }
      });
    },
    async getAddress() {
      const res = await this.$api.deposit.address();
      console.log(res);
      if (res.status === 0) {
        this.addressList = res.data.data;
      } else {
        this.$common.msgToast(res.msg);
      }
    },
    goConsignmen() {
      uni.navigateTo({
        url: "/pages/consignment-painting/index"
      });
    }
  }
};
</script>
<style scoped lang="scss">
.main {
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30rpx;
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");

  .order {
    width: 100%;
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    .order-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 330rpx;
      height: 208rpx;
      border-radius: 20rpx;
      background: #4e964d;
    }
  }
  .list {
    margin-top: 40rpx;
    width: 100%;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 12rpx 20rpx;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-size: 24rpx;
    .list-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #939393;
    }
  }
}
</style>