<!--
  @description: 我的订单
  @Modifier：
  @routerPath: /personalCenter/myorder
  @date：
-->
<template>
  <div v-if="isRouterAlive">
    <div class="shopmall-page-title">
      {{ pageTitle }}
    </div>
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="formitInfo" :inline="true" :model="searchForm">
          <el-form-item label="供应商名称">
            <el-input v-model.trim="searchForm.supplier" placeholder="请输入供应商名称" @keyup.enter.native="searchList" />
          </el-form-item>
          <el-form-item label="订单号/商品信息">
            <el-input v-model.trim="searchForm.orderValue" placeholder="输入订单号/商品信息" @keyup.enter.native="searchList" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
              v-model="searchForm.createDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleCreateTime"
            />
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click.native="searchList">
          搜索
        </el-button>
        <el-button type="gray" @click.native="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="p0-16 mt10">
      <div>
        <el-tabs v-model="orderData.activeName" @tab-click="tabClick">
          <el-tab-pane
            v-for="(item,index) in tabsList"
            :key="index"
            :name="item.index"
          >
            <span slot="label">
              {{ item.name }}
              <template v-if="item.num>0">
                （{{ item.num }}）
              </template>
              <el-popover
                v-if="index===tabsList.length-1"
                placement="top-start"
                popper-class="hint"
                offset="5"
                trigger="hover"
              >
                <ul v-for="(sitem,sindex) in popoverContent" :key="sindex" class="hint">
                  <li>
                    <p class="title">{{ sitem.title }}:</p>
                    <p class="value">{{ sitem.value }}</p>
                  </li>
                </ul>
                <el-button slot="reference" type="info" class="prompt">
                  <i class="iconfont icon-qm" />
                </el-button>
              </el-popover>
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="list-title">
        <div>订单详情</div>
        <div>金额（元）</div>
        <div>收货人</div>
        <div>{{ tabsList[orderData.activeIndex].statusTitle }}</div>
        <div>操作</div>
      </div>
      <!--全部订单-->
      <all-order v-if="orderData.activeName==='0'" ref="allchild" :order-data="orderData" :order-list="orderList" :loading="loading" @updateOrderNum="getOrdersList('00')" />
      <!--待审核订单-->
      <audit-order v-if="orderData.activeName === '6'" ref="auditchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" @updateOrderNum="getOrdersList('00')" />
      <!--待发货订单-->
      <send-order v-if="orderData.activeName === '2'" ref="sllchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" />
      <!--待收货订单-->
      <receive-order v-if="orderData.activeName === '3'" ref="rllchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" @updateOrderNum="getOrdersList('00')" />
      <!--已完成订单-->
      <payment-order v-if="orderData.activeName === '1'" ref="pllchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" @updateOrderNum="getOrdersList('00')" />
      <!--待评价订单-->
      <evaluate-order v-if="orderData.activeName === '4'" ref="evlchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" @updateOrderNum="getOrdersList('00')" />
      <!--已评价订单-->
      <additional-order v-if="orderData.activeName === '7'" ref="additionalchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" @updateOrderNum="getOrdersList('00')" />
      <!--已取消/已驳回-->
      <cancellation-order v-if="orderData.activeName === '5'" ref="canchild" :order-data="orderData" :order-list="orderList" :loading="loading" @watchPage="watchPage" />
      <!--审核通过的订单-->
      <passed-order v-if="orderData.activeName === '9'" ref="passedchild" :order-data="orderData" :order-list="orderList" :loading="loading" @updateOrderNum="getOrdersList('00')" />
      <!--已驳回订单-->
      <reject-order v-if="orderData.activeName === '8'" ref="rejectchild" :order-data="orderData" :order-list="orderList" :loading="loading" @updateOrderNum="getOrdersList('00')" />
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="getOrdersList" />
    </div>
  </div>
</template>

