<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div style="margin-bottom:15px">
      <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.activity_id" style="width: 400px">
        <el-option v-for="item in activitys" :key="item.id" :label="item.title" :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" icon="el-icon-document" class="filter-item" @click="exportOrder">导出</el-button>
    </div>
    <el-table :data="list" :header-cell-style="{ background: '#f8fbfc' }" border stripe>
      <el-table-column prop="u_nickname" label="备注昵称" align="center" />
      <el-table-column prop="u_name" label="下单人姓名" align="center" />
      <el-table-column prop="u_name" label="下单人手机号" align="center" />
      <el-table-column prop="name" label="收货人姓名" align="center" />
      <el-table-column prop="mobile" label="收货人手机号" align="center" />
      <el-table-column prop="address" label="收货人地址" align="center">
        <template slot-scope="{ row }">{{ row.province+row.city+row.town+row.address }}</template>
      </el-table-column>
      <el-table-column label="订单信息" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="seeOrderInfo(row)">查看订单</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="gift" label="赠品信息" align="center" />
    </el-table>
    <!-- 分页 -->
    <pagination :total="total" :limit="listQuery.page_size" :page="listQuery.page_index" @pagination="changePagination" @update:limit="changePagination" />
    <el-dialog title="订单详情" :visible.sync="dialogOrderInfo">
      <div
        v-for="(v, i) in orderInfo"
        :key="i"
        class="order_info_container"
      >
        <p class="title">订单{{ i+1 }}: {{ v.order_num }}</p>
        <ul v-for="(item, index) in v.get_order_detail" :key="index" class="main">
          <li>{{ `${item.goods_name}-${item.goods_size}-${item.num}(${item.goods_unit})` }}</li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList, getOrderInfo, exportOrder } from '@/api/order/merge'
import { activityList } from '@/api/giftB'
export default {
  name: 'MergeOrder',
  data() {
    return {
      listQuery: {
        search_name: '',
        activity_id: '',
        page_index: 1,
        page_size: 20
      },
      list: [],
      total: 0,
      activitys: [],
      loadingFull: false,
      dialogOrderInfo: false,
      orderInfo: []
    }
  },
  watch: {
    dialogOrderInfo(a) {
      if (!a) {
        this.orderInfo = []
      }
    }
  },
  created() {
    this.activityList(() => {
      this.getList()
    })
  },
  methods: {
    exportOrder() {
      this.loadingFull = true
      exportOrder({
        search_name: this.listQuery.search_name,
        activity_id: this.listQuery.activity_id
      }).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          let list = Object.values(res.data)
          if (list.length === 0) {
            this.$message.error('没有可导出数据')
          } else {
            this.loadingFull = true
            import('@/vendor/Export2Excel').then(excel => {
              const header = ['备注昵称', '下单人姓名', '下单人手机号', '收货人姓名', '收货人手机号', '收货人地址', '赠品信息', '手环', '项链', '订单信息']
              list = list.map(i => ({
                '收货人姓名': i.name,
                '收货人手机号': i.mobile,
                '收货人地址': `${i.province || ''}${i.city || ''}${i.town || ''}${i.address}`,
                '备注昵称': i.name,
                '下单人姓名': i.u_name,
                '下单人手机号': i.u_mobile,
                '订单信息': Object.keys(i.goods).map(k => {
                  let str = `订单: ${k}(`
                  str += i.goods[k].join(';')
                  str += ')'
                  return str
                }),
                '赠品信息': i.gift,
                '手环': i.shouhuan,
                '项链': i.xianglian
              }))
              excel.export_json_to_excel({
                header: header,
                data: list.map(item => header.map(j => item[j])),
                filename: `${new Date().toLocaleDateString()}快递单导出`,
                bookType: 'xlsx',
                isCSV: true
              })
              this.loadingFull = false
            })
          }
        } else {
          this.loadingFull = false
          this.$message.error('导出失败')
        }
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    seeOrderInfo(row) {
      const { user_id, address_id } = row
      getOrderInfo({
        address_id,
        user_id,
        activity_id: this.listQuery.activity_id
      }).then(res => {
        if (res.code === 200) {
          this.orderInfo = res.data
          this.dialogOrderInfo = true
        } else {
          this.$message.error('获取订单详情失败')
        }
      })
    },
    async activityList(cb) {
      this.loadingFull = true
      await activityList().then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.activitys = res.data
          res.data.map(item => {
            if (item.is_ing === 1) {
              this.listQuery.activity_id = item.id
            }
          })
        }
        cb && cb()
      }).catch(e => {
        this.loadingFull = false
        cb && cb()
      })
    },
    getList() {
      this.loadingFull = true
      getList(this.listQuery).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.total = res.data.total
          this.list = Object.values(res.data.list)
        } else {
          this.$message.error(res.message || '获取合并订单失败')
        }
      }).catch(e => {
        this.loadingFull = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .order_info_container{
    border-bottom: 1px solid #409EFF;
    padding: 10px 0;
    .title {
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      font-size: 20px;
      margin: 0;
    }
    .main {
      margin: 0;
      li {
        list-style: none;
        height: 36px;
        line-height: 36px;
      }
    }
  }
</style>
