<template>
	<view data-component-name="diy-kefu" class="diy-kefu" :style="style">
		<view class="fui-list-group merchgroup" v-for="(item, index) in value.list" :key="index">
			<view class="fui-list jump" v-if="index == 0">
				<view class="fui-list-media">
					<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx"></image>
				</view>
				<view class="fui-list-inner">
					<view class="title" style="height: 75rpx;">
						<text style="font-weight:600" :style="{ color: item.textColor }">{{ item.title }}</text>
						<view class="subtitle" style="font-size:24rpx" :style="{ color: item.textColor }">{{ item.desc }}
						</view>
					</view>
				</view>
				<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
					<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx"
						:style="{ background: item.BtBgColor, color: item.BtColor }" @tap.stop="previewSqs()">立即添加</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 客服展示
import DiyMinx from './minx.js'
export default {
	name: 'diy-kefu',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [DiyMinx],
	data() {
		return {
			loading: true,
		};
	},
	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;';
			}
			return css;
		}
	},
	methods: {
		previewSqs() {
			var img = this.$util.img(this.value.list[1].imageUrl)
			uni.previewImage({
				current: img,
				urls: [img]
			})
		}
	}
};
</script>

<style lang="scss"></style>