<template>
  <div class="100vw">
    <div class="relative w-full mt50">
      <span class="font24 font-bold lh40">{{ query.signClassName }}</span>
      <div
        @click="
          () => {
           $router.back();
          }
        "
        class="right30 w72 lh40 h40 absolute right0 top0 bg-primary-yellow flex items-center justify-center cursor-pointer"
      >
        <img class="w18 h16" src="@/assets/img/markLine/back_icon.png" />
        <span class="ml4">返回</span>
      </div>
    </div>
    <div class="text-left font16">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="inline-block text-left ml20"
      >
        <div
          class="w200 h184 justify-center text-center border-gray pt12 inline-block cursor-pointer mb20"
        >
          <div class="w100 h100 margin-center">
            <preImage :src="item.signUrl">
              <div class="font-bold font24">向左转弯</div>
              <div class="font24 w-full">{{ index+1 }}/{{ list.length }}</div>
            </preImage>
          </div>

          <div class="mt21 font-bold">{{ item.signName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import preImage from "@/components/preImage/index.vue";
import forbiddenMark from "@/assets/img/home/forbidden_mark.png";
import api from "@/api";
import { trafficApi } from "@/api/traffic/type";
export default defineComponent({
  setup() {
    return {
      forbiddenMark: forbiddenMark,
      list: ref<trafficApi.signList["rows"]>([]),
      query: {
        parentId: "0",
        signClassName: "",
      },
    };
  },
  mounted() {
    this.query.parentId = this.$route.query.parentId as string;
    this.query.signClassName = this.$route.query.signClassName as string;
    api.traffic
      .trafficSignList({
        parentId: Number(this.query.parentId),
      })
      .then((res) => {
        this.list = res.rows;
      });
  },
  components: {
    preImage,
  },
});
</script>

<style scoped>
.border-gray {
  border: 1px solid #e8e8e8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
.margin-center {
  margin: 0 auto;
}
</style>