<template>
  <view class="order-page">
    <app-tabs
			:tabs="tabs"
			:isFixed="true"
			:currentTab="tabIndex"
			@change="change"
			itemWidth="20%"
		/>
    <scroll-view
      class="pay_list"
    >
      <block v-if="!$util.isEmpty(list.data)">
        <OrderItem
          v-for="(item, index) in list.data"
          :key="index"
          :info="item"
          @click="gotoDetails"
        >
        </OrderItem>
      </block>
      <block v-else>
        <AppWrapperEmpty
          title="暂无数据"
          :is-empty="$util.isEmpty(list.data)"
        />
      </block>
    </scroll-view>
    <view class="app-footer open_btn">
			<view @click="addEvent" class="admin-button-com middle blue">新增采购</view>
		</view>
  </view>
</template>

<script>
import AppTabs from "@/components/plugin/tabs";
import OrderItem from "./orderItem";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { ghsList, purchaseList } from "@/api/purchase/index";
export default {
  components: {
    AppWrapperEmpty,
    OrderItem,
    AppTabs
  },
  data () {
    return {
       tabs: [
        {
          name: "全部",
          value: 0,
          key: '0'
        },
        {
          name: "待付款",
          value: 0,
          key: '1'
        },
        {
          name: "待配送",
          value: 0,
          key: '2'
        },
        {
          name: "配送中",
          value: 0,
          key: '3'
        },
        {
          name: "已完成",
          value: 0,
          key: '4'
        }
      ],
      list: {
        data: []
      },
      supplierList: [],
      tabIndex: 0,
      status: '0'
    }
  },
  
  onPullDownRefresh() {
    this.getpurchaseList().then(res => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    // tab切换
    change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
        console.log(e.item.key)
        this.status = e.item.key
        this.getpurchaseList()
			}
		},
    init() {
      this.getpurchaseList()
    },
    // 获取采购记录列表
    getpurchaseList () {
      return purchaseList({ status: this.status }).then(res => {
        this.list.data = res.data.list
        this.tabs[0].value = res.data.shop.totalPurchaseOrder // 全部
        this.tabs[1].value = res.data.shop.cgUnPay // 待付款
        this.tabs[2].value = res.data.shop.cgUnSend // 待配送
        this.tabs[3].value = res.data.shop.cgSending // 配送中
        this.tabs[4].value = res.data.shop.cgFinish // 已完成
      }).catch(err => { console.log(err) })
    },
    // 采购记录详情
    gotoDetails (val) {
      console.log(val)
      uni.navigateTo({
        url: '/pagesPurchase/purDetails?status=' + val.status + '&id=' + val.id
      })
    },
    // 去往采购页面
    addEvent() {
      uni.navigateTo({url: '/pagesPurchase/order'})
    }
  }
}
</script>

<style lang="scss" scoped>
.order-page {
  .tabs {
    height: 80upx;
    line-height: 80upx;
    & > view {
      // padding: 0 80upx;
      width: 50%;
      text-align: center;
      font-size: 28upx;
      color: #666;
      display: inline-block;
    }
    & > .active {
      position: relative;
      color: #3385ff;
      font-weight: 700;
    }
    & > .active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 70upx;
      height: 6upx;
      background: #3385ff;
    }
  }
  .order_list {
    // height: 200upx;
    height: 100%;
    background: #f0f2f6;
    padding: 0 0 20upx;
    .list_item {
      margin: 20upx 0 0;
      // padding-left: 20upx;
      position: relative;
      height: 180upx;
      width: 100vw;
      background: #fff;
      display: flex;
      align-items: center;
      & > image {
        margin-left: 30upx;
        width: 120upx;
        height: 120upx;
        border-radius: 60upx;
      }
      & > .store_name {
        margin-left: 30upx;
        & > .store_title {
          margin-bottom: 30upx;
          font-size: 32upx;
          font-weight: 700;
          color: #333;
        }
        & > .accumulative {
          font-size: 26upx;
          color: #999;
        }
      }
      & > .store_btn {
        position: absolute;
        right: 30upx;
        // padding-right: 30upx;
        & > .btn_entrance {
          display: inline-block;
          font-size: 26upx;
          color: #3385ff;
          border: 1px solid #3385ff;
          border-radius: 8px;
          padding: 15upx 30upx;
          margin-left: 30upx;
        }
        & > .btn_forbid {
          border: 1px solid #999;
          color: #999;
        }
      }
    }
  }
  .pay_list {
    padding-top: 100upx;
    padding-bottom: 100upx;
    background-color: #f0f2f6;
  }
}
</style>
