<template>
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh">
    <template slot="header">
      <view class="tab-container">
      	<u-tabs
      		:scrollable="false"
      		:list="tabList"
      		:current="tabCurrent"
      		@click="changeTab"
      		lineColor="#3D8FFD"
      		:activeStyle="{
      			color: '#3D8FFD'
      		}"
      		:inactiveStyle="{
      			color: '#666666'
      		}"
      		itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;">
      	</u-tabs>
      </view>
    </template>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="toGoodsDetail(item)">
        <view class="top">
          <view class="left">
            <image :src="item.userHeadImg" mode="aspectFill"></image>
            <view class="info">
              <view class="name">{{item.userNickName}}</view>
              <view class="text">{{item.createTime | timeFilter}}发布</view>
            </view>
          </view>
          <view class="right">
            <view class="status" v-if="item.status == 'SALE' && item.esOrderInfo">
              <block v-if="item.esOrderInfo.payStatus == 'PAID' && item.esOrderInfo.status == 'CANCEL'">已售后</block>
              <block v-else>
                {{{SAVE: '待付款', WAIT: '待确认', PAID: '待发货', SEND: '待收货', OVER: '已收货', TIME_OUT: '已超时', CANCEL: '已取消', WAIT_REFUND: '售后中'}[item.esOrderInfo.status]}}
              </block>
            </view>
            <view class="status" v-else>
              {{{ON: '在售', OFF: '已下架', SALE: '已卖出'}[item.status]}}
            </view>

            <view class="tag" v-if="item.esOrderInfo">
              <u-tag :text="{1: '线上销售', 2: '线下销售'}[item.esOrderInfo.saleType]" plain plainFill size="mini"></u-tag>
              <u-tag :text="{WECHAT: '在线支付', CASH: '到店支付'}[item.esOrderInfo.payType]" plain plainFill size="mini"></u-tag>
            </view>
          </view>
        </view>
        <view class="goods">
          <image :src="item.imgList[0].imgUrl" mode="aspectFill"></image>
          <view class="right">
            <view class="name">{{item.goodsName}}</view>
            <view class="text">{{item.goodsNote}}</view>
            <view class="info">
              <view class="price">{{item.price | priceFilter2}}</view>
              <view class="num">上架<text>{{item.qty}}</text></view>
              <view class="num" v-if="item.status == 'SALE' && item.esOrderInfo">已售<text>{{item.esOrderInfo.num}}</text></view>
              <view class="num" v-else></view>
            </view>
          </view>
        </view>
        <view class="bottom" v-if="item.status == 'SALE' && item.esOrderInfo">
          <view class="left">买家：{{item.esOrderInfo.userName}} {{item.esOrderInfo.userMobile}}</view>
          <view class="right" @tap.stop>
            <u-button text="联系买家" size="small" shape="circle" @click="$callPhone(item.esOrderInfo.userMobile)"></u-button>
          </view>
        </view>
        <view class="bottom">
          <view class="left"></view>
          <view class="right" @tap.stop v-if="item.status == 'ON'">
            <u-button text="已售出" size="small" shape="circle" @click="actionGoods('SALE', item)"></u-button>
            <u-button text="下架" size="small" shape="circle" @click="actionGoods('OFF', item)"></u-button>
            <u-button text="编辑" size="small" shape="circle" @click="toEdit(item)"></u-button>
          </view>
          <view class="right" @tap.stop v-if="item.status == 'SALE' && item.esOrderInfo">
            <block v-if="item.esOrderInfo.status == 'WAIT'">
              <u-button text="取消订单" size="small" shape="circle" @click="cancelOrder(item)"></u-button>
            </block><block v-if="item.esOrderInfo.status == 'SAVE' && item.esOrderInfo.saleType == 1">
              <u-button text="确认收款" size="small" shape="circle" type="primary" plain @click="toDetail(1, item)"></u-button>
            </block>
            <block v-else-if="item.esOrderInfo.status == 'PAID'">
              <u-button text="确认发货" size="small" shape="circle" type="primary" plain @click="toDetail(2, item)"></u-button>
            </block>
          </view>
          <view class="right" @tap.stop v-if="item.status == 'OFF'">
            <u-button text="删除" size="small" shape="circle" @click="deleteGoods(item)"></u-button>
            <u-button text="重新上架" size="small" shape="circle" @click="actionGoods('ON', item)"></u-button>
          </view>
        </view>
      </view>
    </view>

    <Loading :type="1" :loadStatus="loadStatus" :dataList="dataList" />

  </zj-page-layout>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [],
        pageNum: 1,
        loadStatus: 0,
        refresherTriggered: false,
        tabList: [
          {name: '已发布的', value: 'ON'},
          {name: '已卖出', value: 'SALE'},
          {name: '已下架', value: 'OFF'},
        ],
        tabCurrent: 0,
        status: 'ON',
      }
    },

    onLoad({tab = 'ON'}) {
      this.status = tab;
      this.tabCurrent = this.tabList.map(o => o.value).indexOf(tab);

      this.getList();

      this.crossPage.$on('refreshRecycleIssueList', data => {
        this.refreshList();
      })
    },

    onUnload() {
      this.crossPage.$off('refreshRecycleIssueList');
    },

    methods: {
      getList() {
      	this.loadStatus = 1;
      	this.$api.post('/es/goods/list', {
          pageNum: this.pageNum,
          pageSize: 10,
          status: this.status,
          // userId: this.$store.state.user.userId,
      	}).then(res => {
      		this.loadStatus = 0;
      		let list = res.data.records;
      		if (list.length < 10) {
      		  this.loadStatus = 2;
      		}
      		this.dataList = this.dataList.concat(list);
      	}).catch(() => {
      		this.loadStatus = 2;
      	}).finally(res => {
      		this.refresherTriggered = false;
      	})
      },

      changeTab(e) {
      	this.tabCurrent = e.index;
      	this.status = e.value;
        this.refreshList();
      },

      refreshList() {
      	this.dataList = [];
      	this.pageNum = 1;
      	this.getList();
      },

      // 触发下拉刷新
      refresherrefresh(e) {
      	this.refresherTriggered = true;
      	this.refreshList();
      },

      toGoodsDetail(item) {
        this.$navToPage({
          url: `/packageHome/pages/recycle/goodsDetail?id=${item.id}`
        })
      },

      actionGoods(type, item) {
        this.$modal({
          content: `确定要操作${{ON: '上架', OFF: '下架', SALE: '已售出'}[type]}吗？`
        }).then(() => {
          this.$api.post('/es/goods/update/status', {
            id: item.id,
            status: type,
          }).then(res => {
            this.$successToast();
            this.refreshList();
          })
        }).catch(() => {})
      },

      toEdit(item) {
        this.$navToPage({
          url: `/packageHome/pages/recycle/issue?id=${item.id}&type=2`
        })
      },

      toDetail(type, item) {
        this.$navToPage({
          url: `/packageHome/pages/recycle/issue/detail?type=${type}&id=${item.id}`
        })
      },

      cancelOrder(item) {
        this.$modal({
          content: `确定要取消订单吗？`
        }).then(() => {
          this.$api.post('/es/orderPay/wait/notPay', {
            orderId: item.esOrderInfo.esOrderId,
          }).then(res => {
            this.$successToast();
            this.refreshList();
          })
        }).catch(() => {})
      },

      deleteGoods(item) {
        this.$modal({
          content: `确定要删除商品吗？`
        }).then(() => {
          this.$api.post('/es/goods/del', {
            id: item.id,
          }).then(res => {
            this.$successToast();
            this.refreshList();
          })
        }).catch(() => {})
      },

    },
  }
