<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'vip' }">会员服务</el-breadcrumb-item>
        <el-breadcrumb-item>团体会员</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="mt20">
        <div class="queryBox">
          <el-form v-model="query">
            <el-form-item label="省份/城市:">
              <el-select class="mr10">
                <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              <el-select>
                <el-option
                    v-for="item in cities"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="团体级别:">
              <el-radio-group v-model="query.level">
                <el-radio-button label="-1">全部</el-radio-button>
                <el-radio-button label="0">一级团体会员</el-radio-button>
                <el-radio-button label="1">二级团体会员</el-radio-button>
                <el-radio-button label="2">职业性团体会员</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="当前状态:">
              <el-radio-group v-model="query.level">
                <el-radio-button label="-1">全部</el-radio-button>
                <el-radio-button label="0">正常</el-radio-button>
                <el-radio-button label="1">已过期</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <div class="search">
            <el-input
                v-model="query.name"
                placeholder="请输入团体会员名称查询"
                :suffix-icon="Search"
            />
          </div>
        </div>
      </el-card>

      <el-card class="mb20 mt20">
        <template #header>
          <div class="card-header">
            <span>团体会员列表</span>
            <span class="fontsize14"><i class="text-danger">35</i> 条数据</span>
          </div>
        </template>
        <div class="teamVipItem" v-for="n in 3">
          <div class="imgbox"><img/></div>
          <div class="info">
            <h3 class="esp">北京市跆拳道协会1</h3>
            <p class="esp">
              <el-icon>
                <LocationFilled/>
              </el-icon>
              北京市丰台区芳城园一区日月天地大厦B座506 拷贝
            </p>
            <p class="esp">
              <span><el-icon><PhoneFilled/></el-icon>13912345678</span>
              <span><el-icon><Checked/></el-icon>注册时间: 2021-08-05</span>
              <span><el-icon><Failed/></el-icon>到期时间：2023-11-05<i class="text-info">（正常）</i></span>
            </p>
          </div>
        </div>

        <div class="pc-page-box">
          <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList"/>
        </div>
      </el-card>

    </div>
  </div>
</template>
<script setup>
import { Search,ArrowRight } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const query = ref({})
const total = ref(0)
const cities = ref([])
onMounted(() => {

})
const goDetail = (id) => {
  router.push({
    path: `/news/detail/${id}`
  })
}
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>