<template>
	<view data-component-name="diy-listmenu" class="diy-listmenu" :style="style">
		<view class="fui-cell-group">
			<!--     <image mode="widthFix" style="width: 100%;" :src="$util.img(item.imageUrl)"></image> -->

			<view v-for="(item, index) in value.list" @click="redirectTo(item.link)" class="fui-cell"
				:class="item.iconType == 'img' ? 'img-cell' : ''">
				<view class="fui-cell-icon" :style="{ 'color': item.style ? item.style.iconColor : '#333' }">
					<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null"
						:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
					<image v-if="item.iconType == 'img'" mode="widthFix" :src="$util.img(item.imageUrl)"
						style="border-radius:6rpx;width: 60rpx;"></image>
				</view>
				<view class="fui-cell-text" style="color:#333;">{{ item.title }}</view>
				<view class="fui-cell-remark" style="font-size: 24rpx;">{{ lang == 'en-us' ? 'view' : '查看' }}</view>
			</view>
		</view>
	</view>
</template>

<script>
// 自定义列表菜单展示
import DiyMinx from './minx.js'
export default {
	name: 'diy-listmenu',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [DiyMinx],
	data() {
		return {
			loading: true,
			lang: uni.getStorageSync("lang")//en-us 英文
		};
	},
	created() {
		// this.getDataList();
	},
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) {
			// this.getDataList();
		}
	},
	computed: {
		style() {
			var css = '';
			css += 'background-color:' + this.value.contentBgColor + ';';
			if (this.value.elementAngle == 'round') {

				css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
				css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
				css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
			}
			if (this.value.margin.top > 0) css += 'margin-top:' + this.value.margin.top * 2 + 'rpx;';
			return css;
		}
	},
	methods: {
		redirectTo(link) {
			if (link.wap_url) {
				if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
					this.$refs?.login?.open(link.wap_url);
					return;
				}
			}
			this.$util.diyRedirectTo(link);
		},
	}
};
</script>

<style lang="scss">
.img-cell {
	padding: 0 16rpx !important;
}
</style>