<template>
  <page-layer>
    <template #header>
      <span style="margin-left: 0">出库日期：</span>
      <el-date-picker
          v-model="DateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
          style="width: 240px"
      ></el-date-picker>
      <span>出库单号：</span>
      <el-input style="width: 150px" clearable v-model="queryTerm.drawNo" @blur="queryTerm.drawNo = $event.target.value.trim()"></el-input>
      <span>药品编码：</span>
      <el-input style="width: 150px" clearable v-model="queryTerm.chargeCode" @blur="queryTerm.chargeCode = $event.target.value.trim()"></el-input>
      <span>入库单号：</span>
      <el-input style="width: 150px" clearable v-model="queryTerm.inDrawNo" @blur="queryTerm.inDrawNo = $event.target.value.trim()"></el-input>
      <el-button style="margin-left: 10px" type="primary" @click="queryChuKuXinXiClick">查询</el-button>
    </template>
    <template #main>
      <el-table :height="tableHeight" :data="chuKuXinXiList" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column label="序号" prop="outSeri" width="40px"></el-table-column>
        <el-table-column label="药品编码" prop="chargeCode" width="80px"></el-table-column>
        <el-table-column label="药品名称" width="120px" prop="chargeCodeName"></el-table-column>
        <el-table-column label="出库量" prop="outAmt" width="50px"></el-table-column>
        <el-table-column label="生产批号" prop="manuNo" width="110px"></el-table-column>
        <el-table-column label="出库单号" prop="drawNo"></el-table-column>
        <el-table-column label="入库单号" prop="inDrawNo"></el-table-column>
        <el-table-column label="入库日期" prop="inDate"></el-table-column>
        <el-table-column label="药库编码" prop="groupNoName"></el-table-column>
        <el-table-column label="接受药房" prop="groupNoOutName"></el-table-column>
        <el-table-column label="科室" prop="deptCodeName"></el-table-column>
        <el-table-column label="出库日期" prop="outDate" width="80px"></el-table-column>
        <el-table-column label="确认日期" prop="confirmDate" width="80px"></el-table-column>
        <el-table-column label="操作" width="100px">
          <el-table-column label="修改">
            <template #default="scope">
              <el-button @click="xiuGiClick(scope.row)" type="warning">修改</el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除">
            <template #default="scope">
              <el-popconfirm
                  confirm-button-text="确认"
                  cancel-button-text="取消"
                  icon="Info"
                  iconColor="red"
                  title="是否删除该数据"
                  @confirm="shanChuChuKuXinXiClick(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryTerm.currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="queryTerm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryTerm.total"
      >
      </el-pagination>
      <el-drawer title="修改出库信息" v-model="chuKuDrawer" size="60%">
        <div>
          <el-form label-width="100px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="药品编码:">
                  <el-input v-model="chuKuXiangXiXinXi.chargeCode" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="药品名称:">
                  <el-input v-model="chuKuXiangXiXinXi.chargeCodeName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库序号:">
                  <el-input v-model="chuKuXiangXiXinXi.outSeri"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库量:">
                  <el-input v-model="chuKuXiangXiXinXi.outAmt"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="生产批号:">
                  <el-input v-model="chuKuXiangXiXinXi.manuNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出库单号:">
                  <el-input v-model="chuKuXiangXiXinXi.drawNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="入库单号:">
                  <el-input v-model="chuKuXiangXiXinXi.inDrawNo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="药库编码:">
                  <el-select v-model="chuKuXiangXiXinXi.groupNo" allow-create filterable>
                    <el-option v-for="item in groupNoList" :key="item.code" :label="item.name" :value="item.code">
                      <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                      <el-divider direction="vertical"></el-divider>
                      <span>{{ item.name }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="接受药房:">
                  <el-select v-model="chuKuXiangXiXinXi.groupNoOut" allow-create filterable>
                    <el-option v-for="item in groupNoOutList" :key="item.code" :label="item.name" :value="item.code">
                      <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                      <el-divider direction="vertical"></el-divider>
                      <span>{{ item.name }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="科室:">
                  <el-select v-model="chuKuXiangXiXinXi.deptCode" allow-create filterable>
                    <el-option v-for="item in deptCodeList" :key="item.code" :label="item.name" :value="item.code">
                      <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
                      <el-divider direction="vertical"></el-divider>
                      <span>{{ item.name }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入库日期:">
                  <el-date-picker type="datetime" v-model="chuKuXiangXiXinXi.inDate"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出库日期:">
                  <el-date-picker type="datetime" v-model="chuKuXiangXiXinXi.outDate"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="确认日期:">
                  <el-date-picker type="datetime" v-model="chuKuXiangXiXinXi.confirmDate"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :offset="1" :span="3">
                <el-button @click="xiuGaiClick" type="success">保存</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-drawer>
    </template>
  </page-layer>
</template>

<script>
import { shortcuts } from '@/data/shortcuts'
import { formatDatetime, getDateRangeFormatDate } from '@/utils/date'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { queryChuKuXinXi, queryDeptCode, shanChuChuKuXinXi, xiuGaiChuKuXinXi } from '@/api/yz-data-mod/in-or-out-of-warehouse'
import { clone } from '@/utils/clone'
import { reactive, ref } from '@vue/reactivity'
import { onMounted } from 'vue'
import PageLayer from "@/layout/PageLayer";
export default {
  name: 'DeliveryDetailsQuery',
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70

    const queryTerm = reactive({
      startTime: '',
      endTime: '',
      drawNo: '',
      chargeCode: '',
      inDrawNo: '',
      currentPage: 1,
      pageSize: 100,
      total: 0,
    })

    const DateRange = ref(null)

    const chuKuXinXiList = ref([])

    const queryChuKuXinXiClick = () => {
      if (!DateRange.value && queryTerm.drawNo === '' && queryTerm.chargeCode === '' && queryTerm.inDrawNo === '') {
        ElMessage.warning({
          message: '至少选择一项',
          showClose: true,
          duration: 2500,
        })
        return
      }
      let getDateRange = getDateRangeFormatDate(DateRange.value)
      queryTerm.startTime = getDateRange.startTime
      queryTerm.endTime = getDateRange.endTime

      queryChuKuXinXi(queryTerm).then((res) => {
        chuKuXinXiList.value = res.data
        queryTerm.total = res.total
      })
    }

    const chuKuXiangXiXinXi = ref({})

    const xiuGiClick = (val) => {
      chuKuDrawer.value = true
      chuKuXiangXiXinXi.value = clone(val)
      chuKuXiangXiXinXi.value.oldDrawNo = chuKuXiangXiXinXi.value.drawNo
    }

    const deptCodeList = ref([])
    const groupNoOutList = ref([])
    const groupNoList = ref([])

    onMounted(() => {
      queryDeptCode().then((res) => {
        deptCodeList.value = res.deptCode
        groupNoOutList.value = res.groupNo
        groupNoList.value = res.groupNo
      })
    })

    const chuKuDrawer = ref(false)

    const xiuGaiClick = () => {
      chuKuXiangXiXinXi.value.inDate = formatDatetime(chuKuXiangXiXinXi.value.inDate)
      chuKuXiangXiXinXi.value.outDate = formatDatetime(chuKuXiangXiXinXi.value.outDate)
      chuKuXiangXiXinXi.value.confirmDate = formatDatetime(chuKuXiangXiXinXi.value.confirmDate)

      xiuGaiChuKuXinXi(chuKuXiangXiXinXi.value).then((res) => {
        chuKuDrawer.value = false
        fenYe()
      })
    }

    const handleSizeChange = (val) => {
      queryTerm.pageSize = val
      fenYe()
    }

    const handleCurrentChange = (val) => {
      queryTerm.currentPage = val
      fenYe()
    }

    const fenYe = () => {
      queryChuKuXinXi(queryTerm).then((res) => {
        chuKuXinXiList.value = res.data
      })
    }

    const shanChuChuKuXinXiClick = (index, val) => {
      shanChuChuKuXinXi(val.drawNo, val.chargeCode, val.outSeri, val.inDrawNo).then((res) => {
        chuKuXinXiList.value.splice(index, 1)
      })
    }

    return {
      queryTerm,
      DateRange,
      shortcuts,
      queryChuKuXinXiClick,
      chuKuXinXiList,
      tableHeight,
      xiuGiClick,
      chuKuDrawer,
      chuKuXiangXiXinXi,
      deptCodeList,
      groupNoOutList,
      groupNoList,
      xiuGaiClick,
      handleSizeChange,
      handleCurrentChange,
      shanChuChuKuXinXiClick,
    }
  },
}
</script>

<style></style>
