<template>
  <div class="tab-content">
    <el-card shadow="hover">
      <el-form ref="queryFormRef" :inline="true" label-width="100px">
        <el-form-item label="类别" prop="supplierNo">
          <el-input placeholder="" clearable />
        </el-form-item>
        <el-form-item label="品牌" prop="enterpriseName">
          <el-input placeholder="" clearable />
        </el-form-item>

        <el-form-item label="资质状态" prop="buyer">
          <el-select placeholder="" clearable> </el-select>
        </el-form-item>
        <el-form-item label="到期时间" prop="supplyStatus">
          <el-date-picker></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search">搜索</el-button>
          <el-button icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- <div class="info-section">
      <div class="section-title-row">
        <div class="section-title-left">
          <span class="section-title-text">供货类目</span>
        </div>
        <el-button v-if="!isViewMode" type="primary" icon="Document" @click="emit('saveCategories')">保存</el-button>
      </div>

      <el-checkbox-group v-model="selectedCategoriesProxy" class="category-group" :disabled="isViewMode">
        <el-checkbox v-for="category in productCategoryList" :key="category.id" :label="String(category.id)">
          {{ category.categoryName }}
        </el-checkbox>
      </el-checkbox-group>
    </div> -->

    <!-- <div class="info-section">
      <div class="section-title-row">
        <div class="section-title-left">
          <span class="section-title-text">供货品牌</span>
        </div>
        <div>
          <el-button v-if="!isViewMode" type="primary" icon="Plus" @click="emit('addBrand')">新增</el-button>
        </div>
      </div>
      <div class="brand-display-wrapper">
        <el-tag
          v-for="brand in selectedBrands"
          :key="brand.id"
          closable
          @close="emit('removeBrand', brand)"
          style="margin-right: 10px; margin-bottom: 10px"
        >
          {{ brand.brandName }}
        </el-tag>
        <span v-if="selectedBrands.length === 0" style="color: #999">暂无品牌信息</span>
      </div>
    </div> -->

    <!-- <div class="info-section">
      <div class="section-title-row">
        <div class="section-title-left">
          <span class="section-title-text">供货区域</span>
        </div>
        <el-button v-if="!isViewMode" type="primary" icon="Edit" @click="emit('editSupplyArea')">编辑</el-button>
      </div>
      <el-table :data="supplyAreaList" border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="province" label="供货区域（省）" align="center">
          <template #default="scope">
            <span>{{ scope.row.province || '' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="供货区域（市）" align="center">
          <template #default="scope">
            <span>{{ scope.row.city || '' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div> -->

    <div class="info-section">
      <div class="section-title">授权详情信息列表</div>
      <el-table :data="authorizationList" border style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="80" />
        <!-- <el-table-column prop="supplierName" label="供应商名称" align="center" /> -->
        <el-table-column prop="brandName" label="名称" align="center" />
        <el-table-column label="一级分类" align="center">
          <template #default="scope">
            <span>{{ scope.row.categorysMap?.oneLevelName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="二级分类" align="center">
          <template #default="scope">
            <span>{{ scope.row.categorysMap?.twoLevelName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="三级分类" align="center">
          <template #default="scope">
            <span>{{ scope.row.categorysMap?.threeLevelName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authorizedStatus" label="状态" align="center">
          <template #default="scope">
            <span>{{ getAuthorizedStatusText(scope.row.authorizedStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="authorizationEndTime" label="资质到期时间" align="center">
          <template #default="scope">
            <span>{{ scope.row.authorizationEndTime ? formatDate(scope.row.authorizationEndTime) : '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="province" label="授权区域(省)" align="center" />
        <el-table-column prop="city" label="授权区域(市)" align="center" /> -->

        <el-table-column label="操作" align="center" width="100">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="primary" @click="handleView(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="handleView(scope.row)">隐藏</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; display: flex; justify-content: flex-end">
        <Pagination
          v-model:page="authorizationPagination.pageNum"
          v-model:limit="authorizationPagination.pageSize"
          :total="authorizationPagination.total"
          @pagination="emit('authorizationPagination')"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { computed } from 'vue';
const props = defineProps<{
  isViewMode: boolean;
  productCategoryList: any[];
  selectedCategories: string[];
  selectedBrands: any[];
  supplyAreaList: any[];
  authorizationList: any[];
  authorizationPagination: { pageNum: number; pageSize: number; total: number };
  formatDate: (date: any) => string;
  getAuthorizedStatusText: (status: string) => string;
}>();

const router = useRouter();

/** 查看授权详情，跳转到供应商授权查看页面 */
const handleView = (row: any) => {
  router.push({ path: '/supplierexam/detail', query: { id: row.id } });
};

const emit = defineEmits<{
  (e: 'saveCategories'): void;
  (e: 'addBrand'): void;
  (e: 'removeBrand', brand: any): void;
  (e: 'editSupplyArea'): void;
  (e: 'authorizationPagination'): void;
  (e: 'update:selectedCategories', value: string[]): void;
}>();

const selectedCategoriesProxy = computed({
  get: () => props.selectedCategories,
  set: (value) => emit('update:selectedCategories', value)
});
</script>
