<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div style="margin-bottom:15px">
      <el-date-picker v-model="listQuery.time" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="filter-item" style="width:400px" />
      <el-input v-model="listQuery.order_no" placeholder="订单编号" class="filter-item filter-input" style="display: inline-block; width: 240px;" @keydown.native.enter="listQuery.page_index = 1;getList()" />
      <el-input v-model="listQuery.search_name" placeholder="下单人昵称/姓名/手机号" class="filter-item filter-input" style="display: inline-block; width: 240px;" @keydown.native.enter="listQuery.page_index = 1;getList()" />
      <el-select
        v-model="listQuery.store_id"
      >
        <el-option label="全部" value="" />
        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button type="primary" icon="el-icon-search" class="filter-item" @click="listQuery.page_index = 1;getList()">搜索</el-button>
      <el-button type="primary" :loading="downloadLoading" icon="el-icon-document" class="filter-item" @click="exportOrder">导出</el-button>
    </div>
    <el-table :data="tableList" :header-cell-style="{ background: '#f8fbfc' }" border stripe @selection-change="orderMulSelect">
      <el-table-column type="selection" width="50" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="order_num" label="订单编号" width="210">
        <template slot-scope="{ row }">
          <el-button type="text" @click="toOrderWxamine(row)">{{ row.order_num }}</el-button>
          <!-- <span>{{ row.order_num }}</span> -->
          <br>
          <p v-if="row.order_type === 1" class="tag sub-tag">代下单</p>
          <p v-if="row.is_back === 1" class="tag return-tag">退回</p>
        </template>
      </el-table-column>
      <el-table-column prop="get_user" label="下单人昵称" align="center" width="150" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">{{ row.get_user.nickname }}</template>
      </el-table-column>
      <el-table-column prop="get_user" label="下单人姓名" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">{{ row.get_user.realname }}</template>
      </el-table-column>
      <el-table-column prop="created_at" align="center" label="下单时间" width="160" :show-overflow-tooltip="true" />
      <el-table-column prop="status" align="center" label="订单状态" width="110" :show-overflow-tooltip="true">
        <template slot-scope="{ row: { is_deleted, status } }">
          <el-tag v-if="is_deleted === 1" type="info">已作废</el-tag>
          <el-tag v-else :color="orderStatus(status).color" style="color:#ffffff;">{{ orderStatus(status).name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="get_store"
        label="体验店订单"
        width="150"
        align="center"
      >
        <span slot-scope="{ row: { get_store } }">{{ (get_store && get_store.name) || '' }}</span>
      </el-table-column>
      <el-table-column prop="pay_status" align="center" label="支付状态" width="90" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">
          <span :style="`color: ${payStatus(row.pay_status).color}`">{{ payStatus(row.pay_status).name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="数量合计" align="center" width="80" :show-overflow-tooltip="true" />
      <el-table-column prop="money" label="订单总额" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">{{ `￥${row.money}` }}</template>
      </el-table-column>
      <el-table-column prop="get_address" label="收货人" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">{{ row.get_address && row.get_address.username }}</template>
      </el-table-column>
      <el-table-column prop="get_address" label="联系方式" align="center" width="120" :show-overflow-tooltip="true">
        <template slot-scope="{ row }">{{ row.get_address && row.get_address.mobile }}</template>
      </el-table-column>
      <el-table-column prop="get_address" label="收货地址" align="center" width="200" :show-overflow-tooltip="true">
        <template slot-scope="{ row: { get_address } }">{{ get_address && get_address.province+get_address.city+get_address.town+get_address.address }}</template>
      </el-table-column>
      <el-table-column prop="remark" label="订单备注" align="center" width="160" :show-overflow-tooltip="true" />
    </el-table>
    <!-- 分页 -->
    <pagination :total="tableTotal" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
  </div>
</template>
<script>
import { getList, downOrder } from '@/api/order/store'
import { getStore } from '@/api/order/list'
import { orderStatus, payStatus } from '@/filters/common'
import { formatter } from '@/filters/index'
export default {
  data() {
    return {
      loadingFull: false,
      downloadLoading: false,
      listQuery: {
        order_no: '',
        page_index: 1,
        page_size: 20,
        time: '',
        search_name: '',
        store_id: ''
      },
      storeList: [],
      tableList: [],
      tableTotal: 0,
      chooseList: []
    }
  },
  created() {
    this.orderStatus = orderStatus
    this.payStatus = payStatus
    this.getStore()
    this.getList()
  },
  methods: {
    // 订单编号
    toOrderWxamine(row) {
      this.$router.push({
        name: 'order_examine',
        params: { order: row.order_num }
      })
    },
    async getList() {
      this.loadingFull = true
      const { page_index, page_size, order_no, search_name, store_id, time } = this.listQuery
      await getList({
        page_index, page_size, order_no, search_name, store_id,
        start_time: time && time.length > 0 ? time[0] : '',
        end_time: time && time.length > 0 ? time[1] : ''
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tableList = res.data.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    async getStore() {
      this.loadingFull = true
      await getStore().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.storeList = res.data.list
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    // 导出
    async exportOrder() {
      if (this.chooseList.length) {
        this.$request(downOrder({ id: this.chooseList.map(e => e.id) }), ({ list }) => {
          import('@/vendor/Export2Excel').then(excel => {
            excel.export_json_to_excel({
              header: Object.keys(list[0]),
              data: list.map(listItem => Object.keys(list[0]).map(j => listItem[j])),
              filename: `${formatter(new Date(), 'yyyy-MM-dd')}订单`,
              bookType: 'xlsx'
            })
          })
        })
      } else {
        let query = {}
        const { order_no, page_index, page_size, search_name, time, store_id } = this.listQuery
        query = {
          order_no, page_index, page_size, search_name, store_id,
          start_time: time.length > 0 ? time[0] : '',
          end_time: time.length > 0 ? time[1] : ''
        }
        this.$request(downOrder(query), ({ list }) => {
          import('@/vendor/Export2Excel').then(excel => {
            excel.export_json_to_excel({
              header: Object.keys(list[0]),
              data: list.map(listItem => Object.keys(list[0]).map(j => listItem[j])),
              filename: `${formatter(new Date(), 'yyyy-MM-dd')}体验店订单`,
              bookType: 'xlsx'
            })
          })
        })
      }
    },
    orderMulSelect(val) {
      this.chooseList = val
    }
  }
}
</script>
<style lang="scss" scoped>
  .tag {
    padding: 2px;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1;
    border-radius: 2px;
    font-family: simsun;
    color: #fff;
    display: inline;
    cursor: pointer;
  }

  .sub-tag {
    font-size: 12px;
    color: #00a7f2;
    border: 1px solid rgba(0,167,242,.4);
  }

  .return-tag {
    color: #8c7ee4;
    border: 1px solid rgba(140,123,231,.4);
    display: inline-block;
  }
</style>
