import { css } from "@linaria/core";
import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
import { useCtx } from "../../context";
import { ShowItem } from "@/modules/list/state";
import Dialog from "./dialog";
import { conformsTo, divide } from "lodash";
import dialog from "@/modules/list/actions/dialog";

//3D数字设计一体化服务平台
//三维数字资产一体化服务平台

export default defineComponent({
  setup() {
    const ctx = useCtx();
    const { list } = ctx;
    const state = reactive({
      scrollY: [],
      dialogId: 0,
    });
    function clickItem(e: any, itemIndex: number) {
      // item.show = !item.show;
      list.actions.addDialog(e, itemIndex);
    }

    const rows: number[] = [];
    for (let i = 0; i < list.state.totalRow; i++) {
      rows.push(i);
    }

    function renderRow(start: number, end: number) {
      const arr = [];
      for (let i = start; i < end; i++) {
        const item = list.state.items[i];

        let style = {
          // width: item.w + "px",
        };

        arr.push(
          <div class="item" style={style} onClick={(e) => clickItem(e, i)}>
            <img key={i} src={item.url} />
            <div class={"name"}>{item.name}</div>
            {/* <span class="debug">
              {`${Math.round(item.offsetX)}, ${Math.round(item.currX)}`}
            </span> */}
          </div>
        );
      }
      return arr;
    }

    const rootRef = ref<HTMLElement>();
    const scrollRefs = ref();
    onMounted(async () => {
      await list.actions.loadData(
        rootRef.value?.clientWidth as number,
        rootRef.value?.clientHeight as number
      );    
    
      scrollInit();
      scrollRoot();
    });

    let timmerRef = ref<any>(0);
    let speedRef = ref<number>(1);
    onUnmounted(() => {
      if (timmerRef.value) {
        window.cancelAnimationFrame(timmerRef.value);
      }
    });
    const MoveStart = (id: number) => {
      state.dialogId = id;
    };
    const scrollInit = () => {
      rows.map((e, i) => {
        state.scrollY[i] = -(
          scrollRefs[i].clientHeight - list.state.parentHeight
        );
      });
    };
    const scrollRoot = () => {
      rows.map((e, i) => {
        if (i % 2 == 0) {
          state.scrollY[i] += speedRef.value * 2;
        } else if (i % 3 == 0) {
          state.scrollY[i] += speedRef.value * 3;
        } else {
          state.scrollY[i] += speedRef.value;
        }

        if (state.scrollY[i] >= 0) {
          state.scrollY[i] = -(
            scrollRefs[i].clientHeight - list.state.parentHeight
          );
        }
      });

      timmerRef.value = window.requestAnimationFrame(scrollRoot);
    };

    return () => (
      <div class={rootStyle} ref={rootRef}>
        {rows.map((item, index) => {
          const rowCount = list.state.rowCount;
          const start = index * rowCount;
          const end = start + rowCount;

          return (
            <div class="row">
              <div
                class="content"
                ref={(el) => (scrollRefs[index] = el)}
                style={{ transform: `translateY(${state.scrollY[index]}px)` }}
              >
                {renderRow(start, end)}
              </div>
            </div>
          );
        })}

        {list.state.dialogs.map((item) => (
          <Dialog data={item} key={item.id} onMove={MoveStart} />
        ))}
      </div>
    );
  },
});

const rootStyle = css`
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  background-color: #3f322c;
  overflow: hidden;
  user-select: none;
  flex-flow: row;
  padding-top: 0.1rem;
  padding-left: 0.1rem;

  .row {
    position: relative;
    flex: 1;
    margin-right: 0.1rem;
    width: 0;
    flex-shrink: 0;

    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* transition:transform 0.5s linear ; */
      /* animation: scroll 300s linear infinite; */
      img {
        pointer-events: none;
        width: 100%;
        object-fit: contain;
      }

      .item {
        position: relative;
        margin-bottom: 0.1rem;
        cursor: pointer;
        .name {
          width: 100%;
          padding: 0.04rem 0;
          color: #fff;
          font-size: 0.12rem;
          text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .debug {
          position: absolute;
          left: 0;
          color: red;
        }
      }
    }
  }
  @keyframes scroll {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
`;
