<template>
  <layout-app
    :title="$route.params.owner === 'sell' ? '我的出售' : '我的订单'"
    class="list-page"
  >
    <status-nav :status="status" :owner="owner" @select="onStatusChange"/>
    <div class="content-wrapper">
      <scroll
        @pulling-up="fetchData"
        @pulling-down="onRefresh"
        :options="options"
        :data="viewOrderList"
        class="order-list-scroll-wrap"
        ref="scroll"
      >
        <ul class="list-wrapper">
          <li v-for="order in viewOrderList" :key="order.orderCode">
            <order-item-header :order="order"/>
            <order-item :order="order"/>
            <!-- 订单操作 -->
            <div class="footer-wrapper">
              <count-down :leftTime="order.leftTime"/>
              <order-actions
                class="actions"
                pageName="list"
                :order="order"
                @on-action="
                  action => {
                    onAction({ action, order });
                    onInSaleOrderAction({ action, order });
                  }
                "
                @on-video="params => onVideoHandle(params)"
              />
            </div>
            <div class="video-wrapper">
              <VideoPlayer
                :ref="order.orderCode"
                class="video-player"
                :source="order.appraiseVideoUrl"
              ></VideoPlayer>
            </div>
          </li>
        </ul>
        <empty-list
          @touch.prevent
          class="empty-wrapper"
          tip="这里什么都没有..."
          v-show="orderStatus.isShowEmpty"
        />
      </scroll>
    </div>
  </layout-app>
</template>

<script>
import { Scroll } from 'cube-ui';
import { createNamespacedHelpers } from 'vuex';

import OrderItem from './components/order-item';
import StatusNav from './components/status-nav';
import OrderItemHeader from './components/order-item-header';
import VideoPlayer from './components/video-player';

import EmptyList from 'components//ufo-no-item';

import OrderActions from '../components/order-actions';
import CountDown from '../components/count-down';

import orderActionMixin from '../mixin/order-action';
import orderInSaleActionMixin from '../mixin/order-in-sale-action';
import { orderStatusKey, getOrderStatus } from 'constants/order-constants';

const STORE_PATH = 'order/orderList';

const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
  STORE_PATH
);

export default {
  // 订单操作
  mixins: [orderActionMixin, orderInSaleActionMixin],
  components: {
    Scroll,
    OrderItem,
    StatusNav,
    OrderItemHeader,
    EmptyList,
    OrderActions,
    CountDown,
    VideoPlayer
  },
  props: {
    owner: String,
    status: Number
  },
  computed: {
    ...mapState(['orderListByType']),
    orderStatus() {
      return this.orderListByType[orderStatusKey(this.owner, this.status)];
    },
    viewOrderList() {
      return this.orderStatus.orderList;
    },
    options() {
      const options = {
        pullUpLoad: this.orderStatus.pullUpLoad,
        bounce: !this.orderStatus.isShowEmpty
      };
      // if (this.$refs.scroll && this.$refs.scroll.scroll) {
      options.pullDownRefresh = this.orderStatus.isShowEmpty
        ? false
        : { txt: '更新成功' };
      // }

      return options;
    }
  },

  // 获取订单数据
  asyncData({ store, router }) {
    let { owner, status } = router.params;

    status = getOrderStatus(owner, status);

    store.commit(`${STORE_PATH}/resetData`, { owner, status });
    return store.dispatch(`${STORE_PATH}/fetchOrderList`, { owner, status });
  },
  methods: {
    ...mapActions(['fetchOrderList', 'confirmReceipt']),
    ...mapMutations(['resetData']),
    fetchData() {
      this.fetchOrderList({
        owner: this.owner,
        status: this.status
      });
    },
    onRefresh() {
      this.resetData({
        owner: this.owner,
        status: this.status
      });
      this.fetchData();
    },
    onVideoHandle({ videoUrl, orderCode }) {
      if (!videoUrl) {
        return;
      }
      const $video = this.$refs[`${orderCode}`][0];

      if ($video) {
        $video.parentHandleclick();
      }
    },
    onStatusChange(status) {
      this.$router.replace({
        name: this.$route.name,
        params: {
          owner: this.owner,
          status
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.list-page /deep/ .layout-context {
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1 0 0;
  overflow: hidden;

  .footer-wrapper {
    display: flex;
    margin-top: 40px;

    .actions {
      flex: 1;
    }
  }

  .empty-wrapper {
    margin: 20vh 0;
  }

  .order-list-scroll-wrap {
    .list-wrapper {
      li {
        padding: 40px 40px 0;
        border-bottom: 1px solid #eee;
      }

      & :last-child {
        border-bottom: 0;
      }
    }
  }

  .video-wrapper {
    overflow: hidden;
  }

  .video-player {
    display: block;
    height: 40px;
    opacity: 0;
  }
}
</style>