<template>
  <div class="edu-training-edit">
    <DialogCom :title="this.title" :visible.sync="isShow" width="1000px" append-to-body>
      <div class="page-body">
        <div class="extend_mod">
          <el-table :data="logList" border style="width: 100%;height: auto" row-key="id" :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="fileName"
              label="文件名称"
              align="left"
            ></el-table-column>
            <el-table-column
              prop="fileType"
              label="文件类型"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.fileType == 1 ? '文件' : '目录' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="fileSize"
              label="文件大小"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit-outline"
                  v-if="scope.row.fileType ==1 "
                  @click="transferLog(scope.row)"
                >获取日志
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  v-if="scope.row.exit == 1"
                  @click="downloadLog(scope.row)"
                >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">关闭</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import {getLogList, transferLogData} from "@/api/system/logManagement";
import {getLabel} from "@/views/commonOption";

export default {
  components: {},
  dicts: [],
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      formData: this.reset(),
      title: '',
      logList: [],
      serverId: null,
      serviceId: null,
    };
  },
  props: {},
  watch: {},
  computed: {
    ...mapState(["loginUser"]),
  },
  methods: {
    ...mapMutations([]),
    getLabel,
    reset(other = {}) {
      return {
        fileName: null,
        fileSize: null,
        fileType: null,
        ...other,
      };
    },
    async refresh(serverId, serviceId) {
      if (!serverId || !serviceId) {
        this.reset(serverId);
      } else {
        getLogList(serverId, serviceId).then((response) => {
          this.logList = response.data;
          this.loading = false;
        });
      }
    },
    async show(server, service, other = {}) {
      this.serverId = server.id;
      this.serviceId = service.id;
      this.title = service.checkName + "日志详情页";
      await this.refresh(server.id, service.id);
      this.isShow = true;
    },
    transferLog(row) {
      console.log(row)
      let data = {
        serverId: this.serverId,
        parentPath: row.parentPath,
        path: row.path,
        rootDir: row.path,
      };
      transferLogData(data).then((response) => {
        this.$message.success("获取成功,正在重新加载页面!");
        this.refresh(this.serverId, this.serviceId);
      });
    },
    downloadLog(row){
      let data = {
        serverId: this.serverId,
        parentPath: row.parentPath,
        path: row.path,
        rootDir: row.path,
      };
      this.download(
        "/system/server/downloadLogData",
        {
          ...data,
        },
        row.fileName
      );
    },
    // 事件
    onHide() {
      this.isShow = false;
    },
  },
  mounted() {
  },
};
</script>

<style lang="scss" scoped>
.page-body {
  max-height: 500px;
  overflow: auto;
}
</style>
