<template>
  <div
    class="flex-between uno-h-54 border-b border-gray-200 cursor-pointer"
    v-for="item in renderDict"
    :key="item.id"
    @click="onClick(item)"
  >
    <div class="flex-1 flex-middle uno-pl-15">
      <WlSvgIcon
        :type="item.icon"
        width="20"
        height="20"
        color="var(--wl-primary-color)"
      />
      <p class="uno-ml-15 uno-fs-16 flex-1">{{ item.name }}</p>
      <div class="flex-middle uno-pxy-10">
        <WlSvgIcon
          type="arrowRight"
          width="20"
          height="20"
          color="#999"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Structure",
};
</script>

<script setup lang="ts">
import { ref } from "vue";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";;
import { TFrameWorkData } from "@mobileUI/typings/BCEmployeeSelector";

const emit = defineEmits<{
  (e: "onClickFrameWork", val: TFrameWorkData);
}>();

const renderDict = ref<TFrameWorkData[]>([
  // {
  //   id: "1",
  //   icon: company,
  //   name: "上下游",
  // },
  {
    id: "2",
    icon: "organizationFill",
    name: "组织架构",
  },
]);

const onClick = (item: TFrameWorkData) => {
  emit("onClickFrameWork", item);
};
</script>
