<template>
  <div class="app-main app-content">
    <app-tabs
      :tabs="tabs"
      :isFixed="true"
      :currentTab="tabIndex"
      :height="100"
      @change="change"
      itemWidth="20%"
    />
    <div class="list-wrap">
      <block v-if="!$util.isEmpty(list.data)">
        <div
          class="list"
          v-for="(item, index) in list.data"
          :key="index"
          @click="pageTo({
					url: '/admin/order/detail',
					query: {
						id: item.id
					}
				})"
        >
          <div class="list-top flex-center-between">
            <div class="app-color-3">编号：{{ item.sendNum }}</div>
            <div :class="['app-price',{'app-green':item.status==5}]">{{ item.status | constantfilter('ORDER_STATUS') }}</div>
          </div>
          <div class="list-blo">
            <block v-if="!$util.isEmpty(item.goodsInfoList)">
              <list-module
                v-for="(items, subIndex) in item.goodsInfoList"
                :key="subIndex"
                :info="items"
              />
            </block>
          </div>
          <div class="list-bottom">
            <div>
              <span class="freight-text">运费：￥{{ item.sendCost }}</span>
              <span>金额：</span>
              <span class="app-size-30 app-bold">¥{{ item.actPrice }}</span>
            </div>

            <div class="list-button">
              <template v-if="item.status == 0">
                <div
                  class="admin-button-com default"
                  @click.stop
                >自取</div>
                <div
                  class="admin-button-com default"
                  @click.stop
                >发货</div>
              </template>
              <template v-else-if="item.status == 4"></template>
              <template v-else-if="item.status == 6">
                <div
                  v-if="item.sendType == 3"
                  class="admin-button-com default"
                  style="color: #dddddd;border-color:#dddddd;"
                >已退款</div>
              </template>
              <template v-else-if="item.status == 5">
                <div
                  v-if="item.sendType != 1"
                  class="admin-button-com default"
                  @click.stop="seeSendFn(item)"
                >配送详情</div>
              </template>
              <template v-else>
                <template v-if="item.currentFlow == 1">
                  <div
                    class="admin-button-com"
                    @click.stop="freeShippingFn(item, index)"
                  >自取</div>
                  <div
                    class="admin-button-com"
                    @click.stop="pageTo({url: '/admin/order/ship',query: {id: item.id,pageStatus: 0}})"
                  >发货</div>
                </template>
                <template v-else>
                  <div
                    class="admin-button-com"
                    @click.stop="pageTo({url: '/admin/order/ship',query: {id: item.id,pageStatus: 0}})"
                  >发货</div>
                </template>
              </template>
            </div>
          </div>
        </div>
      </block>
      <block v-else>
        <app-wrapper-empty
          title="暂无数据"
          :is-empty="$util.isEmpty(list.data)"
        />
      </block>
    </div>
    <!-- 免发货弹窗 -->
    <modal-module
      :show="freeShipModal"
      @cancel="modalCancel"
      @click="freeShipModalClick"
      content="确认已自取？"
      color="#333"
      :size="32"
      padding="30rpx 30rpx"
    ></modal-module>

    <!-- 选取分类 -->
    <modal-module
      :show="classifyModal"
      :maskClosable="false"
      @cancel="modalCancel"
      @click="confirmClassify"
      title="订单分类"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="upload-confirm-wrap">
          <!-- 选择分类 -->
          <div class="sel-wrap">
            <div class="sel-tit">类型</div>
            <div class="sel-btn">
              <block
                v-for="(item, index) in categoryData"
                :key="index"
              >
                <button
                  class="admin-button-com"
                  :class="[classifyForm.categoryId == item.id ? '' : 'default']"
                  @click="selCategoryFn(item)"
                >{{ item.categoryName || '暂无' }}</button>
              </block>
            </div>
          </div>
          <!-- 选择用途 -->
          <div class="sel-wrap">
            <div class="sel-tit">用途</div>
            <div class="sel-btn">
              <block
                v-for="(item, index) in usageData"
                :key="index"
              >
                <button
                  class="admin-button-com"
                  :class="[classifyForm.usageId == item.id ? '' : 'default']"
                  @click="selUsageFn(item)"
                >{{ item.usageName || '暂无' }}</button>
              </block>
            </div>
          </div>
        </div>
      </template>
    </modal-module>
  </div>
</template>

