<template>
  <div class="demo productPrices" style="height: 90%">
    <div class="box">
      <div class="label">
        <div>产品名称</div>
        <div>产品批次号</div>
        <div>产品规格</div>
        <div>产品类型</div>
      </div>
      <vue3ScrollSeamless class="list" :class-options="classOptions" :data-list="list">
        <ul class="case-info">
          <li v-for="(item, index) in list" :key="index" @click="handleInfo(item)">
            <div>{{ item.productName }}</div>
            <div>{{ item.productCode }}</div>
            <div>{{ item.specs }}</div>
            <div>{{ item.productType }}</div>
          </li>
        </ul>
      </vue3ScrollSeamless>
    </div>
  </div>
  <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
    <i class="el-icon-close" @click="handleCloseInfo"></i>
    <section>
      <div class="traceability_info">
        <div class="_label" style="font-size: 30px">溯源信息</div>
        <div class="traceability_info_box">
          <div class="traceability_info_box_image">
            <img v-if="info.productName === '番茄'" src="../../../assets/images/entities/tomatoImg.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '芹菜'" src="../../../assets/images/entities/芹菜.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '白菜'" src="../../../assets/images/entities/白菜.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '铁皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '紫皮石斛'" src="../../../assets/images/entities/石斛.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '黑皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '黄皮甘蔗'" src="../../../assets/images/entities/3.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '红茶'" src="../../../assets/images/entities/红茶.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '核桃'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
            <img v-else-if="info.productName === '核桃仁'" src="../../../assets/images/entities/核桃.png" style="width: 100%; height: 100%" />
          </div>
          <div class="traceability_info_box_title">
            <div class="traceability_info_right">新鲜{{ info.productType }}</div>
            <div class="traceability_info_right_bottom">检测通过</div>
          </div>
        </div>
      </div>
      <div class="detection_text">权威检测</div>
      <section>
        <div v-for="item in list1" :key="item.name" class="info_box">
          <div v-if="item.title === '样品名称'">
            <span class="_label">{{ item.title }}</span>
            <span>{{ info.productType }}</span>
          </div>
          <div v-else class="info_box">
            <span class="_label">{{ item.title }}</span>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </section>
      <section class="route_box">
        <!-- <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
          <div class="_circle"></div>
          <div class="_name">{{ item.name }}</div>
          <div class="_time">{{ item.time }}</div>
        </div> -->
        <div style="text-align: center">
          <img src="../../../assets/images/trace/testReport.png" style="width: 100%" />
          <!-- <div>检测报告</div> -->
        </div>
      </section>
      <div class="detection_text">产地信息</div>
      <div class="traceability_info">
        <div class="traceability_info_box" style="flex-direction: column">
          <div class="traceability_info_box_images">
            <img style="width: 100%; height: 100%" src="../../../assets/images/trace/maprl.png" />
          </div>
          <div class="traceability_info_box_titles">
            <div class="traceability_info_rights">临沧市耿马县耿马镇</div>
          </div>
        </div>
      </div>
      <div class="detection_text">仓储环节</div>
      <section class="info_box">
        <div v-for="item in list2" :key="item.name">
          <span class="_label">{{ item.title }}</span>
          <span>{{ item.name }}</span>
        </div>
      </section>
      <div class="detection_text">物流环节</div>
      <section class="info_box">
        <div v-for="item in list3" :key="item.name">
          <span class="_label">{{ item.title }}</span>
          <span>{{ item.name }}</span>
        </div>
      </section>
    </section>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
import testData from './list.json';
const props = defineProps({
  //   items: {
  //     type: Array,
  //     default: () => [],
  //   },
});
onMounted(() => {
  list.value = testData.data;
});
let list = ref([]);

let list1 = ref([
  { title: '报告编号', name: 'H1212457' },
  { title: '送检单位', name: '水果综合种植基地' },
  { title: '送检日期', name: '2021-12-11' },
  { title: '送样人', name: '李宏微' },
  { title: '联系方式', name: '19876782134' },
  { title: '样品数量', name: '1000克' },
  { title: '样品名称', name: '新鲜番茄' },
  { title: '检测单位', name: '农残检测中心' },
  { title: '检测类型', name: '农残检测' },
  { title: '检测方法', name: '食品快速检测法' },
  { title: '评判标准', name: 'GB/T5009.199-2003' },
  { title: '检测结果', name: '合格' },
]);

let list2 = ref([
  { title: '仓库位置', name: '耿马县耿马村仓储站' },
  { title: '仓储数量', name: '5吨' },
  { title: '入库时间', name: '2021-12-11' },
  { title: '仓库类型', name: '冷藏仓库' },
  { title: '批次编号', name: 'AP20211212001' },
  { title: '出库时间', name: '2021-12-15' },
]);

