<script setup>
import existing from "../existing.vue"
import { run } from "@/api/report/index";

const childCurrentRow = ref([])
const tableData = ref([])
const tableData4 = ref([])
const timeValue = ref('')
const onAddItem1 = () => {

  tableData.value.push(childCurrentRow.value)
}
const onAddItem2 = () => {
  tableData4.value.push(childCurrentRow.value)
}
const runAllScript = () => {
  run(tableData.value).then(res => {
    console.log(res)
  });
}
const handleRun = (index)=> {
  run(new Array(tableData.value[index])).then(res=>{
    console.log(res)
  })
}
const handleDelete = function (index) {
  tableData.value.splice(index, 1)
}
const getData = (data)=> {
  console.log("data:",data)
  childCurrentRow.value=data
}
</script>

<template>
  <el-row :gutter="50" justify="space-evenly">
    <el-col :span="8">
      <existing @getExistingData="getData"/>
    </el-col>
    <el-col :span="2">
      <el-space :fill="true" :size="65" direction="vertical">
        <div/>
        <el-button type="primary" @click="onAddItem1">
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
        <div/><div/>
        <el-button type="primary" @click="onAddItem2">
          <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </el-space>
    </el-col>
    <el-col :span="12">
      <el-table :data="tableData">
        <el-table-column type="index" width="30"/>
        <el-table-column label="脚本列表">
          <template #default="scope">
            <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template #default="scope">
            <el-button
                type="primary"
                @click="handleRun(scope.$index)"
            >运行</el-button>
            <el-button
                type="danger"
                @click="handleDelete(scope.$index)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-button class="run-all-script" type="primary" @click="runAllScript">运行所有脚本</el-button>

      <br><br><br><br>
      <el-text class="mx-1" size="large" tag="b">每天运行一次</el-text>

      <el-table :data="tableData4">
        <el-table-column label="时间" width="300">
          <el-time-select
              v-model="timeValue"
              start="00:05"
              step="00:05"
              end="23:55"
              placeholder="选择时间"
          />
        </el-table-column>
        <el-table-column label="脚本名称">
          <template #default="scope">
            <el-button v-if="scope.row.scriptName !==''" type="warning" round>{{ scope.row.scriptName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template #default="scope">
            <el-button
                type="primary"
                @click="handleDelete(scope.$index)"
            >运行</el-button>
            <el-button
                type="danger"
                @click="handleDelete(scope.$index)"
            >取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

</template>

<style scoped lang="scss">
.run-all-script{
  position:absolute;
  right:120px;
}
</style>