<template>
  <el-dialog title="取单" v-model="dialogVisible" width="1100px" @close="cancel" destroy-on-close>
      <el-card v-for="(item,idx) in orderList" :key="idx">
        <template #header>
          <el-row>
            <el-col :span="12" style="font-size:14px;font-weight:bold"> 
              <div> 取单号:{{item.hangNo}}</div>
             
            </el-col>
            <el-col :span="12" style="text-align:right"><div>订单总价：<span style="color:red;font-size:18px">¥{{item.totalPrice}}</span></div></el-col>
          </el-row>
        </template>
        <el-row v-for="(cart,i) in item.storeCartRespVOS" :key="i">
            <el-col :span="8">{{cart.storeName}} <span style="font-size:10px;color:red">规格:{{cart.sku}}</span></el-col>
            <el-col :span="8">¥{{cart.price}}</el-col>
            <el-col :span="8">× {{cart.cartNum}}</el-col>
        </el-row>
        <template #footer>
          <div style="text-align:right">
              <el-button type="danger" round @click="del(item.hangNo)">删除</el-button>
              <el-button type="warning" round @click="takeOrder(item.hangNo)">取单</el-button>
          </div>
        </template>
      </el-card>
      <div v-if="orderList.length == 0"><el-empty description="暂无商品挂单" /></div>
      <template #footer>
        <div>
            <el-button @click="cancel()">取 消</el-button>
        </div>
      </template>
  </el-dialog>
</template>
<script  setup lang="ts" name="settlement">
import * as CashierApi from '@/api/mall/cashier'
const dialogVisible = ref(false)
const orderList = ref([])
const shopId = ref(0)

const open = async (id) => {
  dialogVisible.value = true
  getList(id)
  shopId.value = id

  console.log('shopId.value:',shopId.value)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const getList = async(id) => {
  const res = await CashierApi.getHangList({id:id})
  orderList.value = res
}

const cancel = () => {
  dialogVisible.value = false
}

const emit = defineEmits<{
  getCartList: [shopId]
}>()
const takeOrder = async(hangNo) => {
  const res = await CashierApi.hangOff({shopId:shopId.value,hangNo:hangNo})
  emit('getCartList', shopId.value)
  dialogVisible.value = false
}

const del = async(hangNo) => {
  await CashierApi.hangDel({shopId:shopId.value,hangNo:hangNo})
  getList(shopId.value)
}

</script>
<style lang="scss" scoped>

</style>
