<template>
  <view>
    <view id="header">
      <!--新增委托navbar-->
      <u-navbar title="上架单"
                :border-bottom="false"
                :background="{backgroundColor: 'whitesmoke'}">
        <template v-slot:right>
        </template>
      </u-navbar>
      <view class="status-list bg-fff u-flex">
        <text v-for="(status,index) in statusList"
              @click="setStatus(index)"
              class="status-item u-m-r-20 u-m-l-16"
              :class="[index === activeStatus ? 'active':'']"
              :key="status.value">
          {{status.label}}
        </text>
      </view>
    </view>
    <!-- 列表 确定-->
    <view class="body u-p-r-30  u-p-l-30" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
      <view class="u-p-t-24 u-p-b-24">
        {{statusList[activeStatus].label }}上架单:{{list.length}}单
      </view>
      <view v-for="(item) in list" :key="item.id"
            @click="goEntrustItemPage(item)"
            class="item u-m-b-20 bg-fff u-p-30">
        <view class="item-header u-flex">
          <view class="u-flex-1 u-line-1 u-font-32 u-flex">
            <view class="item-header-tip u-m-r-10"></view>
            {{item.styleOrderCode}}
          </view>
          <view class="item-header-status u-flex-1 u-line-1 u-font-28 text-right">
            <!--            待付款倒计时：59分21秒-->
            <!--            1-待付款、2-已付款、3-已取消-->
            {{
              item.status === 1 ? '待付款' :
                  item.status === 2 ? '已付款' : '已取消'
            }}
          </view>
        </view>
        <view class="item-body ">
          <view class="item-desc u-m-t-28 u-m-b-22">
            <text class="u-m-r-20 item-desc-label">上架款数</text>
            <text class="item-desc-value">{{item.quantity}}款</text>
          </view>
        </view>
        <view class="item-hr"></view>
        <view class="item-footer u-flex">
          <view class="item-desc u-flex-1 u-line-1" v-if="item.status === 1">
            <text class="u-m-r-20 item-desc-label">待支付:</text>
            <text class="item-desc-value item--status">{{ item.price }}元</text>
          </view>
          <view class="item-buttons u-flex-1 u-flex" >
            <!--            v-if="item.putawayStatus === 3"-->
            <view class="button button-plain button-plain--default u-m-r-20" @click.stop="cancel(item)" >取消上架</view>
            <view class="button button-default" v-if="item.status === 1" @click.stop="toPay(item)">付款</view>
          </view>
        </view>
      </view>
      <!-- 加载更多 -->
      <u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
      <!-- 缺省页 -->
      <hs-empty  v-if="isEmpty" tipText="没有数据"
                 marginTop="100rpx"
                 :image="emptyImage"></hs-empty>
      <u-toast ref="uToast" />
    </view>
  </view>
</template>

<script>
import dom from "@/mixins/dom";

export default {
  name: "entrustList",
  mixins:[dom],
  data(){
    return{
      emptyImage :require("@/static/images/components/empty/empty.png"),
      activeStatus: 0,
      statusList: [
        {label: '全部',value: 0},
        {label: '待付款',value: 1},
        {label: '已付款',value: 2},
        {label: '已取消',value: 3},
      ],
      loadStatus: 'loadmore',
      pageOptions: {
        current: 1,
        size: 10,
        pages: 10,
      },
      list: []
    }
  },
  created() {
    this.getList()
  },
  computed:{
    isEmpty(){
      return this.list.length === 0
    }
  },
  methods:{
    toPay(item){
      this.$Router.push({
        path: '/pages/webview/index',
        query:{
          id: item.payOrderCode
        }
      })
    },
    setStatus(index){
      this.activeStatus = index;
      this.getList(true);
    },
    getList(isReload){
      this.loadStatus = 'loading';
      this.$http("stylelibraryorder.listingList",{
        ...this.pageOptions,
        "status": this.statusList[this.activeStatus].value,
      }).then(res =>{
        let {
          code, data
        } = res;
        if(code === 200){
          if(Object.keys(data).length > 0){
            this.list = isReload ? data.records : this.list.concat(data.records);
            this.pageOptions.pages = data.total;
            this.loadStatus = this.list.length  < data.total ? 'loadmore' : 'nomore';
          }else{
            this.list = []
            this.loadStatus = 'nomore';
          }
        }
      })
    },
    cancel(item){
      this.$http("stylelibraryorder.unlisted", { id: item.id})
          .then(res => {
            let {
              code,msg
            } = res;
            if(code === 200){
              this.getList(true);
            }else{
              this.$refs.uToast.show({
                title: msg
              })
            }
          })
    },
    goEntrustItemPage({id}){
      this.$Router.push({
        path: '/pages/material/entrustItem',
        query:{
          id: id
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
$activeColor: #DDA973;
$mainColor: #000;
$subColor: rgba(0,0,0,0.40);
.flex-row-reverse{
  flex-direction: row-reverse;
}
.bg-fff{
  background: #fff;
}
.body{
  position: absolute;
  background: rgba(239,239,239,0.61);
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}

.status-list{
  height: 80rpx;
  .status-item{
    color: #666;
    font-size: 28rpx;
    &.active{
      font-size: 32rpx;
      color:$activeColor;
    }
  }
}

.item{
  border-radius: 16rpx;
  &--status{
    color: $activeColor;
  }
  &-header{
    &-tip{
      width: 8rpx;
      height: 32rpx;
      background: #af8d66;
      border-radius: 6rpx;
    }
  }
  &-body{

  }
  &-desc{
    &-label{
      color: $subColor;
    }
  }
  &-images{
    overflow-x: auto;
    white-space: nowrap;
    .item-image{
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
  }
  &-hr{
    width: 100%;
    border-top: 1px solid #f6f6f6;
    padding: 20rpx;
    position: relative;
    &:before{
      content: " ";
      position: absolute;
      left: -22px;
      top: -7px;
      display: block;
      width: 15px;
      height: 15px;
      background: #f6f6f6;
      border-radius: 50px;
    }
    &:after{
      content: " ";
      position: absolute;
      right: -22px;
      top: -7px;
      display: block;
      width: 15px;
      height: 15px;
      background: #f6f6f6;
      border-radius: 50px;
    }
  }
  &-footer{}
  &-buttons{
    .button{
      border: 1px solid #333;
      border-radius: 44rpx;
      width: 160rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      &-plain{
        &--default{
          color: #333;
        }
      }
      &-default{
        background: #333;
        color: #fff;
      }
    }
  }
}
</style>
