<template>
	<div>
		<menu-modal></menu-modal>
		<div class="main-container">
			<div class="wrap">
				<div class="bread-menu" style="margin-top: 20px;padding: 0;">
					<nuxt-link to="/">首页></nuxt-link>
					<span>联系我们</span>
					<div class="clearfix" style="margin-top:22px">
						<div style="float:left;width:526px;margin-right:69px;">
							<div style="font-size:20px;font-weight:Bold;text-align:center;margin-bottom:30px">欣新房车全国分布图</div>

							<viewer>
								<img
									id="image"
									src="https://mgmt.dfangche.com/xxfccn/image/contact/map.jpg"
									alt
									style="width:526px;height:430px"
								/>
							</viewer>
						</div>
						<div style="float:left;width:500px">
							<div style="font-size:20px;font-weight:Bold;text-align:center;margin-bottom:30px">欣新房车集团总部</div>
							<img
								src="https://mgmt.dfangche.com/xxfccn/image/contact/xxfc.jpg"
								alt
								style="width:500px;height:320px"
							/>
							<p style="font-size:20px;margin-top:24px;color:#333333">欣新房车控股集团股份有限公司</p>
							<div style="margin-top:25px;color:#666666">
								<i class="el-icon-phone"></i>
								4000-369-369
							</div>
							<div style="margin-top:13px;color:#666666">
								<i class="el-icon-location"></i>
								广东省 东莞市 松山湖 高新技术产院工业西路12号
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="background-color: #fff">
				<div class="wrap-list">
					<div style="font-weight:600;font-size:20px;text-align: center;">
						<span>全国子公司</span>
					</div>
					<!-- 省份 -->
					<div class="province-city">
						<span style="margin-right:14px">省份</span>
						<el-select v-model="province" placeholder="请选择省份" @change="provinceChanged">
							<el-option :key="''" :label="'全部'" :value="''"></el-option>
							<el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.code"></el-option>
						</el-select>
						<span style="margin:0 14px 0 35px">城市</span>
						<el-select v-model="city" :loading="loadingCity" @change="cityChanged" placeholder="请选择城市">
							<el-option :key="''" :label="'全部'" :value="''"></el-option>
							<el-option v-for="item in cities" :key="item.code" :label="item.name" :value="item.code"></el-option>
						</el-select>
						<el-button
							plain
							@click="chooseCity()"
							style="margin-left:35px;width:104px;height:38px"
							icon="el-icon-search"
						>筛选</el-button>
					</div>
					<!-- 公司 -->
					<div style="margin-top: 31px;" v-if="this.visibility">该城市暂时没有分公司信息</div>
					<div v-if="!this.visibility">
						<ul class="v-ul clearfix">
							<li v-for="item in childDetail" :key="item.comnpanyBaseId" style="text-align: left;">
								<h2 style="font-size:18px;margin-bottom:24px">{{item.name}}</h2>
								<h2 style="font-size:12px;color:#999;margin-bottom:7px">
									<i class="el-icon-phone"></i>
									电话:{{item.leaderContactInfo}}
								</h2>
								<h2 style="font-size:12px;color:#999">
									<i class="el-icon-location"></i>
									{{item.provinceName}} {{item.cityName}} {{item.townName}} {{item.address}}
								</h2>
							</li>
						</ul>
						<div class="pagination-container">
							<el-pagination
								@current-change="handleCurrentChange"
								:current-page.sync="listQuery.page"
								@size-change="handleSizeChange"
								:page-sizes="[10,20,30, 50]"
								:page-size="listQuery.limit"
								layout="total, sizes, prev, pager, next, jumper"
								:total="totalCount"
							></el-pagination>
						</div>
					</div>
				</div>
			</div>
		</div>

		<go-top></go-top>
		<footer-modal></footer-modal>
	</div>
</template>

