<template>
	<view class="solution">
		<view class="search">
			<search class="search" :tips="options.search ? options.search : '搜索关键词'" @event="onTargetDetail(2)" />
		</view>
		<view class="btn">
			<u-button type="primary" shape="circle" text="门店定制解决方案预定" @click="onApply">门店定制解决方案预定</u-button>
		</view>
		<view class="grid">
			<u-grid :border="false">
				<u-grid-item v-for="(item,index) in baseList" :key="index" @click="onTargetDetail(item.category_id)">
					<image
						:src="item.image ? item.image.preview_url : 'https://file.gxwebsoft.com/20220820/5794a3c1ed9b4d6b94737e4ebc36ce90.png'"
						class="avatar" mode="widthFix"></image>
					<text class="grid-text">{{item.name}}</text>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	import * as CategoryApi from '@/api/solution/category.js'
	import * as SolutionOrderApi from '@/api/order.js'
	import Search from './components/search'
	export default {
		components: {
			Search
		},
		data() {
			return {
				baseList: [],
				// 是否已购买门店解决方案
				orderType: false
			}
		},
		onLoad(options) {
			const app = this
			// 获取文章分类数据
			app.getCategoryList(options.categoryId)
			// 门店解决方案订单
			app.getSolutionOrder()
		},
		methods: {
			// 获取文章分类数据
			getCategoryList(categoryId) {
				CategoryApi.list({
					type: 'solution'
				}).then(result => {
					this.baseList = result.data.list
				})
			},
			// 门店解决方案订单
			getSolutionOrder() {
				const app = this
				SolutionOrderApi.list({
					dataType: 'all',
					page: 1,
					orderType: 1
				}, {
					load: false
				}).then(result => {
					if (result.data.list.total > 0) {
						app.orderType = true
					}
				})
			},
			// 跳转文章详情页
			onTargetDetail(categoryId) {
				const app = this
				const { orderType } = this
				// 已付款
				if (orderType) {
					return this.$navTo('package/solution/article/index', {
						categoryId, orderType
					})
				}
				return this.$navTo('package/solution/buy/index')
			},
			onApply() {
				this.$navTo('package/solution/apply')
			}
		}
	}
</script>

<style lang="less">
	.solution {
		.search {
			padding: 10rpx 20rpx;
			background-color: #ffffff;
		}

		.btn {
			width: 700rpx;
			border-radius: 100%;
			margin: 25rpx auto;
		}

		.grid {
			width: 700rpx;
			margin: auto;
		}

		.avatar {
			width: 120rpx;
		}
	}
</style>
