<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年9月11日 19:24:50
 */
import { ref } from "vue";
import { $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();

let leftList = ref({}); // 左侧列表
let tabIndex = ref(""); // 默认选中
let rightLeft = ref([]); // 右侧列表
let selectList = ref([]); // 选中列表

const getAllItems = async (e) => {
  const response = await $api("GetAllItems", {
    search: e?.value,
  });
  $response(response, () => {
    leftList.value = response.data.list;
    if (Object.keys(leftList.value).length) {
      let keys = Object.keys(leftList.value);
      tabIndex.value = keys[0];
      rightLeft.value = leftList.value[keys[0]].children;
    }
  });
};

const mountedAction = () => {
  getAllItems();
};

const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
  </view>
  <view class="bg-#d8edf2">
    <uni-search-bar
      class="search"
      radius="100"
      placeholder="请输入关键字搜索"
      @clear="getAllItems()"
      @cancel="getAllItems()"
      @confirm="getAllItems"
    />
  </view>
  <view class="mt-20rpx flex min-h-100%">
    <view class="min-w-214rpx max-w-214rpx mr-20rpx h-100% text-center">
      <view
        class="w-100% rounded-r-full text-#0E0E0E text-25rpx px-20rpx w-100% center h-84rpx box-border"
        v-for="(item, index) in leftList"
        :key="index"
        :class="{
          'bg-gradient-to-r from-#edf6f5 to-#bbdfe2': tabIndex == index,
        }"
        @click="(tabIndex = index), (rightLeft = item.children)"
      >
        {{ item.title }}
      </view>
    </view>
    <view class="grow h-100% bg-#fff">
      <view
        v-for="(item, index) in rightLeft"
        :key="index"
        :class="{
          '!b-0': index == rightLeft.length - 1,
        }"
        class="flex justify-between center py-30rpx px-20rpx b-b-1px b-b-solid b-b-#e5e5e5"
        @click="
          () => {
            selectList.push(item.id);
          }
        "
      >
        <text class="w-40% text-#0E0E0E text-25rpx">{{ item.title }}</text>
        <view class="w-50% items-center flex justify-end">
          <text class="text-#EC3D15 text-26rpx mr-40rpx"
            >¥ {{ item.price }}</text
          >
          <view
            :class="{
              '!bg-#EEA61E !b-#EEA61E': selectList.includes(item.id),
            }"
            class="w-24rpx h-24rpx b-1 b-solid b-#DCDCDC bg-#F8F8F8 rounded-3rpx center"
          >
            <image
              v-if="selectList.includes(item.id)"
              class="w-20rpx"
              src="@/static/assets/select.png"
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped>
.search > .uni-searchbar__box {
  justify-content: flex-start !important;
}
</style>
