<template>
  <div>
    <!-- 列表 -->
    <div>
      <div class="mjy" v-show="!showDetail">
        <el-form :model="queryParams" ref="queryForm" class="search-area" :inline="true" label-width="88px">
          <!-- 名称 -->
          <el-form-item :label="$t('page.business.resource.mjy.mc') + '：'">
            <el-input v-model="queryParams.mc" clearable :placeholder="$t('form.placeholderInput')" />
          </el-form-item>
          <!-- 编号 -->
          <el-form-item :label="$t('page.business.resource.mjy.bh') + '：'">
            <el-input v-model="queryParams.bh" clearable :placeholder="$t('form.placeholderInput')" />
          </el-form-item>
          <!-- 目的 -->
          <el-form-item :label="$t('page.business.resource.mjy.md') + '：'">
            <el-input v-model="queryParams.mdMc" clearable :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>
              <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') + '：'"
            :label-width="$i18n.locale === 'zh_CN' ? '88px' : '150px'">
            <el-select v-model="queryParams.jyzt" :placeholder="$t('form.placeholderSelect')" clearable>
              <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-form>

        <el-table v-loading="loading" :data="list">
         <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.gyzj.md')" align="center" width="100px"  :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <span v-if="scope.row.mdOther && scope.row.mdOther != ''&&scope.row.mdMcs && scope.row.mdMcs != ''">{{ scope.row.mdMcs }},{{ scope.row.mdOther }}</span>
              <span v-else>{{ scope.row.mdMcs }}{{ scope.row.mdOther }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.zytj')" align="center" prop="ffzytj"
             :width="$i18n.locale === 'zh_CN'?'100px':'180px'"/>
          <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="$i18n.locale === 'zh_CN'?'100px':'180px'">
            <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="$i18n.locale === 'zh_CN'?'100px':'180px'">
            <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="$i18n.locale === 'zh_CN'?'80px':'120px'">
            <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" :width="$i18n.locale === 'zh_CN'?'80px':'100px'"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.lqr2')" align="center" prop="lqr2Mc" :width="$i18n.locale === 'zh_CN'?'80px':'100px'"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.kgy1')" align="center" prop="jsr1Mc" :width="$i18n.locale === 'zh_CN'?'100px':'180px'"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.mjy.kgy2')" align="center" prop="jsr2Mc" :width="$i18n.locale === 'zh_CN'?'100px':'180px'"
            :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"><span class="status-circle wsd"></span>{{ $t('page.business.resource.resource.jlzt.wsd') }}</span>
              <span v-if="scope.row.jlzt == 3"><span class="status-circle ysd"></span>{{ $t('page.business.resource.resource.jlzt.ysd') }}</span>
              <span v-if="scope.row.jlzt == 5"><span class="status-circle dgd"></span>{{ $t('page.business.resource.resource.jlzt.dgd') }}</span>
              <span v-if="scope.row.jlzt == 7"><span class="status-circle gd"></span>{{ $t('page.business.resource.resource.jlzt.gd') }}</span>
              <span v-if="scope.row.jlzt == 9"><span class="status-circle djd"></span>{{ $t('page.business.resource.resource.jlzt.djd') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.jyzt')" align="center" fixed="right"  :width="$i18n.locale === 'zh_CN'?'100px':'180px'">
            <template slot-scope="scope">
              <span v-if="scope.row.jyzt == 1"><span class="status-circle wjy"></span>{{ $t('page.business.resource.resource.jyzt.wjy') }}</span>
              <span v-if="scope.row.jyzt == 3"><span class="status-circle ysd"></span>{{ $t('page.business.resource.resource.jyzt.djy') }}</span>
              <span v-if="scope.row.jyzt == 5"><span class="status-circle syz"></span>{{ $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="200px">
            <template slot-scope="scope">
              <template>
                <!-- 详情 -->
                <el-button type="text" @click="handleXq(scope.row)" v-hasPermi="['business:archive:mjyFfjl:xq']">{{
                  $t('page.business.resource.mjy.detail') }}</el-button>
                <!-- 同意归档 -->
                <el-button type="text" v-if="scope.row.jlzt == 5"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.tygd', false, 'tygd')"
                  v-hasPermi="['business:archive:mjyFfjl:tygd']">{{
                    $t('page.business.resource.mjy.tygd') }}</el-button>
                <!-- 拒绝归档 -->
                <el-button type="text" v-if="scope.row.jlzt == 5"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.jjgd', false, 'jjgd', true, true)"
                  v-hasPermi="['business:archive:mjyFfjl:jjgd']">{{
                    $t('page.business.resource.mjy.jjgd') }}</el-button>
                <!-- 同意解档 -->
                <el-button type="text" v-if="scope.row.jlzt == 9"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.tyjd', false, 'tyjd')"
                  v-hasPermi="['business:archive:mjyFfjl:tyjd']">{{
                    $t('page.business.resource.mjy.tyjd') }}</el-button>
                <!-- 拒绝解档 -->
                <el-button type="text" v-if="scope.row.jlzt == 9"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.jjjd', false, 'jjjd', true, true)"
                  v-hasPermi="['business:archive:mjyFfjl:jjjd']">{{
                    $t('page.business.resource.mjy.jjjd') }}</el-button>
                <!-- 同意借阅 -->
                <el-button type="text" v-if="scope.row.jlzt == 7 && scope.row.jyzt == 3"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.tyjy', true, 'tyjy')"
                  v-hasPermi="['business:archive:mjyFfjl:tyjy']">{{
                    $t('page.business.resource.mjy.tyjy') }}</el-button>
                <!-- 拒绝借阅 -->
                <el-button type="text" v-if="scope.row.jlzt == 7 && scope.row.jyzt == 3"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.jjjy', true, 'jjjy', true, true)"
                  v-hasPermi="['business:archive:mjyFfjl:jjjy']">{{
                    $t('page.business.resource.mjy.jjjy') }}</el-button>
                <!-- 确认归还 -->
                <el-button type="text" v-if="scope.row.jlzt == 7 && scope.row.jyzt == 5"
                  @click="handleSign(scope.row, 'page.business.resource.mjy.qrgh', false, 'qrgh')"
                  v-hasPermi="['business:archive:mjyFfjl:qrgh']">{{
                    $t('page.business.resource.mjy.qrgh') }}</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
      <!-- 详情 -->
      <Xq v-show="showDetail" key="Xq" ref="Xq" @callback="closeXq" />
      <!-- 签名 -->
      <Sign ref="refSign" @callback="doSign" />
    </div>
  </div>
</template>

<script>
import { list, tygd, jjgd, tyjd, jjjd, tyjy, jjjy, qrgh } from "@/api/business/mjy/mjyFfjlArchive"
import Sign from "@/views/business/comps/common/sign";
import Xq from "@/views/business/resource/mjy/comps/ffjl/Xq";

export default {
  name: "GyzjDaList",
  components: { Xq, Sign },
  data() {
    return {
      loading: true,
      showDetail: false,
      type: '',
      total: 0,
      list: [],
      form: {
        id: null
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mc: null,
        mdMc: null,
        jlzt: null,
        jyzt: null,
        bh: null,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSign(row, qmyy, showDate, type, isReson, reasonRequired) {
      this.form.id = row.id
      let title = this.$t(qmyy)
      this.type = type
      this.$refs.refSign.show(title, title, showDate, (type == 'jjjy' || type == 'tyjy') ? [row.jyksrq, row.jyjsrq] : [], isReson, reasonRequired)
    },
    doSign(val) {
      let params = _.merge({}, this.form, val)
      this.$modal.loading()
      if (this.type == 'tygd') {
        tygd(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      } else if (this.type == 'jjgd') {
        jjgd(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      } else if (this.type == 'tyjd') {
        tyjd(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      } else if (this.type == 'jjjd') {
        jjjd(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      } else if (this.type == 'tyjy') {
        tyjy(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      } else if (this.type == 'jjjy') {
        jjjy(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      } else if (this.type == 'qrgh') {
        qrgh(params).then(response => {
          this.handleQuery()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      }
    },
    closeXq() {
      this.showDetail = false
      this.handleQuery()
      this.$emit('showDetail', this.showDetail)
    },
    //详情
    handleXq(row) {
      this.showDetail = true
      this.$emit('showDetail', this.showDetail)
      this.$refs.Xq.show(row)
    },
    //获取列表
    getList() {
      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.queryParams.mc = null
      this.queryParams.mdMc = null
      this.queryParams.jlzt = null
      this.queryParams.jyzt = null
      this.queryParams.bh = null
      this.handleQuery()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.mjy {
  background: #fff;
  padding: 10px 10px;
}
</style>