</script>

<style lang="scss" scoped>
.tab-container {
  background: #FFFFFF;
}

.list-container {
  padding: 0 20rpx;
  box-sizing: border-box;
  .item {
    @include zj-card;
    padding: 20rpx;
    margin-top: 20rpx;
    .top {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        image {
          width: 88rpx;
          height: 88rpx;
          border-radius: 50%;
        }
        .info {
          margin-left: 20rpx;
          .name {
            font-size: 28rpx;
          }
          .text {
            font-size: 24rpx;
            color: $sec-font;
            margin-top: 12rpx;
          }
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .status {
          color: $minor-color;
          font-size: 28rpx;
        }
        .tag {
          margin-top: 10rpx;
          display: flex;
          ::v-deep .u-tag {
            margin-left: 12rpx;
          }
        }
      }
    }
    .goods {
      display: flex;
      padding: 20rpx 0;
      image {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
      }
      .right {
        flex: 1;
        .name {
          font-size: 28rpx;
        }
        .text {
          font-size: 24rpx;
          color: $sec-font;
          margin-top: 8rpx;
        }
        .info {
          display: flex;
          margin-top: 12rpx;
          view {
            flex: 1;
            &:nth-child(3) {

            }
          }
          .price {
            font-size: 28rpx;
            color: $minor-color;
            font-weight: 600;
          }
          .num {
            font-size: 28rpx;
            margin-left: 12rpx;
            text-align: right;
            color: $sec-font;
            text {
              color: $main-font;
              margin-left: 8rpx;
              font-weight: 500;
            }
          }
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #eaeaea;
      padding: 20rpx 0;
      &:last-child {
        padding-bottom: 0;
      }
      .left {
        font-size: 28rpx;
      }
      .right {
        display: flex;
        ::v-deep .u-button {
          margin-left: 20rpx;
        }
      }
    }
  }
}
</style>
