{extend name="main"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 140px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">
		{notempty name="FeedbackType"}
		  <el-form-item label="类型" prop="type" class="flex mb-0 pl-3">
		  	<el-select v-model="search.type" clearable filterable placeholder="请选择" class="w-100px">
			    <el-option
			      v-for="item in FeedbackType"
			      :key="item.value"
			      :label="item.title"
			      :value="item.value">
			    </el-option>
			</el-select>
		  </el-form-item>
		{/notempty}

	  <el-form-item label="审核" prop="status" class="flex mb-0 pl-3">
	  	<el-select v-model="search.status" placeholder="请选择" class="w-100px">
		    <el-option key="all"label="全部"value="all"></el-option>
		    <el-option :key="0"label="未处理":value="0"></el-option>
		    <el-option :key="1"label="已处理":value="1"></el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="用户ID" prop="uid" class="flex mb-0 pl-3">
	    <el-input v-model="search.uid" placeholder="请输入你想搜索的关键词"></el-input>
	  </el-form-item>

	  <el-form-item label="时间" prop="time" class="flex mb-0 pl-3">
	  	<el-date-picker
	      v-model="search.time"
	      type="daterange"
	      align="left"
	      range-separator="至"
	      start-placeholder="开始日期"
	      end-placeholder="结束日期"
	      format="yyyy-M-d"
	      value-format="yyyy-M-d"
	      :picker-options="pickerOptions">
	    </el-date-picker>
	  </el-form-item>

	  <el-form-item class="flex mb-0 pl-3">
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-table
	      :data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="60">
	      </el-table-column>
	      <el-table-column
	        label="用户"
	        width="200">
		      <template slot-scope="scope">
		      	<div class="flex flex-center" v-if="scope.row.nickname">
					<el-image
					  	v-if="scope.row.headimg" 
					    style="width: 30px; height: 30px"
					    lazy
					    class="rounded-circle mr-2"
					    :src="scope.row.headimg" 
					    :preview-src-list="[scope.row.headimg]">
					</el-image>
		      		<div>
						{{scope.row.nickname}}
		      		</div>
		      	</div>
		      </template>
	      </el-table-column>
		  <el-table-column type="expand" width="20">
			  <template slot-scope="scope">
			  	<div class="flex text-dark">
			  		<div class="flex-1 pr-2">
						<el-divider content-position="left">用户信息</el-divider>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">联系方式</div>
			  				<div class="flex-1">{{scope.row.contacts}}</div>
			  			</div>
			  			<div class="flex pb-3">
			  				<div class="flex-lable">反馈内容</div>
			  				<div class="flex-1" v-html="conGetHtml(scope.row.content)"></div>
			  			</div>
			  			<div class="flex pb-3">
			  				<div class="flex-lable"></div>
			  				<div class="flex-1">
							    <el-input v-model="reply" class="col-12 col-sm-10 pl-0 pr-0"
								  type="textarea"
								  :autosize="{ minRows: 6, maxRows: 20}"
								  placeholder="回复内容"></el-input>
			  				</div>
			  			</div>
			  			<div class="flex pb-3">
			  				<div class="flex-lable"></div>
			  				<div class="flex-1">
			  					<el-button type="primary" size="small" @click="sendReply(scope.row)">回复</el-button>
			  				</div>
			  			</div>
			  		</div>
			  		<div class="flex-1">
						<el-divider content-position="left">处理</el-divider>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">回复</div>
		      				<div class="flex-1">{{scope.row.reply}}</div>
			  			</div>
						<el-divider content-position="left">系统信息</el-divider>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">应用版本号</div>
		      				<div class="flex-1">{{scope.row.app_version}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">系统类型</div>
		      				<div class="flex-1">{{scope.row.system_type}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">系统版本</div>
		      				<div class="flex-1">{{scope.row.system_version}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">设备唯一标识</div>
		      				<div class="flex-1">{{scope.row.uuid}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">设备型号</div>
		      				<div class="flex-1">{{scope.row.device_model}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">设备类型</div>
		      				<div class="flex-1">{{scope.row.ui_mode}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">网络连接类型</div>
		      				<div class="flex-1">{{scope.row.connection_type}}</div>
			  			</div>
			  			<div class="flex flex-center pb-3">
			  				<div class="flex-lable">Ip</div>
		      				<div class="flex-1">{{scope.row.ip}}</div>
			  			</div>
			  		</div>
			  	</div>
			  </template>
		  </el-table-column>
	      <el-table-column
	      	prop="type_text"
	        label="类型"
	        width="120">
	      </el-table-column>
	      <el-table-column
	        label="关联数据"
	        width="120">
			  <template slot-scope="scope">
			      	<el-link :href="'/jobs?jobs_id='+scope.row.alias_id" target="_blank"
			      	:underline="false"
			      	title="职位"
			      	v-if="scope.row.type==7&&scope.row.data">{{scope.row.data.title}}</el-link>
			      	<el-link :href="'/resume?resume_id='+scope.row.alias_id" target="_blank"
			      	:underline="false"
			      	title="简历"
			      	v-if="scope.row.type==6&&scope.row.data">{{scope.row.data.name}}</el-link>
			  </template>
	      </el-table-column>
	      <el-table-column
	      	prop="app_name"
	        label="渠道"
	        width="100">
	      </el-table-column>
	      <el-table-column
	      	prop="contacts"
	        label="联系方式"
	        width="140">
	      </el-table-column>
	      <el-table-column
	      	prop="content"
	        label="反馈内容">
			  <template slot-scope="scope">
  				<div v-html="conGetHtml(scope.row.content)"></div>
			  </template>
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">已处理</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setStatus(scope.row);" 
		      		:loading="scope.row.status==2">待处理</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="创建/更新/刷新时间"
	        width="180">
		      <template slot-scope="scope">
		      	<div class="small">
		          <div>{{ scope.row.create_time }}</div>
		          <div>{{ scope.row.update_time }}</div>
		      	</div>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="FeedbackType"}
	var FeedbackType=[];
	{else/}
	var FeedbackType={:json_encode($FeedbackType,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			FeedbackType:FeedbackType,
			labelPosition:'right',
			reply:'',
	        pickerOptions: {
	          shortcuts: [{
	            text: '最近一周',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近一个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近三个月',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
	              picker.$emit('pick', [start, end]);
	            }
	          }, {
	            text: '最近半年',
	            onClick(picker) {
	              const end = new Date();
	              const start = new Date();
	              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
	              picker.$emit('pick', [start, end]);
	            }
	          }]
	      	},
			search:{
				uid:'',
				status:{:request()->get('status',"\'all\'")},
				type:'{notempty name="type"}{$type}{/notempty}',
				time:[],
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	conGetHtml:function(str){
		      if (str) {
		        return str.replace(/\n/g, '<br/>');
		      }else{
		        return '';
		      }
		    },
		    sendReply(row){
	      		var _this=this;
	      		if (!_this.reply)return XYBase.msg('请输入回复内容');
	      		_this.search.ajax=true;
				$.ajax({
					url:'/feedback/reply',
					type:'post',
					data:{id:row.id,content:_this.reply},
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								row.reply=_this.reply;
								_this.reply='';
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});

		    },
	    	setStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/feedback/setStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'/feedback',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}