<template>
    <div style="margin-bottom: 20px;">
      <div style="display: flex; justify-content: space-around; align-items: center">
        <div>
          <span>商品编号：</span><el-input style=" width: 150px; height: 30px; margin-right: 20px; font-size: 14px" suffix-icon="Search"
                    placeholder="请输入商品id" v-model="goodId"></el-input>
        </div>
  
        <div>
         <DatePicker/>
        </div>
  
        <div>
          <TimePicker/>
        </div>
  
        <div>
          <el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
          <el-button type="warning" @click="reset" style="height:30px">重置</el-button>
        </div>
      </div>
    </div>
    <!-- 数据展示层 -->
    <el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
              :cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
              :header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
      <el-table-column type="selection" width="55" fixed="left"></el-table-column>
      <el-table-column prop="id" label="待处理订单序号" width="80">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="goodId" label="商品编号" width="100"></el-table-column>
      <el-table-column prop="goodImg" label="商品图片" width="100">
        <template #default="scope">
          <div>
            <img :src="scope.row.goodImg.split(';')[0]" alt="" style="height: 50px;">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" width="120"></el-table-column>
      <el-table-column prop="reservationDate" label="预约日期" width="200"></el-table-column>
      <el-table-column prop="timeSlot" label="预约时间段" width="200"></el-table-column>
      <el-table-column prop="isAvailable" label="是否可预约" width="200"></el-table-column>
      <el-table-column prop="minNumber" label="最小预约人数" width="150"></el-table-column>
      <el-table-column prop="currentNumber" label="当前预约人数" width="150"></el-table-column>
      <el-table-column prop="maxNumber" label="最大预约人数" width="150"></el-table-column>
  
      <el-table-column label="商品当前时间段的预约情况" width="300">
        <el-table-column label="展开进行查看" type="expand" width="300">
          <template #default="props">
            <el-table :data="props.row.pendingServiceOrderVOList" border :row-style="{ height: '50px' }"
                      :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
              <el-table-column label="订单明细id" prop="orderItemId" width="200"/>
              <el-table-column label="订单编号" prop="orderNumber" width="300"></el-table-column>
              <el-table-column label="联系人姓名" prop="name"  width="200"/>
              <el-table-column label="联系人手机号" prop="phone" width="200" />
              <el-table-column label="购买数量" prop="quantity" width="200"/>
              <el-table-column label="预估支付金额" prop="itemTotalAmount" width="200"/>
              <el-table-column label="订单明细状态" prop="orderItemStatus" width="200"></el-table-column>
  
  
              <el-table-column label="操作" width="300px" fixed="right">
                <template #default="scope">
                  <el-button size="small" @click="showDetail(scope.$index, scope.row)">
                    详情
                  </el-button>
                  <el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" @click="refundOrder(scope.row)" type="danger" plain>
                    退款
                  </el-button>
                </template>
              </el-table-column>
  
            </el-table>
          </template>
        </el-table-column>
      </el-table-column>
  
    </el-table>
    <!-- 分页器 -->
    <div style="padding: 10px 0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
                     :small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
                     :total="total" />
    </div>
    <!--  弹窗-->
    <el-dialog title="待处理订单详情信息" v-model="DialogVisible" width="60%">
      <el-form label-width="100px" size="default" :model="editForm" :disabled="disabled">
        <div style="display: flex">
          <el-form-item label="订单明细编号" style="width: 350px">
            <el-input v-model="editForm.orderItemId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单编号" style="width: 350px">
            <el-input v-model="editForm.orderNumber" autocomplete="off"></el-input>
          </el-form-item>
        </div>
  
        <div style="display: flex">
          <el-form-item label="联系人姓名" style="width: 350px">
            <el-input v-model="editForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机号" style="width: 350px">
            <el-input v-model="editForm.phone" autocomplete="off"></el-input>
          </el-form-item>
        </div>
  
        <el-form-item label="预估支付金额" style="width: 250px">
          <el-input v-model="editForm.itemTotalAmount" autocomplete="off"></el-input>
        </el-form-item>
  
        <el-form-item label="订单明细状态" style="width: 250px">
          <el-input v-model="editForm.orderItemStatus" autocomplete="off"></el-input>
        </el-form-item>
  
  <!--      <div style="display: flex">-->
  <!--        <el-form-item label="下单时间"  style="width: 300px;">-->
  <!--          <el-input v-model="editForm.createTime" autocomplete="off"></el-input>-->
  <!--        </el-form-item>-->
  <!--        <el-form-item label="更新时间" style="width: 300px;">-->
  <!--          <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
  <!--        </el-form-item>-->
  <!--      </div>-->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
          <el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
        </div>
      </template>
    </el-dialog>
    <!--  发货弹窗-->
    <el-dialog title="发货" v-model="shipments" width="60%">
      <el-form label-width="100px" size="default"  >
        <el-form-item label="快递单号" style="width: 300px;">
          <el-input v-model="shipment.trackingNumber"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="height: 30px;" @click=" shipments = false">取消</el-button>
          <el-button style="height: 30px" type="primary" @click="deliverGoods ">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import myAxios from "@/api/myAxios";
  import { ElMessage } from "element-plus";
  import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
  import DatePicker from "@/layout/components/DatePicker.vue";
  import TimePicker from "@/layout/components/TimePicker.vue";
  import emitter from "@/utils/emitter";
  import {checkObjectProperties} from "@/layout/js/validUtils";
  const tableData: any = ref([]);  //表单展示数据
  const total = ref(0);
  const title = ref('')
  const disabled = ref(true)
  const editForm: any = ref({});//编辑表单
  const shipment:any = ref({
    trackingNumber: null
  })//物流单号
  const DialogVisible = ref(false); //详情展示
  const shipments = ref(false)
  
  const goodId = ref('')
  const reservationDate = ref('')
  const timeSlot = ref('')
  const searchParams: any = ref({ //封装分页
    current: 1, //当前页码
    pageSize: 5, //每页显示条数
    sortField: "id",  //根据ID分类
    sortOrder: "descend", //降序
    goodId: goodId.value,
    reservationDate: reservationDate.value,
    timeSlot: timeSlot.value
  })
  const loading = ref(false)
  onMounted(() => {
    emitter.on('getReservationDate', (val:any) => {
      reservationDate.value = val
      searchParams.value.reservationDate = val
    })
    emitter.on('getTimeSlot', (val:any) => {
      timeSlot.value = val
      searchParams.value.timeSlot = val
    })
    getOrderList()  //页面加载获取订单列表
  })
  const handleSizeChange = (newSize: any) => {
    searchParams.value.pageSize = newSize //新的页面数
    getOrderList()
  }
  const handleCurrentChange = (Current: any) => {
    searchParams.value.current = Current
    getOrderList()
  }
  const handleSelectionChange = (row: any) => {
    // id.value = JSON.parse(JSON.stringify(row));
  }
  //获取待处理订单列表
  const getOrderList = async () => {
    console.log(searchParams.value)
    try {
      searchParams.value.goodId = goodId.value
      const res = await myAxios.post('pending/list/advance/detail', { ...searchParams.value });
      if (res.data.code === 1) {
        tableData.value = res.data.data.records;
        console.log(tableData.value)
        tableData.value.forEach((item:any) => {
          let total = 0;
          for (var i = 0; i < item.pendingServiceOrderVOList.length; i ++ ) {
            total += item.pendingServiceOrderVOList[i].quantity;
          }
          item.currentNumber = total
        })
        console.log('表单信息--->', tableData.value);
      } else {
        ElMessage({
          message: '获取数据失败',
        });
      }
    } catch (error) {
      ElMessage({
        message: '发生错误',
      });
    }
  }
  
  
  
  //查看订单详情
  const showDetail = (index: number, row: any) => {
    title.value = "订单详情"
    DialogVisible.value = true;
    editForm.value = row;
    console.log('editForm--->',editForm.value);
  };
  //发货方法
  const currentId = ref<number | null>(null);
  const openShipmentDialog = (id: number) => {
    shipments.value = true;
    currentId.value = id;
  }
  const deliverGoods = async () => {  //发货方法
    if (currentId.value) {
      const res = await myAxios.post('/order/update', {
        id: currentId.value,
        trackingNumber: shipment.value.trackingNumber
      })
      if (res.data.code === 1) {
        ElMessage({
          type: 'success',
          message: '发货成功'
        })
        getOrderList();
      }
    } else {
      ElMessage.error('更新失败，请检查字段')
    }
    shipments.value = false;
  }
  const refundOrder = async (row : any) => {  //微信退款
    loading.value = true
    console.log('row-->',row)
    const res = await myAxios.post('/wechat/refund/create', { id: row.orderItemId })   //传入订单号取消订单并退款
    console.log(res)
    setTimeout(()=>{
      if(res.data.code === 1) {
        SuccessInfo('退款成功')
        getOrderList()
        loading.value = false
      }
    },10000)
  }
  const reset = () => {  //重置搜索框
    goodId.value = ''
    reservationDate.value = ''
    timeSlot.value = ''
  
    searchParams.value.goodId = ''
    searchParams.value.reservationDate = ''
    searchParams.value.timeSlot = ''
  
    emitter.emit('clearReservationDate')
    emitter.emit('clearTimeSlot')
    getOrderList()
  };
  const load = () => {
    getOrderList()
  }  //搜索的方法
  const cancelOrder = async (row:any)=>{  //取消订单的方法(未支付能取消)
    console.log('点击的这一行--->',row);
    const res = await myAxios.post('/order/cancel/id',{ id: row.id })
    if(res.data.code === 1) {
      getOrderList()
      SuccessInfo('取消订单成功')
    } else {
      ErrorInfo('请求错误')
    }
  }
  </script>
  
  <style lang="scss" scoped>
  /* 使用 ::v-deep 来修改表头的对齐方式 */
  ::v-deep .el-table__header th {
    text-align: center;  /* 表头居中 */
    font-size: 14px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体加粗 */
    font-family: 'Arial', sans-serif; /* 设置字体 */
  }
  
  </style>