<script>
/* api*/
import { getOrdersNums, getOrders } from '@/api/shoppingmall/order'
/* 公共方法*/
import { filterObj, restoreInitialValue } from '@assets/js/utils'// 常用方法
import { ListMixin } from '@/mixins/ListMixin'// 分页
/* 组件*/
import allOrder from './allOrder'
import auditOrder from './auditOrder'
import PaymentOrder from './paymentOrder'
import receiveOrder from './receiveOrder'
import sendOrder from './sendOrder'
import evaluateOrder from './evaluateOrder'
import additionalOrder from './additionalOrder' // 已评价订单
import cancellationOrder from './cancellationOrder' // 取消订单列表
import passedOrder from './passedOrder' // 审核通过列表
import rejectOrder from './rejectOrder' // 已驳回列表
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  components: {
    pagination, // 分页组件
    'all-order': allOrder, // 全部订单
    'audit-order': auditOrder, // 待审核
    'send-order': sendOrder, // 待发货
    'receive-order': receiveOrder, // 待收货
    'payment-order': PaymentOrder, // 已完成
    'evaluate-order': evaluateOrder, // 待评价订单
    'additional-order': additionalOrder, // 已评价订单
    'cancellation-order': cancellationOrder, // 已取消/已驳回订单列表
    'passed-order': passedOrder, // 审核通过
    'reject-order': rejectOrder// 已驳回
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: false,
      orderData: {
        activeName: '0', // 默认选中tabList index值
        activeIndex: 0, // 当前选中tab下标
        type: this.$route.meta.type // 00 我的订单 01订单查看
      },
      popoverContent: [
        { title: '已取消', value: '采购人主动取消的订单' },
        { title: '已驳回', value: '审核驳回的订单' }
      ],
      tabsList: [
        { index: '0', name: '全部订单', num: null, statusTitle: '全部状态' },
        { index: '6', name: '待审核', num: null, statusTitle: '待审核' },
        { index: '2', name: '待发货', num: null, statusTitle: '待发货' },
        { index: '3', name: '待收货', num: null, statusTitle: '待收货' },
        { index: '1', name: '已完成', num: null, statusTitle: '已完成' },
        { index: '4', name: '待评价', num: null, statusTitle: '待评价' },
        { index: '7', name: '已评价', num: null, statusTitle: '已评价' },
        { index: '5', name: '已取消/已驳回', num: null, statusTitle: '已取消/已驳回' }
        // { index: '9', name: '审核通过', num: null, statusTitle: '审核通过' },
        // { index: '8', name: '已驳回', num: null, statusTitle: '已驳回' }
      ],
      searchForm: {
        createDate: [], // 订单日期
        createEndDate: '', // 下单结束时间
        createStartDate: '', // 下单开始时间
        id: '', // 订单id -后端自用字段
        orderValue: '', // 管理后台order请求入参-商品编号，订单号等
        status: '0', // 管理后台order请求入参-0 全部 1 待付款 2 待发货 3 待收货 00管理员端
        supplier: '', // 供应商名称
        type: '' // 两个菜单区分标识：s代表订单查看 s=null 代表我的订单
      },
      orderList: [], // 订单列表数据
      isRouterAlive: true // 重新加载
    }
  },
  computed: {
    // 标题
    pageTitle() {
      if (this.orderData.type === '01') {
        return '订单审批'
      } else {
        return '我的订单'
      }
    }
  },
  watch: {
    $route: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.handleTabList()
      }
    }
  },
  created() {
    this.handleTabList()
  },
  methods: {
    // 处理搜索时间格式
    handleCreateTime(val) {
      if (val) {
        this.searchForm.createStartDate = this.$Moment(val[0]).format(this.momentDate)// 创建开始时间
        this.searchForm.createEndDate = this.$Moment(val[1]).format(this.momentDate)// 创建结束时间
      }
    },
    // 其它tab跳转到全部订单
    watchPage(val) {
      this.orderData.activeName = val
      this.orderData.activeIndex = val
      this.handleTabList()
    },
    // 区分订单审批 和我的订单
    handleTabList() {
      if (this.orderData.type === '01') {
        this.tabsList = [
          { index: '0', name: '全部订单', num: null, statusTitle: '全部状态' },
          { index: '6', name: '待审核', num: null, statusTitle: '待审核' },
          { index: '9', name: '审核通过', num: null, statusTitle: '审核通过' },
          { index: '8', name: '已驳回', num: null, statusTitle: '已驳回' }
        ]
        this.searchForm.type = 's'
      }
      // 判断是否从详情跳转回来
      if (this.$route.query.menuIndex) {
        this.orderData.activeIndex = this.$route.query.menuIndex
        this.orderData.activeName = this.tabsList[this.orderData.activeIndex].index
      }
      // type 00 初始化加载 01搜索重置、点击tab加载
      this.getOrdersList('00')
    },
    // 点击搜索
    searchList() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.getOrdersList('00')
    },
    // 重置
    resetList() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      restoreInitialValue(this.searchForm)
      this.getOrdersList('00')
    },
    // 获取我的订单分页列表
    getOrdersList(type) {
      const params = this.getQueryParams()// 查询条件
      params.status = this.tabsList[this.orderData.activeIndex].index
      delete params.createDate
      this.loading = true
      getOrders(params).then(res => {
        this.loading = false
        this.orderList = res.data.records
        this.paginationData.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
      this.getOrdersNum(params, type)
    },
    // 获取我的订单分页列表订单总数
    getOrdersNum(params, type) {
      // 初始化加载循环调用
      if (type === '00') {
        this.tabsList.map((item, k) => {
          const paramsData = {
            ...params,
            status: this.tabsList[k].index
          }
          getOrdersNums(paramsData).then(res => {
            this.tabsList[k].num = res.data
          }).catch(() => {
          })
        })
      } else {
        // 点击tab只查询当前tab
        getOrdersNums(params).then(res => {
          this.tabsList[this.orderData.activeIndex].num = res.data
        }).catch(() => {
        })
      }
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 切换tab
    tabClick(tab) {
      const index = Number(tab.index)
      this.searchForm.status = this.tabsList[index].index
      this.orderData.activeIndex = index
      this.paginationData.pageNo = 1
      // this.getOrdersList('01')
      // 暂时获取全部
      this.getOrdersList('00')
    }
  }
}
</script>

<style scoped lang="less">
.list-title {
  height: 40px;
  margin-top: 10px;
  color: #7F7F7F;
  font-size: 12px;
  line-height: 40px;
  background: #f5f5f5;
  display: flex;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  div {
    text-align: center;
    &:nth-child(1) {
      flex: 6;
    }

    &:nth-child(2) {
      flex: 1;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
    }

    &:nth-child(3) {
      flex: 1;
      border-right: 1px solid transparent;
    }

    &:nth-child(4) {
      flex: 1;
    }
    &:nth-child(5) {
      flex: 1;
      border-left: 1px solid transparent;
    }
  }
}
</style>
