<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<template>
  <div class="global-history">
    <div class="global-history-searchbar">
      <div class="searchbar-items">
        <div class="searchbar-item">
          <label class="label">{{$t('message.linkis.jobId')}}</label>
          <InputNumber
            v-model="searchBar.id"
            :placeholder="$t('message.linkis.formItems.id.placeholder')"
            style="width:100px;"
            :min="1"
          ></InputNumber>
        </div>
        <div v-if="isAdminModel" class="searchbar-item">
          <label class="label">{{$t('message.linkis.userName')}}</label>
          <Input
            :maxlength="50"
            v-model="searchBar.proxyUser"
            :placeholder="$t('message.linkis.searchName')"
            style="width:60px;"
          />
        </div>
        <div class="searchbar-item">
          <label class="label">{{$t('message.linkis.formItems.date.label')}}</label>
          <DatePicker
            :transfer="true"
            class="datepicker"
            :options="shortcutOpt"
            v-model="searchBar.shortcut"
            type="daterange"
            placement="bottom-start"
            format="yyyy-MM-dd"
            :placeholder="$t('message.linkis.formItems.date.placeholder')"
            style="width: 160px"
            :editable="false"
          />
        </div>
        <div class="searchbar-item">
          <label class="label">{{$t('message.linkis.formItems.creator.label')}}</label>
          <Input
            :maxlength="50"
            v-model.trim="searchBar.creator"
            :placeholder="$t('message.linkis.formItems.creator.placeholder')"
            style="width:80px;"
          />
        </div>
        <div class="searchbar-item">
          <label class="label">{{$t('message.linkis.formItems.engine.label')}}</label>
          <Select v-model="searchBar.engine" style="width: 70px">
            <Option v-for="(item) in getEngineTypes" :label="item === 'all' ? $t('message.linkis.engineTypes.all'): item" :value="item" :key="item" />
          </Select>
        </div>
        <div class="searchbar-item">
          <label class="label">{{$t('message.linkis.formItems.status.label')}}</label>
          <Select v-model="searchBar.status" style="width: 70px">
            <Option
              v-for="(item) in statusType"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            />
          </Select>
        </div>
        <Form v-show="showAdvance" class="global-history-searchbar" :model="searchBar" inline>
          <FormItem prop="instance" :label="$t('message.linkis.formItems.instance.label')">
            <Input
              v-model="searchBar.instance"
              :placeholder="$t('message.linkis.formItems.instance.placeholder')"
              style="width:150px;"
            />
          </FormItem>
        </Form>
      </div>
      <div class="search-btns">
        <Button
          class="search-btn"
          type="primary"
          @click="search"
          style="margin-right: 10px;"
        >{{ $t('message.linkis.search') }}</Button>
        <Button
          class="search-btn"
          type="warning"
          @click="reset"
          style="margin-right: 10px;"
        >{{ $t('message.linkis.clearSearch') }}</Button>
        <Button class="search-btn" type="error" @click="stop" style="margin-right: 10px;">{{$t('message.linkis.stop')}}</Button>
        <Button
          class="search-btn"
          type="primary"
          @click="switchAdmin"
          v-show="isLogAdmin || isHistoryAdmin"
          style="margin-right: 10px;"
        >{{ isAdminModel ? $t('message.linkis.generalView') : $t('message.linkis.manageView') }}</Button>
        <Button
          class="search-btn"
          type="primary"
          @click="clickAdvance"
        >{{ showAdvance ? $t('message.linkis.hideAdvancedSearch') :  $t('message.linkis.showAdvancedSearch') }}</Button>
      </div>
    </div>
    <div class="global-history-table" :style="{width: '100%', 'height': moduleHeight +'px'}">
      <Icon v-show="isLoading" type="ios-loading" size="30" class="global-history-loading" />
      <history-table
        v-if="!isLoading"
        :columns="column"
        :data="list"
        :height="moduleHeight"
        :no-data-text="$t('message.linkis.noDataText')"
        border
        stripe
        @checkall="checkChange"
        @select-change="selectChange"
      />
    </div>
    <div class="global-history-page">
      <Page
        :total="pageSetting.total"
        :page-size="pageSetting.pageSize"
        :current="pageSetting.current"
        size="small"
        show-total
        show-elevator
        :prev-text="$t('message.linkis.previousPage')" :next-text="$t('message.linkis.nextPage')"
        @on-change="changePage"
      />
    </div>
  </div>
