<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <!-- 暂存柜 -->
      <el-form-item :label="$t('page.business.resource.zcg.zcg') + '：'">
        <el-input v-model="queryParams.mc" clearable :placeholder="$t('form.placeholderInput')" />
      </el-form-item>
      <!-- 借用人 -->
      <el-form-item :label="$t('page.business.resource.zcg.jyr') + '：'" :label-width="$i18n.locale === 'zh_CN'?'68px':'88px'">
        <SelectDeptUser v-model="queryParams.jyrId" style="width: 160px" :name="queryParams.jyrMc" key="jyrId"
          @change="userChange" />
      </el-form-item>
      <!-- 状态 -->
      <el-form-item :label="$t('page.business.resource.zcg.zt') + '：'">
        <el-select v-model="queryParams.zt" :placeholder="$t('form.placeholderSelect')" clearable >
          <el-option key="5" :label="$t('page.business.resource.zcg.jyz')" value="5" />
          <el-option key="1" :label="$t('page.business.resource.zcg.wjy')" value="1" />
        </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-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- 批量归还 -->
        <el-button type="primary" :disabled="multiple" @click="handlePlgh"
          v-hasPermi="['business:resource:zcg:ysgh']">{{
            $t('page.business.resource.zcg.plgh') }}</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="ZcgList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
      <el-table-column :label="$t('page.business.resource.zcg.zcg')" align="left" prop="mc"
        :show-overflow-tooltip="true" />
      <el-table-column :label="$t('page.business.resource.zcg.ys1jyr')" align="center" prop="lqr1Mc" width="150px" />
      <el-table-column :label="$t('page.business.resource.zcg.ys2jyr')" align="center" prop="lqr2Mc" width="150px" />
      <el-table-column :label="$t('page.business.resource.zcg.zt')" align="center" width="150px">
        <template slot-scope="scope">
          <span v-if="scope.row.zt === 1"><span class="status-circle wjy"></span>{{ $t('page.business.resource.zcg.wjy')
          }}</span>
          <span v-if="scope.row.zt === 5"><span class="status-circle jyz"></span>{{ $t('page.business.resource.zcg.jyz')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('page.business.resource.zcg.glyj')" align="center" prop="glyj"
        :show-overflow-tooltip="true" />
      <el-table-column :label="$t('form.operate')" align="center" fixed="right" class-name="small-padding fixed-width"
        width="150px">
        <template slot-scope="scope">
          <!-- 钥匙发放 -->
          <el-button type="text" v-if="scope.row.zt == 1" @click="handleffys(scope.row)"
            v-hasPermi="['business:resource:zcg:ysff']">{{
              $t('page.business.resource.zcg.ysff') }}</el-button>
          <!-- 钥匙归还 -->
          <el-button type="text" v-if="scope.row.zt == 5" @click="handleghys(scope.row)"
            v-hasPermi="['business:resource:zcg:ysgh']">{{
              $t('page.business.resource.zcg.gh') }}</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" />
    <!-- 钥匙发放 -->
    <Ysff ref="Ysff" @callback="handleQuery" />
    <!-- 钥匙归还 -->
    <Ysgh ref="Ysgh" @callback="handleQuery" />
  </div>
</template>

<script>
import { zcg_list } from "@/api/business/zcg/zcg"
import Ysff from "./comps/Ysff";
import Ysgh from "./comps/Ysgh";
import SelectDeptUser from '@/views/business/comps/select/SelectDeptUser';

export default {
  name: "Zcg",
  components: { Ysff, Ysgh, SelectDeptUser },
  data() {
    return {
      loading: true,
      single: true,
      multiple: true,
      total: 0,
      ZcgList: [],
      //勾选列表
      selectList: [],
      //查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mc: null,
        jyrId: null,
        jyrMc: null,
        zt: null,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //是否可勾选
    checkSelectable(row) {
      return row.zt === 5 //只能是借用中的才能勾选
    },
    //批量归还
    handlePlgh() {
      this.$refs.Ysgh.showBatch(this.selectList)
    },
    //获取列表
    getList() {
      this.loading = true
      zcg_list(this.queryParams).then(response => {
        this.ZcgList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
     userChange(val) {
      this.queryParams.jyrId = val.id
      this.queryParams.jyrMc = val.name
    },
    //查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    //重置
    resetQuery() {
      this.queryParams.mc = null
      this.queryParams.jyrId = null
      this.queryParams.jyrMc = ' '
      this.queryParams.zt = null
      this.daterange = []
      this.handleQuery()
    },
    //勾选回调
    handleSelectionChange(selection) {
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.selectList = selection
    },
    //钥匙发放
    handleffys(row) {
      this.$refs.Ysff.show(row)
    },
    //钥匙归还
    handleghys(row) {
      this.$refs.Ysgh.show(row)
    }
  }
}
</script>