<template>
  <layout-app :title="$route.params.owner === 'sell' ? '我的出售' : '我的订单'">
    <status-nav />
    <div class="content-wrapper">
      <scroll
        @pulling-up="fetchData"
        :options="options"
        :data="orderList"
        class="order-list-scroll-wrap"
        v-show="!isShowEmpty"
      >
        <ul class="list-wrapper">
          <li v-for="order in orderList" :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"
                :order="order"
                @on-action="action => onAction({ action, order })"
                @on-video="params => onVideoHandle(params)"
              />
            </div>
            <div ref="videoWrapper">
              <VideoPlayer
                :ref="order.orderCode"
                class="play-video"
                :source="order.appraiseVideoUrl"
              ></VideoPlayer>
            </div>
          </li>
        </ul>
      </scroll>

      <empty-list class="empty-wrapper" tip="这里什么都没有..." v-show="isShowEmpty" />
    </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 "./mixins/order-action";

const STORE_PATH = "order/orderList";

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

export default {
  // 订单操作
  mixins: [orderActionMixin],
  components: {
    Scroll,
    OrderItem,
    StatusNav,
    OrderItemHeader,
    EmptyList,
    OrderActions,
    CountDown,
    VideoPlayer
  },
  computed: {
    ...mapState(["orderList", "pullUpLoad", "isShowEmpty"]),
    options: function() {
      return {
        pullUpLoad: this.pullUpLoad
      };
    }
  },

  // 获取订单数据
  asyncData({ store, router }) {
    const { status } = router.params;
    store.commit(`${STORE_PATH}/resetData`);
    store.commit(`${STORE_PATH}/setRouteParamStatus`, status);
    return store.dispatch(`${STORE_PATH}/fetchOrderList`, router.params);
  },

  methods: {
    ...mapActions(["fetchOrderList", "confirmReceipt"]),
    fetchData() {
      this.fetchOrderList(this.$route.params);
    },
    onVideoHandle({ videoUrl, orderCode }) {
      if (!videoUrl) {
        return;
      }
      const $video = this.$refs[`${orderCode}`][0];
      if ($video) {
        $video.parentHandleclick();
      }
    }
  },

  mounted() {
    if (this.$yoho.isAndroid) {
      this.$refs.videoWrapper.forEach($vnode => {
        $vnode.style.position = "absolute";
        $vnode.style.top = "-1000px";
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrapper {
  height: calc(100vh - 100px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-box-orient: vertical;

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

    .actions {
      flex: 1;
    }
  }

  .empty-wrapper {
    margin: auto 0;
    position: absolute;
    top: 0;
    bottom: 0;
  }

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

      .play-video {
        display: inline-block;
        height: 10px;
        opacity: 0;
      }

      & :last-child {
        border-bottom: 0;
      }
    }
  }
}
</style>