<script>
// new Viewer(image, {
//     url(image) {
//       return image.src.replace('thumb_', '');
//     },
//   });
import axios from '../plugins/axios'
import menuModal from '../components/menu'
import footerModal from '../components/footer'
import vehicleBanner from '../components/vehicleBanner'
import GoTop from '../components/goTop'
import provinceCity from '../assets/code.json'
// import Viewer from 'viewerjs';
export default {
	transition: 'bounce',
	components: {
		GoTop,
		menuModal,
		footerModal,
		vehicleBanner
	},
	created() {
		this.getAll()
		this.provinces = provinceCity.provinces
	},
	mounted() {
		this.province = this.provinceCode
		this.provinceChanged(this.provinceCode)
		this.city = this.cityCode
	},
	data() {
		return {
			visibility: false,
			childDetail: [],
			listQuery: {
				addrCity: '',
				addrProvince: '',
				page: 1,
				limit: 10
			},
			totalCount: 0,
			loadingCity: false,
			province: '',
			city: '',
			provinces: [],
			cities: []
		}
	},
	methods: {
		async getAll() {
			let {
				data: { data }
			} = await axios.post('api/uccn/app/unauth/branch_company/page', {
				page: this.listQuery.page,
				limit: this.listQuery.limit,
				addrCity: this.listQuery.addrCity,
				addrProvince: this.listQuery.addrProvince
			})

			this.childDetail = data.data
			if (this.childDetail == undefined) {
				this.visibility = true
			} else {
				this.visibility = false
			}
			this.totalCount = data.totalCount
			console.log(this.childDetail)
			this.listQuery.addrCity = ''
			this.listQuery.addrProvince = ''
		},
		handleCurrentChange(val) {
			console.log(this.listQuery)

			this.listQuery.page = val
			this.getAll()
		},
		handleSizeChange(val) {
			this.listQuery.limit = val
			this.listQuery.page = 1
			this.getAll()
		},
		provinceChanged(value) {
			if (value !== '') {
				this.loadingCity = true
				for (var item of this.provinces) {
					if (item.code === value) {
						this.cities = item.cities
						this.city = ''
						this.loadingCity = false
						break
					} else {
						continue
					}
				}
			} else {
				this.cities = []
				this.city = ''
			}
			this.$emit('selectChange', this.province, this.city)
		},
		cityChanged(value) {
			this.$emit('selectChange', this.province, this.city)
		},
		chooseCity() {
			if (this.city == undefined && this.province == undefined) {
				// 没选
				console.log(1)
				return
			}
			if (this.city == '' && this.province == '') {
				//全选
				this.getAll()
				console.log(2)
			}
			if (this.city == '' && this.province != '') {
				//选省没选市
				this.listQuery.addrProvince = this.province
				this.getAll()
				console.log(3)
			}
			if (this.city != '' && this.province != '') {
				//选省选市
				this.listQuery.addrProvince = this.province
				this.listQuery.addrCity = this.city
				this.getAll()
				console.log(4)
			}
		}
	},
	head() {
		return {
			title: this.headList.title,
			meta: [
				{
					hid: 'keywords',
					name: 'keywords',
					content: this.headList.keywords
				},
				{
					hid: 'description',
					name: 'description',
					content: this.headList.description
				}
			]
		}
	},
	async asyncData() {
		const { data } = await axios.get(
			'/api/app/banner/app/unauth/findBannerlist?type=1&platform=1'
		)
		let cc = data.data
		let headData = await axios.get(
			'/api/uccn/seo/app/unauth/officialWebsite/3'
		)
		let head = headData.data.data
		return { bannerList: cc, headList: head }
	}
}
</script>

<style scoped>
.clearfix:after {
	/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

.wrap-list {
	width: 1120px;
	margin: 0 auto 0px auto;
	padding-top: 49px;
	padding-bottom: 40px;
}
.v-ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 31px;
}
.v-ul li {
	margin: 0;
	padding: 20px;
	list-style: none;
	float: left;
	width: 540px;
	height: 140px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
	margin-bottom: 30px;
	/* border:1px solid #eee */
	/* font-size: 22px;
  padding-right: 30px; */
}
.v-ul li:nth-child(odd) {
	margin-right: 40px;
}
.province-city {
	text-align: center;
	margin-top: 40px;
}
</style>
