<template>
  <div class="storeManagerDiv">
    <div class="storeManagerSearchDiv">
      <!--      <el-input v-model="searchContent" placeholder="请输入要搜索的内容" class="searchInput">-->
      <!--        <template #prepend>-->
      <!--          <el-select v-model="searchType" placeholder="Select" style="width: 115px">-->
      <!--            <el-option label="旺旺号" value="WANG_ID" />-->
      <!--            <el-option label="微信号" value="WECHAT_ID" />-->
      <!--            <el-option label="支付宝账号" value="ALIPAY_ID" />-->
      <!--            <el-option label="手机号" value="PHONE_NUMBER" />-->
      <!--          </el-select>-->
      <!--        </template>-->
      <!--        <template #append>-->
      <!--          <el-button :icon="Search" @click="search" />-->
      <!--        </template>-->
      <!--      </el-input>-->
      <el-button type="warning" @click="handleAddStoreButtonClick">添加商户</el-button>
    </div>
    <div class="storeManagerTableDiv">
      <el-table :data="tableShowData" style="width: 100%" table-layout="auto">
        <el-table-column fixed prop="id" label="ID" width="50px" />
        <el-table-column prop="name" label="商户名称" width="200px" />
        <el-table-column prop="createTime" label="创建时间" width="400px" />
        <el-table-column prop="updateTime" label="更新时间" width="400px" />
        <el-table-column prop="status" label="状态" width="100px">
          <template #default="scope">
            <el-switch :model-value="scope.row.status" @click="handleChangeStoreStatus(scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="210px">
          <template #default>
            <!--            <el-button link type="primary" size="small" @click="handleExchangeButtonClick(scope.row)">修改</el-button>-->
            <!--            <el-button link type="primary" size="small" @click="handleChangeStatusButtonClick(scope.row)"-->
            <!--              >修改状态</el-button-->
            <!--            >-->
            <!--            <el-button link type="primary" size="small" @click="handleFlagButtonClick(scope.row)">插旗</el-button>-->
            <!--            <el-button link type="primary" size="small" @click="handleRemoveButtonClick(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="storeManagerPaginationDiv">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalStoreCount"
        :current-page="nowPage"
        @update:current-page="handleChangePage"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { IStore } from "@/api/store/types/store"
import { addStoreApi, changeStoreStatusApi, getStoreApi } from "@/api/store"
import { ElMessage, ElMessageBox } from "element-plus"

const tableShowData = ref<IStore[]>([])
const totalStoreCount = ref<number>(1)
const nowPage = ref<number>(1)
const handleChangePage = () => {
  getStoreApi(nowPage.value)
    .then((response) => {
      for (const index in response.data.data.info) {
        if (response.data.data.info[index].status === null) {
          response.data.data.info[index].status = false
        }
      }
      tableShowData.value = response.data.data.info
      totalStoreCount.value = response.data.data.total
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error("获取店铺失败")
    })
}
const handleAddStoreButtonClick = () => {
  ElMessageBox.prompt("请输入店铺名称", "添加店铺", {
    confirmButtonText: "确认",
    cancelButtonText: "取消"
  }).then(({ value }) => {
    addStoreApi({ name: value })
      .then(() => {
        ElMessage.success("添加成功！")
        handleChangePage()
      })
      .catch((err) => {
        console.log(err)
        ElMessage.error("添加失败，请重试！")
      })
  })
}
const handleChangeStoreStatus = (index: number) => {
  changeStoreStatusApi(tableShowData.value[index])
    .then(() => {
      ElMessage.success("修改成功！")
      tableShowData.value[index].status = !tableShowData.value[index].status
    })
    .catch((err) => {
      console.log(err)
      ElMessage.error("修改失败！")
    })
}
onMounted(() => {
  handleChangePage()
})
</script>

<style scoped>
.storeManagerDiv {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}
.storeManagerTableDiv {
  width: 100%;
  height: calc(90% - 20px);
  margin-top: 10px;
}
.storeManagerPaginationDiv {
  height: 5%;
  margin-top: 10px;
  min-height: 32px;
}
.storeManagerSearchDiv {
  height: 5%;
  width: 100%;
}
.searchInput {
  width: calc(30% + 100px);
}
</style>
