<template>
  <el-card>

    <el-row :gutter="20" class="header" >
      <el-col :span="4" >
        <el-input placeholder="请输入商品ID..." clearable v-model="queryForm.id"></el-input>
      </el-col>
      <el-col :span="4" v-if="params.product==undefined">
        <el-input placeholder="请输入商家ID..." clearable v-model="queryForm.businessId"></el-input>
      </el-col>
      <el-col :span="4" >
        <el-input placeholder="请输入分类ID..." clearable v-model="queryForm.commoditiesGroupId"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initProductList" >搜索</el-button>
      <el-button v-if="params.product!==undefined" >商家名称：{{JSON.parse(params.product).businessName}}</el-button>
<!--        <el-button type="primary" :icon="DocumentAdd"-->
<!--                   @click="handleDialogValue()">添加商品</el-button>-->
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%;">
      <el-table-column prop="id" label="#ID"  />
      <el-table-column prop="commoditiesName" label="商品名称"  />
      <el-table-column prop="commoditiesImagecommoditiesImage" label="商品图片" >
        <template v-slot="scope">
          <img :src="scope.row.commoditiesImagecommoditiesImage"
               width="50" height="50"/>
        </template>
      </el-table-column>
      <el-table-column prop="commoditiesPrice" label="商品名称"  />
      <el-table-column prop="businessId" label="商家ID"  />
      <el-table-column prop="commoditiesGroupId" label="商品关联类别Id"  />
      <el-table-column prop="inventoryStatus" label="商品库存"  />
      <el-table-column prop="status" label="商品状态"  />
      <el-table-column prop="action" fixed="right" label="操作" min-width="80">
        <template v-slot="scope" >
          <el-button  type="danger" size="small"  :icon="Delete" @click="handleDelete(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:currentPage="queryForm.current"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 30, 40,50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
<!--  <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible"-->
<!--          :dialogTitle="dialogTitle" :id="id" @initProductList="initProductList"></Dialog>-->
</template>
<script setup>
import {Search,Delete,Edit,DocumentAdd} from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import axios,{getServerUrl} from "@/util/axios";
import { ElMessageBox,ElMessage } from 'element-plus'
import {useRoute} from "vue-router";
// import Dialog from './components/dialog'

let params=useRoute().query
const query=ref()
const total=ref(0)
const tableData =ref([])
const id=ref(-1)
const dialogTitle=ref('');
const dialogVisible=ref(false)


const queryForm=ref({
  businessId: '',
  id:'',
  commoditiesGroupId: null,
  current:1,
  pageSize:10
})
// const handleDialogValue=(productId)=>{
//   if(productId){
//     id.value=productId;
//     dialogTitle.value="商品修改"
//   }else{
//     id.value=-1;
//     dialogTitle.value="商品添加"
//   }
//   dialogVisible.value=true
// }
const initProductList=async()=>{
  //console.log(JSON.parse(params.product).id)
  if(params.product!=undefined){

    queryForm.value.businessId=JSON.parse(params.product).id
  }
    const res=await axios.post("commodities/list/page/commodities",queryForm.value);
    // console.log(res.data.data)
    tableData.value=res.data.data.records;
    total.value=Number(res.data.data.total);

}
initProductList();
watch(query,()=>{
  // console.log(id.value)
  initProductList();
},10000)

const handleSizeChange = (pageSize) => {
  queryForm.value.current=1;
  queryForm.value.pageSize=pageSize;
  initProductList();
}
const handleCurrentChange = (current) => {
  queryForm.value.current=current;
  initProductList();
}
const handleDelete=(id)=>{
  // console.log(id)
  ElMessageBox.confirm(
      '您确定要删除这条记录吗？',
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async() => {
        let res=await axios.post('commodities/delete',{id:id})
        if(res.data.code==0){
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          initSmallTypeList();
        }else{
          ElMessage({
            type: 'error',
            message: res.data.description,
          })
        }
      })
      .catch(() => {
      })
  // initUserList();
}
</script>
<style lang="scss" scoped>
.header{
  padding-bottom: 16px;
  box-sizing: border-box;
}
.el-pagination{
  padding-top: 15px;
  box-sizing: border-box;
}
</style>