{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_vip"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl p-4 shadow bg-white">
			<div class="p-4 border-bottom">
				<div class="flex">
					<div class="flex-1 block-title-before py-2">我的积分</div>
				</div>
				<div class="flex pt-4">
					<div class="flex-1">
						<div class="flex text-center text-primary">
							<div class="px-3">
								<h4>{{statistics.score}}</h4>
								<p class="small text-secondary">剩余积分</p>
							</div>
							<div class="px-3">
								<h4>{{statistics.score_today}}</h4>
								<p class="small text-secondary">今日已获得</p>
							</div>
							<div class="px-3">
								<h4>{{statistics.score_task}}</h4>
								<p class="small text-secondary">还可免费获得</p>
							</div>
						</div>
					</div>
					<div v-if="xy_score.recharge_status">
						<el-button type="primary" class="rounded-0" @click="openNewBuy">积分充值</el-button>
					</div>
				</div>
			</div>
			<div class="p-4">
				<div class="pb-4 flex">
					<div class="border-bottom px-3 py-2 border-lg pointer" :class="search.type=='score_task'?'border-primary text-primary':'text-secondary'" @click="tabsChange()">积分任务</div>
					<div class="border-bottom px-3 py-2 border-lg pointer" :class="search.type=='score' && search.is_get==1?'border-primary text-primary':'text-secondary'" @click="setSearchIsGet(1)">积分获得记录</div>
					<div class="border-bottom px-3 py-2 border-lg pointer" :class="search.type=='score' && search.is_get==0?'border-primary text-primary':'text-secondary'" @click="setSearchIsGet(0)">积分支出记录</div>
					<div class="flex-1 border-bottom border-lg"></div>
				</div>
				<div class="table-responsive">
					<el-table
						ref="multipleTable"
				      	:data="tableData"
			    		stripe
			    		v-loading="search.ajax"
			    		style="width: 100%;"
			    		header-cell-class-name="bg-F4F4F4">
				      <el-table-column
				        label="任务标题">
					      <template slot-scope="scope">
					      	<div>{{scope.row.desc}}</div>
					      	<div>{{scope.row.title}}</div>
					      	<div class="small text-secondary">{{scope.row.tips}}</div>
					      </template>
				      </el-table-column>
				      <el-table-column
				        label="重复"
				        width="100"
				        v-if="search.type=='score_task'">
					      <template slot-scope="scope">
					      	<div v-if="scope.row.repeat===1" class="text-success">每日{{scope.row.repeat_sum}}次</div>
					      	<div v-else-if="scope.row.repeat===2" class="text-warning">每周{{scope.row.repeat_sum}}次</div>
					      	<div v-else-if="scope.row.repeat===3" class="text-danger">每月{{scope.row.repeat_sum}}次</div>
					      	<div v-else-if="scope.row.repeat===0&&scope.row.repeat_sum>1" class="text-primary">重复{{scope.row.repeat_sum}}次</div>
					      	<div v-else>不重复</div>
					      </template>
				      </el-table-column>
				      <el-table-column
				        label="积分"
				        width="100">
					      <template slot-scope="scope">
					      	<div v-if="scope.row.score>0">+{{scope.row.score}}</div>
					      	<div v-else>{{scope.row.score}}</div>
					      </template>
				      </el-table-column>
				      <el-table-column
				        label="时间"
				        width="200"
				        v-if="search.type=='score'">
					      <template slot-scope="scope">
					      	<div>{{scope.row.create_time}}</div>
					      </template>
				      </el-table-column>
				      <el-table-column
				        label="状态"
				        width="100" v-if="search.type=='score_task'">
					      <template slot-scope="scope">
					      	<el-link type="info" :underline="false" v-if="scope.row.is_complete==2">已完成</el-link>
					      	<el-link type="success" :underline="false" v-if="scope.row.is_complete==1" @click="receiveScore(scope.row);">领取奖励</el-link>
					      	<el-link :href="scope.row.url" type="primary" :underline="false" v-if="scope.row.is_complete==0 && scope.row.url">去完成</el-link>
					      	<el-link type="primary" :underline="false" v-if="scope.row.is_complete==0 && !scope.row.url">未完成</el-link>
					      </template>
				      </el-table-column>
				    </el-table>
				</div>
				<div class="table-responsive py-3">
					<el-pagination
					  background
					  :hide-on-single-page="true"
					  @current-change="setPageChange"
				      :current-page="search.page"
				      :page-size="15"
				      layout="total,  prev, pager, next, jumper"
				      :total="search.total">
				    </el-pagination>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{include file="module/buy_win"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			buy:XYBase.buy,
			xy_score:{
				title:'充值积分',
				recharge_status:{xycms:scoreconfig name="recharge_status"},
				recharge_rate:{xycms:scoreconfig name="recharge_rate"},
				min_score:{xycms:scoreconfig name="min_score"},
			},
			statistics:{
				score:'--',
				score_today:'--',
				score_task:'--'
			},
			search:{
				type:'score_task',
				is_get:1,
		    	ajax:false,
				total:0,
				page: 1
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
			this.initHtml();
			this.initStatistics();
		},
		methods:XYBase.methods({
			openNewBuy(){
	    		document.body.style="overflow: hidden;padding-right:17px;";
	    		this.buy.title='充值积分';
				this.buy.pay_status='score';
	    		this.buy.form.pay_type='';
	    		this.buy.form.type=10;
	    		this.buy.form.alias_id=this.userInfo.id;
	    		this.buy.form.value=this.xy_score.min_score;
	    		this.buy.data=this.xy_score;
	    		this.buy.price=this.xy_score.min_score/this.xy_score.recharge_rate;
	    		this.buy.score_price=this.xy_score.min_score/this.xy_score.recharge_rate;
	    		this.buy.view=true;
			},
			setBuyFormValue(score){
				this.buy.form.value=score;
	    		this.buy.price=score/this.xy_score.recharge_rate;
	    		this.buy.score_price=score/this.xy_score.recharge_rate;
	    		this.changeCouon();
			},
			setPageChange(val){
				this.search.page=val;
				this.initHtml();
			},
			tabsChange(val){
				this.search.type='score_task';
				this.search.page=1;
				this.initHtml();
			},
			setSearchIsGet(val){
				this.search.type='score';
				this.search.is_get=val;
				this.search.page=1;
				this.initHtml();
			},
			receiveScore(row){
				var _this=this;
				var loading=XYBase.openloading();
				_this.sendGet({
					url:'/user/receiveScore/'+row.id
				},function(ret){
					loading.close();
					_this.initStatistics();
					if (ret) {
						if (ret.code===0) {
							row.is_complete=2;
							XYBase.success(ret.msg);
						}else{
							XYBase.msg(ret.msg);
						}
					}
				});
			},
			updateScoreTask(){
				this.initHtml();
				this.initStatistics();
			},
			initHtml(){
				var _this=this;
				_this.search.ajax=true;
				_this.sendGet({
					url:'',
					data:_this.search,
				},function(ret){
					_this.search.ajax=false;
					if (ret) {
						_this.tableData=[];
						_this.search.total=ret.data.total;
						if (ret.code === 0) {
							var Data=ret.data.data;
							if (_this.search.type=='score_task')
								Data.sort(function(x,y){
									return x.is_complete-y.is_complete;
								});
							_this.tableData=Data;
						}else XYBase.msg(ret.msg);
					}
				});
			},
			initStatistics(){
				var _this=this;
				_this.sendGet({
					url:'/user/score/statistics'
				},function(ret){
					if (ret && ret.code === 0) _this.statistics=ret.data;
				});
			}
		})
	});
</script>
{/block}