<template>
  <div style="margin-left: -30px">
    <b-container fluid>
      <div>
        <b-row>
          <b-col cols="12">
            <div style="font-size: 25px; font-weight: bold; margin-top: 68px">
              {{ officialDoc.distinguish }}：{{ officialDoc.subject }}
            </div>
            <div style="font-size: 25px; font-weight: bold">
              文號：{{ officialDoc.issue_text_number }}
            </div>
          </b-col>
        </b-row>
        <b-row>
          <b-col cols="10">
            <div
              style="
                text-align: left;
                margin-top: 8px;
                color: black;
                font-size: 15px;
              "
            >
              <!-- 文件提審紀錄列表 -->
            </div>
          </b-col>
          <b-col cols="8">
            <div style="margin-top: 10px; height: 350px; overflow: auto">
              <b-table
                striped
                hover
                :items="documentRecordList"
                :fields="recordRecord"
                border-variant="secondary"
                header="Secondary"
                header-border-variant="secondary"
                align="center"
                class="text-center"
                thead-class="thClass1"
                small
                fixed
                bordered="bordered"
                borderless="borderless"
                ref="selectableTable1"
              >
                <!-- HEAD -->
                <template #head()="{ label }">
                  <span
                    style="font-weight: normal; color: white; font-size: 15px"
                  >
                    {{ label }}
                  </span>
                </template>
                <!-- BODY -->
                <!-- 文件名稱 -->
                <template #cell(documentName)="data">
                  <span
                    :title="data.value"
                    style="font-weight: normal; color: black; font-size: 15px"
                  >
                    {{ data.item.documentName.document_name }}
                  </span>
                </template>
                <!-- 版次 -->
                <template #cell(version)="data">
                  <span
                    :title="data.value"
                    style="font-weight: normal; color: black; font-size: 15px"
                  >
                    <b-form-input
                      v-model="data.item.version"
                      v-if="data.item.isFix"
                      type="text"
                      class="form-control"
                      style="
                        width: 50%;
                        margin: auto;
                        font-size: 4px;
                        text-align: center;
                      "
                    /><span v-else>{{ data.item.version }}</span>
                    <!-- A改回{{ data.value }}t -->
                  </span>
                </template>
                <!-- 提審紀錄 -->
                <template #cell(item)="data">
                  <span
                    :title="data.value"
                    style="font-weight: normal; color: black; font-size: 15px"
                  >
                    {{ data.value }}
                  </span>
                </template>
              </b-table>
            </div>
          </b-col>
        </b-row>
      </div>
      <!-- 分隔線 -->
      <div><hr /></div>
      <!-- 提審後 -->
      <div>
        <span class="text-left" style="font-size: 25px; font-weight: bold">提審後</span>
        <b-card
          v-for="(item, index) in afterSubmit"
          :key="index"
          style="font-size: 20px; width: 80vw; padding-left: 20px; padding-right: 20px"
          pills
        >
          <b-row>
            <b-button
              class="btn3"
              style="margin-top: 2px; margin-right: 10px; float: left"
              @click.prevent="pushTo(item)"
            >
            <a
            :href="
            (item.document_distinguish == '審查文件' &&
          '/?#/workCollaboration/fileManagement/Review/Edit' +
          '?fid=' + item._id) ||
          (item.document_distinguish == '提送文件' &&
          '/?#/workCollaboration/fileManagement/Submit/Edit' +
          '?fid=' + item._id)"
            >
            <span style="color: white">
              <b-icon icon="cursor"></b-icon> 檢視
            </span>
            </a>
            </b-button>
            <b-button
              variant="primary"
              v-b-toggle="`${item.document_name}`"
              @click="item.isCollapsed = !item.isCollapsed"
              style="float: left"
            >
              {{ item.document_name }}
            </b-button>
          </b-row>
          <b-collapse :id="item.document_name" class="mt-2">
            <b-card>
              <b-table
                :items="item.controlWork"
                class="text-center"
                thead-class="thClass"
                small
                responsive="sm"
                ref="selectableTable2"
                striped
                bordered
                :fields="fields1"
                fixed
              >
                <!-- 作業項目 -->
                <template #cell(item)="data">
                  <span
                    :title="data.value"
                    v-if="data.item.item == '文件提送作業'"
                    style="font-weight: bold; color: #04aa6d; font-size: 15px"
                    >{{ data.value }}</span
                  >
                  <span
                    :title="data.value"
                    v-else-if="data.item.item == '文件核定作業'"
                    style="font-weight: bold; color: blue; font-size: 15px"
                    >{{ data.value }}</span
                  >
                  <span
                    :title="data.value"
                    v-else
                    style="font-weight: bold; color: red; font-size: 15px"
                    >{{ data.value }}</span
                  >
                </template>
                <!-- 辦理單位及人員 -->
                <template #cell(responsibilities)="data">
                  <span :title="data.value">
                    單位:{{ data.item.unit }}<br />
                    人員:{{ data.item.manager }}
                  </span>
                </template>
                <!-- 辦理日期 -->
                <template #cell(processing_date)="data">
                  <span :title="data.value">
                    預定:{{ getFormattedDate(data.item.scheduledDate) }}<br />
                    實際:{{ getFormattedDate(data.item.actualDate) }}
                  </span>
                </template>
                <!-- 辦理狀態 -->
                <template #cell(status)="data">
                  <div
                    v-if="
                      data.item.item == '文件審查作業' &&
                      data.item.officialDocId != null &&
                      data.item.reviewOpinion != ''
                    "
                    style="font-weight: bold; color: gray; font-size: 15px"
                  >
                    已完成
                  </div>
                  <div
                    v-else-if="
                      data.item.item == '文件提送作業' &&
                      data.item.officialDocId != null
                    "
                    style="font-weight: bold; color: gray; font-size: 15px"
                  >
                    已完成
                  </div>
                  <div
                    v-else
                    style="font-weight: bold; color: red; font-size: 15px"
                  >
                    待編輯
                  </div>
                </template>
                <!-- 版次/文號/備註 -->
                <template #cell(many)="data">
                  <span :title="data.value">
                    版次:{{ data.item.version }}
                    <br />
                    文號:<span v-if="data.item.officialDocId">{{
                      data.item.officialDocId.issue_text_number
                    }}</span
                    ><span v-else></span>
                    <br />
                    日期:<span v-if="data.item.officialDocId">{{
                      data.item.officialDocId.issue_date
                    }}</span
                    ><span v-else></span>
                    <br />
                    <span v-if="data.item.item == '文件審查作業'"
                      >審查結果:{{ data.item.reviewOpinion }}<br
                    /></span>
                    備註:{{ data.item.note }}
                  </span>
                </template>
                <!-- 相關檔案 -->
                <template #cell(fileTokens)="data">
                  <span
                    size="sm"
                    @click="DownloadFileModal(data.item)"
                  >
                    <span
                    :title="data.value"
                    style="color: blue; user-select: none"
                    >
                    [{{ data.value.length }}]
                    </span>
                  </span>
                </template>
              </b-table>
            </b-card>
          </b-collapse>
        </b-card>
      </div>
      <modal
      :is-open="DownloadFileModalOpen"
      title="下載檔案"
      @closeEvent="DownloadFileModalOpen = false"
    >
      <downloadFile @closeEvent="DownloadFileModalOpen = false" />
    </modal>
    </b-container>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import downloadFile from '@/views/FileManagement/ModalContent/downloadFile.vue'
