<template>
  <el-dialog :title="titleValue" width="1200px" :model-value="props.modelValue" :before-close="closed">

    <div class="flex_box">
      <div style="width: 100%;">
        <div style="margin:11px;">培训课件</div>
        <div>
          <MOSTY.Upload width="800px" :limit="3" :nopicer="true" :isImg="false" :ShowfileList="false"
            :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" v-model="uploadList" :delrow="delrow"
            @filehandleChange="changeFile">
          </MOSTY.Upload>
        </div>
        <div class="tabBox" style="margin-top: 0px; height:249px !important;">
          <el-table ref="multipleTableRef" stripe :data="fjtableData" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="文件名" property="name"></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handlefjdelete(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>
        <div style="margin: 10px;" v-if="props.type == '2'">
          <div style="margin:11px;">培训图片</div>
          <MOSTY.Upload width="800px" :limit="3" :isImg="true" :delrow="delrows" :ShowfileList="true"
            v-model="uploadimgs" @filehandleChange="changeImg">
          </MOSTY.Upload>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="savefile"> <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="closed"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, getCurrentInstance } from "vue";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
import { createAndClickLink } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "基本信息"
  },
  type: {
    type: String,
    default: "01"
  },
  id: {
    type: String,
    default: null
  },
  pxsstype: {
    type: String,
    default: null
  },
  roleId: {
    type: String,
    default: ""
  },
  fileobj: {
    type: Object,
    default: null
  }

});
const fjtableData = ref([]);
const uploadList = ref([]); //上传文件列表
const uploadimgs = ref([]); //上传图片列表
const delrow = ref({}); //删除文件列表
const FromData = ref({})
const emits = defineEmits(["update:modelValue", "choosedfile"]);
const closed = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("choosedfile", false);
    })
    .catch(() => {
      // catch error
    })

};

onMounted(() => {
  fjtableData.value = []
  uploadList.value = props.fileobj.files ? props.fileobj.files : null;
  uploadimgs.value = props.fileobj.imgs ? props.fileobj.imgs : null;
})
//接收附件
const changeFile = (data) => {
  fjtableData.value = data;
  if (fjtableData.value) {
    FromData.value.files = fjtableData.value.map((it) => {
      if (it.response)
        return it.response.data
    }).toString()
  }

};

//删除文件
const handlefjdelete = (row) => {
  delrow.value = row;
  fjtableData.value = fjtableData.value.filter((item) => {
    return item != row
  })
};
//点击下载文件
function handledlon(val) {
  createAndClickLink(val.url, val.name)
}
//	计划内、外实施-修改附件
function savefile() {
  let data = {}
  data.files = uploadList.value.toString();
  data.imgs = uploadimgs.value.toString();
  data.id = props.id;
  postApi(data, '/mosty-jcgl/training/pxssUpdateFile').then((res) => {
    ElMessage.success('附件修改成功');
    emits("choosedfile", false);
  })
}


</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

.flex_box {
  display: flex;
  justify-content: space-between;
}

.barbox {
  width: 48%;
  height: 397px;
  padding: 10px 20px;
  position: relative;
}

.zwsj {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 18px;
}

.barboxs {
  width: 100%;
  height: 397px;
  padding: 10px 20px;
  position: relative;
}

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-table__empty-block {
  min-height: 220px !important;
}

::v-deep .el-radio__label {
  display: none;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none;
}
</style>
