<template>
  <div class="fullheight single-padding">
    <el-page-header
      @back="goBack"
      content="计算详情"
      style="margin-bottom:20px;"
    >
    </el-page-header>
    <div style="width:100%;height:calc(100% - 44px);">
      <ht-table
        @load="loadData"
        @row-dblclick="row => showDialog(row.id)"
        :data="data"
        :pageResult="pageResult"
        :selection="true"
        :quick-search-props="quickSearchProps"
        :show-export="false"
        :show-custom-column="false"
        ref="htTable"
      >
        <template>
          <ht-table-column
            prop="fanName"
            label="机组名称"
            :show-overflow-tooltip="true"
          >
          </ht-table-column>
          <ht-table-column
            prop="startTime"
            label="执行开始时间"
            :sortable="true"
          >
          </ht-table-column>
          <ht-table-column prop="endTime" label="执行结束时间" :sortable="true">
          </ht-table-column>
          <ht-table-column
            prop="status"
            label="执行状态"
            width="150"
            :sortable="true"
            :filters="filterStatus"
          >
            <template v-slot="{row}">
              <el-tag type="success" v-if="row.status == 1">成功</el-tag>
              <el-tag type="danger" v-if="row.status == 0">失败 </el-tag>
            </template>
          </ht-table-column>
        </template>
      </ht-table>
    </div>
    <common-dialog
      width="800px"
      title="计算详情信息"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="BizModelLogForm">
        <el-row>
          <el-col :span="12">
            <ht-form-item label="执行状态" label-width="120px">
              <el-tag type="success" v-if="BizModelInfo.status == 1"
                >成功</el-tag
              >
              <el-tag type="danger" v-if="BizModelInfo.status == 0"
                >失败
              </el-tag>
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="机组名称" label-width="120px">
              <ht-input v-model="BizModelInfo.fanName" style="width:90%" />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <ht-form-item label="执行开始时间" label-width="120px">
              <ht-input v-model="BizModelInfo.startTime" style="width:89%" />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="执行结束时间" label-width="120px">
              <ht-input v-model="BizModelInfo.endTime" />
            </ht-form-item>
          </el-col>
        </el-row>

        <ht-form-item label="结果" label-width="120px">
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入内容"
            v-model="BizModelInfo.result"
            style="width:620px;overflow-y:scroll"
          >
          </el-input>
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="beforeCloseDialog">返回</el-button>
      </div>
    </common-dialog>
  </div>
</template>
<script>
export default {
  name: 'model-log',
  data() {
    return {
      quickSearchProps: [{prop: 'f.fan_name_', label: '机组名称'}],
      //执行状态
      filterStatus: [{text: '成功', value: 1}, {text: '失败', value: 0}],
      //弹框
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      BizModelInfo: {},
      saveMethod: 'POST'
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },

  methods: {
    showDialog(id) {
      this.dialogVisible = true
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${cssc}/biz/model/modelLog/v1/get/' + id).then(
          resp => {
            this.BizModelInfo = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },

    loadData(param, cb) {
      let id = this.$route.params.id
      let logQuery = [
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'sys_joblog_id_',
          relation: 'AND',
          value: id
        }
      ]
      if (param.querys && param.querys.length) {
        param.querys.push(...logQuery)
      } else {
        param.querys = logQuery
      }
      this.$http
        .post('${cssc}/biz/model/modelLog/v1/sliceQueryModelLog', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    beforeCloseDialog() {
      this.BizModelInfo = {}
      this.dialogVisible = false
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    },
    // 返回上一页
    goBack() {
      // console.log(this.data[0].modelName)
      this.$router.push({
        name: 'ModelLog',
        params: {
          row: {
            jobName: this.$route.params.jobName,
            id: this.$route.params.id,
            modelId: this.$route.params.modelId
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-page-header__content {
  font-size: 16px;
}
/deep/ .el-divider--vertical {
  width: 0;
}
/deep/ .el-dialog__body {
  padding-top: 20px;
  padding-bottom: 10px;
}
</style>
