<script lang="ts" setup>
import {ref} from 'vue'
import {onMounted} from "vue";
import myAxios from "../../API/myAxios.ts";
import {Action, ElMessage, ElMessageBox} from "element-plus";
import { HomeOutlined, UserOutlined } from '@ant-design/icons-vue';

const total= ref(0);
//时间处理
const tableData = ref([]);

onMounted(() => {
  getUserList();
})

const onSearch = () => {
  getUserList();
}
const onReset = () => {
  searchParams.value.businessName = '';
  searchParams.value.businessPhone='';
  getUserList();
}

const searchParams = ref({
  current: 1,
  pageSize: 10,
  businessName: '',
  businessPhone: '',
  storeStatus:0
});

const createTime = (row: any)=> {
  let data = row.createTime;
  return data.slice(0,16).replace('T',`~`)
}

const getUserList = async () => {
  const res:any = await myAxios.post("/business/list",{
    params: {
      current: searchParams.value.current,
      pageSize: searchParams.value.pageSize,
      businessName: searchParams.value.businessName,
      phone: searchParams.value.businessPhone,
      storeStatus: searchParams.value.storeStatus
    }})
  if(res.code === 0 && res.data) {
    tableData.value = res.data;
    total.value = parseInt(res.data.total)
  } else {
    ElMessage({
      type:"error",
      message: `加载数据失败：${res.message}`
    })
  }
}

//查看
const view = () => {
    ElMessageBox.alert('This is a message', 'Title', {
      confirmButtonText: 'OK',
      callback: (action: Action) => {
        ElMessage({
          type: 'info',
          message: `action: ${action}`,
        })
      },
    })
}

const doDelete =async (id:string) => {
  const res:any = await myAxios.post("/user/delete",{id:id})
  ElMessage({
    showClose:true,
    type:res.code === 0 ? 'success' : "error",
    message:res.code === 0 ? '删除成功' : `删除失败:${res.message}`
  })
  if(res.code === 0 && res.data) {
    await getUserList();
  }
}

//分页
const handleCurrentChange = (current: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: current
  }
}
const handleSizeChange = (size: number) => {
  searchParams.value = {
    ...searchParams.value,
    pageSize: size
  }
  getUserList();
}
const doBan =async (id:string, isBan: boolean) => {
  const res:any = await myAxios.post("/user/update",{id:id, userRole: isBan ? 2 :0})
  ElMessage({
    showClose:true,
    type:res.code === 0 ? 'success' : "error",
    message:res.code === 0 ? '操作成功' : `操作失败:${res.message}`
  })
  if(res.code === 0 && res.data) {
    await getUserList();
  }
}
if(searchParams.value.storeStatus===1){

}
</script>

<template>
  <a-breadcrumb class="header">
    <a-breadcrumb-item href="">
      <home-outlined />
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
      <user-outlined />
      <span>{{ $route.path }}</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>{{ $route.name }}</a-breadcrumb-item>
  </a-breadcrumb>

  <!--搜索部分-->
  <div class="search-box">
    <el-form
        :inline="true"
        :model="searchParams"
    >
      <el-form-item label="商户名称" class="search">
        <el-input v-model="searchParams.businessName" />
      </el-form-item>
      <el-form-item label="手机号" class="search">
        <el-input v-model="searchParams.businessPhone" />
      </el-form-item>
      <el-button type="primary" @click="onSearch" style="margin-top: 10px" color="#4e58fd">搜索</el-button>
      <el-button type="primary" @click="onReset" style="margin-top: 10px" color="#4e58fd">重置</el-button>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%;height: 80%" border stripe>
      <el-table-column label="商户ID" prop="id"/>
      <el-table-column label="商户名称" prop="businessName"/>
      <el-table-column label="手机号" prop="businessPhone"/>
      <el-table-column label="店铺状态" prop="storeStatus" >
        <template #default="scope">
          <div v-if="scope.row.storeStatus === 1">
            <el-tag type="success">正常</el-tag>
          </div>
          <div v-else-if="scope.row.storeStatus === 0">
            <el-tag type="success">正常</el-tag>
          </div>
          <div v-else-if="scope.row.storeStatus === 2">
            <el-tag type="warning">封店</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入驻时间" prop="createtime" :formatter="createTime"/>
      <el-table-column align="center" label="操作">

        <template #default="scope">
          <el-button link size="small" type="warning" :disabled="scope.row.userRole === 1"
                     @click="doBan(scope.row.id, scope.row.userRole !== 2)">
            {{scope.row.userRole === 2? '解封' : '封禁'}}
          </el-button>
          <el-button link size="small" type="warning" @click="view">
            查看
          </el-button>
          <el-button link size="small" type="danger" :disabled="scope.row.userRole === 'admin'"
                     @click="doDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          :page-size="searchParams.pageSize"
          :current-page="searchParams.current"
          layout="total,sizes, prev, pager, next,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination"
          :page-sizes="[10.20]"
      />
    </div>
</div>


</template>

<style scoped>
.header {
  width: 100%;
  height: 30px;
  background-color: white;

}
h4 {
  display: inline-block;
  margin-left: 10px;
}
.search {
  margin-top: 10px;
  float: left;
  width: 20%;
  height: 7%;
}
.table {
  width: 100%;
  height: 80%;
}
</style>