<template>
  <div>
    <div class="box">
      <el-breadcrumb class="mt20" :separator-icon="ArrowRight">
        <el-breadcrumb-item>
          <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 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-if="query.provinceId!=110000&&query.provinceId!=310000&&query.provinceId!=120000&&query.provinceId!=500000"
                v-model="query.cityId" clearable
                @change="handleSearch"
              >
                <el-option
                  v-for="item in citieList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="单位级别:">
              <el-radio-group v-model="query.deptAType" @change="handleSearch">
                <el-radio-button label="">全部</el-radio-button>
                <el-radio-button label="1">一级单位会员</el-radio-button>
                <el-radio-button label="2">二级单位会员</el-radio-button>
                <!--                <el-radio-button label="3">三级单位会员</el-radio-button>-->
                <el-radio-button label="4">职业性单位会员</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="当前状态:">
              <el-radio-group v-model="query.status" @change="handleSearch">
                <el-radio-button label="">全部</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>
          
          <div class="search forPc">
            <el-input
              v-model="query.name"
              clearable
              placeholder="请输入单位会员名称查询"
              :suffix-icon="Search"
              style="width: 230px;"
              @keyup.enter="handleSearch"
            />
            <el-button style="margin-left: 10px" type="primary" round @click="handleSearch">搜索</el-button>
          </div>
          <div class="search weiSearchbox forWei">
            <el-input
              v-model="query.name"
              clearable
              placeholder="请输入单位会员名称查询"
              :suffix-icon="Search"
              style="width: 230px;"
              @keyup.enter="handleSearch"
            />
            <el-button style="margin-left: 10px" type="primary" round @click="handleSearch">搜索</el-button>
          </div>
        </div>
      </el-card>
      <div class="card-header">
        <span class="text-primary-l-border">单位会员列表</span>
        <span class="fontsize14">筛选 <i class="text-danger">{{ total }}</i> 条数据</span>
      </div>
      
      <el-row :gutter="20">
        <el-col v-for="m in memList" :key="m.memId" :lg="12" :md="12" :sm="24">
          <a class="teamVipItem" @click="godetail(m)">
            <div class="popo">
              <span v-if="m.valiStatus=='1'" class="zc">{{ m.valiStr }}</span>
              <span v-if="m.valiStatus=='2'" class="gq">{{ m.valiStr }}</span>
            </div>
            <div class="imgbox" style="background: #fff">
              <!--              <img v-if="m.pictures" :src="fillImgUrl_webSite(m.pictures.split(',')[0])">-->
              <el-image
                :src="fillImgUrl_webSite(m.pictures?.split(',')[0])"
                style="width: 100%;height: 100%;"
              >
                <template #error>
                  <img src="/img/default.jpg">
                </template>
              </el-image>
            </div>
            <div class="info">
              <h3 class="esp">{{ m.name }}</h3>
              <p class="esp">
                <el-icon>
                  <LocationFilled />
                </el-icon>
                {{ m.certAddress || '--' }}
              </p>
              <p class="esp">
                <span><el-icon><PhoneFilled /></el-icon>{{ m.certSiteTel || '--' }}</span>
              </p>
              <p>
                <span><el-icon><Checked /></el-icon>注册时间: {{ m.beginTime?.substr(0, 10) || '--' }}</span>
              </p>
              <p>
                <span><el-icon><Failed /></el-icon>到期时间：{{ m.validityDate?.substr(0, 10) || '--' }}
                </span>
              </p>
            </div>
          </a>
        
        </el-col>
      </el-row>
      
      <div v-if="total>0" class="pc-page-box">
        <PaginationPc v-model:page="query.pageNum" v-model:limit="query.pageSize" :total="total" @pagination="getList" />
      </div>
      <el-empty v-else />
      <div style="height: 50px" />
    </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 { getMemberList, getRegionsList } from '@/apiPc/common'
import _ from 'lodash'
import { getMemListwebsite } from '@/apiPc/local'

const route = useRoute()
const router = useRouter()
const query = ref({
  pageNum: 1,
  pageSize: 10,
  provinceId: '',
  cityId: '',
  deptAType: '1',
  status: '', // 1 正常；2 过期
  name: ''
})
const total = ref(0)
const memList = ref([])
const provinceList = ref([])
const citieList = ref([])

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

const changeProvince = () => {
  query.value.cityId = ''
  if (query.value.provinceId) {
    citieList.value = _.find(provinceList.value, (p) => p.value == query.value.provinceId).children
  } else {
    citieList.value = []
  }
  
  handleSearch()
}

const handleSearch = () => {
  query.value.pageNum = 1
  getList()
}

const getList = () => {
  getMemberList(query.value).then((res) => {
    // getMemListwebsite(query.value).then((res) => {
    memList.value = res.rows
    total.value = res.total
  })
}

const godetail = (m) => {
  // if (m.name.indexOf('省') > -1 || m.name.indexOf('北京市') > -1 || m.name.indexOf('上海市') > -1 || m.name.indexOf('天津市') > -1 || m.name.indexOf('重庆市') > -1|| m.name.indexOf('内蒙古自治区') > -1 ) {
  // window.location.href = `https://testnew.taekwondo.org.cn/#/local/index/${m.memId}`
  router.push({ path: '/local/index/' + m.memId })
  // } else {
  //   return
  // }
}
</script>
<style lang="scss" scoped>
.el-radio-button {
  margin-right: 15px;
  
  :deep(span.el-radio-button__inner) {
    border: none;
  }
}

:deep(.el-radio-button .el-radio-button__inner) {
  border-radius: 4px !important;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 4px !important;
}

//:deep(.el-input__wrapper){background-color:#eee;border: none;}
.card-header {
  display: flex;
  background: #fff;
  margin: 20px 0;
  padding: 15px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  justify-content: space-between;
  align-items: center;
  
  .text-primary-l-border {
    border-width: 3px;
  }
  
  i {
    text-decoration: none;
    font-style: normal;
  }
}

.teamVipItem {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  margin: 0 0 20px;
  display: block;
  background: #fff;
  padding: 20px 15px;
  border-radius: 4px;
  
  .popo {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    
    span {
      border-radius: 0 4px 0 10px;
      color: #fff;
      padding: 2px 12px;
      display: inline-block;
    }
    
    .zc {
      background: #32b16c;
    }
    
    .gq {
      background: #ec6941;
    }
  }
  
  .info {
    display: block;
    
    p {
      margin: 5px 0;
    }
  }
}

.teamVipItem .imgbox {
  height: 113px;
}

.weiSearchbox {
  position: relative
}

@media screen and (max-width: 768px) {
  .teamVipItem {
    padding: 15px 10px;
  }
  .teamVipItem .imgbox {
    width: 120px;
  }
  .teamVipItem .info {
    padding-left: 140px;
  }
  .teamVipItem .info p {
    font-size: 12px;
  }
  .teamVipItem .info h3 {
    font-size: 15px;
  }
}
</style>