<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
    <el-form-item label="选择门店" prop="orderId">
      <el-select
          v-model="queryParams.shopId"
          class="!w-240px"
        >
          <el-option
            v-for="item in shopList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>  
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      </el-form-item>
    </el-form>

  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
        <el-tabs class="tab-box" v-model="activeName" type="card"  @tab-click="switchTab">
          <el-tab-pane label="全部" :name="0" />
          <el-tab-pane :label="item.name" :name="item.id" :key="idx" v-for="(item,idx) in cateList" />
        </el-tabs>
        <el-form-item label="桌面状态：" >
          <el-radio-group v-model="queryParams.deskStatus" size="large"  fill="#FF1493" @change="queryStatus">
            <el-radio-button label="empty">空闲中</el-radio-button>
            <el-radio-button label="ing">就餐中</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="24" v-if="deskList.length > 0">
          <el-col :span="4" v-for="(desk,k) in deskList" :key="k">
            <div >
              <el-card class="box-card" :body-style="queryParams.deskStatus == 'empty' ? {background:'#8D9095'} : {background:'#F56C6C'}">
                <template #header>
                  <div class="card-header" style="text-align:center;display:flex;justify-content:space-between;">
                    <span style="font-size:14px">{{ desk.shopName}}</span>
                    <span style="cursor:pointer;"> <Icon icon="ep:calendar" :size="20" @click="openForm(desk)" /></span>
                  </div>
                </template>
                <template #default>
                  <div style="color:#ffffff;text-align:center;">
                    <div>
                      <div style="font-size:36px;font-weight: bolder;">{{ desk.number }}</div>
                      <div style="font-size:20px;font-weight: bolder;" v-if="queryParams.deskStatus == 'empty'">空闲中</div>
                      <div style="font-size:20px;font-weight: bolder;" v-else>就餐中</div>
                    </div>
                  </div>
                </template>
                <template #footer>
                  <div style="text-align:center">{{ desk.lastOrderTime ? formatPast(desk.lastOrderTime) + '下单' : '从未下单' }}</div>
              </template>
              </el-card>
            </div>
          </el-col>
        </el-row>
        <el-empty description="暂无桌台数据" v-else />
  </ContentWrap>

  <OrderDetail ref="formRef4" />
</template>

<script setup lang="ts" name="StoreOrder">
import * as StoreOrderApi from '@/api/mall/order/storeOrder'
import * as ShopApi from '@/api/mall/store/shop'
import * as ShopDeskApi from '@/api/mall/desk/shopDesk'
// import OrderSend from './OrderSend.vue'
import OrderDetail from './OrderDetail2.vue'
// import Order from '@/views/mall/desk/shopDesk/Order.vue'
import type { TabsPaneContext } from 'element-plus'
import { formatPast,formatDate } from '@/utils/formatTime'
import { ShopDeskCategoryApi, ShopDeskCategoryVO } from '@/api/mall/desk/shopdeskcategory'

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 50,
  orderStatus: 1,
  deskStatus: "empty",
  type: 'work',
  shopId: undefined,
  cateId: undefined
})
const queryFormRef = ref() // 搜索的表单

const activeName = ref(0)
const isNotice = ref(true)
const shopList = ref([])
const deskList = ref([])
const cateList = ref([])



const switchTab = (tab: TabsPaneContext, event: Event) => {
  if(tab.paneName > 0){
    queryParams.cateId = tab.paneName
    getDeskList()
  }else{
    queryParams.cateId = null
    getDeskList()
  }
  
}
const getShopList = async () => {
  try {
    const data = await ShopApi.getShopList()
    shopList.value = data

  } finally {
    
  }
}

const getCateList = async () => {
  try {
    const data = await ShopDeskCategoryApi.getShopDeskCategoryPage(queryParams)
    cateList.value = data.list

  } finally {
    
  }
}



/** 查询列表 */
const getDeskList = async () => {
  loading.value = true
  try {
    const data = await ShopDeskApi.getShopDeskPage(queryParams)
    deskList.value = data.list
  } finally {
    loading.value = false
  }
}



let interval02 = setInterval(function() {
  getDeskList()
},5000);



/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getDeskList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const formRef1 = ref()
const formRef4 = ref()
const order = ref()
const openForm = (desk) => {
  formRef4.value.open(desk)
}

const queryStatus = (value) => {
  queryParams.deskStatus = value
   //queryParams.deskStatus = tab.paneName
  getDeskList()
 
}

/** 初始化 **/
onMounted(() => {
  //getList()
  getShopList()
  getDeskList()
  getCateList()

})

onBeforeUnmount(() => {
  console.log("销毁：")
  //clearInterval(interval01)
  clearInterval(interval02);
})
</script>

<style scoped  >
 img {
        height: 36px;
        display: block;
    }
.tabBox{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center
    }
.tabBox_img{
    width: 36px;
    height: 36px;
  }
.tabBox_img img{
  width: 100%;
  height: 100%;
}
.tabBox_tit{
    width :60%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
    text-align: left;
  }
  .tabBox_pice{
    width :30%;
    font-size: 12px !important;
    margin: 0 2px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
    text-align: left;
  }

</style>