<template>
  <div>
    <div>
      <!-- 列表 -->
      <div class="ffjl" v-show="!showDetail">
        <el-form :model="queryParams" ref="queryForm" class="search-area" :inline="true" label-width="88px">
          <el-row>
            <el-col :span="24">
              <!-- 名称 -->
              <el-form-item :label="$t('page.business.resource.mjy.mc') + '：'">
                <el-input v-model="queryParams.mc" clearable @change="handleQuery"
                  :placeholder="$t('form.placeholderInput')" />
              </el-form-item>
              <!-- 编号 -->
              <el-form-item :label="$t('page.business.resource.mjy.bh') + '：'">
                <el-input v-model="queryParams.bh" clearable @change="handleQuery"
                  :placeholder="$t('form.placeholderInput')" />
              </el-form-item>
              <!-- 目的 -->
              <el-form-item :label="$t('page.business.resource.mjy.md') + '：'">
                <el-input v-model="queryParams.mdId" clearable @change="handleQuery"
                  :placeholder="$t('form.placeholderInput')" />
              </el-form-item>
              <!-- 记录状态 -->
              <el-form-item :label="$t('page.business.resource.mjy.jlzt') + '：'">
                <el-select v-model="queryParams.jlzt" :placeholder="$t('form.placeholderSelect')" clearable
                  @change="handleQuery">
                  <el-option :label="$t('page.business.resource.resource.jlzt.wsd')" :value="1" />
                  <el-option :label="$t('page.business.resource.resource.jlzt.ysd')" :value="3" />
                  <el-option :label="$t('page.business.resource.resource.jlzt.dgd')" :value="5" />
                  <el-option :label="$t('page.business.resource.resource.jlzt.gd')" :value="7" />
                  <el-option :label="$t('page.business.resource.resource.jlzt.djd')" :value="9" />
                </el-select>
              </el-form-item>
              <!-- 借阅状态 -->
              <el-form-item :label="$t('page.business.resource.mjy.jyzt') + '：'">
                <el-select v-model="queryParams.jyzt" :placeholder="$t('form.placeholderSelect')" clearable
                  @change="handleQuery">
                  <el-option :label="$t('page.business.resource.resource.jyzt.wjy')" :value="1" />
                  <el-option :label="$t('page.business.resource.resource.jyzt.djy')" :value="3" />
                  <el-option :label="$t('page.business.resource.resource.jyzt.jyz')" :value="5" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('form.search') }}</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t('form.reset') }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <!-- 出库日期 -->
              <el-form-item :label="$t('page.business.resource.mjy.cksj') + '：'">
                <el-date-picker v-model="daterangeCk" class="chat-histogram-daterange" type="daterange"
                  range-separator="-" :start-placeholder="$t('form.startDate')" :end-placeholder="$t('form.endDate')"
                  value-format="yyyy-MM-dd" @change="handleQuery" style="width: 250px;" />
              </el-form-item>
              <!-- 入库日期 -->
              <el-form-item :label="$t('page.business.resource.mjy.rksj') + '：'">
                <el-date-picker v-model="daterangeRk" class="chat-histogram-daterange" type="daterange"
                  range-separator="-" :start-placeholder="$t('form.startDate')" :end-placeholder="$t('form.endDate')"
                  value-format="yyyy-MM-dd" @change="handleQuery" style="width: 250px;" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <!-- 批量归档 -->
            <el-button type="primary" :disabled="multiple" @click="handlePlgd"
              v-hasPermi="['business:resource:mjy:ffjlgd']">{{
                $t('page.business.resource.mjy.plgd') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 批量锁定 -->
            <el-button type="primary" :disabled="multiple" @click="handlePlsd"
              v-hasPermi="['business:resource:mjy:ffjlsd']">{{
                $t('page.business.resource.mjy.plsd') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 导出 -->
            <el-button type="primary" :disabled="multiple" @click="handleDc"
              v-hasPermi="['business:resource:mjy:ffjldc']">{{
                $t('form.export') }}</el-button>
          </el-col>
        </el-row>

        <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
          <el-table-column type="selection" fixed="left"   width="55" align="center" :selectable="checkSelectable" />
          <el-table-column :label="$t('page.business.resource.mjy.mc')" align="left" prop="mc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.bh')" align="center" prop="bh"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.md')" align="center" prop="mdMc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.zytj')" align="center" prop="ffzytj"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.cksj')" align="center" prop="ffrq" width="150px" />
          <el-table-column :label="$t('page.business.resource.mjy.rksj')" align="center" prop="ghrq" width="150px" />
          <el-table-column :label="$t('page.business.resource.mjy.ckmz')" align="center" width="150px">
            <template slot-scope="scope">
              {{ scope.row.ckmz }} {{ scope.row.ckmzdw }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.rkmz')" align="center" width="150px">
            <template slot-scope="scope">
              {{ scope.row.rkmz }} {{ scope.row.rkmzdw }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.syl')" align="center" width="150px">
            <template slot-scope="scope">
              {{ scope.row.syl }} {{ scope.row.syldw }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.lqr1')" align="center" prop="lqr1Mc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.lqr2')" align="center" prop="lqr2Mc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.kgy1')" align="center" prop="jsr1Mc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.kgy2')" align="center" prop="jsr2Mc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.zcg')" align="center" prop="zcgMc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.jlzt')" align="center" width="100px" fixed="right">
            <template slot-scope="scope">
              <span v-if="scope.row.jlzt == 1">{{ $t('page.business.resource.resource.jlzt.wsd') }}</span>
              <span v-if="scope.row.jlzt == 3">{{ $t('page.business.resource.resource.jlzt.ysd') }}</span>
              <span v-if="scope.row.jlzt == 5">{{ $t('page.business.resource.resource.jlzt.dgd') }}</span>
              <span v-if="scope.row.jlzt == 7">{{ $t('page.business.resource.resource.jlzt.gd') }}</span>
              <span v-if="scope.row.jlzt == 9">{{ $t('page.business.resource.resource.jlzt.djd') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.jyzt')" align="center" width="100px" fixed="right">
            <template slot-scope="scope">
              <span v-if="scope.row.jyzt == 1">{{ $t('page.business.resource.resource.jyzt.wjy') }}</span>
              <span v-if="scope.row.jyzt == 3">{{ $t('page.business.resource.resource.jyzt.djy') }}</span>
              <span v-if="scope.row.jyzt == 5">{{ $t('page.business.resource.resource.jyzt.jyz') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('form.operate')" fixed="right" align="center"
            class-name="small-padding fixed-width" width="250px">
            <template slot-scope="scope">
               <!-- 加签 -->
              <el-button v-if="scope.row.jlzt == 1 " type="text"
                @click="handleJq(scope.row)" v-hasPermi="['business:resource:mjy:ffjljq']">{{
                  $t('page.business.resource.mjy.jiaqian') }}</el-button>
              <!-- 详情 -->
              <el-button v-if="scope.row.jlzt == 1 || scope.row.jlzt == 3 || scope.row.jlzt == 7" type="text"
                @click="handleXq(scope.row)" v-hasPermi="['business:resource:mjy:ffjlxq']">{{
                  $t('page.business.resource.mjy.detail') }}</el-button>
              <!-- 锁定 -->
              <el-button type="text" v-if="scope.row.jlzt == 1" @click="handleSd(scope.row)"
                v-hasPermi="['business:resource:mjy:ffjlsd']">{{
                  $t('page.business.resource.mjy.lock') }}</el-button>
              <!-- 解锁 -->
              <el-button type="text" v-if="scope.row.jlzt == 3" @click="handleJs(scope.row)"
                v-hasPermi="['business:resource:mjy:ffjljs']">{{
                  $t('page.business.resource.mjy.unlock') }}</el-button>
              <!-- 归档 -->
              <el-button type="text" v-if="scope.row.jlzt == 3" @click="handleGd(scope.row)"
                v-hasPermi="['business:resource:mjy:ffjlgd']">{{
                  $t('page.business.resource.mjy.guidang') }}</el-button>
              <!-- 解档 -->
              <el-button type="text" v-if="scope.row.jlzt == 7" @click="handleJd(scope.row)"
                v-hasPermi="['business:resource:mjy:ffjljd']">{{
                  $t('page.business.resource.mjy.jiedang') }}</el-button>
              <!-- 借阅 -->
              <el-button type="text" v-if="scope.row.jlzt == 7&&scope.row.jyzt == 1" @click="handleJy(scope.row)"
                v-hasPermi="['business:resource:mjy:ffjljy']">{{
                  $t('page.business.resource.mjy.jieyue') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
      <!-- 锁定 -->
      <Sd key="Sd" ref="Sd" @callback="handleQuery" />
      <!-- 解锁 -->
      <Js key="Js" ref="Js" @callback="handleQuery" />
      <!-- 归档 -->
      <Gd key="Gd" ref="Gd" @callback="handleQuery" />
      <!-- 解档 -->
      <Jd key="Jd" ref="Jd" @callback="handleQuery" />
      <!-- 借阅 -->
      <Jy key="Jy" ref="Jy" @callback="handleQuery" />
      <!-- 借阅 -->
      <Xq key="Xq" v-show="showDetail" ref="Xq" @callback="closeXq"/>
      <!-- 加签 -->
      <Jq key="Jq" ref="Jq" @callback="handleQuery" />
    </div>
  </div>
</template>

<script>
import { list } from "@/api/business/mjy/mjyFfjl"
import Sd from "./ffjl/Sd";
import Jy from "./ffjl/Jy";
import Js from "./ffjl/Js";
import Gd from "./ffjl/Gd";
import Jd from "./ffjl/Jd";
import Xq from "./ffjl/Xq";
import Jq from "./ffjl/Jq";
import moment from "moment";

export default {
  name: "FfjlList",
  components: { Sd, Js, Gd, Jd, Jy, Xq, Jq },
  data() {
    return {
      daterangeCk: [],
      daterangeRk: [],
      loading: true,
      showDetail:false,
      single: true,
      multiple: true,
      total: 0,
      list: [],
      //勾选列表
      selectList: [],
      //查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mc: null,
        mdId: null,
        jlzt: null,
        jyzt: null,
        bh: null,
        startDateCk: null,
        endDateCk: null,
        startDateRk: null,
        endDateRk: null,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //导出
    handleDc() {

    },
    //加签
    handleJq(row) {
      this.$refs.Jq.show(row)
    },
    //锁定
    handleSd(row) {
      this.$refs.Sd.show(row)
    },
    //解锁
    handleJs(row) {
      this.$refs.Js.show(row)
    },
    //批量归档
    handlePlgd() {
      this.$refs.Gd.showBatch(this.selectList)
    },
    //批量锁定
    handlePlsd() {
      this.$refs.Sd.showBatch(this.selectList)
    },
      closeXq(){
      this.showDetail=false
      this.$emit('showDetail',this.showDetail)
      this.handleQuery()
    },
    //详情
    handleXq(row) {
      this.showDetail=true
      this.$emit('showDetail',this.showDetail)
      this.$refs.Xq.show(row)
    },
    //归档
    handleGd(row) {
      this.$refs.Gd.show(row)
    },
    //借阅
    handleJy(row) {
      this.$refs.Jy.show(row)
    },
    //解档
    handleJd(row) {
      this.$refs.Jd.show(row)
    },
    //是否可勾选
    checkSelectable(row) {
      return true;
    },
    //获取列表
    getList() {
      if (this.daterangeCk != null && this.daterangeCk.length > 0) {
        this.queryParams.startDateCk = this.daterangeCk[0]
        this.queryParams.endDateCk = moment().add(this.daterangeCk[1], 'days').format('YYYY-MM-DD');
      } else {
        this.queryParams.startDateCk = ''
        this.queryParams.endDateCk = ''
      }
      if (this.daterangeRk != null && this.daterangeRk.length > 0) {
        this.queryParams.startDateRk = this.daterangeRk[0]
        this.queryParams.endDateRk = moment().add(this.daterangeRk[1], 'days').format('YYYY-MM-DD');
      } else {
        this.queryParams.startDateRk = ''
        this.queryParams.endDateRk = ''
      }
      this.loading = true
      list(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    //查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    //重置
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    //勾选回调
    handleSelectionChange(selection) {
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.selectList = selection
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.ffjl {
  background: #fff;
  padding: 10px 10px;
}
</style>