<template>
  <div style="display: flex">
    <div style="display: flex; margin-right: 7px">
      <div
        v-if="userStore?.info?.tenantCode === 'gov'"
        @click="changeRelate"
        class="wordStyle"
        style="margin-right: 10px"
        >绑定企业</div
      >
      <div
        v-if="(props.subItem as ComAddDatas).parentId !== undefined"
        @click="changeConig"
        class="wordStyle"
        style="margin-right: 10px"
        >页面设置</div
      >
      <div v-else style="margin-right: 10px; width: 122px"></div>
      <div v-if="!isWorkshop" @click="changeAdd" class="wordStyle">添加下一级</div>
      <div v-else style="margin-right: 10px; width: 67px"></div
    ></div>
    <div style="width: 1px; height: 14px; color: #e9e9e9; margin-right: 14px">|</div>
    <img src="../../../assets/icons/edit.png" @click="changeEdit" class="action-img" alt="" />
    <img src="../../../assets/icons/delete.png" @click="changeDelete" class="action-img" alt="" />
    <img
      src="../../../assets/icons/up.png"
      @click="changeUp"
      :class="{ 'action-disable': isFirst, 'action-img': !isFirst }"
      alt=""
    />
    <img
      src="../../../assets/icons/down.png"
      @click="changeDown"
      :class="{ 'action-disable': isLast, 'action-img': !isLast }"
      alt=""
    />
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { ComAddDatas, WorkshopAddDatas, WorkspaceAddDatas } from '@/api/scene/sceneOperate.ts';
  import useScene from './use-scene';
  import { storeToRefs } from 'pinia';
  import { useUserStore } from '@/store/modules/user';

  // '
 const userStore = useUserStore();
  const useSceneList = useScene();
  const { tableData } = storeToRefs(useSceneList);

  const props = defineProps<{
    subItem: ComAddDatas | WorkshopAddDatas | WorkspaceAddDatas;
    handleRelate: (row) => unknown;
    handleConig: (row) => unknown;
    handleAdd: (row) => unknown;
    handleEdit: (row) => unknown;
    handleDelete: (row) => unknown;
    handleUp: (row) => unknown;
    handleDown: (row) => unknown;
  }>();

  const isWorkshop = computed(() => {
    return (props.subItem as any).workshopId ? true : false;
  });

  const isFirst = computed(() => {
    return (props.subItem as any).serial === 0 ? true : false;
  });

  const isLast = computed(() => {
    if ((props.subItem as any).parentId === 0) {
      return (props.subItem as any).serial === tableData.value.length - 1 ? true : false;
    } else {
      return (props.subItem as any).serial === (props.subItem as any).parent?.children.length - 1
        ? true
        : false;
    }
  });

  const changeRelate = () => {
    props.handleRelate(props.subItem);
  };

  const changeConig = () => {
    props.handleConig(props.subItem);
  };

  const changeAdd = () => {
    props.handleAdd(props.subItem);
  };

  const changeEdit = () => {
    props.handleEdit(props.subItem);
  };

  const changeDelete = () => {
    props.handleDelete(props.subItem);
  };

  const changeUp = () => {
    props.handleUp(props.subItem);
  };

  const changeDown = () => {
    props.handleDown(props.subItem);
  };
</script>

<style scoped>
  .wordStyle {
    height: 22px;
    font-size: 14px;
    color: #1890ff;
    line-height: 22px;
    cursor: pointer;
    margin-right: 7px;
  }

  .otp-btn {
    width: 52px;
    height: 26px;
  }

  :deep(.el-button--primary) {
    --el-button-bg-color: #3f9eff;
    --el-button-hover-bg-color: #64b0fe;
    --el-button-active-bg-color: #2f8ae7;
  }
  :deep(.el-button--danger) {
    --el-button-bg-color: #f56c6c;
    --el-button-hover-bg-color: #f68888;
    --el-button-active-bg-color: #c35353;
  }

  .action-img {
    margin-right: 10px;
    cursor: pointer;
    height: 16px;
    margin-top: 5px;
  }
  .action-disable {
    margin-right: 10px;
    height: 16px;
    margin-top: 5px;
    filter: grayscale(100%);
    cursor: not-allowed;
  }
</style>
