<template>
  <el-drawer
    :title="'会员订单 · ' + (memberName || '')"
    :visible.sync="localVisible"
    direction="rtl"
    size="85%"
    append-to-body
    custom-class="detail-drawer"
  >
    <div class="drawer-content">
      <!-- 订单检索 -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" class="search-form">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="queryParams.orderNo" placeholder="订单编号" clearable style="width: 140px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="queryParams.goodsName" placeholder="商品名称" clearable style="width: 140px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="支付状态" prop="payStatus">
          <el-select v-model="queryParams.payStatus" placeholder="全部" clearable style="width: 110px">
            <el-option label="未支付" value="0" />
            <el-option label="已支付" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" prop="shipStatus">
          <el-select v-model="queryParams.shipStatus" placeholder="全部" clearable style="width: 110px">
            <el-option label="待支付" value="0" />
            <el-option label="待发货" value="1" />
            <el-option label="已发货" value="2" />
            <el-option label="已完成" value="3" />
            <el-option label="已关闭" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="收货人" prop="consigneeName">
          <el-input v-model="queryParams.consigneeName" placeholder="收货人" clearable style="width: 110px" />
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table border v-loading="loading" :data="orderList">
        <el-table-column label="订单编号" align="center" prop="orderNo" width="150" />
        <el-table-column label="商品信息" align="left" min-width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.items && scope.row.items.length" class="goods-info">
              <image-preview v-if="scope.row.items[0].goodsImage" :src="scope.row.items[0].goodsImage" :width="40" :height="40" />
              <span>{{ scope.row.items[0].goodsName }}</span>
              <span v-if="scope.row.itemCount > 1" class="more-tip">等{{ scope.row.itemCount }}件</span>
            </div>
            <span v-else>—</span>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" align="center" prop="payAmount" width="100" />
        <el-table-column label="收货人" align="center" prop="consigneeName" width="90" />
        <el-table-column label="联系电话" align="center" prop="consigneeMobile" width="120" />
        <el-table-column label="订单状态" align="center" prop="orderStatus" width="90">
          <template slot-scope="scope">
            <el-tag size="small" :type="orderStatusTag(scope.row.orderStatus)">{{ scope.row.orderStatusLabel || orderStatusLabel(scope.row.orderStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" align="center" prop="createTime" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleOrderDetail(scope.row)" v-hasPermi="['agri:member:query']">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

    <member-order-detail :visible.sync="orderDetailOpen" :member-id="memberId" :order-id="currentOrderId" />
  </el-drawer>
</template>

<script>
import { listMemberOrders } from "@/api/agri/member"
import MemberOrderDetail from "./orderDetail"

export default {
  name: "MemberOrders",
  components: { MemberOrderDetail },
  props: {
    visible: { type: Boolean, default: false },
    memberId: { type: [Number, String], default: null },
    memberName: { type: String, default: "" }
  },
  data() {
    return {
      localVisible: false,
      loading: false,
      total: 0,
      orderList: [],
      dateRange: [],
      orderDetailOpen: false,
      currentOrderId: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: undefined,
        goodsName: undefined,
        payStatus: undefined,
        shipStatus: undefined,
        consigneeName: undefined
      }
    }
  },
  watch: {
    visible(val) {
      this.localVisible = val
      if (val && this.memberId) {
        this.resetQuery()
      }
    },
    localVisible(val) {
      this.$emit("update:visible", val)
    }
  },
  methods: {
    getList() {
      this.loading = true
      listMemberOrders(this.memberId, this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.orderList = response.rows || []
        this.total = response.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    orderStatusLabel(status) {
      const map = { "0": "待支付", "1": "待发货", "2": "已发货", "3": "已完成", "4": "已关闭", "5": "已删除" }
      return map[status] || "—"
    },
    orderStatusTag(status) {
      const map = { "0": "warning", "1": "primary", "2": "", "3": "success", "4": "info", "5": "info" }
      return map[status] || "info"
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.dateRange = []
      this.resetForm("queryForm")
      this.queryParams.pageNum = 1
      this.getList()
    },
    handleOrderDetail(row) {
      this.currentOrderId = row.orderId
      this.orderDetailOpen = true
    }
  }
}
</script>

<style scoped>
.drawer-content {
  padding: 0 20px 20px;
}
.search-form {
  margin-bottom: 12px;
}
.goods-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.more-tip {
  color: #909399;
  font-size: 12px;
}
</style>
