<template>
  <el-dialog title="请选择用户" width="1000px" v-model="visible">
    <div class="content">
      <el-form :model="queryForm" inline>
        <!-- <el-form-item>
          <el-input v-model="queryForm.no" placeholder="请输入商户号" />
        </el-form-item> -->
        <el-form-item>
          <el-input v-model="queryForm.shopName" placeholder="请输入商户名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">查询</el-button>
          <el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData.list" v-loading="tableData.loading" stripe border
        style="width: 100%; margin-top: 20px;">
        <el-table-column label="商户名称" prop="shopName"></el-table-column>
        <el-table-column label="联系人姓名" prop="contactName"></el-table-column>
        <el-table-column label="联系人电话" prop="phone"></el-table-column>
        <el-table-column label="店铺类型" prop="shopType" width="100">
          <template #default="scope">
            <el-tag :type="typeFilter(scope.row.shopType).type">{{ typeFilter(scope.row.shopType).label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="row mt14">
        <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
          :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="">确定</el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import ShopApi from "@/api/account/shop";

// 店铺类型过滤器
type TagType = 'primary' | 'success' | 'danger' | 'info' | 'warning';
function typeFilter(shopType: string): { value: string; label: string; type: TagType } {
  const typs: Array<{ value: string; label: string; type: TagType }> = [
    {
      value: 'only',
      label: '单店',
      type: 'primary'
    },
    {
      value: 'chain',
      label: '连锁',
      type: 'success'
    },
    {
      value: 'join',
      label: '加盟',
      type: 'danger'
    }
  ];

  const obj = typs.find(item => item.value === shopType);
  return obj ? obj : { value: shopType, label: shopType, type: 'info' };
}

const visible = ref(false);

const queryForm = ref({
  shopName: "",
});

// 分页大小发生变化
function handleSizeChange(e: number) {
  tableData.size = e;
  getTableData();
}

// 分页发生变化
function handleCurrentChange(e: number) {
  tableData.page = e;
  getTableData();
}

// 查询
function searchHandle() {
  tableData.page = 1;
  getTableData();
}

// 重置
function resetHandle() {
  queryForm.value.shopName = "";
  tableData.page = 1;
  getTableData();
}

const tableData = reactive({
  loading: false,
  page: 1,
  size: 10,
  total: 0,
  list: [],
});

// 获取店铺列表
async function getTableData() {
  try {
    tableData.loading = true;
    const res: any = await ShopApi.getList({
      page: tableData.page,
      size: tableData.size,
      shopName: queryForm.value.shopName,
    });
    tableData.list = res.records;
    tableData.total = res.totalRow;
  } catch (err) {
    console.error(err);
  } finally {
    tableData.loading = false;
  }
}

const emits = defineEmits<{
  (e: 'success', row: any): void;
}>();

function selectHandle(row: any) {
  console.log("选择商户：", row);
  emits('success', row);
  visible.value = false;
}

function show() {
  visible.value = true;
}

defineExpose({
  show,
});

onMounted(() => {
  getTableData();
}); 
</script>

<style scoped lang="scss">
.row {
  &.mt14 {
    margin-top: 14px;
  }
}
</style>