<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { Ref, inject, onMounted, ref } from 'vue'
import { getProductline } from '../api'
// import InfinityList from './InfinityList/index.vue'

const profile = <Ref>inject('profile')

const activeName = ref('search')
const searchInput = ref('')
const options = <any>ref([])
const textarea = ref('')

async function fetchProductLine() {
  try {
    const response = await getProductline({ profileId: profile.value.profile_id })
    options.value = response.data
  } catch (error) {
    console.log('error:', error)
  }
}

onMounted(() => {
  fetchProductLine()
})
</script>

<template>
  <div class="flex justify-between border border-solid border-inherit rounded-md">
    <div style="flex: 2 1 0; border-right: 1px solid #e6e6e6">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="搜索" name="search">
          <div class="flex gap-1 p-2">
            <el-input v-model="searchInput" placeholder="输入产品标题/父ASIN/ASIN查询" :prefix-icon="Search" style="width: 360px" />
            <el-select>
              <el-option v-for="item in options" :key="item.productlineId" :label="item.productlineName" :value="item.productlineId" />
            </el-select>
            <el-select></el-select>
          </div>
          <!-- <InfinityList></InfinityList> -->
        </el-tab-pane>
        <el-tab-pane label="输入" name="input" class="w-full p-2">
          <el-input v-model="textarea" :autosize="{ minRows: 10, maxRows: 100 }" type="textarea" placeholder="Please input" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="flex: 1 1 0">
      <div class="h-10" style="background-color: #edf0f8">已添加:</div>
    </div>
  </div>
</template>

<style scoped>
/* Tab栏 */
:deep(.el-tabs__nav-scroll) {
  overflow: hidden;
  margin-left: 10px;
}
</style>
