<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-button type="primary" :icon="DocumentAdd" @click="handleAddDialogValue()" >添加商家</el-button>

<!--      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;margin-left: 20px">-->
<!--        <el-radio-button :value="true" @click="handleCollapse(true)">审核</el-radio-button>-->
<!--        <el-radio-button :value="false"  @click="handleCollapse(false)">未审核</el-radio-button>-->
<!--      </el-radio-group>-->
    </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="state"  label="状态" width="80">

          <template v-slot="scope" >
            <div v-if="scope.row.state==3">
              <el-switch
                  disabled
                style=" color: #ff4949"
            /></div>
            <div v-else>
            <el-switch
                v-model="scope.row.state"
                @change="updateSwtich(scope.row)"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
            </div>
          </template>

      </el-table-column>
      <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="270" v-if="isCollapse||isCollapse===undefined">
        <template v-slot="scope" >
          <el-button  type="success" size="small" @click="handleRouter(scope.row)" >
            商品管理
          </el-button>
          <el-button  type="success" size="small" @click="handleDialogValue(scope.row.id)">
            详情
          </el-button>
          <el-button  type="primary" size="small" :icon="Edit" @click="handleUpdateDialogValue(scope.row.id)"></el-button>
        </template>

      </el-table-column>
      <el-table-column prop="action" fixed="right" label="操作" min-width="120" v-else>
        <template v-slot="scope" >
          <el-button  type="primary" size="small" @click="handleClick(scope.row.id)">审核</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>


  <Dialog v-model="BdialogVisible" :bussinessId="bussinessId" :dialogTitle="dialogTitle"
          @initBusinessList="initBusinessList"></Dialog>
  <AddDialog v-model="BdialogaddVisible"  :dialogTitle="dialogTitle"
             @initBusinessList="initBusinessList"></AddDialog>
  <UpdateDialog v-model="BdialogUpdateVisible" :bussinessId="bussinessId"  :dialogTitle="dialogTitle"
                @initBusinessList="initBusinessList"></UpdateDialog>


</template>
<script setup>
import {Search,DocumentAdd,Edit} from '@element-plus/icons-vue'
import {ref, watch} from 'vue'
import axios from "@/util/axios";
import Dialog from '@/views/business/dialog/index.vue'
import AddDialog from '@/views/business/addDialog/index.vue'
import UpdateDialog from '@/views/business/updateDialog/index.vue'


import {useRouter} from "vue-router"


const isCollapse=ref(true);
const RCollapse=ref([]);
const LCollapse=ref([]);
const router=useRouter();
const bussinessId=ref('')
const dialogTitle=ref('');
const BdialogaddVisible=ref(false)
const BdialogVisible=ref(false)
const BdialogUpdateVisible=ref(false)



const tempUpdate=ref({
  id: null,
  businessPhone: "",
  businessName: "",
  state: null
})
const updateSwtich= async (item)=>{
  tempUpdate.value.id=item.id
  tempUpdate.value.businessName=item.businessName
  tempUpdate.value.businessPhone=item.businessPhone
  if (item.state==false){
    tempUpdate.value.state=2
  }
  else {
    tempUpdate.value.state=1
  }
  console.log(item)
  let result = await axios.post("business/update", tempUpdate.value)

  console.log(result.data)
}



const handleClick=(id)=>{
  bussinessId.value=id;
  // console.log(bussinessId.value)
  dialogTitle.value="审核商家"
  BdialogVisible.value=true
}
const handleRouter=(temp)=>{
  console.log(temp.id)
  router.push({path:'/product',query:{product: JSON.stringify(temp)}})
}
const handleDialogValue=(id)=>{
  //console.log("bigTypeId="+bussinessId)
  // if(bussinessId){
  bussinessId.value=id;
  dialogTitle.value="商家详情"
  BdialogVisible.value=true
}

const handleUpdateDialogValue=(id)=>{
 // console.log(bussinessId)
  bussinessId.value=id;
  // console.log(bussinessId.value)
  dialogTitle.value="商家修改"
  BdialogUpdateVisible.value=true
}

const handleAddDialogValue=()=>{
  dialogTitle.value="商家添加"
  BdialogaddVisible.value=true
}



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


// watch(formPage.value.businessName,()=>{
//   // console.log(id.value)
//   initBusinessList();
// })


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(item.state);
//   });
//   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);

    // isCollapse.value=undefined;
    tableData.value=res.data.data.records;
  tableData.value.map(item=>{
    if(item.state==1)
    {
      item.state=true
    }
    else if(item.state==2){
      item.state=false
    }else{
      item.state=3
    }
  })
    total.value=Number(res.data.data.total);
  console.log(tableData.value)
 }


// const initBusinessList=async()=>{
//
//   if(!id.value)
//   {
//     const res=await axios.post("business/list/page",formPage.value);
//     //  console.log(res.data.data.records)
//     tableData.value=res.data.data.records;
//     // console.log(res.data.data.total)
//     total.value=res.data.data.records.length;
//   }
//   else{
//     const res=await axios.post("business/list/page", {businessName:id.value});
//     // console.log(res.data.data)
//     //const temp=[];
//    // temp.push(res.data.data)
//     tableData.value=res.data.data.records;
//     total.value=res.data.data.records.length;
//   }
//
//  }



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>