/* * @Author: JACK_LIU * @Date: 2020-07-17 09:28:08 * @Last Modified by:
JACK_LIU * @Last Modified time: 2020-08-10 20:43:34 */

<!-- TJ-product-体系运行-预警 -->
<template>
  <TableView class="product waring"
             @body-height-change="bodyHeightChange">
    <template slot="header">
      <BaseHeaderLayout>
        <template slot="right">
          <!-- <ws-button type="text"
                     @click="dialogDeptBudgetFilter = true">
            <i class="iconfont iconfilter" />
            <span>{{ $t('common.filter') }}</span>
          </ws-button>
          <span class="filter-total">{{ $t('common.total') }}{{ deptBudgetTotal
            }}{{ $t('common.result') }}</span> -->
          <BaseHeaderFilter :total="deptBudgetTotal"
                            @click="dialogDeptBudgetFilter = true" />
          <BaseInputSearch v-model="requestData.searchKeyword"
                           :placeholder="$t('system.systemFiles.inputMessage02')"
                           @search="deptBudgetSearch" />
        </template>
      </BaseHeaderLayout>
    </template>
    <template slot="body">
      <div class="nav-search">
        <ws-dialog :modal="false"
                   :title="$t('common.filter')"
                   :visible.sync="dialogDeptBudgetFilter"
                   class="dialog"
                   width="328px">
          <span>
            <!-- 船舶 -->
            <div class="select"
                 v-if="vesselBankFlag == 'B'">
              <div class="selectTitle">
                <span>{{ $t('system.systemFiles.ship') }}</span>
              </div>
              <!-- <ws-select filterable
                           v-model="requestData.vesselId"
                           :placeholder="$t('common.selected')">
                  <ws-option v-for="item in shipList"
                             :key="item.vesselId"
                             :label="item.vesselName"
                             :value="item.vesselId" />
                </ws-select> -->
              <BaseShipSelect v-model="requestData.vesselId"
                              filterable
                              clearable
                              :placeholder="$t('common.selected')"
                              :showAll="false"
                              clearable
                              style="width:100%;"></BaseShipSelect>
            </div>
            <!-- 部门 -->
            <div class="select"
                 v-if="vesselBankFlag == 'B'">
              <div class="selectTitle">
                <span>{{ $t('system.systemFiles.dept') }}</span>
              </div>
              <ws-select v-model="requestData.deptId"
                         :placeholder="$t('common.selected')">
                <ws-option v-for="item in dutyList"
                           :key="item.deptId"
                           :label="item.deptName"
                           :value="item.deptId" />
              </ws-select>
            </div>
            <div class="select">
              <div class="selectTitle">
                <span>{{ $t('system.systemFiles.fillDate') }}</span>
              </div>
              <ws-date-picker v-model="deptBudgetDate"
                              @change="getDeptBudgetDate"
                              value-format="yyyy-MM-dd"
                              :placeholder="$t('common.selected')"
                              type="daterange" />
            </div>
          </span>
          <span slot="footer"
                class="dialog-footer">
            <div class="elButton">
              <ws-button @click="resetSearch">{{
                  $t('common.reset')
                }}</ws-button>
              <ws-button type="primary"
                         @click="deptBudgetSearch">{{
                  $t('common.filter')
                }}</ws-button>
            </div>
          </span>
        </ws-dialog>
      </div>
      <!-- 一览页面 -->
      <ws-normal-table stripe
                       @sort-change="sortChange"
                       :data="warnInfo"
                       :height="tableViewBodyHeight">
        <!-- 序号 -->
        <ws-table-column align="center"
                         prop="crtNo"
                         :label="$t('common.num')"
                         width="50">
          <template slot-scope="scope">{{
            (requestData.currentPage - 1) * requestData.pageSize +
              scope.$index +
              1
          }}</template>
        </ws-table-column>
        <!-- 船舶/部门 -->
        <ws-table-column align="center"
                         sortable
                         min-width="100"
                         :label="$t('system.systemFiles.shipDepartment')">
          <template slot-scope="scope">
            <span :title="scope.row.vesselDepartmentName">{{
              $ph(scope.row.vesselDepartmentName)
            }}</span>
          </template>
        </ws-table-column>
        <!-- 文件名 -->
        <ws-table-column align="left"
                         sortable
                         min-width="180"
                         :label="$t('system.systemFiles.fileName')">
          <template slot-scope="scope">
            <span>
              <i class="iconfont iconpdfy"
                 v-if="scope.row.fileType === 'pdf'"
                 style="font-size: 20px;color: #FF4867" />
              <i class="iconfont iconword"
                 v-if="
                  scope.row.fileType === 'doc' || scope.row.fileType === 'docx'
                "
                 style="font-size: 20px;color: #4A8DFF" />
              <i class="iconfont iconexcely"
                 v-if="
                  scope.row.fileType === 'xls' || scope.row.fileType === 'xlsx'
                "
                 style="font-size: 20px;color: #00C090" />
            </span>
            <a :href="url + scope.row.filePathId"
               class="clickabled"
               target="_blank">{{ scope.row.fileName }}</a>
          </template>
        </ws-table-column>
        <!-- 报告周期 -->
        <ws-table-column :label="$t('system.systemFiles.reportCycle')"
                         min-width="90"
                         align="center"
                         sortable>
          <template slot-scope="scope">
            <span :title="scope.row.cycleNumName">{{
              $ph(scope.row.cycleNumName)
            }}</span>
          </template>
        </ws-table-column>
        <!-- 上次填报时间 -->
        <ws-table-column :label="$t('system.systemFiles.lastFilledTime')"
                         min-width="90"
                         align="center"
                         sortable>
          <template slot-scope="scope">
            <span :title="scope.row.lastReportDate">{{
              $ph(scope.row.lastReportDate)
            }}</span>
          </template>
        </ws-table-column>
        <!-- 填报人 -->
        <ws-table-column :label="$t('system.systemFiles.informant')"
                         min-width="90"
                         align="center"
                         sortable>
          <template slot-scope="scope">
            <span :title="scope.row.creater">{{
              $ph(scope.row.creater)
            }}</span>
          </template>
        </ws-table-column>
        <!-- 催办操作 -->
        <ws-table-column :label="$t('common.operate')"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="handleUrging(scope.row)">{{
              $t('system.systemFiles.urging')
            }}</el-button>
          </template>
        </ws-table-column>
      </ws-normal-table>
    </template>
    <template slot="footer">
      <pagination v-show="deptBudgetTotal > 0"
                  :total="deptBudgetTotal"
                  :page.sync="requestData.currentPage"
                  :limit.sync="requestData.pageSize"
                  @pagination="getWarnInfo" />
    </template>
  </TableView>