let list3 = ref([
  { title: '运输批次', name: '第一批次' },
  { title: '运输工具', name: '冷藏车' },
  { title: '运输路线', name: '耿马县一昆明市' },
  { title: '运输数量', name: '4吨' },
  { title: '运输时间', name: '2021-12-15 5:30~12-16 8:30' },
  { title: '', name: '' },
  { title: '运输批次', name: '第二批次' },
  { title: '运输工具', name: '小型运载卡车' },
  { title: '运输路线', name: '耿马县一四排乡' },
  { title: '运输数量', name: '1吨' },
  { title: '运输时间', name: '2021-12-15 5:30~12-16 7:30' },
]);

const classOptions = {
  singleHeight: 48,
};
const info = ref({
  show: false,
});
function handleInfo(item) {
  info.value = Object.assign({ show: true }, item);
}
function handleCloseInfo() {
  info.value = { show: false };
}
</script>

<style scoped lang="scss">
.productPrices {
  .box {
    height: 100%;
    .label {
      display: grid;
      grid-template-columns: 25% 40% 18% 17%;
      background-color: rgba(70, 109, 109, 0.8);
      color: #ffffff;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      padding-left: 20px;
      box-sizing: border-box;
      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:nth-of-type(1) {
          flex: 1.5;
        }
      }
    }
    .list {
      height: calc(100% - 30px);
      overflow: hidden;
      .case-info {
        color: #fff;
        padding: 0;
        margin: 0;
        padding-left: 20px;
        box-sizing: border-box;
        li {
          display: grid;
          grid-template-columns: 25% 40% 18% 17%;
          height: 34px;
          line-height: 34px;
          cursor: pointer;
          div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #35d0c0;
            // pointer-events: none;
          }
        }
      }
    }
  }
}
.line_info {
  position: fixed;
  padding: 24px 10px 16px 16px;
  right: 30%;
  top: var(--top);
  max-height: 85vh;
  width: 400px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid #01fefd;
  border-radius: 16px;
  backdrop-filter: blur(4px);
  z-index: 9999;
  transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
  font-size: 18px;
  .detection_text {
    font-size: 25px;
    margin-bottom: 20px;
  }
  .traceability_info {
    .traceability_info_box {
      justify-content: space-evenly;
      padding: 10px;
      display: flex;
      margin: 20px 0px;
      background-color: rgba(70, 109, 109, 0.8);
      border-radius: 10px;
      .traceability_info_box_image {
        width: 130px;
        height: 75px;
      }
      .traceability_info_box_images {
        width: 100%;
        height: 150px;
      }

      .traceability_info_box_title {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 75px;
      }
      .traceability_info_box_titles {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: start;
      }
      .traceability_info_right {
        font-size: 23px;
        color: #fff;
      }
      .traceability_info_rights {
        font-size: 15px;
        color: #fff;
      }
      .traceability_info_right_bottom {
        padding: 5px 20px;
        border-radius: 40px;
        background-color: rgba(0, 0, 0, 0.2);
        color: #04ed8c;
        font-size: 17px;
      }
    }
  }
  ._label {
    color: #01fefd;
  }
  .el-icon-close {
    position: absolute;
    right: -40px;
    top: 0px;
    cursor: pointer;
    font-size: 16px;
    width: 30px;
    height: 30px;
    background-image: url(../../../assets/images/trace/delete.png);
    background-size: contain;
  }
  > section {
    padding-right: 10px;
    max-height: calc(85vh - 100px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background-color: #dddddd;
      border-radius: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #959191;
      border-radius: 6px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background-color: #a0a0a0;
    }
    .info_box {
      > div {
        margin-bottom: 12px;
        display: grid;
        grid-template-columns: 40% 60%;
        span {
          &:last-child {
            text-align: right;
          }
        }
      }
    }
    .route_box {
      > div {
        position: relative;
        padding-bottom: 16px;
        &::after {
          content: '';
          position: absolute;
          top: 12px;
          left: -11px;
          height: 100%;
          border: 1px solid #fff;
        }
        &:last-child {
          &::after {
            display: none;
          }
        }
        > div {
          position: relative;
          padding-left: 12px;
        }
        ._circle {
          position: absolute;
          top: 4px;
          left: -16px;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #fff;
          box-shadow: 0 0 3px #fff;
        }
        ._name {
          margin-bottom: 6px;
          font-size: 20px;
          font-weight: bold;
          font-family: '黑体';
          color: #01fefd;
        }
      }
    }
  }
}
</style>
