<template>
  <div class="obpm-common-tool">
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t('task.title')}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="createTasks">{{$t('btns.new')}}</el-button>
        <el-button type="danger" plain size="small" @click="showDeleteConfirm">{{$t('btns.delete')}}</el-button>
      </div>
    </div>
    <div class="obpm-content">
      <div class="search mt-2">
        <el-form ref="form" :inline="true" :model="params" class="demo-form-inline" size="mini" @submit.native.prevent>
          <el-form-item >
            <el-input v-model="params.name"
              :placeholder="$t('placeholder.name')"
              @keyup.enter.native="getTasks"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getTasks" type="primary" plain>{{$t('btns.query')}}</el-button>
            <el-button @click="resetName">{{$t('btns.reset')}}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="obpm-content-table">
        <template>
          <el-table
            ref="tableList"
            :data="data.datas"
            @selection-change="handleSelectionChange"
            @row-click="onRowClick"
            :height="tableHeight"
            style="width: 100%"
            size='small'>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              :label="$t('task.name')">
            </el-table-column>
             <el-table-column
              prop="creator"
              :label="$t('task.creator')">
            </el-table-column>
             <el-table-column
              prop="period"
              :label="$t('task.period')">
              <template slot-scope="scope">
                <span v-if="scope.row.period == 8192">{{$t('task.immediately')}}</span>
                <span v-else-if="scope.row.period == 34">{{$t('task.minute')}}</span>
                <span v-else-if="scope.row.period == 546">{{$t('task.hour')}}</span>
                <span v-else-if="scope.row.period == 2">{{$t('task.day')}}</span>
                <span v-else-if="scope.row.period == 32">{{$t('task.week')}}</span>
                <span v-else-if="scope.row.period == 512">{{$t('task.month')}}</span>
                <span v-else>{{$t('task.do_not_repeat')}}</span>
              </template>
            </el-table-column>
             <el-table-column
              prop="rDate"
              :label="$t('task.runtime')">
            </el-table-column>
             <el-table-column
              prop="startupType"
              :label="$t('task.startup_type')">
              <template slot-scope="scope">
                <span v-if="scope.row.startupType == 0">{{$t('task.manual')}}</span>
                <span v-else-if="scope.row.startupType == 1">{{$t('task.auto')}}</span>
                <span v-else>{{$t('task.banned')}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          class="text-right pt-2"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNo"
          :page-sizes="[10, 25, 50, 100]"
          :page-size="10"
          background
          layout="total, prev, pager, next, sizes"
          :total="data.rowCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getTasks, deleteTasks } from "@/service/CommontoolsAPI.js";
import {delMsg} from '@/utils/elementui'
export default {
  name: 'tasklist',
  data(){
    return{
      params: {
        appId: "",
        id: "",                   //任务id
        name: "",                 //任务名称
        type: 1,    
        interval:'1',                    
        description: "",
        runningTime: "",
        period: 0,                //周期
        runtimes: 0,
        terminateScript: "",
        taskScript: "",
        modifyTime: "",           //最后更新时间
        creator: "",              //创建人
        creatorid: "",
        totalRuntimes: 0,
        state: 0,                 //启动状态
        startupType: 0,           //启动类型
        daysOfWeek: [],
        dayOfMonth: 1,
        repeatTimes: 0,
        frequency: 0,
        executedCount: 0,         //执行计数
        modifyTiemStr: "", 
        rDate: "",                //运行时间
        rTime: "",   
        pageNo: 1,
        linesPerPage: 10
      },
      data: {},
      multipleSelectionId: [],
      multipleSelectionArray: [],
      tableHeight: 100,
    }
  },

  mounted(){
    this.getScollerHeight();
    if(this.$route.query.edit){
      let appId = sessionStorage.getItem("appId");
      let params = {
        ...this.params,
        appId: appId,
      }
      this.params = params;
      this.getTasks();
    }
  },

  methods:{
    /**
     * 动态计算页面table高度
     */
    getScollerHeight() {
      setTimeout(() => {
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 71 查询， 20 父组件外边距, 40分页
        this.tableHeight = (clientHeight - 60 - 32 - 41 - 40 - 50 - 71 - 20 - 40) + 'px'
      }, 100)
    },
    
    /**
     * 获取任务列表
     */
    async getTasks(){
      let response = await getTasks(this.params);
      if (response.data.errcode == 0) {
        let data = response.data.data;
        this.data = data;
      }
    },

    /**
     * 重置查询名称值
     */
    resetName(){
      let params = {
        ...this.params,
        name: "",
      }
      this.params = params;
      this.getTasks();
    },

    /**
     * 勾选行时响应
     */
    handleSelectionChange(val) {
      let multipleSelectionId = [];
      if(val.length){
        val.map((e) => {
          multipleSelectionId.push(e.id)
        })
      }
      this.multipleSelectionArray = val;
      this.multipleSelectionId = multipleSelectionId;
    },

    /**
     * 新建任务
     */
    createTasks(){
      this.$router.push({path: '/home/softwaresdetails/commontool/task', query:{edit: false}});
    },

    /**
     * 删除任务
     */
    async showDeleteConfirm(){
      let params = this.params;
      let multipleSelectionId = this.multipleSelectionId;
      if(multipleSelectionId.length > 0){
        try{
          await delMsg(this.$t('msg.delConfirm'), this.$t('msg.tip'))
          let response = await deleteTasks(multipleSelectionId, params);
          if (response.data.errcode == 0) {
            this.getTasks();
            this.$message.success(this.$t('msg.del_ss'));
          }
        }catch(e){
          console.log(e)
        }
      }else{
        this.$message.error(this.$t('msg.check_data'))
      }
    },

    /**
     * 选中数据源回显
     */
    onRowClick(row){
      let params = {
        ...this.params,
        id: row.id,                   //任务id
        name: row.name,                 //任务名称
        type: row.type,   
        interval:row.interval,                     
        description: row.description,
        runningTime: row.runningTime,
        period: row.period,                //周期
        runtimes: row.runtimes,
        terminateScript: row.terminateScript,
        taskScript: row.taskScript,
        modifyTime: row.modifyTime,           //最后更新时间
        creator: row.creator,              //创建人
        creatorid: row.creatorid,
        totalRuntimes: row.totalRuntimes,
        state: row.state,                 //启动状态
        startupType: row.startupType,           //启动类型
        daysOfWeek: row.daysOfWeek.length > 0 ? this.changeNum2String(row.daysOfWeek) : row.daysOfWeek,
        dayOfMonth: row.dayOfMonth,
        repeatTimes: row.repeatTimes,
        frequency: row.frequency,
        executedCount: row.executedCount,         //执行计数
        modifyTiemStr: row.modifyTiemStr,
        rDate: row.rDate,                //运行时间
        rTime: row.rTime      
      }
      
      this.$router.push({path: '/home/softwaresdetails/commontool/task', query:{edit: true, params: params}});
    },

    /**
     * 当前页
     */
    handleCurrentChange(val) {
      let params = {
        ...this.params,
        pageNo: val
      }
      this.params = params;
      this.getTasks()
    },

    /**
     * 切换分页，每页显示多少条
     */
    handleSizeChange(val){
      let params = {
        ...this.params,
        linesPerPage: val
      }
      this.params = params;
      this.getTasks()
    },

    /**
     * 将数字转为字符串
     */
    changeNum2String(arr){
      return arr.map(item => item.toString())
    }

  }
}
</script>