<template>
  <div>
    <div
      style="
        width: 100%;
        font-size: 17px;
        font-weight: 800;
        color: #5e72e4;
        float: left;
        padding-top: 10px;
      "
    >
      <a @click="isCollapsed = !isCollapsed" style="user-select: none">
        歷史紀錄
        <span v-if="isCollapsed">▲</span>
        <span v-else>▼</span>
      </a>
      <hr
        style="border-top: 1px solid gray; margin-top: 0; margin-bottom: 10px"
      />
    </div>
    <div style="height: 200px; width: 100%; overflow: auto">
      <b-collapse :visible="!isCollapsed" id="collapse-2">
        <ul
          class="list-group list-group-flush"
          style="list-style-type: none; font-weight: 600; font-size: 14px"
        >
          <div
            v-for="(record, index) in recordList"
            :key="index"
            style="padding-top: 5px"
          >
            <li
              class="list-group-item"
              style="
                border-radius: 8px;
                box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;
                padding: 10px;
                padding-left: 10px;
              "
            >
              <span
                v-if="record.todo.split('|')[0] == 'Email傳送成功'"
                style="font-size: 15px; padding-left: 5px; color: blue"
              >
                <button :id="`${record.todo}`" style="background-color:white;border:0;color:blue;padding:0px;cursor: default;font-weight: bold;">
                  {{ record.todo.split("|")[0] }}
                </button>
              </span>

              <span
                v-else
                variant="primary"
                style="font-size: 15px; padding-left: 5px"
                >{{ record.todo }}</span
              >
              <b-popover
                :target="`${record.todo}`"
                placement="left"
                triggers="hover"
                :content="`${record.todo}`"
              >
                <div>
                  內部人員：{{ record.todo.split("|")[1] }}<br />
                  外部人員：{{ record.todo.split("|")[2] }}
                </div>
              </b-popover>

              <b-badge
                variant="info"
                style="float: right; padding-bottom: 5px; padding-left: 5px"
                >{{
                  new Date(record.recordedTime).toLocaleString("zh-TW", {
                    dateStyle: "long",
                    timeStyle: "short",
                    hour12: false,
                  })
                }}</b-badge
              >
              <b-badge
                variant="primary"
                style="float: right; padding-bottom: 5px; padding-left: 5px"
                >{{ record.staffName }}</b-badge
              >
            </li>
          </div>
        </ul>
      </b-collapse>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isCollapsed: false,
      sendName: ['aaa']
    }
  },
  async mounted () {},
  methods: {},
  computed: {
    ...mapState({
      officialDoc: state => state.officialDocument.officialDoc,
      recordList: state => state.officialDocument.recordList
    }),
    popoverData () {
      return {
        title: '傳送人員',
        content: this.sendName
      }
    }
  },
  watch: {
    recordList: []
  }
}
</script>
<style scoped>
.btn:hover {

}
</style>
