<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: 'local' }">地方协会</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 v-model="query.provinceId" class="mr10" clearable @change="changeProvince">
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="query.cityId" clearable @change="handleQuery">
                <el-option
                  v-for="item in cities"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div class="search">
            <el-input
              v-model="query.name"
              placeholder="请输入名称查询"
              clearable
              @keyup.enter="handleQuery"
            >
              <template #suffix>
                <el-icon @click="handleQuery"><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </el-card>

      <el-card class="mb20 mt20">
        <template #header>
          <div class="card-header">
            <span>团体会员列表</span>
            <span class="fontsize14"><i class="text-danger">{{ total }}</i> 条数据</span>
          </div>
        </template>
        <div v-for="n in dataList" :key="n.memId" class="teamVipItem">
          <div class="imgbox">
            <el-image :src="n.pictures?fillImgUrl(n.pictures.split(',')[0]):''" />
          </div>
          <div class="info">
            <h3 class="esp">{{ n.name }}</h3>
            <p class="esp">
              <el-icon><LocationFilled /></el-icon>
              {{ n.address }}
            </p>
            <p class="esp_2">
              <el-icon><List /></el-icon>
              {{ n.introduce }}
            </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'
import { regionsList } from '@/api/system/userInfo'
import _ from 'lodash'
import { getLocalList } from '@/apiPc/local'

const route = useRoute()
const router = useRouter()
const query = ref({
  pageNum: 1,
  pageSize: 10
})
const provinceList = ref([])
const cities = ref([])
const dataList = ref([])
const total = ref(0)

onMounted(() => {
  regionsList().then((res) => {
    provinceList.value = res.data
  })

  handleQuery()
})

function changeProvince() {
  query.value.cityId = ''
  if (query.value.provinceId) {
    cities.value = _.find(provinceList.value, (p) => p.value == query.value.provinceId).children
  } else {
    cities.value = []
  }
  handleQuery()
}

function handleQuery() {
  query.value.pageNum = 1
  getList()
}

function getList() {
  getLocalList(query.value).then((res) => {
    total.value = res.total
    dataList.value = res.rows
  })
}
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>