(function() {
	Vue.component('device-reback', {
		template: `<div>
						<h3 class="pt40 pb20 pl30 pr40 m0 mb30 c-f16 c-border-b clearfix">意见反馈<span class="fr c-f14 c-0ad8c8 f-w400" @click="record()">反馈记录</span></h3>
						<div class="edit-question" v-if="!isRecord && isQuestion">
							<div class="question-form pl20 pr50">
								<h4 class="c-909090 f-w400 m0 mb30 txt-center" v-if="!isEdit">hi~你发现了什么问题?</h4>
								<ul class="container-fluid p0 mb20 clearfix">
									<li v-if="isEdit" class="fl question-li mr30">
										<div class="question-li-div c-323232 c-f14 txt-center select-active">功能优化</div>
									</li>
									<li v-if="!isEdit" class="fl question-li mr30" v-for="list in questionArr" :key="list.code">
										<div class="question-li-div c-323232 c-f14 txt-center" :class="{'select-active': judgeSelectIndex == list.code}" @click="select(list.code)">{{list.name}}</div>
										<p class="c-909090 m0 mt5 c-f12 txt-center">{{list.detail}}</p>
									</li>
								</ul>
								<div class="suggestcss">
									<label class="">问题&建议<span class="c-f00">*</span></label>
									<p class="c-position-r m0" v-if="!isEdit">
										<textarea @input="limit" class="form-control" placeholder="请描述您在使用过程中遇到的问题或建议,如果遇到功能异常,上传异常页面截图能更快解决哦~"></textarea>
										<span class="limit c-909090">最多300字</span>
									</p>
									<p class="c-position-r m0" v-if="isEdit">
										<textarea @input="limit" readonly class="form-control" placeholder="请描述您在使用过程中遇到的问题或建议,如果遇到功能异常,上传异常页面截图能更快解决哦~"></textarea>
										<span class="limit c-909090">最多300字</span>
									</p>
								</div>
								<div class="h100 mtb20">
									<div class="fl set-img mr20 c-position-r" v-if="quesImg.length > 0" v-for="(imgs, key) in quesImg" :key="key">
										<img src="imgs.src" \>
										<span class="delete-img" v-if="!isEdit" @click="remove(key)"></span>
									</div>
									<div v-if="isEdit ? !isEdit : quesImg.length < 4" class="fl img-add mr20">
				                    	<input type="file" @change="uploadImg()" class="fl set-img type-hide"  accept="image/jpg,image/jpeg,image/png">
				                    </div>
				                    <span class="fl pt40 c-909090">(选填,图片最多可传4张)</span>
								</div>
								<div v-if="isEdit">
									<label class="">答复内容</label>
									<p class="c-position-r m0">
										<textarea readonly="true" class="form-control" placeholder="请描述您在使用过程中遇到的问题或建议,如果遇到功能异常,上传异常页面截图能更快解决哦~"></textarea>
										<span class="limit c-909090">最多300字</span>
									</p>
								</div>
								<p class="form-group mt10 clearfix" v-if="!isEdit">
									<input class="fl mr10 form-control" placeholder="请输入您的手机号码(必填)" /><span class="c-323232 c-f14">请留下您的联系方式,管理员会尽快为您找到解决方案</span>
								</p>
								<div class="pt20">
									<span v-if="!isEdit" class="btn" @click="submit()">提&emsp;交</span>
									<span v-if="isEdit" class="btn" @click="backRecord()">返&emsp;回</span>
								</div>
							</div>
						</div>
						<div class="finish-device txt-center" v-if="!isRecord && !isQuestion">
							<h3 class="device-success">意见反馈已完成</h3>
							<p class="c-909090 c-f18">您可以在反馈记录查看意见进展</p>
							<div class="pt30">
								<span class="btn" @click="back()">返&emsp;回</span>
							</div>
						</div>
						<div v-if="isRecord">
							<ul class="list-record pl30 c-f14 m0">
								<li v-if="recordList.length == 0" class="txt-center">暂无反馈记录</li>
								<li v-if="recordList.length > 0" class="c-border-b ptb10 clearfix" v-for="(list, index) in recordList" :key="index">
									<span class="fl c-fff list-tap pr5 mr20">{{list.tit}}</span>
									<p class="fl c-909090 list-detail m0">{{list.detail}}</p>
									<span class="fl list-status mr30" :class="{'list-status-active':list.status == 1}">{{list.status == 1 ? "已答复" : '未处理'}}</span>
									<span class="fl list-view pr20 c-0ad8c8" @click="view(list)">查看</span>
								</li>
							</ul>
							<div v-if="recordList.length == 0">
								<span class="btn" @click="back()">返&emsp;回</span>
							</div>
							<div class="mt15 h30 pr30 txt-center clearfix" v-if="recordList.length > 0">
								<div class="fr ml10 clearfix">
									<span class="fl c-border-tb c-border-l page-btn-input m0"><input class="fl c-888 page-input" v-model="editPage" /></span><span class="fr c-f12 btn page-btn page-btn-sure" @click="setPage(editPage)">确定</span>
								</div>
								<span class="fr btn page-btn" @click="setPage(page + 2)" v-if="page == 1">{{page + 2}}</span>
								<span class="fr btn page-btn" @click="setPage(page + 1)">{{page + 1}}</span>
								<span class="fr btn page-btn page-btn-active">{{page}}</span>
								<span class="fr btn page-btn"  @click="setPage(page - 1)" v-if="page != 1">{{page - 1}}</span>
							</div>
						</div>
					</div>`,
		props: [],
		data: function() {
			return {
				isQuestion: true,
				isRecord: false,
				isEdit: false,
				judgeSelectIndex: null,
				questionArr: [{
					name: "功能异常",
					detail: "举例：无法使用功能",
					code: "1"
				},{
					name: "功能优化",
					detail: "举例：不好用、界面难看",
					code: "2"
				},{
					name: "新功能建议",
					detail: "你希望有什么功能？",
					code: "3"
				},{
					name: "其他",
					detail: "举例：身份信息丢失",
					code: "4"
				}],
				quesImg: [{src: '../../../images/bg.png'}],
				recordList: [{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "1"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				},{
					tit: "功能异常",
					detail: "是啥东西爱尔家圣诞节哦按时大多数萨达阿达擦擦擦市场擦拭菜市场大神擦拭的",
					status: "0"
				}],
				page: 1,
				editPage: null
			}
		},
		methods: {
			select: function(key) {
				if(this.judgeSelectIndex == key) {
					this.judgeSelectIndex = null
				} else {
					this.judgeSelectIndex = key
				}
			},
			record: function() {
				this.isRecord = true
			},
			limit: function() {},
			remove: function(key) {
				this.quesImg.splice(key, 1)
			},
			submit: function() {
				this.isQuestion = false
			},
			back: function() {
				this.isQuestion = true
				this.isRecord = false
			},
			setPage: function(key) {
				if(+key) {
					this.page = +key
				} else {
					alert(key)
				}
			},
			view: function(list) {
				this.isRecord = false
				this.isQuestion = true
				this.isEdit = true
			},
			backRecord: function() {
				this.isRecord = true
				this.isQuestion = false
				this.isEdit = false
			}
		}
	})
})()