<template>
  <!-- #ifdef H5 -->
	<zj-page-layout>
		<view class="card">
			<view class="row">
				<view class="left">选择品牌</view>
				<view class="right">
					<picker v-model="brand" mode="selector" :range="brandList" range-key="brandName" @change="changeBrand">
						<view class="picker">
							<view v-if="brand >= 0">{{brandList[brand].brandName}}</view>
							<view v-else style="color: #666666;">请选择</view>
							<text class="iconfont icon-arrow_right"></text>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="card">
			<view class="row" @tap.stop="chooseClassify">
				<view class="left">选择产品品类</view>
				<view class="right">
					<view v-if="smallName">{{mainName}}-{{smallName}}</view>
					<view v-else style="color: #666666;">请选择</view>
					<text class="iconfont icon-arrow_right"></text>
				</view>
			</view>
		</view>

		<view class="main-container">
			<view class="title">在你预约专业人员维修前，可对照下图进行检查</view>
			<view class="content">
				<view class="list">
					<view class="item" v-for="(item, index) in dataList" :key="index" @tap="openDetail(item)">
						<view class="name ellipsis">{{item.content1}}</view>
						<text class="iconfont icon-arrow_right"></text>
					</view>
				</view>
        <Loading
           v-if="!dataList.length"
        	:type="3"
        	:loadStatus="2"
        	:showText="isSearch ? '暂无故障自查数据' : '请选择条件进行查询'"
        />
			</view>
		</view>

		<view class="global-mask" v-if="isShowDetail" @tap="closeDetail()"></view>
		<view class="detail-container" v-if="isShowDetail">
			<view class="title">故障排查指引（{{bannerCurrent+1}}/{{detailList.length}}）</view>
			<view class="name">{{detailTitle}}</view>
			<view class="bottom">
				<view class="swiper-container">
					<swiper @change="changeBanner" :autoplay="false">
						<block v-for="(item, index) in detailList" :key='index'>
							<swiper-item>
								<view class="content">{{item.content2}}</view>
							</swiper-item>
						</block>
					</swiper>
					<view class="dots-conatiner">
						<view class="con" :style="'width:'+(detailList.length * 20)+'rpx;'" >
							<view class="dot" :style=" 'transform:translateX('+ (bannerCurrent * 100) +'%)' "  ></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</zj-page-layout>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageHome/pages/service/troubleshoot`, pam,crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	export default {
		data() {
			return {
				brand: '0',
				mainId: '',
				mainName: '',
				smallId: '',
				smallName: '',

				brandList: [],
				isSearch: false,
				dataList: [],

				isShowDetail: false,
				detailTitle: '',
				detailList: [],
				bannerCurrent: 0,
			}
		},

		watch: {
			tabList() {
				this.$nextTick(() => {
					this.resize()
				})
			},
		},

		onLoad() {
			this.getBrandList();

			this.crossPage.$on('chooseClassify', res => {
				this.mainId = res.pid;
				this.mainName = res.pname;
				this.smallId = res.cid;
				this.smallName = res.cname;
				this.getList();
			})
		},

		methods: {
			getList() {
				if(this.brand>=0 && this.smallId) {
					this.$api.get('/charging/list', {
            type: 2,
            pageNum: 1,
            pageSize: -1,
            brandId: this.brandList[this.brand].id,
            twoCategoryId: this.smallId
					}).then(res => {
						this.dataList = res.data.records;
						this.isSearch = true;
					})
				}
			},

			// 获取品牌列表
			getBrandList() {
				this.$api.get('/charging/brand/list')
        .then(res => {
					this.brandList = res.data;
				})
			},

			chooseClassify() {
				this.$navToPage({
					url: '/packageHome/pages/service/classify'
				})
			},

			changeBrand(e) {
				this.brand = e.detail.value;
				this.getList();
			},

			openDetail(item) {
				this.$api.get('/charging/detaillist', {
          type: 2,
          brandId: this.brandList[this.brand].id,
          twoCategoryId: this.smallId,
          chargingStandardTypeId: '',
          content1: item.content1
				}).then(res => {
					this.isShowDetail = true;
					this.detailTitle = item.content1;
					this.detailList = res.data;
				})
			},

			closeDetail() {
				this.isShowDetail = false;
				this.bannerCurrent = 0;
			},

			changeBanner(e) {
				this.bannerCurrent = e.detail.current;
			},
		}
	}
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },

    onLoad(pam) {
      this.pam = pam;
    },
  }
  // #endif
</script>

<style scoped lang="scss">
	.card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		margin: 20rpx 20rpx 0;
		.row {
			border-bottom: 1px solid #F4F2F2;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			min-height: 88rpx;
			box-sizing: border-box;
			&:last-child {
				border: none;
			}
			.left {
				font-size: 28rpx;
				color: #333333;
				flex-shrink: 0;
			}
			.right {
				flex: 1;
				margin-left: 40rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.iconfont {
					color: #999999;
				}
				input, textarea {
					width: 100%;
					font-size: 28rpx;
					text-align: right;
				}
				picker {
					flex: 1;
				}
				.picker {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex: 1;
				}
				image {
					width: 16rpx;
					height: 28rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

	.main-container {
		margin-top: 40rpx;
		.title {
			font-size: 28rpx;
			color: #999999;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
		}
		.content {
			padding: 0 20rpx;
			.list {
				background: #ffffff;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 0 20rpx;
				.item {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					min-height: 88rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #eaeaea;
					&:last-child {
						border: none;
					}
					.name {
						flex: 1;
						font-size: 28rpx;
						color: #333333;
					}
					.iconfont {
						margin-left: 20rpx;
						color: #999999;
						flex-shrink: 0;
					}
				}
			}
		}
	}

	.detail-container {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		background: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		.title {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #eaeaea;
		}
		.name {
			padding: 20rpx 30rpx 0;
			font-weight: 600;
			font-size: 30rpx;
		}
		.bottom {
			height: 60vh;
			padding: 0 30rpx;
			.swiper-container {
				position: relative;
				margin-top: 20rpx;
				swiper {
					height: calc(60vh - 80rpx);
				}
				.content {
					height: calc(60vh - 80rpx);
					width: 100%;
					display: block;
					margin: 0 auto 0;
					border-radius: 15rpx;
					overflow: hidden;
					overflow-y: scroll;
					box-sizing: border-box;
				}
				.dots-conatiner {
					position: absolute;
					width: 100%;
					left: 0;
					bottom: -40rpx;
					z-index: 1000;
					display: flex;
					align-items: center;
					justify-content: center;
					.con {
						border-radius: 8rpx;
						overflow: hidden;
						height: 8rpx;
						background-color: rgba($color: $theme-color, $alpha: 0.3);
					}
					.dot {
						width: 20rpx;
						height: 8rpx;
						background-color: $theme-color;
						transition: all .3s;
					}
				}
			}
		}
	}
</style>