</template>
<script>
import Pagination from '@/components/Pagination'
import { EventBus } from 'base-core-lib'
import {
  getWarnList,
  getDeptListByCompId,
  getUrging
} from '@/model/system'
import TableView from '@/layout/TableView'
import TableViewMix from '@/layout/mixin/TableViewMix'
export default {
  name: 'documentWarning',
  mixins: [TableViewMix],
  components: {
    Pagination,
    TableView
  },
  data () {
    return {
      url: process.env.VUE_APP_BASE_API + '/office/file?fileId=',
      shipList: [],
      dutyList: [],
      deptBudgetDate: [], // 过滤时间数组
      warnInfo: [],
      requestData: {
        currentPage: 1,
        pageSize: 10,
        orderColunm: '',
        order: '',
        searchKeyword: '',
        deptId: '',
        vesselId: '',
        createStartDate: '',
        createEndDate: ''
      },
      compId: sessionStorage.getItem('ws-pf_compId'),
      vesselBankFlag: sessionStorage.getItem('ws-pf_vesselBankFlag'),
      deptBudgetTotal: 0,
      dialogDeptBudgetFilter: false
    }
  },
  created () {
    this.basicInformation()
    this.getWarnInfo()
  },

  methods: {
    basicInformation () {
      this.shipList = JSON.parse(sessionStorage.getItem('ws-pf_vessels'))
      getDeptListByCompId(this.requestData.compId).toPromise().then(data => {
        this.dutyList = data
      })
    },
    // 一览页面信息
    getWarnInfo () {
      getWarnList(this.requestData).toPromise().then(data => {
        this.warnInfo = data.records
        this.deptBudgetTotal = data.total
        this.$store.commit('app/SET_WARN_NUM', data.total)
      })
    },
    // 日期筛选
    getDeptBudgetDate (val) {
      if (val != null && val.length === 2) {
        this.requestData.createStartDate = val[0]
        this.requestData.createEndDate = val[1]
      } else {
        this.requestData.createStartDate = null
        this.requestData.createEndDate = null
      }
    },
    // 重置
    resetSearch () {
      this.deptBudgetDate = null
      this.requestData.createStartDate = null
      this.requestData.createEndDate = null
      this.requestData.vesselId = null
      this.requestData.deptId = null
      this.requestData.currentPage = 1
      this.getWarnInfo()
      this.dialogDeptBudgetFilter = false
    },
    clearSearch () {
      this.requestData.searchKeyword = null
      this.getWarnInfo()
    },
    // 过滤，搜索
    deptBudgetSearch () {
      this.getWarnInfo()
      this.dialogDeptBudgetFilter = false
    },
    sortChange (column) {
      if (column.order === 'ascending') {
        this.requestData.orderColunm = column.prop // 当前列
        this.requestData.order = 'asc' // 排序顺序
      }
      if (column.order === 'descending') {
        this.requestData.orderColunm = column.prop // 当前列
        this.requestData.order = 'desc' // 排序顺序
      }
      this.getWarnInfo()
    },
    // 催办
    async handleUrging (item) {
      try {
        await getUrging({ id: item.id }).toPromise().then(() => {
          EventBus.$emit('success', this.$t('showMessage.dragTheSuccess'))
        })
      } catch (error) {
        if (error.code && error.code !== '200') {
          EventBus.$emit('error', error.message)
        }
      }
    }
  }
}
</script>

<style scoped>
.nav-search {
  float: right;
}
.waring .table-view__body {
  padding-bottom: 10px;
}

.nav-search /deep/.dialog .el-dialog {
  margin-left: 70%;
}
::v-deep .el-table__row .cell {
  color: #ff0000;
}
</style>