<template>
  <el-dialog
    :visible.sync="fileTreeDialog"
    :close-on-click-modal="false"
    width="55%"
    :show-close="false"
    top="52px"
    :append-to-body="true"
  >
    <p class="arrow">
      <el-button
        icon="el-icon-download"
        @click="download()"
        style="download"
        type="primary"
        size="mini"
        >下载</el-button
      >
      <span
        style="float :right;padding-right:40px;font-size: 20px;color: #8c8e92;cursor: pointer;"
        @click="close"
        ><i class="el-icon-close"></i
      ></span>
    </p>
    <el-tree :data="fileTree" :props="filesProps"></el-tree>
  </el-dialog>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import {Message} from 'element-ui'
import req from '@/request.js'
export default {
  props: ['fileTree', 'fileRow'],
  data() {
    return {
      fileTreeDialog: false,
      filesProps: {
        label: 'originName',
        children: 'childList'
      }
    }
  },
  methods: {
    handleOpen() {
      this.fileTreeDialog = true
    },
    //关闭弹框
    close() {
      this.fileTreeDialog = false
    },
    //附件下载
    download() {
      req.download(
        '${portal}/system/file/v1/downloadFile?fileId=' + this.fileRow.id
      )
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/css/element-variables.scss';
.currentPage {
  cursor: pointer;
  color: #8c8e92;
}

.currentPage:hover {
  color: #409eff;
}
.arrow {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 100%;
  background-color: #191919;

  padding: 12px 0;
  margin: 0;

  text-align: center;
}

::v-deep .el-dialog__body {
  color: #606266;
  font-size: 14px;
  padding: 0;
}
</style>
