<template>
  <view class="order-page">
    <scroll-view
      scroll-y
      class="order_list"
      scroll-view
      v-if="tabIndex == 0"
    >
      <block>
        <!-- 供货商列表 -->
        <block v-if="!$util.isEmpty(supplierList)">
          <view
            class="list_item"
            v-for="(item, index) in supplierList"
            :key="index"
            @click="enter(item)"
          >
            <image :src="item.avatar"></image>
            <view class="store_name">
              <view class="store_title">{{item.name}}</view>
              <view class="accumulative">欠款: {{item.debtAmount}}</view>
            </view>
            <view class="store_btn">
              <view class="btn_entrance" v-if="Number(item.debtAmount) > 0" @click.stop="settleAccounts(item)" >
                结账
              </view>
              <view class="btn_entrance btn_forbid" v-else @click.stop="" >
                结账
              </view>
              <view class="btn_entrance" @click.stop="enter(item)" >
                采购
              </view>
            </view>
          </view>
        </block>
        <block v-else>
          <AppWrapperEmpty
            title="暂无数据"
            :is-empty="$util.isEmpty(supplierList)"
          />
        </block>
      </block>
    </scroll-view>
    <kd-entrance></kd-entrance>
  </view>
</template>

<script>
import OrderItem from "./orderItem";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { ghsList, purchaseList } from "@/api/purchase/index";
export default {
  components: {
    AppWrapperEmpty,
    OrderItem,
  },
  data () {
    return {
      tabs: [
        {
          name: "供货商",
          key: "",
        },
        {
          name: "采购记录",
          key: "1",
        },
        {
          name: "111",
          key: "1",
        },
      ],
      list: {
        data: []
      },
      supplierList: [],
      tabIndex: 0
    }
  },
  onPullDownRefresh() {
    this.getGHSList().then(res => {
      uni.stopPullDownRefresh();
    })
  },
  methods: {
    enter (item) {
      const { id } = item
      this.pageTo({ url: `/pagesPurchase/ghsProduct?id=${id}`, type: 2 })
    },
    init() {
      this.getGHSList()
    },
    getGHSList () {
      return ghsList().then(res => {
        this.supplierList = res.data.list
        console.log(this.supplierList, 111)
      }).catch(err => { console.log(err) })
    },
    // 结账
    settleAccounts (item) {
      this.pageTo({
        url: '/pagesPurchase/gathering?id='+item.id,
      })
    },
    // 采购记录详情
    gotoDetails (val) {
      console.log(val)
      this.pageTo({
        url: '/pagesPurchase/purDetails?status=' + val.status + '&id=' + val.id,
        type:2
      })
    }
  }
}
</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: 20upx;
    background-color: #f0f2f6;
  }
}
</style>
