<template>
  <div style="padding: 30px 30px">
    <b-row>
    <div style="font-size: 25px; font-weight: bold; margin-top: 68px">
              {{ officialDoc.distinguish }}：{{ officialDoc.subject }}
            </div>
            </b-row>
            <b-row>
            <div style="font-size: 25px; font-weight: bold">
              文號：{{ officialDoc.issue_text_number }}
            </div></b-row>
    <b-row>
      <b-col cols="5">
        <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>
        <!-- 篩選 -->
        <div style="margin-top: 10px">
          <b-row>
            <b-col cols="2">
              <div style="text-align: left; margin-top: 8px; color: black; font-size: 15px">
                篩選文件：
              </div>
            </b-col>
            <b-col cols="5">
              <div style="margin-top: 6px">
                <b-form-radio-group
                  v-model="selectList"
                  :options="options"
                  class="mb-3"
                  value-field="name"
                  text-field="name"
                  disabled-field="notEnabled"
                ></b-form-radio-group>
              </div>
            </b-col>
            <b-col cols="5" style="margin-right" class="my-1;mt-1">
              <div>
                <b-form-group
                  label="關鍵字"
                  label-for="filter-input"
                  label-cols="3"
                  label-align="left"
                  label-size="1px"
                  class="mb-0"
                >
                  <b-input-group size="1px">
                    <b-form-input
                      id="filter-input"
                      v-model="filter"
                      type="search"
                      placeholder="請輸入關鍵字"
                    ></b-form-input>
                  </b-input-group>
                </b-form-group>
              </div>
            </b-col>
          </b-row>
        </div>
        <!-- 篩選 | 文件列表 -->
        <div style="margin-top: 10px; height: 300px; overflow-y: auto;overflow-x:hidden">
          <b-table
            ref="table"
            striped
            :items="list"
            :fields="label"
            bordered="bordered"
            hover
            @row-selected="onRowSelected"
            text-align="center"
            thead-class="thClass"
            class="text-center"
            small
            selectable
            :select-mode="selectMode"
            @filtered="onFiltered"
            :filter="filter"
          >
          <!-- HEAD -->
          <template #head()="{label}">
            <span style="font-weight: normal; color: white; font-size: 15px">{{
              label
            }}</span>
          </template>
          <!-- BODY -->
          <template v-slot:cell(icon)="data">
            <img
              class="ml-3 m-0"
              style="width: 30px; height: auto; display: inline-block"
              :src="data.item.icon"
            />
          </template>
          <!-- 勾選表單 -->
          <template #cell(勾選)="{ rowSelected }">
            <template v-if="rowSelected">
              <span aria-hidden="true">&check;</span>
            </template>
            <template v-else>
              <span aria-hidden="true">&nbsp;</span>
            </template>
          </template>
          <!-- 文件名稱 -->
          <template #cell(document_name)="data">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </template>
          </b-table>
        </div>
      </b-col>
      <!-- 新增紀錄 | 提送、審查、核定 -->
      <b-col cols="2" style="margin-top: 100px">
        <b-container>
          <b-row>
            <b-col cols="6"> </b-col>
            <b-col cols="4"> </b-col>

            <div
              style="padding-top: 10px; padding-bottom: 5px; margin: 0px auto"
            >
             <div @click="tabIndex++">
              <b-col>
                <b-button
                  variant="success"
                  class="btn2"
                  @click="addSubmitRecord"
               >
                  新增提送紀錄<b-icon icon="caret-right-fill"></b-icon>
                </b-button>
              </b-col>
             </div>
            </div>
            <div
              style="padding-top: 5px; padding-bottom: 5px; margin: 0px auto"
            >
             <div @click="tabIndex++">
              <b-col>
                <b-button
                  variant="success"
                  class="btn2"
                  @click="addReviewRecord"
                >
                  新增審查紀錄<b-icon icon="caret-right-fill"></b-icon>
                </b-button>
              </b-col>
             </div>
            </div>
            <div
              style="padding-top: 5px; padding-bottom: 5px; margin: 0px auto"
            >
             <div @click="tabIndex++">
              <b-col>
                <b-button
                  variant="success"
                  class="btn2"
                  @click="addApprovedRecord"
                >
                  新增核定紀錄<b-icon icon="caret-right-fill"></b-icon>
                </b-button>
              </b-col>
             </div>
            </div>
             <div
              style="padding-top: 5px; padding-bottom: 5px; margin: 0px auto"
            >
             <div @click="tabIndex++">
              <b-col>
                <b-button
                  variant="success"
                  class="btn2"
                  @click="addTransferRecord"
                >
                  新增核轉紀錄<b-icon icon="caret-right-fill"></b-icon>
                </b-button>
              </b-col>
             </div>
            </div>
             <div
              style="padding-top: 5px; padding-bottom: 5px; margin: 0px auto"
            >
             <div @click="tabIndex++">
              <b-col>
                <b-button
                  variant="success"
                  class="btn2"
                  @click="addResearchRecord"
                >
                  新增備查紀錄<b-icon icon="caret-right-fill"></b-icon>
                </b-button>
              </b-col>
             </div>
            </div>
          </b-row>
        </b-container>
      </b-col>
      <!-- 文件提審記錄列表 -->
      <b-col cols="5" style="margin-top: 25px">
        <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="12">
            <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"
                text-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>
              <!-- 編輯/刪除 -->
              <template v-slot:cell(delete)="data">
                <b-button
                  v-if="data.item.isFix === true"
                  size="sm"
                  class="align-middle"
                  @click="patchControlWork(data)"
                  style="font-size: 15px; margin-right: 10px;"
                >
                  <!-- 儲存 -->
                  <b-icon-cursor />
                </b-button>
                <b-button v-else
                  @click="editControlWork(data.index)"
                  variant="primary"
                  size="sm"
                  class="align-middle"
                  style="font-size: 15px; margin-right: 10px;"
                >
                  <!-- 編輯 -->
                  <b-icon-pencil-square />
                </b-button>
                <b-button
                  @click="deleteTableRow(data)"
                  size="sm"
                  variant="danger"
                  class="align-middle"
                  style="font-size: 15px"
                >
                  <!-- 刪除 -->
                  <b-icon icon="trash-fill"></b-icon>
                </b-button>
              </template>
              </b-table>
            </div>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 分隔線 -->
    <div>
      <hr />
    </div>
    <!-- 提審前 tab -->
    <b-row>
      <b-card style="width: 100vw">
        <b-tabs card content-class="mt-3" pills v-model="tabIndex">
          <b-tab title="提審前" active>
            <!-- <b-col cols="6"> -->
            <b-card
              v-for="(item, index) in beforeSubmit"
              :key="index"
              style="width: 85vw"
            >
              <b-row>
                <b-button
                  variant="primary"
                  v-b-toggle="`${item.document_name}`"
                  @click="item.isCollapsed = !item.isCollapsed"
                  style="float: left; margin-right: 10px"
                >
                  {{ item.document_name }}
                </b-button>
              </b-row>
              <b-collapse :id="item.document_name" class="mt-2" visible>
                <b-card>
                  <b-table
                    :items="item.controlWork"
                    class="text-center"
                    style="800px"
                    thead-class="thClass"
                    small
                    responsive="sm"
                    ref="selectableTable"
                    striped
                    bordered
                    :fields="fields"
                    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({id:item._id, fid:data.item._id})"
                        style="cursor: pointer"
                      >
                        <span
                          :title="data.value"
                          style="color: blue; user-select: none"
                        >
                          [ {{ data.value.length }} ]
                        </span>
                      </span>
                    </template>
                  </b-table>
                </b-card>
              </b-collapse>
            </b-card>
          </b-tab>
          <!-- 提審後 tab -->
          <!-- 提審後 | 文件提審紀錄列表 -->
          <b-tab title="提審後">
            <b-card
              v-for="(item, index) in afterSubmit"
              :key="index"
              style="width: 85vw"
            >
              <b-row>
                <b-button
                  class="btn3"
                  style="margin-top: 2px; margin-right: 10px; float: left"
                  @click="Edit(item)"
                >
                  <b-icon icon="pencil-square"></b-icon> 編輯
                </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" v-b-popover.hover="{content: `${data.item.officialDocId.issue_text_number}`, placement: 'left' , title: '文號'}">{{data.item.officialDocId.issue_text_number | ellipsis}}</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({id:item._id, fid:data.item._id})"
                        style="cursor: pointer"
                      >
                        <span
                          :title="data.value"
                          style="color: blue; user-select: none"
                        >
                          [ {{ data.value.length }} ]
                        </span>
                      </span>
                    </template>
                  </b-table>
                </b-card>
              </b-collapse>
            </b-card>
          </b-tab>
        </b-tabs>
      </b-card>
    </b-row>
    <modal
      :is-open="DownloadFileModalOpen"
      title="下載檔案"
      @closeEvent="DownloadFileModalOpen = false"
    >
      <downloadFile @closeEvent="DownloadFileModalOpen = false" />
    </modal>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import downloadFile from '@/views/FileManagement/ModalContent/downloadFile.vue'