import moment from 'moment'

export default {
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    downloadFile
  },
  data () {
    return {
      DownloadFileModalOpen: false,
      // 文件提審記錄列表 | header
      recordRecord: [
        {
          key: 'documentName',
          label: '文件名稱',
          tdClass: 'align-middle'
        },
        {
          key: 'version',
          label: '版次',
          tdClass: 'align-middle'
        },
        {
          key: 'item',
          label: '提審紀錄',
          tdClass: 'align-middle'
        }
      ],
      // 文件提審記錄列表 | Table
      documentRecordList: [],
      // 提審後 | Table
      afterSubmit: [],
      // 提審後列表 | header
      fields1: [
        {
          key: 'item',
          label: '作業項目',
          tdClass: 'align-middle'
        },
        {
          key: 'responsibilities',
          label: '辦理單位及人員',
          tdClass: 'align-middle'
        },
        {
          key: 'processing_date',
          label: '辦理日期',
          tdClass: 'align-middle'
        },
        {
          key: 'status',
          label: '辦理狀態',
          tdClass: 'align-middle'
        },
        {
          key: 'many',
          label: '版次/文號/備註',
          tdClass: 'text-left'
        },
        {
          key: 'fileTokens',
          label: '相關檔案',
          tdClass: 'align-middle'
        }
      ]
    }
  },
  async created () {
    if (this.$route.query.odid !== undefined) {
      await this.$store.dispatch(
        'officialDocument/getOfficialDocument',
        this.$route.query.odid
      )
    }
  },
  async mounted () {
    try {
      await this.reload()
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    ...mapActions('newDocument', ['lookupDoc', 'getList', 'getRecordList']),
    async reload () {
      await this.getList()
      await this.getRecordList()
      const list = []
      this.controlWorkRecordList.forEach((item, i) => {
        list[i] = {
          ...item.controlWork
        }
      })
      const reloadList = []
      for (let i = 0; i < list.length; i++) {
        const a = list[i]
        for (let i = 0; i < Object.values(a).length; i++) {
          const b = Object.values(a)[i]
          if (b.officialDocId !== null) { reloadList.push(b) }
        }
      }
      this.documentRecordList = []
      reloadList.forEach((obj) => {
        if (obj.officialDocId.id === this.officialDoc.id) { this.documentRecordList.push(obj) }
      })
      const afterList = this.documentRecordList
      const allList = this.allList
      const getDifference = (array1, array2) => {
        return array1.filter(object1 => {
          return array2.some(object2 => {
            return object1.document_name === object2.documentName.document_name
          })
        })
      }
      this.afterSubmit = getDifference(allList, afterList)
      console.log(this.afterSubmit)
    },
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async DownloadFileModal (data) {
      this.DownloadFileModalOpen = true
    },
    async pushTo (item) { // 提審後編輯
      let routeData
      await this.lookupDoc(item._id)
      switch (item.document_distinguish) {
        case '審查文件':
          routeData = this.$router.resolve({
            name: 'FileReviewEdit',
            query: { fid: item.id }
          })
          window.open(routeData.href)
          break
        case '提送文件':
          routeData = this.$router.resolve({
            name: 'FileSubmitEdit',
            query: { fid: item.id }
          })
          window.open(routeData.href)
          break
      }
      console.log(item)
    }
  },
  computed: {
    ...mapState({
      officialDoc: (state) => state.officialDocument.officialDoc,
      allList: (state) => state.newDocument.allList,
      controlWorkRecordList: (state) => state.newDocument.recordList
    })
  }
}
</script>

<style>
.thClass {
  font-size: 16px;
  background-color: #1d325f;
  color: white;
}
.thClass1 {
  font-size: 16px;
  background-color: #7486ec;
  color: rgb(240, 240, 240);
}
</style>
<style scoped>
.btn3 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  float: center;
  text-align: justify;
}
</style>
