<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20 forPc" :separator-icon="ArrowRight">
        <el-breadcrumb-item>
          <el-icon>
            <HomeFilled />
          </el-icon>
          首页
        </el-breadcrumb-item>
        <!--        <el-breadcrumb-item :to="{ path: '/vip/index' }">会员服务</el-breadcrumb-item>-->
        <el-breadcrumb-item>考点列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="mb20 mt20">
        <el-row class="topNews newsimgcover" :gutter="20">
          <el-col :span="4">
            <el-card :body-style="{padding:0}">
              <ul class="meunUl">
                <li v-for="r in regionsList" :key="r.id" :class="{'active':r.id==currRegion.id}" @click="changePv(r)">
                  {{ r.cityName }}
                  <el-tag round type="info">{{ r.count }}</el-tag>
                </li>
              </ul>
            </el-card>
          </el-col>
          <el-col :span="20">
            <el-card :body-style="{'background':'#fafafc'}">
              <template #header>
                <div class="searchbb">
                  <div class="text-muted">
                    <el-icon>
                      <LocationInformation />
                    </el-icon>
                    {{ currRegion?.cityName }}
                  </div>
                  <el-form style="width: 300px;display: inline-block">
                    <el-form-item>
                      <el-input
                        v-model="query.name"
                        placeholder="输入关键字"
                        :suffix-icon="Search" style="width: 225px;"
                        @keyup.enter="getList"
                      />
                      <el-button style="margin-left: 10px" type="primary" round @click="getList">搜索</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </template>

              <el-row :gutter="20">
                <!--                139贵州-->
                <el-col v-for="n in examSiteList" :key="n.memId" :lg="8" :sm="24" :md="8">
                  <div class="item">
                    <div class="imgbox" :style="n.pictures?'background:#fff':''">
                      <img :src="fillImgUrl(n.pictures?.split(',')[0])">
                    </div>
                    <div class="info">
                      <h2 class="esp">{{ n.name }}</h2>
                      <p class="esp">
                        <el-icon>
                          <LocationFilled />
                        </el-icon>
                        {{ n.adress }}
                      </p>
                      <p class="esp">
                        <el-icon>
                          <PhoneFilled />
                        </el-icon>
                        {{ n.contact }} —— {{ n.phone }}
                      </p>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-empty v-if="total == 0" description="暂无数据" />
              <div v-else class="pc-page-box">
                <PaginationPc
                  v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total"
                  @pagination="getList"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getExamRegionsList, getExamSiteList } from '@/apiPc/common'
import _ from 'lodash'

const regionsList = ref([])
const currRegion = ref(null)
const examSiteList = ref([])
const total = ref(0)
const query = ref({
  pageSize: 15,
  pageNum: 1,
  provinceId: null,
  name: null
})

onMounted(() => {
  getRegionsList().then(getList)
})
const getRegionsList = () => {
  return getExamRegionsList().then((res) => {
    const sum = _.sumBy(res.data, (d) => d.count)
    res.data.unshift({
      id: null,
      cityName: '全国',
      count: sum
    })

    regionsList.value = res.data
    currRegion.value = res.data[0]
  })
}
const getList = () => {
  query.value.provinceId = currRegion.value.id
  getExamSiteList(query.value).then(res => {
    examSiteList.value = res.rows
    total.value = res.total
  })
}
const changePv = (r) => {
  currRegion.value = r
  getList()
}
</script>

<style scoped lang="scss">
.item {
  background: #fff;
  box-shadow: 0 0 6px #eee;

  .info {
    padding: 0 15px 10px;
  }

  &:hover {
    box-shadow: 0 0 6px #ddd;
  }
}

.newsimgcover .item .imgbox {
  height: 190px;
  width: 100%;
}

.searchbb {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :deep(.el-form-item--default) {
    margin: 0 0 5px
  }
}

.meunUl {
  li {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 0 15px;
    line-height: 50px;
    align-items: center;
    border-bottom: 1px solid #eee;

    &:hover {
      background: #eee;
    }

    &.active {
      border-left: 2px solid var(--el-color-primary);
      color: var(--el-color-primary)
    }
  }
}
</style>