import moment from 'moment'
// import { longStackSupport } from 'q'

export default {
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    downloadFile
  },
  data () {
    return {
      filter: null,
      filterOn: [],
      tabIndex: 1,
      isCollapsed: false,
      selectMode: 'single',
      text: '',
      selectList: '審查文件',
      DownloadFileModalOpen: false,
      options: [{ name: '審查文件' }, { name: '提送文件' }],
      label: [
        '勾選',
        {key: 'document_name', label: '文件名稱', tdClass: 'align-middle'}
      ],
      // 提審前列表 | header
      fields: [
        {
          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'
        }
      ],
      // 提審後列表 | 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'
        }
      ],
      // 提審前 | Table
      beforeSubmit: [],
      // 提審後 | Table
      afterSubmit: [],
      // 文件提審記錄列表 | header
      recordRecord: [
        {
          key: 'documentName',
          label: '文件名稱',
          tdClass: 'align-middle'
        },
        {
          key: 'version',
          label: '版次',
          tdClass: 'align-middle'
        },
        {
          key: 'item',
          label: '提審紀錄',
          tdClass: 'align-middle'
        },
        {
          key: 'delete',
          label: '編輯/刪除',
          sortable: false,
          tdClass: 'align-middle'
        }
      ],
      // 文件提審記錄列表 | Table
      documentRecordList: [],
      // 篩選文件列表 | Table
      documentList: [],
      aaa: []
    }
  },
  async created () {
    if (this.$route.query.odid !== undefined) {
      await this.$store.dispatch(
        'officialDocument/getOfficialDocument',
        this.$route.query.odid
      )
    }
  },
  async mounted () {
    try {
      await this.reloadPage()
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    ...mapActions('newDocument', ['lookupDoc', 'lookupControlWork', 'addDeliverWork', 'addReviewWork', 'addApproved', 'addTransfer', 'addResearch', 'getDocList', 'getFileList', 'deleDeliverWork', 'patchDeliverWork']),
    ...mapActions('officialDocument', ['patch']),
    // ...mapActions('officialDocument', ['addWorkRecords']), // 測試中
    async Edit (item) { // 提審後編輯
      await this.lookupDoc(item._id)
      if (item.document_distinguish === '審查文件') {
        this.$router.push({
          name: 'FileReviewEdit',
          query: { fid: item._id },
          params: {
            toName: 'Deliver'
          }
        })
      } else {
        this.$router.push({
          name: 'FileSubmitEdit',
          query: { fid: item._id },
          params: {
            toName: 'Deliver'
          }
        })
      }
    },
    onFiltered (filteredItems) {
      this.totalRows = filteredItems.length
      this.currentPage = 1
    },
    addSubmit () { // 新增提送文件
      this.resetDoc()
      this.$router.push({ name: 'FileSubmitCreate' })
    },
    addReview () { // 新增審查文件
      this.resetDoc()
      this.$router.push({ name: 'FileReviewCreate' })
    },
    async patchControlWork (data) { // 單筆編輯(開)
      this.documentRecordList[data.index].isFix = false
      this.$refs.selectableTable1.refresh()
      let aaa = []
      this.allList.forEach((obj) => {
        if (obj.document_name === data.item.documentName.document_name) { aaa.push(obj.id) }
      })
      for (let index = 0; index < aaa.length; index++) {
        const element = aaa[index]
        await this.patchDeliverWork({docId: element, controlWorkId: data.item.id, controlWorkData: data.item})
      }
      alert('修改成功！')
      this.reloadPage()
    },
    editControlWork (index) { // 單筆編輯(關)
      // console.log(this.deliverHasEdit)
      this.documentRecordList[index].isFix = true
      this.$refs.selectableTable1.refresh()
    },
    async DownloadFileModal ({id, fid}) {
      await this.$store.dispatch('newDocument/getFileList', {
        DocId: id,
        controlWorkId: fid
      })
      this.DownloadFileModalOpen = true
    },
    async addSubmitRecord () { // 新增提送紀錄
      for (let i = 0; i < this.beforeSubmit.length; i++) {
        const element = this.beforeSubmit[i]._id
        try {
          await this.addDeliverWork(element)
          this.$refs.table.refresh()
          alert('新增成功')
          this.reloadPage()
          this.officialDoc.newDocumentStatus = '進行中'
          await this.patch(this.officialDoc)
          this.$emit('addRecord')
        } catch (error) {
          alert('新增作業失敗!!')
          console.log(error)
        }
      }
    },
    async addReviewRecord () { // 新增審查紀錄
      for (let i = 0; i < this.beforeSubmit.length; i++) {
        const element = this.beforeSubmit[i]._id
        try {
          await this.addReviewWork(element)
          this.$refs.table.refresh()
          alert('新增成功')
          this.reloadPage()
          this.officialDoc.newDocumentStatus = '進行中'
          await this.patch(this.officialDoc)
          this.$emit('addRecord')
        } catch (error) {
          alert('新增作業失敗!!')
          console.log(error)
        }
      }
    },
    async addApprovedRecord () { // 新增核定紀錄
      for (let i = 0; i < this.beforeSubmit.length; i++) {
        const element = this.beforeSubmit[i]._id
        try {
          await this.addApproved(element)
          this.$refs.table.refresh()
          alert('新增成功')
          this.reloadPage()
          this.officialDoc.newDocumentStatus = '進行中'
          await this.patch(this.officialDoc)
          this.$emit('addRecord')
        } catch (error) {
          alert('新增作業失敗!!')
          console.log(error)
        }
      }
    },
    async addTransferRecord () { // 新增核轉紀錄
      for (let i = 0; i < this.beforeSubmit.length; i++) {
        const element = this.beforeSubmit[i]._id
        try {
          await this.addTransfer(element)
          this.$refs.table.refresh()
          alert('新增成功')
          this.reloadPage()
          this.officialDoc.newDocumentStatus = '進行中'
          await this.patch(this.officialDoc)
          this.$emit('addRecord')
        } catch (error) {
          alert('新增作業失敗!!')
          console.log(error)
        }
      }
    },
    async addResearchRecord () { // 新增備查紀錄
      for (let i = 0; i < this.beforeSubmit.length; i++) {
        const element = this.beforeSubmit[i]._id
        try {
          await this.addResearch(element)
          this.$refs.table.refresh()
          alert('新增成功')
          this.reloadPage()
          this.officialDoc.newDocumentStatus = '進行中'
          await this.patch(this.officialDoc)
          this.$emit('addRecord')
        } catch (error) {
          alert('新增作業失敗!!')
          console.log(error)
        }
      }
    },
    async deleteTableRow (data) {
      if (!confirm('確定刪除此文件嗎?')) return
      let aaa = []
      this.allList.forEach((obj) => {
        if (obj.document_name === data.item.documentName.document_name) { aaa.push(obj.id) }
      })
      for (let index = 0; index < aaa.length; index++) {
        const element = aaa[index]
        await this.deleDeliverWork({docId: element, controlWorkId: data.item.id})
      }
      await this.reloadPage()
      if (this.documentRecordList.length === 0) {
        this.$emit('addRecord')
        this.officialDoc.newDocumentStatus = '未新增'
        await this.patch(this.officialDoc)
      }
      alert('已刪除')
    },
    onRowSelected (items) { // 勾選
      this.beforeSubmit = items
    },
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async reloadPage () {
      await this.$store.dispatch('newDocument/getList')
      await this.$store.dispatch('newDocument/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)
    }
  },
  filters: {
    ellipsis (value) {
      if (value.length > 20) { return value.slice(0, 16) + '...' }
      return value
    }
  },
  computed: {
    ...mapState({ // 需整理
      officialDoc: (state) => state.officialDocument.officialDoc,
      newDoc: (state) => state.newDocument.NewDoc,
      recordId: (state) => state.officialDocument.workRecordList,
      list: (state) => state.newDocument.DocList,
      allList: (state) => state.newDocument.allList,
      controlWorkRecordList: (state) => state.newDocument.recordList,
      NewControl: (state) => state.newDocument.NewControl,
      fileList: (state) => state.newDocument.controlWorkFile
    }),
    ...mapGetters(['getEnumWord']),
    ...mapGetters('newDocument', ['deliverHasEdit'])
  },
  watch: {
    selectList: {
      handler (newVal, oldValue) {
        newVal === '審查文件' &&
          this.getDocList({ document_distinguish: newVal })
        newVal === '提送文件' &&
          this.getDocList({ document_distinguish: newVal })
      },
      immediate: true
    }
  }
}
</script>
<style>
.shadow {
  background-color: #ffff;
  height: 65px;
  width: 100%;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 40);
  /* border-bottom-width:3px;
    border-bottom-color:#1D325F;
    border-bottom-style:solid */
  position: fixed;
  top: 55px;
  z-index: 500;
}
.thClass {
  font-size: 16px;
  background-color: #1d325f;
  color: white;
}
.thClass1 {
  font-size: 16px;
  background-color: #7486ec;
  color: rgb(240, 240, 240);
}
.bordered {
  background-color: #000000;
  color: rgb(0, 0, 0);
}
</style>
<style lang="scss" scoped>
/deep/.popover{
  padding: 10px;
  max-width: 450px;
  text-align: left;
  background-color: white;
}
/deep/ .popover-header{
  font-size: 18px;
  color: black;
}
/deep/ .popover-body{
  font-size: 16px;
  color: black;
}
/deep/ .align-middle {
  max-width: 200px;
  white-space: normal !important;
}
/deep/ .truncate {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn1 {
  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;
}
.btn2 {
  background-color: #04aa6d;
  font-size: 16px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  text-align: right;
  border: none;
  .hover {
    background-color: #04aa6d;
  }
}
.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;
}
.btn4 {
  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: center;
}
</style>
