<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input placeholder="请输入商家昵称..." clearable  v-model="formPage.businessName"></el-input>
      </el-col>
      <el-button type="button" :icon="Search" @click="initBusinessList">搜索</el-button>

    </el-row>
    <el-table :data="tableData" stripe style="width: 100%;" showOverflowTooltip>
      <el-table-column prop="id" label="#ID" width="80" fixed="fixed" />
      <el-table-column  prop="businessName"  label="商家昵称" width="200" />
      <el-table-column prop="businessAvatar" label="头像" width="150" >
        <template v-slot="scope">
          <el-popover
              placement="right-start"
              :width="200"
              trigger="hover"
              :content="scope.row.businessAvatar"
          >
            <template #reference>
              <img :src="scope.row.businessAvatar" width="50" height="50"/>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="businessPhone"  label="电话号码" width="120" />

      <el-table-column prop="storeStatus"  label="店铺状态" width="80">
        <template v-slot="scope">
            <div v-if="scope.row.storeStatus===0" style="color: red">
              休业
            </div>
            <div style="color: lawngreen" v-else>
              营业
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="注册日期" width="200"/>
      <el-table-column prop="updateTime" label="最后登录日期" width="200"/>
      <el-table-column prop="action" fixed="right" label="操作" min-width="200" >
        <template v-slot="scope" >
          <el-button  type="success" size="small" @click="handleRouter(scope.row)" >
            商品管理
          </el-button>
          <el-button  type="success" size="small" @click="handleRouter2(scope.row)" >
            商品分类
          </el-button>

        </template>

      </el-table-column>

    </el-table>
    <el-pagination
        v-model:currentPage="formPage.current"
        v-model:page-size="formPage.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>

</template>
<script setup>
import {Search,DocumentAdd,Edit} from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import axios from "@/util/axios";


import {useRouter} from "vue-router"



const router=useRouter();


const handleRouter=(temp)=>{
  //console.log(temp.id)
  router.push({path:'/product',query:{product: JSON.stringify(temp)}})
}
const handleRouter2=(temp)=>{
  console.log(temp.id)
  router.push({path:'/productCategory',query:{product: JSON.stringify(temp)}})
}


const formPage=ref({
  businessName:'',
  current:1,
  pageSize:10
})


const total=ref(0)
const tableData =ref([])


// const handleCollapse=async (temp)=>{
//   console.log(temp)
//   const res=await axios.post("business/list");
//   RCollapse.value.splice(0,RCollapse.value.length);
//   LCollapse.value.splice(0,LCollapse.value.length);
//   // console.log(res.data.data.records)
//   tableData.value=res.data.data;
//   tableData.value.forEach(item => {
//     if(item.state){
//       RCollapse.value.push(item)
//     }
//     else{
//       LCollapse.value.push(item)
//     }
//
//   });
//  // console.log("RCollapse"+RCollapse.value);
//  // console.log("LCollapse"+LCollapse.value);
//   if (temp){
//     tableData.value=RCollapse.value
//     total.value=Number(RCollapse.value.length);
//   }else {
//     tableData.value=LCollapse.value
//     total.value=Number(LCollapse.value.length);
//   }
//
// }
const initBusinessList=async()=>{
 // console.log(formPage.value)
    const res=await axios.post("business/list/page",formPage.value);
     // console.log(res.data.data.records)

    tableData.value=res.data.data.records;
  tableData.value.map(item=>{
    if(item.state==0)
    {
      item.push()
    }

  })
    total.value=Number(res.data.data.total);

 }



initBusinessList();
const handleSizeChange = (pageSize) => {
  formPage.value.current=1;
  formPage.value.pageSize=pageSize;
  initBusinessList();
}
const handleCurrentChange = (pageNum) => {
  formPage.value.current=pageNum;
  initBusinessList();
}
</script>
<style lang="scss" scoped>
.header{
  padding-bottom: 16px;
  box-sizing: border-box;

}
.el-pagination{
  padding-top: 15px;
  box-sizing: border-box;
}


</style>