<script>
import AppTabs from "@/components/plugin/tabs";
import ListModule from "@/components/module/app-order-list";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
import { getCategory, getUsage } from '@/utils/config'
import { list } from "@/mixins";
import { mapGetters } from 'vuex';
import { orderClass } from '@/api/order'
import { getListB, freeShipping } from "@/api/order";
export default {
  name: "order-list",
  components: {
    ListModule,
    AppTabs,
    AppWrapperEmpty,
    ModalModule,
  },
  mixins: [list],
  data () {
    return {
      tabIndex: 0,
      classifyModal: false,
      tabs: [
        {
          name: "全部",
          value: 0
        },
        {
          name: "待付款",
          value: 0
        },
        {
          name: "待配送",
          value: 0
        },
        {
          name: "配送中",
          value: 0
        },
        {
          name: "已完成",
          value: 0
        }
      ],
      operateIndex: null,
      operateData: {},
      // 免发货
      freeShipModal: false,
      classifyForm: {
        categoryId: '',
        usageId: ''
      }
    };
  },
  onPullDownRefresh () {
    this.resetList();
    this._list().then(res => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom () {
    if (!this.list.finished) {
      this._list().then(res => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  computed: {
    ...mapGetters({ categoryData: 'getCategory' }),
    ...mapGetters({ usageData: 'getUsage' })
  },
  mounted () {
    getCategory()
    getUsage()
  },
  onLoad: function () {},
  onShow () {
    let tabIndex = uni.getStorageSync("switchTabQuery") || null;
    if (tabIndex) {
      uni.removeStorageSync("switchTabQuery");
      this.tabIndex = parseInt(tabIndex.tabIndex);
    }
  },
  methods: {
    init () {
      if(!this.AUTHORITY_SHOW) {
        this._list();
      }
    },
    _list () {
      let status = JSON.parse(JSON.stringify(this.tabIndex));
      return getListB({
        status: status,
        search: "",
        page: this.list.page
      }).then(res => {
        this.completes(res);
        if (this.$util.isEmpty(res.data)){
          return false
        } 
        this.tabs[0].value = res.data.shop.totalOrder;
        this.tabs[1].value = res.data.shop.unPayOrder;
        this.tabs[2].value = res.data.shop.unSendOrder;
        this.tabs[3].value = res.data.shop.sendingOrder;
        this.tabs[4].value = res.data.shop.finishOrder;
      });
    },
    change (e) {
      if (this.tabIndex == e.index) {
        return false;
      } else {
        this.tabIndex = e.index;
        this.resetList();
        this._list();
      }
    },
    // 免发货
    freeShippingFn (item, index) {
      this.operateIndex = index;
      this.operateData = item;
      this.freeShipModal = true;
    },
    // 免发货
    freeShipModalClick (e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this.$set(this.list.data[this.operateIndex], "status", 5);
        this.$set(this.list.data[this.operateIndex], "sendType", 1);
        freeShipping({ id: this.list.data[this.operateIndex].id }).then(res => {
          this.$msg("操作成功！");
          this.modalCancel();
        });
      }
    },
    // 查看配送
    seeSendFn (item) {
      this.$util.pageTo({
        url: "/admin/order/ship",
        query: {
          id: item.id,
          pageStatus: 5
        }
      });
    },
    // 关闭弹窗
    modalCancel () {
      this.freeShipModal = false;
      this.classifyModal = false;
    },
    classifyOrder (id) {
      this.classifyModal = true
      this.currentOrderId = id;
    },
    confirmClassify (e) {
      if (e.index === 0) {
        this.modalCancel()
      } else {
        orderClass({
          id: this.currentOrderId,
          ...this.classifyForm
        }).then(res => {
          this.classifyModal = false;
          this.$msg('分类成功！')
        })
      }
    },
    selCategoryFn (item) {
      this.classifyForm.categoryId = item.id
    },
    selUsageFn (item) {
      this.classifyForm.usageId = item.id
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

<style lang="scss" scoped>
.app-content {
  padding-top: 120px;
  padding-bottom: 1px;
  .list-wrap {
    .list {
      padding: 0 30px;
      background-color: #fff;
      margin-bottom: 20px;
      .list-top,
      .list-bottom {
        padding: 26px 0;
        border-bottom: 1px solid $borderColor;
        color: $fontColor3;
        .app-bold {
          color: #333;
        }
        .freight-text {
          margin-right: 60px;
        }
        .app-green {
          color: green;
        }
      }
      .list-bottom {
        & > div {
          @include disFlex(center, flex-end);
        }
        .list-button {
          margin-top: 26px;
          .admin-button-com {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
// 弹窗
.upload-confirm-wrap {
  max-height: 600px;
  overflow-y: auto;
  .modal-tit {
    @include disFlex(center, center);
    font-size: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
    .iconfont {
      color: #09bb07;
      margin-right: 20px;
      font-size: 50px;
    }
  }
  //  分类
  .sel-wrap {
    color: $fontColor2;
    font-size: 32px;
    .sel-tit {
      text-align: left;
    }
    .sel-btn {
      @include disFlex(center, flex-start);
      flex-wrap: wrap;
      padding: 10px 0 40px;
      .admin-button-com {
        // width: 170px;
        margin-right: 20px;
        margin-top: 20px;
        padding-top: 16px;
        padding-bottom: 16px;
        border-radius: 4px;
        // &:nth-child(3n + 1) {
        // 	margin-left: 0;
        // }
      }
    }
  }
}
</style>