</template>
<script>
import storage from '@/common/helper/storage'
import table from '@/components/virtualTable'
import mixin from '@/common/service/mixin'
import api from '@/common/service/api'
export default {
  name: 'GlobalHistory',
  components: {
    historyTable: table.historyTable
  },
  mixins: [mixin],
  data() {
    const today = new Date(new Date().toLocaleDateString())
    return {
      list: [],
      column: [],
      getEngineTypes: [],
      isLoading: false,
      showAdvance: false,
      pageSetting: {
        total: 0,
        pageSize: 50,
        current: 1
      },
      searchBar: {
        id: null,
        proxyUser: '',
        creator: '',
        engine: 'all',
        status: '',
        shortcut: [today, today]
      },
      inputType: 'number',
      shortcutOpt: {
        shortcuts: [
          {
            text: this.$t('message.linkis.shortcuts.week'),
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            }
          },
          {
            text: this.$t('message.linkis.shortcuts.month'),
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            }
          },
          {
            text: this.$t('message.linkis.shortcuts.threeMonths'),
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            }
          }
        ]
      },
      statusType: [
        {
          label: this.$t('message.linkis.statusType.all'),
          value: 'all'
        },
        {
          label: this.$t('message.linkis.statusType.inited'),
          value: 'Inited'
        },
        {
          label: this.$t('message.linkis.statusType.running'),
          value: 'Running'
        },
        {
          label: this.$t('message.linkis.statusType.succeed'),
          value: 'Succeed'
        },
        {
          label: this.$t('message.linkis.statusType.cancelled'),
          value: 'Cancelled'
        },
        {
          label: this.$t('message.linkis.statusType.failed'),
          value: 'Failed'
        },
        {
          label: this.$t('message.linkis.statusType.scheduled'),
          value: 'Scheduled'
        },
        {
          label: this.$t('message.linkis.statusType.timeout'),
          value: 'Timeout'
        }
      ],
      engineTypes: [
        {
          label: this.$t('message.linkis.engineTypes.all'),
          value: 'all'
        },
        {
          label: 'spark',
          value: 'spark'
        },
        {
          label: 'hive',
          value: 'hive'
        },
        {
          label: 'pipeline',
          value: 'pipeline'
        },
        {
          label: 'python',
          value: 'python'
        },
        {
          label: 'flowexecution',
          value: 'flowexecution'
        },
        {
          label: 'appjoint',
          value: 'appjoint'
        },
        {
          label: 'shell',
          value: 'shell'
        }
      ],
      isLogAdmin: false,
      isHistoryAdmin: false,
      isAdminModel: false,
      moduleHeight: 300
    }
  },
  async created() {
    // Get whether it is a historical administrator(获取是否是历史管理员权限)
    await api.fetch('/jobhistory/governanceStationAdmin', 'get').then(res => {
      this.isLogAdmin = res.admin
      this.isHistoryAdmin = res.historyAdmin
    })
    await api.fetch('/configuration/engineType', 'get').then(res => {
      this.getEngineTypes = ['all', ...res.engineType]
    })
  },
  mounted() {
    this.init()
    this.moduleHeight = this.$parent.$el.clientHeight - 220
    // Monitor window changes and get browser width and height(监听窗口变化，获取浏览器宽高)
    window.addEventListener('resize', this.getHeight)
  },
  beforeDestroy() {
    // Monitor window changes and get browser width and height(监听窗口变化，获取浏览器宽高)
    storage.set('last-admin-model', this.isAdminModel)
    // storage.set('last-searchbar-status', this.searchBar)
    window.removeEventListener('resize', this.getHeight)
  },
  beforeRouteEnter(to, from, next) {
    if(from.name !== 'viewHistory') {
      sessionStorage.removeItem('last-admin-model');
      sessionStorage.removeItem('last-searchbar-status');
      sessionStorage.removeItem('last-pageSetting-status');
      sessionStorage.removeItem('last-searchbar-advance');
    }
    next();
  },
  activated() {
    this.init()
  },
  methods: {
    getHeight() {
      this.moduleHeight = this.$parent.$el.clientHeight - 228
      if(this.showAdvance) {
        this.moduleHeight -= 42
      }
    },
    clickAdvance() {
      this.showAdvance = !this.showAdvance
      this.getHeight()
    },
    init() {
      let isAdminModel = storage.get('last-admin-model')
      const lastSearch = storage.get('last-searchbar-status')
      const lastPage = storage.get('last-pageSetting-status')
      this.showAdvance = storage.get('last-searchbar-advance')
      this.getHeight()
      if (lastSearch) {
        if (lastSearch.shortcut[0] && lastSearch.shortcut[1]) {
          lastSearch.shortcut = [new Date(lastSearch.shortcut[0]), new Date(lastSearch.shortcut[1])]
        } else {
          const today = new Date(new Date().toLocaleDateString())
          lastSearch.shortcut = [today, today]
        }
        this.searchBar = lastSearch
      }
      if (lastPage) {
        this.pageSetting = lastPage
      }
      if (isAdminModel) {
        this.switchAdmin()
      } else {
        this.search()
      }
      storage.remove('last-pageSetting-status')
    },
    convertTimes(runningTime) {
      const time = Math.floor(runningTime / 1000)
      if (time < 0) {
        return `0${this.$t('message.linkis.time.second')}`
      } else if (time < 60) {
        return `${time}${this.$t('message.linkis.time.second')}`
      } else if (time < 3600) {
        return `${(time / 60).toPrecision(2)}${this.$t(
          'message.linkis.time.minute'
        )}`
      } else if (time < 86400) {
        return `${(time / 3600).toPrecision(2)}${this.$t(
          'message.linkis.time.hour'
        )}`
      }
      return `${(time / 86400).toPrecision(2)}${this.$t(
        'message.linkis.time.day'
      )}`
    },
    // Click to view historical details log and return results(点击查看历史详情日志和返回结果)
    async viewHistory(params) {
      let sourceJson = params.row.sourceJson
      if (typeof sourceJson === 'string') {
        try {
          sourceJson = JSON.parse(sourceJson)
        } catch (error) {
          window.console.log(sourceJson)
        }
      }
      let fileName = ''
      if (sourceJson && sourceJson.scriptPath) {
        fileName = sourceJson.scriptPath.split('/').pop()
      }
      if (sourceJson && sourceJson.nodeName) {
        fileName = sourceJson.nodeName
      }
      const query =  {
        taskID: params.row.taskID,
        execID: params.row.strongerExecId,
        status: params.row.status,
        fileName,
        engineInstance: params.row.engineInstance,
      }
      if (this.isAdminModel) {
        query.proxyUser = params.row.executeUser
      }
      storage.set('last-searchbar-status', this.searchBar)
      storage.set('last-pageSetting-status', this.pageSetting)
      storage.set('last-searchbar-advance', this.showAdvance)
      // Jump to view the history details page(跳转查看历史详情页面)
      this.$router.push({
        path: '/console/viewHistory',
        query
      })
    },

    getParams(page) {
      const startDate = this.searchBar.shortcut[0] ? new Date(this.searchBar.shortcut[0].setHours(0, 0, 0, 0)) : this.searchBar.shortcut[0]
      const endDate = this.searchBar.shortcut[1] ? new Date(this.searchBar.shortcut[1].setHours(23, 59, 59, 0)): this.searchBar.shortcut[1]
      const params = {
        taskID: this.searchBar.id,
        creator: this.searchBar.creator,
        executeApplicationName: this.searchBar.engine,
        status: this.searchBar.status,
        startDate: startDate && startDate.getTime(),
        endDate: endDate && endDate.getTime(),
        pageNow: page || this.pageSetting.current,
        pageSize: this.pageSetting.pageSize,
        proxyUser: this.searchBar.proxyUser,
        isAdminView: this.isAdminModel,
        instance: this.searchBar.instance?.replace(/ /g, '') || ''
      }
      if (!this.isAdminModel) {
        delete params.proxyUser
      }
      if (this.searchBar.id) {
        delete params.creator
        delete params.executeApplicationName
        delete params.status
        delete params.startDate
        delete params.endDate
        delete params.proxyUser
        delete params.instance
      } else {
        let { engine, status, shortcut } = this.searchBar
        if (engine === 'all') {
          delete params.executeApplicationName
        }
        if (status === 'all') {
          delete params.status
        }
        if (!shortcut[0]) {
          delete params.startDate
        }
        if (!shortcut[1]) {
          delete params.endDate
        }
        delete params.taskID
      }
      return params
    },
    changePage(page) {
      this.isLoading = true
      const params = this.getParams(page)
      this.column = this.getColumns()
      api
        .fetch('/jobhistory/list', params, 'get')
        .then(rst => {
          this.isLoading = false
          this.list = this.getList(rst.tasks)
          this.pageSetting.current = page
          this.pageSetting.total = rst.totalPage
        })
        .catch(() => {
          this.isLoading = false
          this.list = []
        })
    },
    search() {
      this.isLoading = true
      const params = this.getParams()
      this.column = this.getColumns()
      api
        .fetch('/jobhistory/list', params, 'get')
        .then(rst => {
          this.pageSetting.total = rst.totalPage
          this.isLoading = false
          this.list = this.getList(rst.tasks)
        })
        .catch(() => {
          this.list = []
          this.isLoading = false
        })
    },
    getList(list) {
      const getFailedReason = item => {
        return item.errCode && item.errDesc
          ? item.errCode + item.errDesc
          : item.errCode || item.errDesc || ''
      }
      if (!this.isAdminModel) {
        return list.map(item => {
          return {
            disabled: ['Submitted', 'Inited', 'Scheduled', 'Running'].indexOf(item.status) === -1,
            taskID: item.taskID,
            strongerExecId: item.strongerExecId,
            source: item.sourceTailor,
            executionCode: item.executionCode,
            status: item.status,
            costTime: item.costTime,
            requestApplicationName: item.requestApplicationName,
            executeApplicationName: item.executeApplicationName,
            createdTime: item.createdTime,
            progress: item.progress,
            failedReason: getFailedReason(item),
            runType: item.runType,
            instance: item.instance,
            engineInstance: item.engineInstance,
          }
        })
      }
      return list.map(item => {
        return Object.assign(item, {
          disabled:
              ['Submitted', 'Inited', 'Scheduled', 'Running'].indexOf(item.status) === -1,
          failedReason: getFailedReason(item),
          source: item.sourceTailor
        })
      })
    },
    checkChange(v) {
      this.list = this.list.map(it => {
        it.checked = !it.disabled && v
        return it
      })
    },
    selectChange() {
      this.list = this.list.slice(0)
    },
    getColumns() {
      const column = [
        {
          title: '',
          key: 'checked',
          align: 'center',
          width: 60,
          renderType: 'checkbox'
        },
        {
          title: this.$t('message.linkis.tableColumns.control.title'),
          key: 'control',
          fixed: 'right',
          align: 'center',
          width: 60,
          renderType: 'button',
          renderParams: [
            {
              label: this.$t('message.linkis.tableColumns.control.label'),
              action: this.viewHistory
            }
          ]
        },
        {
          title: this.$t('message.linkis.tableColumns.taskID'),
          key: 'taskID',
          align: 'center',
          width: 90
        },
        {
          title: this.$t('message.linkis.tableColumns.fileName'),
          key: 'source',
          align: 'center',
          ellipsis: true,
          width: 170
        },
        {
          title: this.$t('message.linkis.tableColumns.executionCode'),
          key: 'executionCode',
          align: 'center',
          width: 420,
          // overflow to show(溢出以...显示)
          ellipsis: true
          // renderType: 'tooltip',
        },
        {
          title: this.$t('message.linkis.tableColumns.status'),
          key: 'status',
          align: 'center',
          width: 164,
          renderType: 'if',
          renderParams: {
            action: this.setRenderType
          }
        },
        {
          title: this.$t('message.linkis.tableColumns.costTime'),
          key: 'costTime',
          align: 'center',
          width: 100,
          renderType: 'convertTime'
        },
        {
          title: this.$t('message.linkis.tableColumns.failedReason'),
          key: 'failedReason',
          align: 'center',
          className: 'history-failed',
          width: 200,
          renderType: 'a',
          renderParams: {
            hasDoc: this.checkIfHasDoc,
            action: this.linkTo
          }
        },
        {
          title: this.$t('message.linkis.tableColumns.requestApplicationName') + ' / ' + this.$t('message.linkis.tableColumns.executeApplicationName'),
          key: 'requestApplicationName',
          align: 'center',
          width: 130,
          renderType: 'concat',
          renderParams: {
            concatKey: 'executeApplicationName'
          }

        },
        {
          title: this.$t('message.linkis.tableColumns.user'),
          key: 'umUser',
          align: 'center',
          width: 80
        },
        {
          title: this.$t('message.linkis.tableColumns.createdTime'),
          key: 'createdTime',
          align: 'center',
          width: 150,
          renderType: 'formatTime'
        }
      ]
      if (!this.isAdminModel) {
        const index = column.findIndex(item => item.key === 'umUser')
        column.splice(index, 1)
      }
      return column
    },
    reset() {
      this.searchBar = {
        id: null,
        proxyUser: '',
        creator: '',
        engine: 'all',
        status: 'all',
        shortcut: ''
      }
    },
    switchAdmin() {
      if (!this.isLoading) {
        if (this.isAdminModel) {
          this.searchBar.id = null
          this.searchBar.proxyUser = ''
        }
        this.isAdminModel = !this.isAdminModel
        this.search()
      }
    },
    linkTo(params) {
      this.$router.push({
        path: '/console/FAQ',
        query: {
          errCode: parseInt(params.row.failedReason),
          isSkip: true
        }
      })
    },
    checkIfHasDoc(params) {
      const errCodeList = [11011, 11012, 11013, 11014, 11015, 11016, 11017]
      const errCode = parseInt(params.row.failedReason)
      if (errCodeList.indexOf(errCode) !== -1) {
        return true
      }
      return false
    },
    setRenderType(params) {
      if (params.row.status === 'Running' && params.row.progress !== 0) {
        return {
          type: 'Progress',
          value: params.row.progress
        }
      } else {
        return {
          type: 'Tag',
          value: params.row.status
        }
      }
    },
    stop() {
      const selected = this.list.filter(it => it.checked)
      if (!selected.length) {
        this.$Message.warning(this.$t('message.linkis.unselect'))
        return;
      }
      this.$Modal.confirm({
        title: this.$t('message.linkis.modal.modalTitle'),
        content: this.$t('message.linkis.modal.modalDeleteTask'),
        onOk: ()=>{
          const inst = {}
          selected.forEach(it => {
            if (inst[it.instance]) {
              inst[it.instance].taskIDList.push(it.taskID)
              inst[it.instance].idList.push(it.strongerExecId)
            } else {
              inst[it.instance] = {
                taskIDList: [it.taskID],
                idList: [it.strongerExecId]
              }
            }
          })
          const p = []
          Object.keys(inst).forEach(instkey => {
            if (instkey) p.push(api.fetch(`/entrance/${inst[instkey].idList[0]}/killJobs`, { idList: inst[instkey].idList, taskIDList: inst[instkey].taskIDList }, 'post'))
          })

          Promise.all(p).then(()=> {
            this.$Message.success(this.$t('message.linkis.udf.success'));
            this.search()
          })
        }
      })
    }
  }
}
</script>
<style src="./index.scss" lang="scss"></style>