<template>
	<gui-page :customHeader="true">
		<view slot="gHeader"><gui-demo-header></gui-demo-header></view>
		<view slot="gBody" class="gui-margin" style="padding-bottom:50rpx;">
	
	<view class="">
		<view>
			<button type="default" @click="open1()"
				class="gui-button-mini gui-gtbg-red gui-flex gui-align-items-center gui-justify-content-center"
				style="width:282rpx;">
				<text class="gui-color-white gui-button-text-mini gui-icons">&#xe642; 发个帖子试试</text>
			</button>
		</view>
		<view class="gui-margin-top">
			<text class="gui-h5 gui-color-gray gui-bold">健康社区</text>
		</view>
		<view class="gui-comments">
			<view class="gui-comments-items gui-flex gui-rows gui-nowrap gui-space-between"
				v-for="(item, index) in commentContents" :key="index">
				<Avatar :username="item.name" :src="item.name" :style="'width:40px;height:40px'" :background-color="extractColorByName(item.name)" color="#fff" style="vertical-align: middle;" :inline="true" />
				
				<view class="gui-comments-body">
					<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-comments-header-text gui-text gui-primary-color">{{item.name}}</text>
						<text @click="love(index)" class="gui-comments-header-text gui-icons gui-color-gray gui-text-small"
							:class="[item.status ? 'gui-color-blue' : '']">&#xe6ea; {{item.count}}</text>
					</view>
					<text class="gui-comments-content gui-block-text">{{item.content}}</text>
					
					<view
						class="gui-comments-info gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
						<text class="gui-comments-replay-btn gui-block-text gui-bg-gray"> </text>
						<text class="gui-comments-info-text">{{item.createTime}}</text>
					</view>
				</view>
			</view>
		</view>

		<gui-modal style="height: 50%;" :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']"
			ref="guimodal1" title="发个帖子">
			<template v-slot:content>
				<view class="gui-padding gui-bg-gray gui-dark-bg-level-2">

					<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top">
						<textarea class="gui-textarea" style="width:100%;" v-model="textareaVal" maxlength="-1"
							placeholder="说点什么吧"></textarea>
					</view>

				</view>
			</template>

			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<template v-slot:btns>
				<view class="gui-flex gui-row gui-space-between">
					<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-right:80rpx;">
						<text class="modal-btns gui-color-gray" @tap="close1">取消</text>
					</view>
					<view hover-class="gui-tap" class="modal-btns gui-flex1" style="margin-left:80rpx;">
						<text class="modal-btns gui-primary-color" @tap="confirm1">确认</text>
					</view>
				</view>
			</template>
		</gui-modal>
	</view>
	</view>
	</gui-page>
</template>
<script>
	import Avatar from 'vue-avatar'

	var graceJS = require('@/GraceUI5/js/grace.js');
	var request = require('@/GraceUI5/js/request/request.js');
	var graceChecker = require("@/GraceUI5/js/checker.js");
	var face =
		"https://images.unsplash.com/photo-1663717249250-804cb861ed74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80";
	var img =
		"https://images.unsplash.com/photo-1657310217094-2214abf4fd88?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxNTN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				textareaVal: "", // 文本内容
				maxWords: 100, // 最多字符数
				textareatimer: null, // 延迟记录
				face:face,
				// 模拟评论数据 (实际项目来自api请求)
				commentContents: [],
				name:'张三'
			}
		},
		components: {
		    Avatar
		  },
		onLoad() {
			this.getlist()
			// 昵称 / id / 时间 / 赞 / 内容/
			// id , uid 
		},
		methods: {
			getlist(){
				this.userid = graceJS.getStorage("id")
				this.username = graceJS.getStorage("name")
				var formData = {
					userid: this.userid
				}
				var that = this
				/**
				 * 获取列表
				 */
				request.post("bohe/Articelist", {
					data: formData
				}, (res) => {
					console.log(res.data)
					that.commentContents = res.data
				})
			},
			//传入名字,根据名字生成颜色,这样颜色就固定下来了
				extractColorByName(name) {
				      var temp = [];
				      temp.push("#");
				      for (let index = 0; index < name.length; index++) {
				        temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
				      }
				      return temp.slice(0, 5).join('').slice(0, 4);
				    },
				
			
			open1: function() {
				this.$refs.guimodal1.open();
			},
			close1: function() {
				this.$refs.guimodal1.close();
			},
			confirm1: function() {
				console.log(this.textareaVal)
				var data = {
					uid: this.userid,
					content: this.textareaVal,
					name:this.username
				}
				request.post("bohe/bhArticeadd", {
					data: data
				}, (res) => {
					console.log(res.data)
					if (res.data.code == 200) {
						this.getlist()
						// 客户点击确认按钮后的逻辑请在此处实现
						this.$refs.guimodal1.close();
					}

				})

			},
			love(i){
				var that = this
					this.commentContents[i]
					var list = this.commentContents
					var data = {
						uid:parseInt(this.userid),
						aid:this.commentContents[i].id
					}
					console.log(data)
					
					request.post("bohe/bhALoveadd", {
						data: data
					}, (res) => {
						console.log(res.data)
						if (res.data.code == 200) {
							list[i] = res.data.data
						}
						
						that.commentContents = list
						that.$forceUpdate();
					})
					
					console.log(that.commentContents)
			},

		}
	}
</script>
<style scoped>
	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}
</style>