<template>
  <div class="upload-page">
    <div class="change-upload-type">
      <el-radio-group v-model="uploalLocal" :disabled="readonly" @change="uploalLocalChangeFun">
        <el-radio value="local">本地</el-radio>
        <el-radio value="online">在线</el-radio>
      </el-radio-group>
    </div>
    <div class="upload-item" v-if="uploalLocal === 'local'">
      <el-upload
        class="upload-demo"
        ref="uploadRef"
        :auto-upload="false"
        drag
        webkitdirectory
        :multiple="row.multiple"
        v-model:file-list="fileList"
        :disabled="readonly"
        :on-change="handelChangeFun"
      >
        <el-button link type="primary">点击或拖拽文件上传 </el-button>
      </el-upload>
      <div class="select-file-list">
        <div class="select-file-item" v-for="item in row?.defaultValue" :key="item">
          <div class="file-name"> <el-icon><Document /></el-icon>  {{ getFileNameFun(item) }}</div>
          <div v-if="!readonly" class="file-operate" @click="deleteOnlineFileFun(item)">
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="upload-item" v-else>
      <el-button type="primary" :disabled="readonly" @click="selectOnlineFileFun">选择 </el-button>
      <div class="select-file-list">
        <div class="select-file-item" v-for="item in row?.defaultValue" :key="item">
          <div class="file-name"> <el-icon><Document /></el-icon>  {{ getFileNameFun(item) }}</div>
          <div v-if="!readonly" class="file-operate" @click="deleteOnlineFileFun(item)">
            <el-icon><Close /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <selectFlowNodeFile
      v-if="visible"
      :online-file-param="onlineFileParam"
      :dir-id="dirId"
      @close="visible = false"
      :files="rowInfo?.defaultValue || []"
      @update="updateOnlineFilePathFun"
    ></selectFlowNodeFile>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import selectFlowNodeFile from './selectFlowNodeFile.vue';
import { cloneDeep } from 'lodash-es';

const props = defineProps({
  dirId: {
    type: Number,
    default: 0,
  },
  row: {
    type: Object,
    default: () => {},
  },
  onlineFileParam: {
    type: Object,
    default: () => {},
  },
  readonly: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['update']);
const visible = ref(false);
const fileList = ref<any>([]);
const rowInfo = ref<any>({});
const uploalLocal = ref('local');
const uploadRef = ref();

const selectOnlineFileFun = () => {
  visible.value = true;
};

const handelChangeFun = (uploadFile: any, uploadFiles: any) => {
  rowInfo.value.fileList = uploadFiles;

  emits('update', rowInfo.value);
};

const uploalLocalChangeFun = () => {
  rowInfo.value.fileList = [];
  if (uploadRef.value) {
    uploadRef.value.clearFiles();
  }
  emits('update', rowInfo.value);
};

const updateOnlineFilePathFun = (paths: any) => {
  rowInfo.value.defaultValue = paths;
  visible.value = false;
  emits('update', rowInfo.value);
};

const getFileNameFun = (path: any) => {
  const fileName = path.split('/').at(-1) || path;
  return fileName;
};

const deleteOnlineFileFun = (data: any) => {
  rowInfo.value.defaultValue = rowInfo.value.defaultValue.filter((item: any) => {
    return item != data;
  });
  emits('update', rowInfo.value);
};

watch(
  () => props.row,
  (newVal) => {
    if (newVal) {
      rowInfo.value = cloneDeep(newVal);
      // rowInfo.value = newVal;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.upload-page {
  width: 100%;
  display: flex;
  align-items: center;

  .change-upload-type {
    height: 100%;
    margin-right: 10px;
  }

  .upload-item {
    flex: 1;
    height: 100%;

    .select-file-list {
      width: 100%;

      .select-file-item {
        width: 100%;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .file-operate {
          cursor: pointer;
          display: none;
        }
      }

      .select-file-item:hover {
        background-color: #f5f7fa;

        .file-operate {
          display: block;
        }
      }
    }
  }

  .upload-demo {
    width: 100%;

    :deep(.el-upload-dragger) {
      padding: 5px !important;
      margin-top: 10px;
    }

    .el-upload-list {
      overflow: auto;
    }
  }
}
</style>
