<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="initEmployeeList">搜索</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" />
      <el-table-column  prop="manicuristName"  label="用户昵称" width="200" />
      <el-table-column prop="manicuristAvatar" label="头像" width="200">
        <template v-slot="scope">
          <img :src="scope.row.manicuristAvatar" width="50" height="50"/>
        </template>
      </el-table-column>
      <el-table-column prop="rating"  label="评分" width="200px">
        <template v-slot="scope" style="height: 100px">
          <div class="demo-rate-block">
            <el-rate v-model="scope.row.rating" :colors="colors"/>
            {{scope.row.rating}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salary"  label="余额" />
      <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="120" >
        <template v-slot="scope" >
          <el-button  type="primary" size="small" @click="handleDialogValue(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="edialogVisible" :id="id"  :dialogTitle="dialogTitle"
          @handleCollapse="handleCollapse"></Dialog>


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

import axiosUtil from "@/util/axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router"
import {request} from "axios";


const RCollapse=ref([]);
const LCollapse=ref([]);
const router=useRouter();
const id=ref('')
const dialogTitle=ref('');
const edialogVisible=ref(false)
const  query=ref();


const handleDialogValue=(ids)=>{
  id.value=ids;
  dialogTitle.value="审核美甲师"
  edialogVisible.value=true
}





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("manicurist/queryAll");
  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.auditStatus){
      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 initEmployeeList=async()=>{
  if (!query.value){
    const res=await axios.post("manicurist/queryAll");
    // console.log(res.data)
    tableData.value=res.data.data;
    total.value=res.data.data.length;
  }else{
    const res = await axios.get("manicurist/queryById", {manicuristId: query.value});
    // console.log(res.data)
    const temp = []
    temp.push(res.data.data)
    tableData.value = temp;
    total.value = 1;
  }
}





handleCollapse();
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>