<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.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 :label="$t('page.business.resource.mjy.zjzt') + '：'">
            <el-select v-model="queryParams.zjzt" :placeholder="$t('form.placeholderSelect')" clearable>
              <el-option :label="$t('page.business.resource.resource.zjzt.rk')" :value="1" />
              <el-option :label="$t('page.business.resource.resource.zjzt.wrk')" :value="2" />
              <el-option :label="$t('page.business.resource.resource.zjzt.yff')" :value="3" />
              <el-option :label="$t('page.business.resource.resource.zjzt.ysd')" :value="5" />
              <el-option :label="$t('page.business.resource.resource.zjzt.dgd')" :value="7" />
              <el-option :label="$t('page.business.resource.resource.zjzt.gd')" :value="9" />
              <el-option :label="$t('page.business.resource.resource.zjzt.djd')" :value="11" />
            </el-select>
          </el-form-item>
          <!-- 失效日期 -->
          <el-form-item :label="$t('page.business.resource.mjy.sxrq') + '：'">
            <el-date-picker v-model="daterange" class="chat-histogram-daterange" type="daterange" range-separator="-"
              :start-placeholder="$t('form.startDate')" :end-placeholder="$t('form.endDate')" value-format="yyyy-MM-dd"
               style="width: 250px;" />
          </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="handlePlff"
              v-hasPermi="['business:resource:mjy:ff']">{{
                $t('page.business.resource.mjy.plff') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 批量处置药剂 -->
            <el-button type="primary" :disabled="multiple" @click="handlePlczyj"
              v-hasPermi="['business:resource:mjy:czyj']">{{
                $t('page.business.resource.mjy.plczyj') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 批量处置容器 -->
            <el-button type="primary" :disabled="multiple" @click="handlePlczrq"
              v-hasPermi="['business:resource:mjy:czrq']">{{
                $t('page.business.resource.mjy.plczrq') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 钥匙发放 -->
            <el-button type="primary" :disabled="multiple" @click="handleYsff"
              v-hasPermi="['business:resource:mjy:ysff']">{{
                $t('page.business.resource.mjy.ysff') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 批量锁定 -->
            <el-button type="primary" :disabled="multiple" @click="handlePlsd"
              v-hasPermi="['business:resource:mjy:sd']">{{
                $t('page.business.resource.mjy.plsd') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 批量归档 -->
            <el-button type="primary" :disabled="multiple" @click="handlePlgd"
              v-hasPermi="['business:resource:mjy:gd']">{{
                $t('page.business.resource.mjy.plgd') }}</el-button>
          </el-col>
          <el-col :span="1.5">
            <!-- 导出 -->
            <el-button type="primary" @click="exportExcel" v-hasPermi="['business:resource:mjy:dc']">{{
              $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.nd')" align="center">
            <template slot-scope="scope">
              {{ scope.row.nd }}{{ scope.row.nddw }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.kcl')" align="center">
            <template slot-scope="scope">
              {{ scope.row.kc }}{{ scope.row.kcdw }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.mjy.sxrq')" align="center" prop="sxrq" width="150px" />
          <el-table-column :label="$t('page.business.resource.mjy.zcg')" align="center" prop="zcgMc" width="130px" />
          <el-table-column :label="$t('page.business.resource.mjy.cctj')" align="center" prop="cctj" width="140px" />
          <el-table-column :label="$t('page.business.resource.mjy.ccwz')" align="center" prop="ccwz" width="130px" />

          <el-table-column :label="$t('page.business.resource.mjy.zjzt')" align="center" width="100px" fixed="right">
            <template slot-scope="scope">
              <span v-if="scope.row.zjzt == 1"><span class="status-circle rk"></span>{{ $t('page.business.resource.resource.zjzt.rk') }}</span>
              <span v-if="scope.row.zjzt == 2"><span class="status-circle wrk"></span>{{ $t('page.business.resource.resource.zjzt.wrk') }}</span>
              <span v-if="scope.row.zjzt == 3"><span class="status-circle yff"></span>{{ $t('page.business.resource.resource.zjzt.yff') }}</span>
              <span v-if="scope.row.zjzt == 5"><span class="status-circle ysd"></span>{{ $t('page.business.resource.resource.zjzt.ysd') }}</span>
              <span v-if="scope.row.zjzt == 7"><span class="status-circle dgd"></span>{{ $t('page.business.resource.resource.zjzt.dgd') }}</span>
              <span v-if="scope.row.zjzt == 9"><span class="status-circle gd"></span>{{ $t('page.business.resource.resource.zjzt.gd') }}</span>
              <span v-if="scope.row.zjzt == 11"><span class="status-circle djd"></span>{{ $t('page.business.resource.resource.zjzt.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':'150px'">
            <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 djy"></span>{{ $t('page.business.resource.resource.jyzt.djy') }}</span>
              <span v-if="scope.row.jyzt == 5"><span class="status-circle jyz"></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="250px">
            <template slot-scope="scope">
              <template v-if="scope.row.zjzt == 1 || scope.row.zjzt == 3 || scope.row.zjzt == 5 || scope.row.zjzt == 9">
                <!-- 详情 -->
                <el-button type="text" @click="handleXq(scope.row)" v-hasPermi="['business:resource:mjy:xq']">{{
                  $t('page.business.resource.mjy.detail') }}</el-button>
              </template>
              <template v-if="scope.row.zjzt == 1">
                <!-- 发放 -->
                <el-button type="text" @click="handleFf(scope.row)" v-hasPermi="['business:resource:mjy:ff']">{{
                  $t('page.business.resource.mjy.fafang') }}</el-button>
                <!-- 处置药剂 -->
                <el-button type="text" @click="handleCzyj(scope.row)" v-hasPermi="['business:resource:mjy:czyj']">{{
                  $t('page.business.resource.mjy.czyj') }}</el-button>
                <!-- 处置容器 -->
                <el-button v-if="scope.row.rqzt == 1" type="text" @click="handleCzrq(scope.row)"
                  v-hasPermi="['business:resource:mjy:czrq']">{{
                    $t('page.business.resource.mjy.czrq') }}</el-button>
                <!-- 编辑 -->
                <el-button v-if="scope.row.bjzt == 1" type="text" @click="handleBj(scope.row)"
                  v-hasPermi="['business:resource:mjy:bj']">{{
                    $t('form.edit') }}</el-button>
                <!-- 修改库存 -->
                <el-button v-if="scope.row.kcbjzt == 1" type="text" @click="handleXgkc(scope.row)"
                  v-hasPermi="['business:resource:mjy:xgkc']">{{
                    $t('page.business.resource.mjy.xgkc') }}</el-button>
                <!-- 锁定 -->
                <el-button type="text" @click="handleSd(scope.row)" v-hasPermi="['business:resource:mjy:sd']">{{
                  $t('page.business.resource.mjy.lock') }}</el-button>
              </template>
              <template v-if="scope.row.bjzt == 3 && (scope.row.zjzt == 1 || scope.row.zjzt == 3)">
                <!-- 审核编辑 -->
                <el-button type="text" @click="handleShbj(scope.row)" v-hasPermi="['business:resource:mjy:shbj']">{{
                  $t('page.business.resource.mjy.shbj') }}</el-button>
              </template>
              <template v-if="scope.row.kcbjzt == 3 && (scope.row.zjzt == 1 || scope.row.zjzt == 3)">
                <!-- 审核修改库存 -->
                <el-button type="text" @click="handleShxgkc(scope.row)" v-hasPermi="['business:resource:mjy:shxgkc']">{{
                  $t('page.business.resource.mjy.shxgkc') }}</el-button>
              </template>
              <template v-if="scope.row.zjzt == 5">
                <!-- 解锁 -->
                <el-button type="text" @click="handleJs(scope.row)" v-hasPermi="['business:resource:mjy:js']">{{
                  $t('page.business.resource.mjy.unlock') }}</el-button>
                <!-- 归档 -->
                <el-button type="text" @click="handleGd(scope.row)" v-hasPermi="['business:resource:mjy:gd']">{{
                  $t('page.business.resource.mjy.guidang') }}</el-button>
              </template>
              <template v-if="scope.row.zjzt == 3">
                <!-- 归还 -->
                <el-button type="text" @click="handleGh(scope.row)" v-hasPermi="['business:resource:mjy:gh']">{{
                  $t('page.business.resource.mjy.guihuan') }}</el-button>
              </template>
              <template v-if="scope.row.zjzt == 2">
                <!-- 入库 -->
                <el-button type="text" @click="handleRk(scope.row)" v-hasPermi="['business:resource:mjy:rk']">{{
                  $t('page.business.resource.mjy.ruku') }}</el-button>
              </template>
              <template v-if="scope.row.zjzt == 9">
                <!-- 解档 -->
                <el-button type="text" @click="handleJd(scope.row)" v-hasPermi="['business:resource:mjy:jd']">{{
                  $t('page.business.resource.mjy.jiedang') }}</el-button>
                <!-- 借阅 -->
                <el-button type="text" @click="handleJy(scope.row)" v-hasPermi="['business:resource:mjy:jy']">{{
                  $t('page.business.resource.mjy.jieyue') }}</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>
      <!-- 锁定 -->
      <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" />
      <!-- 编辑 -->
      <Bj key="Bj" ref="Bj" @callback="handleQuery" />
      <!-- 审核编辑 -->
      <Shbj key="Shbj" ref="Shbj" @callback="handleQuery" />
      <!-- 修改库存 -->
      <Xgkc key="Xgkc" ref="Xgkc" @callback="handleQuery" />
      <!-- 审核修改库存 -->
      <Shxgkc key="Shxgkc" ref="Shxgkc" @callback="handleQuery" />
      <!-- 借阅 -->
      <Jy key="Jy" ref="Jy" @callback="handleQuery" />
      <!-- 归还 -->
      <Gh key="Gh" ref="Gh" @callback="handleQuery" />
      <!-- 入库 -->
      <Rk key="Rk" ref="Rk" @callback="handleQuery" />
      <!-- 发放 -->
      <Ff key="Ff" ref="Ff" @callback="handleQuery" />
      <!-- 处置药剂 -->
      <Czyj key="Czyj" ref="Czyj" @callback="handleQuery" />
      <!-- 处置容器 -->
      <Czrq key="Czrq" ref="Czrq" @callback="handleQuery" />
      <!-- 钥匙发放 -->
      <Ysff key="Ysff" ref="Ysff" @callback="handleQuery" />
      <!-- 详情 -->
      <Xq v-show="showDetail" key="Xq" ref="Xq" @callback="closeXq" />
    </div>
  </div>
</template>

<script>
import { list } from "@/api/business/mjy/mjy"
import Sd from "./mjy/Sd";
import Js from "./mjy/Js";
import Gd from "./mjy/Gd";
import Jd from "./mjy/Jd";
import Xq from "./mjy/Xq";
import Bj from "./mjy/Bj";
import Shbj from "./mjy/Shbj";
import Xgkc from "./mjy/Xgkc";
import Shxgkc from "./mjy/Shxgkc";
import Jy from "./mjy/Jy";
import Gh from "./mjy/Gh";
import Rk from "./mjy/Rk";
import Ff from "./mjy/Ff";
import Czrq from "./mjy/Czrq";
import Czyj from "./mjy/Czyj";
import Ysff from "./mjy/Ysff";
import moment from "moment";
import { deepClone } from "@/utils/index";

export default {
  name: "MjyList",
  components: { Rk, Sd, Js, Gd, Xq, Jd, Bj, Shbj, Xgkc, Shxgkc, Jy, Gh, Czyj, Czrq, Ff, Ysff },
  data() {
    return {
      daterange: [],
      loading: true,
      single: true,
      multiple: true,
      showDetail: false,
      total: 0,
      list: [],
      //勾选列表
      selectList: [],
      //查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mc: null,
        jyzt: null,
        zjzt: null,
        bh: null,
        startDate: null,
        endDate: null,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    exportExcel() {
      let that = this
      that.$modal.loading()
      let params = deepClone(this.queryParams)
      params.pageSize = 999999
      list(params).then(response => {
        var tabelStr =
          '<table border="1"  class="html-tabel">' +
          '<tr style="background:#eee;">' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.mc') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.bh') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.nd') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.kcl') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.sxrq') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.zcg') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.cctj') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.ccwz') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.zjzt') + '</th>' +
          '<th style="text-align: center;">' + this.$t('page.business.resource.mjy.jyzt') + '</th>' +
          ' </tr>'
        let _datastr = ''
        _.forEach(response.rows, function (value) {
          let zjzt = ''
          switch (value.zjzt) {
            case 1:
              zjzt = that.$t('page.business.resource.resource.zjzt.rk')
              break
            case 2:
              zjzt = that.$t('page.business.resource.resource.zjzt.wrk')
              break
            case 3:
              zjzt = that.$t('page.business.resource.resource.zjzt.yff')
              break
            case 5:
              zjzt = that.$t('page.business.resource.resource.zjzt.ysd')
              break
            case 7:
              zjzt = that.$t('page.business.resource.resource.zjzt.dgd')
              break
            case 9:
              zjzt = that.$t('page.business.resource.resource.zjzt.gd')
              break
            case 11:
              zjzt = that.$t('page.business.resource.resource.zjzt.djd')
              break
            default: zjzt = ''
          }
          let jyzt = ''
          switch (value.jyzt) {
            case 1:
              jyzt = that.$t('page.business.resource.resource.jyzt.wjy')
              break
            case 3:
              jyzt = that.$t('page.business.resource.resource.jyzt.djy')
              break
            case 5:
              jyzt = that.$t('page.business.resource.resource.jyzt.jyz')
              break
            default: jyzt = ''
          }
          _datastr =
            _datastr +
            '<tr style="text-align: center;">' +
            ' <td>' +
            value.mc +
            '</td>' +
            ' <td>' +
            '&nbsp;'+value.bh +
            '</td>' +
            ' <td>' +
            value.nd + value.nddw +
            '</td>' +
            ' <td>' +
            value.kc + value.kcdw +
            '</td>' +
            ' <td>' +
            value.sxrq +
            '</td>' +
            ' <td>' +
            value.zcgMc +
            '</td>' +
            ' <td>' +
            value.cctj +
            '</td>' +
            ' <td>' +
            value.ccwz +
            '</td>' +
            ' <td>' +
            zjzt +
            '</td>' +
            ' <td>' +
            jyzt +
            '</td>' +
            '</tr>'
        })
        tabelStr = tabelStr + _datastr + ' <table>'
        // Worksheet名
        var worksheet = that.$t('page.business.resource.mjy.mjygl')
        var uri = 'data:application/vnd.ms-excel;base64,'
        // 真正要导出（下载）的HTML模板
        var exportTemplate = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
                    xmlns="http://www.w3.org/TR/REC-html40">
                    <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                        <x:Name>${worksheet}</x:Name>
                            <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                    </head>
                    <body>
                        ${tabelStr}
                    </body>
                    </html>`
        var a = document.createElement('a')
        a.download = worksheet + '.xls'
        a.href = uri + window.btoa(unescape(encodeURIComponent(exportTemplate)))
        a.click()
        that.$modal.closeLoading()
      }).finally(() => {
        that.$modal.closeLoading()
      })
    },
    //钥匙发放
    handleYsff() {
      this.$refs.Ysff.showBatch(this.selectList)
    },
    //批量发放
    handlePlff() {
      this.$refs.Ff.showBatch(this.selectList)
    },
    //发放
    handleFf(row) {
      this.$refs.Ff.show(row)
    },
    //处置容器
    handleCzrq(row) {
      this.$refs.Czrq.show(row)
    },
    //批量处置容器
    handlePlczrq() {
      this.$refs.Czrq.showBatch(this.selectList)
    },
    //处置药剂
    handleCzyj(row) {
      this.$refs.Czyj.show(row)
    },
    //批量处置药剂
    handlePlczyj() {
      this.$refs.Czyj.showBatch(this.selectList)
    },
    //编辑
    handleBj(row) {
      this.$refs.Bj.show(row)
    },
    //审核编辑
    handleShbj(row) {
      this.$refs.Shbj.show(row)
    },
    //修改库存
    handleXgkc(row) {
      this.$refs.Xgkc.show(row)
    },
    //审核修改库存
    handleShxgkc(row) {
      this.$refs.Shxgkc.show(row)
    },
    //借阅
    handleJy(row) {
      this.$refs.Jy.show(row)
    },
    //归还
    handleGh(row) {
      this.$refs.Gh.show(row)
    },
    //入库
    handleRk(row) {
      this.$refs.Rk.show(row)
    },
    //是否可勾选
    checkSelectable(row) {
      return true;
    },
    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)
    },
    //批量解锁
    handlePljs() {
      this.$refs.Js.showBatch(this.selectList)
    },
    //解锁
    handleJs(row) {
      this.$refs.Js.show(row)
    },
    //批量归档
    handlePlgd() {
      this.$refs.Gd.showBatch(this.selectList)
    },
    //归档
    handleGd(row) {
      this.$refs.Gd.show(row)
    },
    //解档
    handleJd(row) {
      this.$refs.Jd.show(row)
    },
    //批量锁定
    handlePlsd() {
      this.$refs.Sd.showBatch(this.selectList)
    },
    //锁定
    handleSd(row) {
      this.$refs.Sd.show(row)
    },
    //获取列表
    getList() {
      if (this.daterange != null && this.daterange.length > 0) {
        this.queryParams.startDate = this.daterange[0]
        this.queryParams.endDate = moment().add(this.daterange[1], 'days').format('YYYY-MM-DD');
      } else {
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
      }
      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.jyzt = null
      this.queryParams.zjzt = null
      this.queryParams.bh = null
      this.queryParams.startDate = null
      this.queryParams.endDate = null
      this.daterange = []
      this.handleQuery()
    },
    //勾选回调
    handleSelectionChange(selection) {
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.selectList = selection
    }
  }
}
</script>

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