<script lang="ts" setup>
import { onMounted, reactive, ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
import { useShopInfo } from '/@/stores/shopInfo'
import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { request } from '/@/utils/service'


const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
const formSize = ref('default')
const labelPosition = ref('top')
const loading = ref(true)
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
  negativeGoodsTextarea: string
}
const ruleForm = reactive<RuleForm>({
  negativeGoodsTextarea: '',
})
const rules = computed(() => ({}))
const activeName = ref('first')
const negativeInput = ref('')
const negativeTableData = ref([])
let addedSels = []
const addedNegetiveTableData = ref([])


//--------------------------------------------------------------------------------------------------------------------------------------------------------------

function setNegativeTableData(asin = '',) {
  return request({
    url: '/api/sellers/listings/',
    method: 'GET',
    params: {
      // page: currentPage.value,
      // limit: pageSize.value,
      profile_id: profile.value.profile_id,
      asin,
    },
  })
    .then((resp) => {
      negativeTableData.value = resp.data
      loading.value = false
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
      loading.value = false
    })
}

function searchNegative(e) {
  if (e === '') {
    negativeTableData.value = []
  } else {
    setNegativeTableData(e)
  }
}

function addSingleNegative(scope) {
  console.log('scope', scope.row)

  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.sku === scope.row.sku)
  if (!isAlreadyAdded) {
    addedNegetiveTableData.value.push(scope.row)
  } else {
    console.log('Item is already added.')
  }
}

function addNegativeGoods() {
  // console.log('ruleForm.negativeGoodsTextarea', ruleForm.negativeGoodsTextarea)
  const x = setNegativeTableData(ruleForm.negativeGoodsTextarea)
  console.log('x', x)
}

function delAllNegativeGoods() {
  addedNegetiveTableData.value = []
}

function delSingleNegativeGoods(scope) {
  const index = addedNegetiveTableData.value.findIndex((item) => item.sku === scope.row.sku)

  if (index !== -1) {
    addedNegetiveTableData.value.splice(index, 1)
    console.log('Item removed successfully.')
  } else {
    console.log('Item not found.')
  }
}

function handleAddedChange(selection) {
  addedSels = selection
}

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const headerCellStyle = (args) => {
  // console.log('args', args)
  if (args.rowIndex === 0) {
    return {
      backgroundColor: 'rgba(245, 245, 245, 0.9)',
    }
  }
}

</script>

<template>
  <el-form
    :label-position="labelPosition"
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>

    <el-form-item prop="matchType" style="width: 100%; margin-top: 20px">
            <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
              <div style="width: 50%; border-right: 1px solid #c2c7cf">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane label="搜索" name="first">
                    <div style="margin-bottom: 10px">
                      <el-input placeholder="按ASIN搜索" v-model="negativeInput" @change="searchNegative" clearable />
                    </div>
                    <el-table
                      height="415"
                      style="width: 100%"
                      v-loading="loading"
                      :data="negativeTableData"
                      :header-cell-style="headerCellStyle"
                      :show-header="false">
                      <el-table-column prop="asin" label="商品">
                        <template #default="scope">
                          <div style="display: flex; align-items: center">
                            <div style="margin-right: 8px; line-height: normal">
                              <el-image class="img-box" :src="scope.row.image_link" />
                            </div>
                            <div>
                              <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                                <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
                              </el-tooltip>
                              <span>
                                ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                              </span>
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="Name" width="120" align="right">
                        <template #header> </template>
                        <template #default="scope">
                          <el-button type="primary" size="small" @click="addSingleNegative(scope)" text>添加</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="输入" name="second">
                    <el-input
                      v-model="ruleForm.negativeGoodsTextarea"
                      :rows="17"
                      type="textarea"
                      placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
                      maxlength="11000"
                      style="padding: 10px 10px" />
                    <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
                      <el-button style="margin-right: 10px" type="primary" text bg @click="addNegativeGoods">添加</el-button>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never">
                  <template #header>
                    <div class="card-header">
                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedNegetiveTableData.length }}</span>
                      <el-button class="button" text bg @click="delAllNegativeGoods">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body"></div>
                </el-card>
                <div style="padding: 0 10px 0 10px; margin-top: -12px">
                  <el-table
                    :data="addedNegetiveTableData"
                    height="415"
                    style="width: 100%"
                    :header-cell-style="headerCellStyle"
                    @selection-change="handleAddedChange">
                    <el-table-column prop="asin" label="商品">
                      <template #default="scope">
                        <div style="display: flex; align-items: center">
                          <div style="margin-right: 8px; line-height: normal">
                            <el-image class="img-box" :src="scope.row.image_link" />
                          </div>
                          <div>
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                              <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
                            </el-tooltip>
                            <span
                              >ASIN:
                              <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                            </span>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120" align="right">
                      <template #default="scope">
                        <el-button type="primary" size="small" @click="delSingleNegativeGoods(scope)" text>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-form-item>
  </el-form>
</template>

<style></style>
