<template>
  <div>
    <el-table tooltip-effect="dark" :data="tableData" v-loading="tableLoading"
      :header-cell-style="{ background: 'rgba(30,144,255,.1)' }" :max-height="tableHeigt" border
      @selection-change="handleSelectionChange">
      <el-table-column  align="center" type="index" label="序号" width="55">
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="jobName" label="任务名称" width="150">
      </el-table-column>
      <el-table-column align="center" prop="jobGroup" label="任务组名" width="150">
        <template slot-scope="scope">
          {{ scope.row.jobGroup=='DEFAULT' ?'默认':'系统' }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="invokeTarget" label="调用目标字符串">
      </el-table-column>
      <el-table-column show-overflow-tooltip align="center" prop="cronExpression" label="cron执行表达式">
      </el-table-column>
      <el-table-column align="center" label="状态" width="150">
        <template slot-scope="scope">
          <el-switch @change="btnClick('status',scope.row)"  
          v-model="scope.row.status" inactive-value="0" 
          active-value="1"  active-color="#a6a9ad"  inactive-color="#13ce66">
        </el-switch>
        </template>
      </el-table-column>
      
      <el-table-column width="250" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="btnClick('edit',scope.row)" style="color: rgb(39, 99, 255);">编辑</el-button>
          <el-button type="text" size="mini" @click="btnClick('delete',scope.row)" style="color: rgb(255, 0, 0);">删除</el-button>
          <el-button type="text" size="mini" @click="btnClick('once',scope.row)">执行一次</el-button>
          <el-button type="text" size="mini" @click="btnClick('detail',scope.row)">任务详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    props: {
      tableData: {
        type: Array,
        default: () => [],
      },
      tableLoading: {
        type: Boolean,
        default: () => false,
      },
    },
    data() {
      return {
        tableHeigt: window.innerHeight - 300,
        changeStatus:''
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.$emit("handleSelectionChange", val)
      },
      btnClick(type,row,){
        this.$emit('clickBtn',type,row);
      }
    }
  };

</script>
<style lang="scss" scoped>
</style>
