<!-- 出入库记录 -->
<template>
  <div class="box">
    <div class="list" v-for="(item, index) in tableData" :key="index">
      <div :class="'list_left list_left_' + item.parentID"></div>
      <div :class="'list_right list_right_' + index">
        <div class="crkjl">
          {{ item.type == "1" ? "入库" : "出库" }}
        </div>
        <div class="crksf">
          {{ item.shengName }}
        </div>
        <div class="list_card card_top">
          <div class="card_left" :title="item.materialName">{{ item.materialName }}</div>
          <div class="card_right">{{ item.quantity }}</div>
        </div>
        <div class="list_card card_line">
          <div class="card_left"></div>
          <div class="card_right"></div>
        </div>
        <div class="list_card card_bottom">
          <div class="card_left">{{ item.specs }}</div>
          <div class="card_right">{{ item.boundTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, toRefs } from "vue";
import { getRecords } from "@/api/keshihua/detail";
import { useRoute } from "vue-router";

let route = useRoute();
const props = defineProps({ msg: String });
const data = reactive({
  tableData: [],
  selectType: "0",
  selectValue: ""
});
let { tableData, selectType, selectValue } = toRefs(data);

const getList = () => {
  const data = reactive({
    // type: selectType.value,
    // name: route.query.name ? route.query.name : ""
    type: ""
  });
  getRecords(data).then((res: any) => {
    if (res) {
      tableData.value = res;
    }
  });
};
const selectHandleCh = (val: any) => {
  selectType.value = val;
  getList();
};

defineExpose({
  selectHandleCh
});
onMounted(() => {
  getList();
});
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 22px 20px 45px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: -60px;
  padding-top: 60px;
}
.list {
  width: 100%;
  height: 7vh;
  box-sizing: border-box;
  margin-top: 12px;
  background: url("@/assets/emergencyImg/crk_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  position: relative;
}
.list .crkjl {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-20px, 0);
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.list .crksf {
  position: absolute;
  bottom: 58%;
  left: 50%;
  transform: translate(-100px, 0);
  width: 200px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
.list .list_right {
  width: 84%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.list_card {
  display: flex;
}
.list_card .card_left {
  width: 30%;
}
.list_card .card_right {
  width: 70%;
  text-align: right;
}
.card_top,
.card_bottom {
  height: 49%;
}
.card_line {
  height: 2%;
}
.card_line .card_left {
  background: #b69815;
}
.card_line .card_right {
  background: #044bcc;
}
.card_top .card_left,
.card_top .card_right {
  line-height: 200%;
}
.card_top .card_left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list .list_left {
  width: 16%;
}
.list .list_left_9 {
  background: url("@/assets/emergencyImg/crk_bedclothes.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_10 {
  background: url("@/assets/emergencyImg/crk_bedding.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_11 {
  background: url("@/assets/emergencyImg/crk_appliance.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_12 {
  background: url("@/assets/emergencyImg/crk_tents.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_4 {
  background: url("@/assets/emergencyImg/crk_lifesaving.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_6 {
  background: url("@/assets/emergencyImg/crk_material.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_8 {
  background: url("@/assets/emergencyImg/crk_water.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_7 {
  background: url("@/assets/emergencyImg/crk_drainage.png") no-repeat;
  background-size: 100% 100%;
}
.list .list_left_5 {
  background: url("@/assets/emergencyImg/crk_rescue.png") no-repeat;
  background-size: 100% 100%;
}
/* 防洪铅丝网 */
.list .list_left_0 {
  background: url("@/assets/emergencyImg/crk_net.png") no-repeat;
  background-size: 100% 100%;
}
/* .list_right_0 .card_line .card_left,
.list_right_1 .card_line .card_left,
.list_right_2 .card_line .card_left,
.list_right_3 .card_line .card_left {
  width: 12%;
}
.list_right_0 .card_line .card_right,
.list_right_1 .card_line .card_right,
.list_right_2 .card_line .card_right,
.list_right_3 .card_line .card_right {
  width: 88%;
}
.list_right_4 .card_line .card_left,
.list_right_5 .card_line .card_left,
.list_right_6 .card_line .card_left,
.list_right_7 .card_line .card_left,
.list_right_8 .card_line .card_left {
  width: 20%;
}
.list_right_4 .card_line .card_right,
.list_right_5 .card_line .card_right,
.list_right_6 .card_line .card_right,
.list_right_7 .card_line .card_right,
.list_right_8 .card_line .card_right {
  width: 80%;
}
.list_right_9 .card_line .card_left {
  width: 26%;
}
.list_right_9 .card_line .card_right {
  width: 74%;
} */
</style>
