<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="add"
					v-auth="'xscript.create'"
				></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" hidePagination>
                <el-table-column label="#" type="index" width="50">
					<template #default="scope">
						<el-link type="primary" @click="lastDetail(scope.row)">{{ scope.$index + 1 }}</el-link>
					</template>
				</el-table-column>
                <el-table-column label="名称" prop="name" min-width="240" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="时间策略" prop="myschedule_name" min-width="300" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="是否启用" width="80" :show-overflow-tooltip="true">
					<template #default="scope">
						<el-icon v-if="scope.row.enabled" color="green"
							><CircleCheckFilled
						/></el-icon>
					</template>
				</el-table-column>
                <el-table-column label="运行次数" prop="total_run_count" width="80" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="最后运行时间" prop="last_run_at" width="160" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" fixed="right" align="left" width="200">
                    <template #default="scope">
                        <el-button plain type="warning" size="small" @click="table_toggle(scope.row, scope.$index)"
                        v-auth="'xscript.update'">开/停</el-button>
                        <el-button plain type="warning" size="small" @click="table_edit(scope.row, scope.$index)"
                        v-auth="'xscript.update'">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                        <template #reference>
                            <el-button plain type="danger" size="small" v-auth="'xscript.delete'">删除</el-button>
                        </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </scTable>
		</el-main>
		<el-drawer
			title="新增/编辑"
			v-model="visible"
			:size="1000"
			destroy-on-close
		>
			<el-container>
				<el-main style="padding: 0 20px 20px 20px">
					<el-form ref="rForm" :model="form">
						<el-form-item label="脚本名称" required>
							<el-input v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="脚本内容" required>
							<Codemirror
								v-model:value="form.code"
								:options="cmOptions"
								border
								ref="cmRef"
								height="300"
								width="100%"
                                style="line-height: 180%"
							>
							</Codemirror>
						</el-form-item>
						<el-form-item label="基础数据">
							<JsonEditorVue
								style="width: 100%"
								v-model="form.base_data"
							/>
						</el-form-item>
						<el-form-item label="变动数据">
							<el-button type="warning" @click="openCdg" size="small">变更</el-button><span> ------ {{ form.change_data }}</span>
						</el-form-item>
						<el-form-item label="时间策略" required>
							<el-select
								v-model="form.myschedule"
								style="width: 100%"
							>
								<el-option
									v-for="item in schOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="submit">提交</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
		<el-dialog title="最后执行" v-model="detailVisible">
			<el-descriptions :column="1" border v-if="detailForm.last_run_data != null">
			<el-descriptions-item label="开始执行">{{ detailForm.last_run_data.date_created }}</el-descriptions-item>
			<el-descriptions-item label="结束执行">{{ detailForm.last_run_data.date_created }}</el-descriptions-item>
			<el-descriptions-item label="执行状态">{{ detailForm.last_run_data.status }}</el-descriptions-item>
			<el-descriptions-item label="返回结果">{{ detailForm.last_run_data.result }}</el-descriptions-item>
			<el-descriptions-item label="错误信息">{{ detailForm.last_run_data.traceback }}</el-descriptions-item>
		</el-descriptions>
		</el-dialog>
		<el-dialog title="变更数据" v-model="cDgVisible">
			<JsonEditorVue
								style="width: 100%"
								v-model="xdata"
							/>
			<el-footer>
				<el-button type="primary" @click="submit2">提交</el-button>
			</el-footer>
		</el-dialog>
	</el-container>
</template>
<script>
import JsonEditorVue from "json-editor-vue3";
import "codemirror/mode/python/python.js";
import 'codemirror/lib/codemirror.css'
import Codemirror from "codemirror-editor-vue3";
const dForm = {
	base_data: {},
};
export default {
	components: { JsonEditorVue, Codemirror },
	data() {
		return {
            apiObj: this.$API.enm.xscript.list,
			visible: false,
			form: {},
			detailForm: {},
			detailVisible: false,
			schOptions: [],
			cmOptions: {
				mode: "text/x-python",
				theme: "default",
				readOnly: false,
				lineNumbers: true,
				lineWiseCopyCut: true,
				// gutters: ["CodeMirror-lint-markers"],
				lint: true,
                autoRefresh: true
			},
			cDgVisible: false,
			xdata: {}
		};
	},
	mounted() {
		this.getSchOptions();
	},
	methods: {
		openCdg(){
			this.xdata = Object.assign({}, this.form.change_data)
			this.cDgVisible = true;
		},
		lastDetail(row) {
			this.$API.enm.xscript.item.req(row.id).then(res=>{
                this.detailForm = res
                this.detailVisible = true
            })
		},
		getSchOptions() {
			this.$API.system.myschedule.list.req({ page: 0 }).then((res) => {
				this.schOptions = res;
			});
		},
		add() {
			this.form = Object.assign({}, dForm);
			this.visible = true;
            this.$nextTick(() => {
                this.$refs.cmRef.refresh()
            })
		},
        table_edit(row) {
            this.$API.enm.xscript.item.req(row.id).then(res=>{
                this.form = res
                this.visible = true
            })
        },
        table_del(row) {
            this.$API.enm.xscript.delete.req(row.id).then(()=>{
                this.$message.success('删除成功')
                this.$refs.table.refresh()
            })
        },
		table_toggle(row) {
			this.$API.enm.xscript.toggle.req(row.id).then(() => {
				this.$message.success("操作成功");
				this.$refs.table.refresh();
			})
		},
		submit2() {
			this.$API.enm.xscript.change_data.req(this.form.id, {change_data: this.xdata}).then(() => {
				this.$message.success("操作成功");
				this.form.change_data = this.xdata;
				this.cDgVisible = false;
			})
		},
		submit() {
            this.$refs.rForm.validate(async (valid)=>{
                if(valid){
                    if(this.form.id){
                        this.$API.enm.xscript.update.req(this.form.id, this.form).then(()=>{
                            this.$message.success('更新成功')
                            this.visible = false
                            this.$refs.table.refresh()
                        })
                    }else{
                        this.$API.enm.xscript.create.req(this.form).then(()=>{
                            this.$message.success('添加成功')
                            this.visible = false
                            this.$refs.table.refresh()
                        })
                    }
                
                }
            })
        },
	},
};
</script>
