<template>
  <div class="image-view h-full">
    <div class="tree-wrap">
      <div class="top">
        <div class="result-list">科目1；机器1；批次1</div>
        <div class="bread">
          <span :class="{ active: chooseLevel >= 1 }">科目</span>
          <i>&gt;</i>
          <span :class="{ active: chooseLevel >= 2 }">机器</span>
          <i>&gt;</i>
          <span :class="{ active: chooseLevel == 3 }">批次</span>
        </div>
      </div>
      <div class="bottom">
        <div
          v-for="(item, index) in leftList"
          :key="index"
          class="list-row"
          :class="{ active: activeIndex === index }"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="info-wrap">
      <Accordion :arr="arr">
        <template #one>11111</template>
      </Accordion>
    </div>
    <div class="image-wrap"></div>
  </div>
</template>
<script name="ImageView" lang="ts" setup>
import { ref, computed } from "vue";

const arr = ref([{ title: "搜索条件", name: "one", open: true }]);

const listType = ref("kemu");
const chooseLevel = computed(() => {
  return listType.value === "kemu" ? 1 : listType.value === "jiqi" ? 2 : 3;
});
const leftList = ref([{ name: "批次1" }, { name: "批次2" }, { name: "批次3" }]);
const activeIndex = ref(0);
const imgList = ref([
  {
    url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203102-1.jpg",
  },
  {
    url: "https://cet-test.markingtool.cn/file/slice/1/2/10101/1/031/1/101011221203101-1.jpg",
  },
  {
    url: "https://cet-test.markingtool.cn/file/slice/1/2/10100/1/035/1/101001221203502-1.jpg",
  },
]);
</script>
<style lang="less" scoped>
.image-view {
  .image-wrap {
    height: 100%;
    border-left: 1px solid #e5e6eb;
    border-right: 1px solid #e5e6eb;
    background: #eceef1;
    margin-left: 284px;
    margin-right: 400px;
  }
  .tree-wrap {
    width: 284px;
    float: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    .bottom {
      flex: 1;
      overflow: auto;
      padding: 10px 8px;
      .list-row {
        padding: 6px 12px;
        line-height: 22px;
        color: @text-color1;
        cursor: pointer;
        &.active {
          font-weight: bold;
          background: #e8f3ff !important;
          border-radius: 6px;
        }
        &:hover {
          background: #f6f6f6;
          border-radius: 6px;
        }
      }
    }
    .top {
      border-bottom: 1px solid #e5e5e5;
      padding: 16px;
      .bread {
        margin-top: 16px;
        i {
          font-style: normal;
          color: @text-color3;
          margin: 0 4px;
        }
        span {
          color: @text-color3;
          &.active {
            color: @text-color1;
          }
        }
      }
      .result-list {
        background: #f2f3f5;
        border-radius: 6px;
        padding: 6px 8px;
        line-height: 20px;
        color: @text-color1;
      }
    }
  }
  .info-wrap {
    width: 400px;
    float: right;
    height: 100%;
  }
}
</style>
