<template>
  <el-dialog
    :visible.sync="dialogOpen"
    title="文件管理"
    :close-on-click-modal="false"
    append-to-body
    @opened="initData"
    @close="handleCancel"
    width="30%">
    <el-table
      v-loading="loading"
      :data="dataList"
      @row-click="handleRowClick"
    >
      <el-table-column label="数据名称" align="center" prop="name" />
      <el-table-column label="文件名称" align="center" prop="fileName" />
      <el-table-column label="数据类型" align="center" prop="type">
        <template #scope="scope">
          <dict-tag :options="dict.type.data_type" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="文件路径" align="center" prop="filePath" />
      <el-table-column label="文件大小" align="center" prop="fileSize" />
      <el-table-column label="上传时间" align="center" prop="createTime" />
      <el-table-column label="说明" align="center" prop="remark" />
    </el-table>
  </el-dialog>
</template>
<script>
import {
  listData,
} from "@/api/data/data";
export default {
  props: {
    value: {
      type: Boolean,
      default: true
    },
  },
  dicts: ["data_type"],
  data() {
    return {
      dialogOpen: false,
      dataList: [],
      // 遮罩层
      loading: true,
      selectedRow: null,
      ids: [],
      single: false,
      multiple: false
    };
  },
  watch: {
    value(newVal) {
      this.dialogOpen = newVal;
    }
  },
  methods: {
    initData() {
      listData().then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 点击某一行数据
    handleRowClick(row) {
      this.selectedRow = row;
      this.$emit('callback', row);
      this.dialogOpen = false;
    },
    handleCancel() {
      this.dialogOpen = false;
    },
  }
};
</script>
