{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
	<el-form :model="form" @submit.native.prevent="submitForm" ref="form" label-width="120px" label-position="right">
	  <el-form-item label="任务类型" prop="type"
	  :disabled="form.id">
	    <el-radio-group v-model="form.type">
	      <el-radio :label="'script'">执行脚本</el-radio>
	      <el-radio :label="'get_url'">访问URL</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="计划名称" prop="title">
	    <el-input v-model="form.title" class="col-12 col-sm-2 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item label="周期">
	  	<div class="flex">
	  		<el-select v-model="form.time_type"
	  		class="col-12 col-sm-1 pl-0 pr-0">
			    <el-option
			      v-for="item in options"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
			<div class="col-12 col-sm-1 pl-0 pr-0 ml-3 flex flex-center"
			v-if="form.time_type===1">
			<el-input-number controls-position="right"
			:min="1" :max="365" :step="1" v-model="form.day">
			</el-input-number>
			<span class="pl-2">天</span>
			</div>
			<div class="col-12 col-sm-1 pl-0 pr-0 ml-3 flex flex-center"
			v-if="form.time_type===6">
			<el-input-number controls-position="right"
			:min="1" :max="31" :step="1" v-model="form.day">
			</el-input-number>
			<span class="pl-2">日</span>
			</div>
	  		<el-select v-model="form.week"
	  		class="col-12 col-sm-1 pl-0 pr-0 ml-3"
	  		v-if="form.time_type===5">
			    <el-option
			      v-for="item in week"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
			<div class="col-12 col-sm-1 pl-0 pr-0 ml-3 flex flex-center"
			v-if="[0,1,3,5,6].includes(form.time_type)">
			<el-input-number controls-position="right"
			:min="0" :max="23" :step="1" v-model="form.hour">
			</el-input-number>
			<span class="pl-2 text-nowrap">小时</span>
			</div>
			<div class="col-12 col-sm-1 pl-0 pr-0 ml-3 flex flex-center">
			<el-input-number controls-position="right"
			:min="0" :max="59" :step="1" v-model="form.minute">
			</el-input-number>
			<span class="pl-2 text-nowrap">分钟</span>
			</div>
	  	</div>
	  </el-form-item>

	  <el-form-item label="任务内容" prop="content">
	    <el-input :type="form.type==='script'?'textarea':''" v-model="form.content" class="col-12 col-sm-4 pl-0 pr-0"></el-input>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="submitForm">{{form.id?'保存':'创建'}}</el-button>
	    <el-button @click="resetForm('form')">重置</el-button>
	  </el-form-item>
	</el-form>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
		    <el-table-column
		      prop="id"
		      label="ID"
		      width="100">
		    </el-table-column>
		    <el-table-column
		      prop="title"
		      label="计划名称"
		      width="200">
		    </el-table-column>
		    <el-table-column
		      label="任务类型"
		      width="120">
		      <template slot-scope="scope">
		      	<span v-if="scope.row.type === 'script'">执行脚本</span>
		      	<span v-if="scope.row.type === 'get_url'">访问URL</span>
		      </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" 
		      		@click="setStatus(scope.row);">正常</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else-if="scope.row.status==0" 
		      		@click="setStatus(scope.row);">禁用</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==2" 
		      		:loading="scope.row.status==2">执行中</el-button>
				</transition>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="周期"
		      width="120">
		      <template slot-scope="scope">
		      	<span v-if="scope.row.time_type === 0">每天</span>
		      	<span v-if="scope.row.time_type === 1">N天</span>
		      	<span v-if="scope.row.time_type === 2">每小时</span>
		      	<span v-if="scope.row.time_type === 3">N小时</span>
		      	<span v-if="scope.row.time_type === 4">N分钟</span>
		      	<span v-if="scope.row.time_type === 5">每星期</span>
		      	<span v-if="scope.row.time_type === 6">每月</span>
		      </template>
		    </el-table-column>
		    <el-table-column
		      label="执行时机"
		      width="180">
		      <template slot-scope="scope">
		      	<div v-if="scope.row.time_type === 0">
		      		<span>每天</span>
			      	<span>{{scope.row.hour}}点</span>
			      	<span>{{scope.row.minute}}分</span>
		      	</div>
		      	<div v-if="scope.row.time_type === 1">
		      		<span>{{scope.row.day}}天</span>
			      	<span>{{scope.row.hour}}点</span>
			      	<span>{{scope.row.minute}}分</span>
		      	</div>
		      	<div v-if="scope.row.time_type === 2">
		      		<span>每小时</span>
			      	<span>{{scope.row.minute}}分</span>
		      	</div>
		      	<div v-if="scope.row.time_type === 3">
		      		<span>每{{scope.row.hour}}小时</span>
			      	<span>{{scope.row.minute}}分</span>
		      	</div>
		      	<div v-if="scope.row.time_type === 4">
			      	<span>每{{scope.row.minute}}分</span>
		      	</div>
		      	<div v-if="scope.row.time_type === 5">
		      		<span>星期{{scope.row.week}}</span>
			      	<span>{{scope.row.hour}}点</span>
			      	<span>{{scope.row.minute}}分</span>
		      	</div>
		      	<div v-if="scope.row.time_type === 6">
		      		<span>每月{{scope.row.day}}日</span>
			      	<span>{{scope.row.hour}}点</span>
			      	<span>{{scope.row.minute}}分</span>
		      	</div>
		      </template>
		    </el-table-column>
		    <el-table-column
		      prop="content"
		      label="内容">
		      <template slot-scope="scope">
		      	<span v-if="scope.row.type === 'script'">{{scope.row.content}}</span>
		      	<el-link v-if="scope.row.type === 'get_url'"
		      	:href="scope.row.content"
		      	:underline="false"
		      	target="_blank">访问URL</el-link>
		      </template>
		    </el-table-column>
		      <el-table-column
		        label="上次执行/下次执行时间"
		        width="200">
			      <template slot-scope="scope">
			      	<div class="small">
			          <div>{{ scope.row.last_time }}</div>
			          <div>{{ scope.row.next_time }}</div>
			      	</div>
			      </template>
		      </el-table-column>
		    <el-table-column
		      label="/"
		      width="200">
		      <template slot-scope="scope">
		        <el-button
		            type="success"
		            plain
		            round
		            size="minism"
		      		:loading="scope.row.status==2"
		            @click="runTask(scope)">
		            执行
		        </el-button>
		        <el-button
		            type="primary"
		            plain
		            round
		            size="minism"
		            @click="setFormData(scope)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            plain
		            round
		            size="minism"
		            @click="del(scope)">
		            删除
		        </el-button>
		      </template>
		    </el-table-column>
		</el-table>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
	        options: [{
	          label: '每天',
	          value: 0
	        }, {
	          label: 'N天',
	          value: 1
	        }, {
	          label: '每小时',
	          value: 2
	        }, {
	          label: 'N小时',
	          value: 3
	        }, {
	          label: 'N分钟',
	          value: 4
	        }, {
	          label: '每星期',
	          value: 5
	        }, {
	          label: '每月',
	          value: 6
	        }],
	        week: [{
	          label: '周一',
	          value: 1
	        }, {
	          label: '周二',
	          value: 2
	        }, {
	          label: '周三',
	          value: 3
	        }, {
	          label: '周四',
	          value: 4
	        }, {
	          label: '周五',
	          value: 5
	        }, {
	          label: '周六',
	          value: 6
	        }, {
	          label: '周日',
	          value: 0
	        }],
			form:{
				id:0,
				title:'',
				type:'get_url',
				time_type:0,
				status:1,
				day:1,
				week:1,
				day_sum:3,
				hour:1,
				minute:30,
				content:'',
				run:0
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	runTask(scope){
	      		var _this=this;
	    		if (scope.row.status==2) return;
	    		var oldStatus=scope.row.status;
	    		scope.row.status=2;
				$.ajax({
					url:'',
					data:{
						id:scope.row.id
					},
					type:'post',
					dataType:'json',
					error:function(err){
		    			scope.row.status=oldStatus;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
		    			scope.row.status=oldStatus;
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.initHtml();
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
					}
				});
	    	},
	    	setFormData(scope){
	    		this.form=Object.assign(this.form,scope.row);
	    	},
	    	del(scope){
	      		var _this=this;
		        this.$confirm('是否确定删除【'+scope.row.title+'】任务？', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          dangerouslyUseHTMLString:true,
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/timing/del/'+scope.row.id,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.tableData.splice(scope.$index,1);
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
	    	},
			resetForm:function(formName) {
				this.form.id=0;
				this.$refs[formName].resetFields();
			},
	    	submitForm(){
	    		var url='/timing/add',_this=this;
	    		if(this.form.id)
	    			url='/timing/edit/'+this.form.id;
				$.ajax({
					url:url,
					data:this.form,
					type:'post',
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								_this.initHtml();
								_this.resetForm('form');
							}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('/timing/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);
	    			}
	    		});
	    	},
	      	initHtml() {
	      		var _this=this;
				$.ajax({
					url:'',
					type:'get',
					dataType:'json',
					error:function(err){
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						if (ret) {
							if (ret.code === 0) {
								_this.tableData=ret.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			},
	    }
	});
	$(function(){
		vm.initHtml();
	});
</script>
{/block}