<template>
  <div>
    <div
      style="
        font-size: 17px;
        font-weight: 800;
        color: #5e72e4;
        margin-bottom: 0px;
      "
    >
      <div style="float: left; padding-top: 10px">
        <a @click="isCollapsed = !isCollapsed" style="user-select: none">
          相關檔案文件
          <span v-if="isCollapsed">▲</span>
          <span v-else>▼</span>
        </a>
      </div>
      <div style="float: right">
        <b-button
          @click="checkSave"
          variant="primary"
          class="m-1 p-1 float-right"
        >
          上傳附件
        </b-button>
        <input
          ref="inputFile"
          type="file"
          class="d-none"
        />
      </div>
    </div>

    <div style="height: 110px; width: 100%; overflow: auto; margin-top: 15px">
      <hr style="border-top: 1px solid gray; margin-top: 0; margin-bottom: 0" />
      <b-collapse
        style="padding-top: 10px"
        :visible="!isCollapsed"
        id="collapse-2"
      >
        <ul
          class="pl-2"
          style="list-style-type: none; font-weight: 600; font-size: 14px"
        >
          <div v-for="(file, index) in fileList" :key="index">
            <b-button
              size="sm"
              variant="danger"
              class="float-right"
            >
              <b-icon icon="trash-fill"></b-icon>
            </b-button>
            <b-row style="margin-right: 15px">
              <b-col cols="8">
                <a
                  class="mb-2"
                  style="
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-right: 10px;
                  "
                  :href="file.src"
                  target="_blank"
                >
                  • {{ file.name }}
                </a>
              </b-col>
              <b-col cols="3">
                <b-badge variant="info" style="padding-bottom: 5px">{{
                  new Date(file.uploadTime).toLocaleString("zh-TW", {
                    dateStyle: "long",
                    timeStyle: "short",
                    hour12: false,
                  })
                }}</b-badge>
              </b-col>
            </b-row>
          </div>
        </ul>
      </b-collapse>
    </div>
  </div>
</template>

<script>

export default {
  //   name: 'task-related-document',
  data () {
    return {
      fileList: [
        {name: 'gg', uploadTime: '2023//02/29'}
      ],
      isCollapsed: false
    }
  },
  methods: {
    async checkSave () {
      this.$refs.inputFile.click()
    }
  },
  computed: {

  },
  components: {

  }
}
</script>
