<template>
  <tr>
    <td>
      <div class="gd-12 pl0 pr0">
        <label
          :class="{
            mb10: true,
            'point-font2': pageRole == 'adm',
            'point-font': pageRole == 'government',
          }"
        >
          재무제표 첨부파일
        </label>
        <div class="flex">
          <div class="gd-10 pl0">
            <div class="filebox">
              <input
                class="upload-name full-input"
                v-model="fileList"
                placeholder="첨부파일이 없습니다."
                disabled
              />
            </div>
            <div>
              <div
                v-for="(file, index) of data"
                :key="index"
                class="file-wrap flex justify-between align-center border pd10 mt10"
              >
                <p v-if="file['fileId'] != null">
                  {{ file.fileNm }}.{{ file.extnNm }}
                </p>
                <p v-else>{{ file.name }}</p>
                <button class="icon-btn pd0" @click="fnFileDelete(file, index)">
                  <svg-icon type="mdi" :width="15" :height="15" :path="path" />
                </button>
              </div>
            </div>
          </div>
          <div class="gd-2 pr0">
            <label
              for="file"
              :class="{
                'large-btn text-ct cursor': true,
                'blue-border-btn': pageRole == 'adm',
                'green-border-btn': pageRole == 'government',
              }"
            >
              파일찾기
            </label>
            <input
              type="file"
              id="file"
              ref="file"
              @change="fnFileInsert"
              multiple
              style="display: none"
            />
          </div>
        </div>
      </div>
    </td>
  </tr>
</template>

<script>
import { mdiClose } from "@mdi/js";

export default {
  props: {
    data: {
      type: Array,
    },
    pageRole: {
      type: String,
      default: "government",
    },
  },
  data() {
    return {
      path: mdiClose,
      fileList: null,
    };
  },
  methods: {
    // 파일 목록
    fnFileList() {
      let list = "";
      this.data.map((file, index) => {
        if (index != 0) {
          list += ", ";
        }
        if (file.fileId != null) {
          list += file.fileNm + "." + file.extnNm;
        } else {
          list += file.name;
        }
      });
      this.fileList = list;
    },

    // 등록
    fnFileInsert() {
      const files = this.$refs.file.files;
      // 파일 용량 제한
      for (let file of files) {
        let fileSize = file.size / 100000;
        if (fileSize > 200) {
          alert("파일은 개당 최대 200MB까지 등록할 수 있습니다.");
          return;
        }
      }
      for (let file of files) {
        this.data.push(file);
      }
      this.$emit("fnFileModify", "cre", files);
      this.$refs.file.value = "";
    },

    // 삭제
    fnFileDelete(file, index) {
      if (file.fileId != null) {
        this.$emit("fnFileModify", "del", file);
      }
      this.data.splice(index, 1);
    },
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.fnFileList();
      },
    },
  },
};
</script>