<template>
  <div class="taskConfig">
    <div class="taskConfig__header">
    <p class="taskConfig__header--p">{{$t('scheduled_tasks')}}</p>
      <div>
          <Button @click="refresh" type="primary">{{$t('refresh')}}</Button>
      </div>
    </div>
    <Table border min-width="1000" :loading="taskConfigLoad" :columns="columnsList" :data="dataList" class="taskConfig__tab">
      <template slot-scope="{row}" slot="title">
        <p>{{row.title}}</p>
      </template>
      <template slot-scope="{row}" slot="fire_params">
        <p>{{row.fire_params}}</p>
      </template>
      <template slot-scope="{row}" slot="result" >
        <p v-if="row.result === ''"> - </p>
        <div v-else>
          <p> {{ row.result }} </p>
        </div>
      </template>
      <template slot-scope="{row}" slot="lasttime">
        <p v-if="row.last_fire_time === ''"> - </p>
        <p v-else> {{ row.last_fire_time }} </p>
      </template>
      <template slot-scope="{ row }" slot="enable">
        <p v-if="row.enable === 0" style="color: red;"> {{$t('disable')}} </p>
        <p v-else> {{$t('enable')}} </p>
      </template>
      <template slot-scope="{ row }" slot="state">
        <p v-if="row.state === 0"> {{$t('not_running')}} </p>
        <p v-if="row.state === 1" style="color: blue"> {{$t('running')}} </p>
        <p v-if="row.state === -1" style="color: red"> {{$t('exception')}} </p>
      </template>
      <template slot-scope="{ row,index }" slot="operation" class="operation">
          <Button type="success" size="small" class="operation__btn" style="" v-if="row.enable === 0" @click="show(row)">{{ statusArr[1] }}</Button>
          <Button class="ivu-btn ivu-btn-error ivu-btn-small operation__btn" type="text" size="small" style="" v-else @click="show(row)">{{ statusArr[0] }}</Button>
          <Button type="error" size="small" class="operation__btn" @click="remove(row.id)">{{$t('delete')}}</Button>
          <router-link :to="{name:'editscheduledtask',query:{id:row.id}}" >
            <Button type="primary" size="small" class="operation__btn" style="">{{$t('edit')}}</Button>
          </router-link>
      </template>
    </Table>

        <br/>
    <Alert style="border-radius:10px;">
    {{$t('how_to_start_task')}}
    <template slot="desc">
         {{$t('make_sure_configure_in_your_crontab')}}
        <br/>
    */1 * * * * php /path/to/phalapi-pro/bin/run_task.php &gt; /dev/null
    </template>
    </Alert>

    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>
  </div>
</template>

<script>
import { GetTaskList, RemoveTaskConfig, EnableTaskOrNot } from '@/api/taskconfig'
import moment from 'moment'
import { getToken } from '@/libs/util'
export default {
  name: 'directive_page',
  data () {
    return {
      token: getToken(),
      keyword: '',
      total: 0,
      page: 1, // 分页
      perpage: 10,
      taskConfigLoad: false,
      columnsList: [
        {
          title: this.$t('ID'),
          key: 'id',
          // slot: 'id',
          align: 'center',
          width: 100,
          fixed: 'left'
        },
        {
          title: this.$t('task_title'),
          key: 'title',
          slot: 'title',
          width: 160,
          align: 'center'
        },
        {
          title: this.$t('task_API'),
          key: 'fire_params',
          slot: 'fire_params',
          width: 200,
          align: 'center'
        },
        {
          title: this.$t('excute_interval_second'),
          key: 'crontab_interval_time',
          align: 'center',
          width: 90
        },
        {
          title: this.$t('lastest_result'),
          key: 'result',
          align: 'center',
          tooltip: 'true',
          width: 300
        },
        {
          title: this.$t('last_excuted_time'),
          key: 'last_fire_time',
          slot: 'lasttime',
          align: 'center',
          width: 150
        },
        {
          title: this.$t('switch'),
          key: 'enable',
          slot: 'enable',
          align: 'center',
          width: 100
        },
        {
          title: this.$t('status'),
          key: 'state',
          slot: 'state',
          align: 'center',
          width: 100
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          align: 'center',
          fixed: 'right',
          width: 200
        }
      ],
      dataList: [],
      stateArr: [this.$t('not_running'), this.$t('running'), this.$t('exception')],
      statusArr: [this.$t('disable'), this.$t('enable')]
    }
  },
  // 获取应用管理数据
  created () {
    this.queryList()
  },
  methods: {
    // 查询列表
    queryList () {
      this.taskConfigLoad = true
      const data = new FormData()
      data.append('access_token', this.token)
      data.append('page', this.page)
      data.append('perpage', this.perpage)
      GetTaskList(data).then(res => {
        if (res.ret === 200) {
          this.total = res.data.total
          this.dataList = res.data.items
          this.dataList = this.dataList
          res.data.items.forEach((item, index) => {
            this.dataList[index].last_fire_time = moment.unix(item.last_fire_time).format('YYYY-MM-DD HH:mm:ss')
          })
          this.taskConfigLoad = false
        }
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    },
    remove (id) {
      this.$Modal.confirm({
        title: this.$t('operation_confirm'),
        content: this.$t('confirm_to_delete_task'),
        onOk: () => {
          const formdata = new FormData()
          formdata.append('access_token', this.token)
          formdata.append('id', id)
          RemoveTaskConfig(formdata).then(res => {
            if (res.ret === 200 && res.data.isDel) {
              this.$Message.success(this.$t('successfully_deleted'))
              this.queryList()
            }
          })
        },
        onCancel: () => {
          this.$Message.info(this.$t('cancel'))
        }
      })
    },
    // 开启/禁用操作
    show (row) {
      const data = new FormData()
      data.append('access_token', this.token)
      data.append('id', row.id)
      if (row.enable === 0) {
        data.append('enable', true)
      } else {
        data.append('enable', false)
      }
      EnableTaskOrNot(data).then(res => {
        if (res.ret === 200 && res.data.isUpdate) {
          this.$Message.success(res.data.msg)
          this.queryList()
        } else {
          if (res.msg) {
            this.$Message.warning(res.msg)
          }
        }
      })
    },
    refresh () {
      this.queryList()
      if (this.total) {
        this.$Message.success(this.$t('task_refresh_done'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.taskConfig{
  &__header{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 30px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      color:rgba(35,35,42,1);
    }
  }
  &__tab{
    background: #fff;
    border-radius: 10px;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.operation{
  &__btn{
    margin: 0 5px;
  }
}

</style>
