<template>
  <div class="app-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>危化品详情</span>
          <el-button type="primary" plain @click="goBack">返回列表</el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basic">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="危化品名称">{{ detail.hachName }}</el-descriptions-item>
            <el-descriptions-item label="化学品名称">{{ detail.chemName }}</el-descriptions-item>
            <el-descriptions-item label="存放地点">{{ detail.locName }}</el-descriptions-item>
            <el-descriptions-item label="存储包装">{{ detail.storPack }}</el-descriptions-item>
            <el-descriptions-item label="剧毒品数量">{{ detail.toxicSubsNum }}</el-descriptions-item>
            <el-descriptions-item label="危险品数量">{{ detail.dangNum }}</el-descriptions-item>
            <el-descriptions-item label="现有储量">{{ detail.currRese }}</el-descriptions-item>
            <el-descriptions-item label="超量处理方式">{{ detail.ovduProcMode }}</el-descriptions-item>
            <el-descriptions-item label="记录人员">{{ detail.recPers }}</el-descriptions-item>
            <el-descriptions-item label="采集时间">{{ detail.collTime }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{ detail.note }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="入库记录" name="storage">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Plus" @click="handleStorAdd" v-hasPermi="['hazard:bishachstor:add']">新增入库</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="storLoading" :data="storList">
            <el-table-column label="入库日期" align="center" prop="storDate" width="180" />
            <el-table-column label="入库类型" align="center" prop="storType" />
            <el-table-column label="供应商" align="center" prop="supplier" :show-overflow-tooltip="true" />
            <el-table-column label="数量" align="center" prop="quantity" />
            <el-table-column label="经办人" align="center" prop="handle" />
            <el-table-column label="验收人" align="center" prop="acceptor" />
            <el-table-column label="存放位置" align="center" prop="storLoc" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-tooltip content="详情" placement="top">
                  <el-button link type="primary" icon="View" @click="handleStorDetail(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="出库记录" name="delivery">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="Plus" @click="handleDelAdd" v-hasPermi="['hazard:bishachdel:add']">新增出库</el-button>
            </el-col>
          </el-row>
          <el-table v-loading="delLoading" :data="delList">
            <el-table-column label="出库时间" align="center" prop="delTime" width="180" />
            <el-table-column label="出库类型" align="center" prop="delType" />
            <el-table-column label="数量" align="center" prop="quantity" />
            <el-table-column label="经办人" align="center" prop="handle" />
            <el-table-column label="审核人" align="center" prop="auditor" />
            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-tooltip content="详情" placement="top">
                  <el-button link type="primary" icon="View" @click="handleDelDetail(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 入库对话框 -->
    <el-dialog title="新增入库" v-model="storOpen" width="800px" append-to-body>
      <el-form :model="storForm" :rules="storRules" ref="storRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库日期" prop="storDate">
              <el-date-picker v-model="storForm.storDate" type="datetime" placeholder="请选择入库日期" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库类型" prop="storType">
              <el-input v-model="storForm.storType" placeholder="请输入入库类型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplier">
              <el-input v-model="storForm.supplier" placeholder="请输入供应商" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input-number v-model="storForm.quantity" :min="0" placeholder="请输入数量" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经办人" prop="handle">
              <el-input v-model="storForm.handle" placeholder="请输入经办人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验收人" prop="acceptor">
              <el-input v-model="storForm.acceptor" placeholder="请输入验收人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="存放位置" prop="storLoc">
              <el-input v-model="storForm.storLoc" placeholder="请输入存放位置" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input v-model="storForm.note" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitStorForm">确 定</el-button>
          <el-button @click="storOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 出库对话框 -->
    <el-dialog title="新增出库" v-model="delOpen" width="800px" append-to-body>
      <el-form :model="delForm" :rules="delRules" ref="delRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="出库时间" prop="delTime">
              <el-date-picker v-model="delForm.delTime" type="datetime" placeholder="请选择出库时间" value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库类型" prop="delType">
              <el-input v-model="delForm.delType" placeholder="请输入出库类型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="数量" prop="quantity">
              <el-input-number v-model="delForm.quantity" :min="0" placeholder="请输入数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经办人" prop="handle">
              <el-input v-model="delForm.handle" placeholder="请输入经办人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核人" prop="auditor">
              <el-input v-model="delForm.auditor" placeholder="请输入审核人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input v-model="delForm.note" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDelForm">确 定</el-button>
          <el-button @click="delOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 入库详情对话框 -->
    <el-dialog title="入库详情" v-model="storDetailOpen" width="600px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="入库日期">{{ storDetailRow.storDate }}</el-descriptions-item>
        <el-descriptions-item label="入库类型">{{ storDetailRow.storType }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ storDetailRow.supplier }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ storDetailRow.quantity }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ storDetailRow.handle }}</el-descriptions-item>
        <el-descriptions-item label="验收人">{{ storDetailRow.acceptor }}</el-descriptions-item>
        <el-descriptions-item label="存放位置">{{ storDetailRow.storLoc }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="storDetailOpen = false">关 闭</el-button>
      </template>
    </el-dialog>

    <!-- 出库详情对话框 -->
    <el-dialog title="出库详情" v-model="delDetailOpen" width="600px" append-to-body>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="出库时间">{{ delDetailRow.delTime }}</el-descriptions-item>
        <el-descriptions-item label="出库类型">{{ delDetailRow.delType }}</el-descriptions-item>
        <el-descriptions-item label="数量">{{ delDetailRow.quantity }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ delDetailRow.handle }}</el-descriptions-item>
        <el-descriptions-item label="审核人">{{ delDetailRow.auditor }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="delDetailOpen = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="HazardChemDetail">
import { useRoute } from 'vue-router'
import { getObjHach } from "@/api/slaj/hazard"
import { listBisHachStor, addBisHachStor } from "@/api/slaj/hazard"
import { listBisHachDel, addBisHachDel } from "@/api/slaj/hazard"

const { proxy } = getCurrentInstance()
const route = useRoute()

const activeTab = ref("basic")
const detail = ref({})

// 入库相关
const storLoading = ref(false)
const storList = ref([])
const storOpen = ref(false)
const storForm = ref({})
const storRules = {
  storDate: [{ required: true, message: "入库日期不能为空", trigger: "change" }],
  quantity: [{ required: true, message: "数量不能为空", trigger: "blur" }]
}

// 入库详情
const storDetailOpen = ref(false)
const storDetailRow = ref({})

// 出库详情
const delDetailOpen = ref(false)
const delDetailRow = ref({})

// 出库相关
const delLoading = ref(false)
const delList = ref([])
const delOpen = ref(false)
const delForm = ref({})
const delRules = {
  delTime: [{ required: true, message: "出库时间不能为空", trigger: "change" }],
  quantity: [{ required: true, message: "数量不能为空", trigger: "blur" }]
}

/** 获取危化品详情 */
function getDetail() {
  const guid = route.query.guid
  if (guid) {
    getObjHach(guid).then(res => {
      detail.value = res.data
      getStorList()
      getDelList()
    })
  }
}

/** 查询入库记录 */
function getStorList() {
  storLoading.value = true
  listBisHachStor({ hachGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    storLoading.value = false
    storList.value = res.rows
  })
}

/** 查询出库记录 */
function getDelList() {
  delLoading.value = true
  listBisHachDel({ hachGuid: detail.value.guid, pageNum: 1, pageSize: 100 }).then(res => {
    delLoading.value = false
    delList.value = res.rows
  })
}

/** 返回列表 */
function goBack() {
  proxy.$router.push({ path: '/slaj/hazard/chemList' })
}

/** 新增入库 */
function handleStorAdd() {
  storForm.value = {
    hachGuid: detail.value.guid,
    storDate: undefined,
    storType: undefined,
    supplier: undefined,
    quantity: undefined,
    handle: undefined,
    acceptor: undefined,
    storLoc: undefined,
    note: undefined
  }
  storOpen.value = true
}

/** 提交入库表单 */
function submitStorForm() {
  proxy.$refs["storRef"].validate(valid => {
    if (valid) {
      addBisHachStor(storForm.value).then(response => {
        proxy.$modal.msgSuccess("新增成功")
        storOpen.value = false
        getStorList()
      })
    }
  })
}

/** 入库详情 */
function handleStorDetail(row) {
  storDetailRow.value = row
  storDetailOpen.value = true
}

/** 新增出库 */
function handleDelAdd() {
  delForm.value = {
    hachGuid: detail.value.guid,
    delTime: undefined,
    delType: undefined,
    quantity: undefined,
    handle: undefined,
    auditor: undefined,
    note: undefined
  }
  delOpen.value = true
}

/** 提交出库表单 */
function submitDelForm() {
  proxy.$refs["delRef"].validate(valid => {
    if (valid) {
      addBisHachDel(delForm.value).then(response => {
        proxy.$modal.msgSuccess("新增成功")
        delOpen.value = false
        getDelList()
      })
    }
  })
}

/** 出库详情 */
function handleDelDetail(row) {
  delDetailRow.value = row
  delDetailOpen.value = true
}

onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
