<template>
  <div>
    <!-- 列表 -->
    <div>
      <div class="gyzj" 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.gyzj.mc') + '：'">
            <el-input v-model="queryParams.mc" clearable 
              :placeholder="$t('form.placeholderInput')" />
          </el-form-item>
          <!-- 编号 -->
          <el-form-item :label="$t('page.business.resource.gyzj.bh') + '：'">
            <el-input v-model="queryParams.bh" clearable
              :placeholder="$t('form.placeholderInput')" />
          </el-form-item>
          <!-- 制剂状态 -->
          <el-form-item :label="$t('page.business.resource.gyzj.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.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.gyzj.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-table v-loading="loading" :data="list">
          <el-table-column :label="$t('page.business.resource.gyzj.mc')" align="left" prop="mc"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.gyzj.bh')" align="center" prop="bh"
            :show-overflow-tooltip="true" />
          <el-table-column :label="$t('page.business.resource.gyzj.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.gyzj.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.gyzj.sxrq')" align="center" prop="sxrq" width="150px" />
          <el-table-column :label="$t('page.business.resource.gyzj.sfcc')" align="center" width="100px" fixed="right">
            <template slot-scope="scope">
              <span v-if="scope.row.cczt == 1"><span class="status-circle yes"></span>{{ $t('page.business.resource.resource.cczt.qc') }}</span>
              <span v-if="scope.row.cczt == 3"><span class="status-circle no"></span>{{ $t('page.business.resource.resource.cczt.cc') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('page.business.resource.gyzj.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('form.operate')" fixed="right" align="center"
            class-name="small-padding fixed-width" width="250px">
            <template slot-scope="scope">
              <!-- 详情 -->
              <el-button type="text" @click="handleXq(scope.row)"
                v-hasPermi="['business:studyGyzj:xq', 'business:nonTrialGyzj:xq', 'business:drugGyzj:xq']">{{
                  $t('page.business.resource.gyzj.detail') }}</el-button>
              <template v-if="scope.row.zjzt == 3 && scope.row.cczt == 1">
                <template v-if="scope.row.ghzt == 1">
                  <!-- 归还 -->
                  <el-button type="text" @click="handleGh(scope.row)"
                    v-hasPermi="['business:studyGyzj:gh', 'business:nonTrialGyzj:gh', 'business:drugGyzj:gh']">{{
                      $t('page.business.resource.gyzj.sqguihuan') }}</el-button>
                </template>
                <template>
                  <!-- 处置药剂 -->
                  <el-button type="text" @click="handleCzyj(scope.row)"
                    v-hasPermi="['business:studyGyzj:czyj', 'business:nonTrialGyzj:czyj', 'business:drugGyzj:czyj']">{{
                      $t('page.business.resource.gyzj.czyj') }}</el-button>
                  <!-- 编辑 -->
                  <el-button type="text" @click="handleBj(scope.row)"
                    v-hasPermi="['business:studyGyzj:bj', 'business:nonTrialGyzj:bj', 'business:drugGyzj:bj']">{{
                      $t('form.edit') }}</el-button>
                  <!-- 修改库存 -->
                  <el-button type="text" @click="handleXgkc(scope.row)"
                    v-hasPermi="['business:studyGyzj:xgkc', 'business:nonTrialGyzj:xgkc', 'business:drugGyzj:xgkc']">{{
                      $t('page.business.resource.gyzj.xgkc') }}</el-button>
                </template>
              </template>
              <!-- 入库 -->
              <el-button type="text" v-if="scope.row.zjzt == 2 && scope.row.rksqzt == 1" @click="handleRk(scope.row)"
                v-hasPermi="['business:studyGyzj:rk', 'business:nonTrialGyzj:rk', 'business:drugGyzj:rk']">{{
                  $t('page.business.resource.gyzj.ruku') }}</el-button>
              <!-- 取出 -->
              <el-button type="text" v-if="scope.row.zjzt == 3 && scope.row.cczt == 3" @click="handleQc(scope.row)"
                v-hasPermi="['business:studyGyzj:qc', 'business:nonTrialGyzj:qc', 'business:drugGyzj:qc']">{{
                  $t('page.business.resource.gyzj.quchu') }}</el-button>
              <!-- 存储 -->
              <el-button type="text" v-if="scope.row.zjzt == 3 && scope.row.cczt == 1" @click="handleCc(scope.row)"
                v-hasPermi="['business:studyGyzj:cc', 'business:nonTrialGyzj:cc', 'business:drugGyzj:cc']">{{
                  $t('page.business.resource.gyzj.cunchu') }}</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>
      <!-- 编辑 -->
      <Bj key="Bj" ref="Bj" @callback="handleQuery" />
      <!-- 修改库存 -->
      <Xgkc key="Xgkc" ref="Xgkc" @callback="handleQuery" />
      <!-- 归还 -->
      <Sqgh key="Sqgh" ref="Sqgh" @callback="handleQuery" />
      <!-- 入库 -->
      <Sqrk key="Sqrk" ref="Sqrk" @callback="handleQuery" />
      <!-- 存储 -->
      <Cc key="Cc" ref="Cc" @callback="handleQuery" />
      <!-- 取出 -->
      <Qc key="Qc" ref="Qc" @callback="handleQuery" />
      <!-- 处置药剂 -->
      <Czyj key="Czyj" ref="Czyj" @callback="handleQuery" />
      <!-- 详情 -->
      <Xq v-show="showDetail" key="Xq" ref="Xq" @callback="closeXq" />
    </div>
  </div>
</template>

<script>
import { studyList } from "@/api/business/gyzj/gyzj"
import Xq from "@/views/business/resource/gyzj/comps/gyzj/Xq";
import Bj from "@/views/business/resource/gyzj/comps/gyzj/Bj";
import Cc from "@/views/business/resource/gyzj/comps/gyzj/Cc";
import Qc from "@/views/business/resource/gyzj/comps/gyzj/Qc";
import Xgkc from "@/views/business/resource/gyzj/comps/gyzj/Xgkc";
import Sqgh from "@/views/business/resource/gyzj/comps/gyzj/Sqgh";
import Sqrk from "@/views/business/resource/gyzj/comps/gyzj/Sqrk";
import Czyj from "@/views/business/resource/gyzj/comps/gyzj/Czyj";
import moment from "moment";

export default {
  name: "GyzjList",
  components: { Xq, Bj, Xgkc, Sqgh, Czyj, Sqrk, Cc, Qc },
  data() {
    return {
      daterange: [],
      loading: true,
      single: true,
      multiple: true,
      showDetail: false,
      total: 0,
      list: [],
      //勾选列表
      selectList: [],
      //查询条件
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        studyId: null,
        mc: null,
        jyzt: null,
        zjzt: null,
        bh: null,
        startDate: null,
        endDate: null,
      },
    }
  },
  created() {
  },
  props: {
    study: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    study: {
      handler(newVal) {
        this.queryParams.studyId = newVal.id
        this.handleQuery()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    //处置药剂
    handleCzyj(row) {
      this.$refs.Czyj.show(row)
    },
    //编辑
    handleBj(row) {
      this.$refs.Bj.show(row)
    },
    //修改库存
    handleXgkc(row) {
      this.$refs.Xgkc.show(row)
    },
    //归还
    handleGh(row) {
      this.$refs.Sqgh.show(row)
    },
    //入库
    handleRk(row) {
      this.$refs.Sqrk.show(row)
    },
    //取出
    handleQc(row) {
      this.$refs.Qc.show(row)
    },
    //存储
    handleCc(row) {
      this.$refs.Cc.show(row)
    },
    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)
    },
    //获取列表
    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
      studyList(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()
    },
  }
}
</script>

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