<template>
  <div class="needSignSys-wrapper">
    <el-row>
      <el-col :span="12">
        <!-- 待签署的系统文件 -->
        <h3>
          {{
            !isSigned
              ? $t('trials:workbench:title:sysDocBeSigned')
              : $t('trials:workbench:title:sysDocSigned')
          }}
        </h3>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <h3>
          <Pagination
            class="page"
            :total="total"
            :page.sync="listQuery.pageIndex"
            :limit.sync="listQuery.pageSize"
            layout="total, sizes, prev, pager, next"
            :background="false"
            style="display: inline-block"
            @pagination="getList"
          />
          <el-button
            icon="el-icon-refresh-left"
            size="small"
            circle
            :title="$t('common:button:reset')"
            @click="handleReset"
          />
        </h3>
      </el-col>
    </el-row>
    <!--  -->
    <el-table
      ref="needSignSysList"
      v-loading="listLoading"
      :data="list"
      :show-header="true"
      v-adaptive="{ bottomOffset: 45 }"
      height="100"
      @sort-change="handleSortByColumn"
      :default-sort="{ prop: 'UpdateTime', order: 'descending' }"
    >
      <el-table-column type="index" width="40" />
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:fileType')"
        prop="FileType"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:fileName')"
        prop="Name"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column
        :label="$t('trials:sysDocBeSigned:table:uploadTime')"
        prop="UpdateTime"
        show-overflow-tooltip
        sortable="custom"
      />
      <el-table-column :label="$t('common:action:action')" width="140">
        <template slot-scope="scope">
          <!-- 预览 -->
          <el-button
            icon="el-icon-view"
            circle
            v-if="isSigned"
            :title="$t('trials:self-attachment:action:preview')"
            @click="handlePreview(scope.row)"
          />
          <el-button
            icon="el-icon-edit-outline"
            circle
            v-if="!isSigned"
            :disabled="IsFirstSysDocNeedSign && !!~scope.row.DocTypeCode"
            :title="$t('trials:needSignSysDoc:action:sign')"
            @click="handleSign(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 预览/签署文件 -->
    <el-dialog
      v-if="previewVisible"
      :visible.sync="previewVisible"
      :title="title"
      :fullscreen="true"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <span
        v-if="!currentIsConfirm"
        style="position: fixed; right: 75px; top: 14px"
      >
        <span style="color: red; margin-right: 10px">
          <!-- 请仔细阅读文件，并签名确认 -->
          {{ $t('common:message:signTip') }}
          <span v-show="duration < currentMinMinutes * 60">{{
            `(${currentMinMinutes * 60 - duration}s)`
          }}</span>
        </span>

        <el-button
          size="small"
          type="primary"
          :disabled="timer !== null || duration === 0"
          :loading="btnLoading"
          @click="handleConfirm"
        >
          {{ $t('common:button:sign') }}
        </el-button>
      </span>

      <div
        class="base-modal-body"
        style="border: 2px solid #ccc; padding: 10px"
      >
        <PreviewFile
          v-if="previewVisible"
          :file-path="currentPath"
          :file-type="currentType"
          @getList="getList"
        />
      </div>
    </el-dialog>

    <!-- 签名弹框 -->
    <el-dialog
      v-if="signVisible"
      :visible.sync="signVisible"
      :close-on-click-modal="false"
      width="600px"
      append-to-body
    >
      <div slot="title">
        <span style="font-size: 18px">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size: 12px; margin-left: 5px">{{
          `(${$t('common:label:sign')}${currentUser})`
        }}</span>
      </div>
      <SignForm
        :is-system-doc="currentRow.IsSystemDoc"
        :document-id="currentRow.Id"
        :file-name="fileName"
        @closeDialog="closeSignDialog"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  getWaitSignSysDocList,
  getNextUnSignDocument,
  setSystemDocFirstViewTime,
} from '@/api/trials'
import Pagination from '@/components/Pagination'
import PreviewFile from '@/components/PreviewFile/index'
import SignForm from '@/views/trials/trials-panel/attachments/self-attachment/components/SignForm'
import { mapGetters } from 'vuex'
const searchDataDefault = () => {
  return {
    pageIndex: 1,
    pageSize: 20,
    asc: false,
    sortField: 'UpdateTime',
  }
}
export default {
  name: 'NeedSignSysDoc',
  components: { Pagination, PreviewFile, SignForm },
  props: {
    isSigned: {
      type: Boolean,
      default() {
        return false
      },
    },
  },
  data() {
    return {
      listQuery: searchDataDefault(),
      listLoading: false,
      list: [],
      total: 0,
      previewVisible: false,
      signVisible: false,
      currentMinMinutes: 0,
      duration: 0,
      timer: null,
      btnLoading: false,
      fileName: '',
      currentPath: '',
      currentType: '',
      currentIsConfirm: false,
      currentUser: zzSessionStorage.getItem('userName'),
      currentRow: {},
    }
  },
  mounted() {
    this.getList()
  },
  destroyed() {
    if (this.timer) {
      this.stopTimer()
    }
  },
  computed: {
    ...mapGetters(['IsFirstSysDocNeedSign']),
  },
  methods: {
    // 预览
    handlePreview(row) {
      this.currentRow = { ...row }
      const { Name, FullFilePath, SignViewMinimumMinutes } = row
      this.currentPath = FullFilePath
      this.currentType = row.Name
        ? Name.substring(Name.lastIndexOf('.') + 1).toLocaleLowerCase()
        : ''
      this.currentMinMinutes = SignViewMinimumMinutes
      this.currentIsConfirm = true
      this.title = Name
      this.previewVisible = true
    },
    getList() {
      this.listQuery.IsSigned = this.isSigned
      getWaitSignSysDocList(this.listQuery)
        .then((res) => {
          this.listLoading = false
          this.total = res.Result.TotalCount
          this.list = res.Result.CurrentPageData
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleSign(row) {
      this.currentRow = { ...row }
      const { Name, FullFilePath, SignViewMinimumMinutes } = row
      this.currentPath = FullFilePath
      this.currentType = row.Name
        ? Name.substring(Name.lastIndexOf('.') + 1).toLocaleLowerCase()
        : ''
      this.currentMinMinutes = SignViewMinimumMinutes
      this.currentIsConfirm = false
      this.title = Name
      this.fileName = Name.slice(0, Name.lastIndexOf('.'))
      this.listLoading = true
      setSystemDocFirstViewTime(row.Id)
        .then((res) => {
          this.listLoading = false
          this.previewVisible = true
          const _this = this
          setTimeout(() => {
            _this.initTimer()
          }, 1000)
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    // 排序
    handleSortByColumn(column) {
      if (column.order === 'ascending') {
        this.listQuery.asc = true
      } else {
        this.listQuery.asc = false
      }
      this.listQuery.sortField = column.prop
      this.getList()
    },
    handleReset() {
      this.listQuery = searchDataDefault()
      this.getList()
      this.$nextTick(() => {
        this.$refs.needSignSysList.clearSort()
      })
    },
    // 签名
    handleConfirm() {
      this.signVisible = true
    },
    // 关闭签名弹窗
    closeSignDialog(isSave) {
      this.signVisible = false
      if (isSave) {
        this.currentIsConfirm = true
        // this.getList()
        // this.$emit('refreshStats')
        this.$confirm(this.$t('trials:self-attachment:message:nextDocument'))
          .then((res) => {
            getNextUnSignDocument({}).then((res) => {
              if (!res.Result) {
                // 文档签署已完成，是否关闭弹窗？
                this.$confirm(
                  this.$t('trials:self-attachment:message:closeDocument')
                )
                  .then(() => {
                    this.previewVisible = false
                  })
                  .catch(() => {})
              } else {
                this.handleSign(res.Result)
              }
              this.getList()
              this.$emit('refreshStats')
            })
          })
          .catch(() => {
            this.currentIsConfirm = true
            this.getList()
          })
      }
    },
    // 初始化计时器,清除上一次的数据
    initTimer() {
      if (this.currentMinMinutes > 0 && !this.currentIsConfirm) {
        this.duration = 0
        if (this.timer) {
          this.stopTimer()
        }
        this.startTimer()
      }
    },
    // 开启计时器
    startTimer() {
      this.timer = setInterval(() => {
        this.duration++
        if (this.duration >= this.currentMinMinutes * 60) {
          this.stopTimer()
        }
      }, 1000)
    },
    // 清楚计时器
    stopTimer() {
      clearInterval(this.timer)
      this.timer = null
    },
  },
}
</script>

<style lang="scss" scoped>
.needSignSys-wrapper {
  height: 100%;
}
</style>
