<template>
  <div>
    <el-dialog :model-value="props.modelValue" title="附件详情" :before-close="handleClose" width="50%">
      <div>
        <el-form :disabled="!props.showBtn">
          <div style="margin: 10px">
            <!-- <div class="title" style="font-size: 18px">新增</div> -->
            <MOSTY.Upload width="800px" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true" v-model="fileId"
              :delrow="delrow" @filehandleChange="changeFile" :keys="key"></MOSTY.Upload>
          </div>
        </el-form>
        <!-- <el-table ref="multipleTableRef" stripe :data="fjtableData" style="width: 100%"
          @selection-change="handleSelectionChange" border>
          <el-table-column label="附件名称" prop="name"> </el-table-column>
          <el-table-column label="操作" >
            <template #default="{ row }">
                <el-popconfirm v-if="props.showBtn" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                  title="确定要删除?" @confirm="realFileslistdelete(row)">
                  <template #reference>
                  <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
</el-popconfirm>
<span class="operedown" @click="handledlon(row)">
  <el-icon>
    <Bottom />
  </el-icon>下载</span>

</template>
</el-table-column>

</el-table> -->
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="savefile" v-if="props.showBtn"> 保存 </el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  defineProps,
  reactive,
  watch,
  onMounted,
  ref,
  defineEmits,
  getCurrentInstance
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { createAndClickLink } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const fjtableData = ref([]);
const delrow = ref(null);
const key = ref(1)
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  showBtn: {
    type: Boolean,
    default: true
  },
  key: Number,
  fileId: {
    type: Array,
    default: []
  }
});
const fileId = ref(null);

const emits = defineEmits(["closedialog", "savefile"]);

watch(
  () => props.modelValue,
  (val) => {
    key.value++
    if (props.fileId && props.fileId.length > 0) {
      fileId.value = props.fileId
    } else {
      fjtableData.value = [];
      fileId.value = null;
    }
  }, {
  deep: true
}
)
watch(
  () => props.key,
  (val) => {

  }, {
  deep: true
}
)
onMounted(() => {
  // 
});
// 新的文件上传返回
const changeFile = (data) => {
  fjtableData.value = data;
  key.value++

};
//点击下载文件
function handledlon(val) {
  createAndClickLink(val.url, val.name)
}
//删除文件
const realFileslistdelete = (row) => {
  delrow.value = row;
  fjtableData.value = fjtableData.value.filter((item) => {
    return item != row;
  });
};
const savefile = () => {
  emits("savefile", fileId.value);
  emits("closedialog", false);
};
const closeDialog = () => {
  emits("closedialog", false);
};

const handleClose = () => {
  if (props.showBtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        emits("closedialog", false);
      })
      .catch(() => {
        // catch error
      })
  } else {
    emits("closedialog", false);
  }

};

</script>

<style lang="scss" scoped>
.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.searchBox {
  width: 1333px;
  margin: 20px auto;
}

.ld_box {
  display: flex;
  margin-right: 20px;
}



.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  padding: 0 14px;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>
