<!-- 库存报告 -->
<template>
  <div class="box">
    <div class="title-box" v-if="zkcList.orgName">
      <div class="btn">
        <span class="right-img"></span>
        <p class="tle-btn">{{ zkcList.orgName }}</p>
      </div>
      <div style="margin-bottom: 12px;" class="left-btn">
        <span class="text-btn">{{ '总库存: ' }}</span>
        <span class="text-data">{{ zkcList.totalStock }}</span>
        <span class="text-btn">{{ ' 吨 ; 其中：' }}</span>
      </div>
    </div>
    <p class="left-btn" v-if="xzList.length > 0"><span class="text-btn">{{ '分品种看：' }}</span>
      <span v-for="(item, index) in xzList" :key="index">
        <span class="text-btn"> {{ item.GrainGrade + '：' }}</span>
        <span class="text-data">{{ item.TotalKilograms + ' ' }}</span>
        <span class="text-btn">{{ ' 吨 ; ' }}</span>
      </span>
    </p>
    <p class="left-btn" v-if="xzpz.length > 0">
      <span class="text-btn">{{ '分性质看：' }}</span>
      <span v-for="(item, index) in xzpz" :key="index">
        <span class="text-btn">{{ item.GrainNature + '：' }}</span>
        <span class="text-data"> {{ item.TotalKilograms }}</span>
        <span class="text-btn">{{ ' 吨；' }}</span>
      </span>
    </p>
    <p class="left-btn" v-if="nxList.length > 0">
      <span class="text-btn">{{ '分年限看：' }}</span>
      <span v-for="(item, index) in nxList" :key="index">
        <span class="text-btn">{{ item.inventoryYear + ' 年：' }}</span>
        <span class="text-data">{{ item.yearlyStock }}</span>
        <span class="text-btn">{{ ' 吨，' }}</span>
      </span>
    </p>
    <div class="text-btn" style="text-align: center;"
      v-if="zkcList != {} && xzList.length == 0 && xzpz.length == 0 && nxList.length == 0">
      {{ '暂无数据' }}</div>
  </div>
</template>
<script setup>
import reserveDataApi from '@/api/reserveData.info/reserveDataApi'
import { useRouter } from 'vue-router'

const xzList = ref([])
const onSearch = () => {
  reserveDataApi.businessGradeRepot({ orgId: useRouter().currentRoute.value.query.orgId, }).then((res) => {
    xzList.value = res
  })
}
const xzpz = ref([])
const onSearch1 = () => {
  reserveDataApi.businessNatureRepot({ orgId: useRouter().currentRoute.value.query.orgId, }).then((res) => {
    xzpz.value = res
  })
}
const zkcList = ref({})
const onSearch2 = () => {
  reserveDataApi.businessSumRepot({ orgId: useRouter().currentRoute.value.query.orgId, }).then((res) => {
    if (res == null) {
      zkcList.value = {}
    } else {
      zkcList.value = {
        orgName: res.orgName,
        totalStock: res.totalStock
      }
    }
  })
}
const nxList = ref([])
const onSearch3 = () => {
  reserveDataApi.businessYearRepot({ orgId: useRouter().currentRoute.value.query.orgId, }).then((res) => {
    nxList.value = res
  })
}

onMounted(() => {
  onSearch(), onSearch1(), onSearch2(), onSearch3()
})
</script>
<style lang="less" scoped>
.box {
  margin-top: 16px;
  height: 600px;
}


.btn {
  display: flex;
  padding-left: 18px;
  height: 52px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), #eaf2ff);
  border-radius: 8px;
  margin-bottom: 24px;
}

.left-btn {
  margin-left: 24px;
}

.text-data {
  font-size: 28px;
  font-weight: bold;
  color: #1890ff;
}

.text-btn {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.tle-btn {
  margin: auto 4px;
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

.right-img {
  background-image: url('../../../../assets/img/标题三角图标.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  width: 20px;
  height: 22px;
  margin: auto 4px;
  margin-top: 18px;
}
</style>