<template>
	<view class="content">
		<image class="w h-150" src="/static/image/source/jubao.jpeg"></image>
		<view class="mgt-50 text-28 text-777 mgb-20">
			请选择举报原因：(<text class="text-fc2419">*</text>)
		</view>
		<radio-group @change="groupChange">
			<label class="uni-list-cell uni-list-cell-pd" style="justify-content: flex-start;"
			 v-for="(item, index) in radiolist1" :key="item.name">
				<view>
					<radio style="font-size: 12rpx;" color="#d91e0f" :value="item.name" :checked="item.name === radiovalue1" />
				</view>
				<view>{{item.name}}</view>
			</label>
			<view v-if="radiovalue1 == '其他意见或建议'">
			  <view class="pdl-50">
				  <view class="border-top pdy-20 pdr-100 flex jc_between ai_center">
					  <view class="w-260">具体情况说明</view>
					  <input v-model="desc" class="text-24 h-50" fontSize="12"
					   placeholder="请补充你的投诉内容"></input>
				  </view>
				  <view class="border-top pdy-20 pdr-100 flex jc_between ai_center">
					  <view class="w-260">联系方式</view>
					  <input v-model="tel" class="text-24 h-50" fontSize="12"
					   placeholder="请填写你的联系方式"></input>
				  </view>
			  </view>
			</view>
		</radio-group>
		<!-- <up-radio-group
		    v-model="radiovalue1"
		    placement="column"
			activeColor="#d91e0f"
		    @change="groupChange"
		  >
		    <up-radio
		      :customStyle="{marginBottom: '8rpx'}"
		      v-for="(item, index) in radiolist1"
		      :key="index"
		      :label="item.name"
		      :name="item.name"
		      @change="radioChange"
		    >
		    </up-radio>
		  </up-radio-group> -->
		  <view class="flex jc_around mgt-50">
			  <view class="cancel" @click="cancelFn">取消</view>
			  <view class="sure" @click="sureFn">确定</view>
		  </view>
	</view>
</template>

<script>
	export default {
		components: {},
		data(){
			return{
				// 基本案列数据
				radiolist1:[
				  {
				    name: '内容粗糙或不美观',
				    disabled: false,
				  },
				  {
				    name: '广告展示频繁，影响体验',
				    disabled: false,
				  },
				  {
				    name: '其他意见或建议',
				    disabled: false,
				  },
				],
				desc:null,
				tel:null,
				radiovalue1:'内容粗糙或不美观',
			}
		},
		methods: {
			cancelFn(){
				uni.navigateBack()
			},
			sureFn(){
				uni.showToast({
					title:'提交成功',
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/commonModule/complaintResult'
					})
				},500)
			},
			groupChange(n){
			  console.log('groupChange', n);
			  this.radiovalue1 = n.detail.value
			},
			radioChange(n){
			  console.log('radioChange', n);
			}
		},
	}
</script>

<style lang='scss' scoped>
	.content{
		margin-top: 60rpx;
		border-radius: 50rpx 50rpx 0 0;
		min-height: 100vh;
		padding: 50rpx 28rpx;
		background: linear-gradient(to bottom, #d6e6ff, #f3f4f8);
	}
	.cancel{
		border: 1rpx solid #999;
		height: 80rpx;
		line-height: 80rpx;
		width: 250rpx;
		text-align: center;
		border-radius: 12rpx;
	}
	.sure{
		height: 80rpx;
		line-height: 80rpx;
		width: 250rpx;
		text-align: center;
		border-radius: 12rpx;
		color: #fff;
		background: #f03433;
	}
</style>