<script lang="ts" setup>
/**
 * @Name: search-term-bid.vue
 * @Description: 自动化-添加搜索词-设置竞价
 * @Author: Cheney
 */

import { computed } from 'vue';
import STBidInput from './st-bid-input.vue';
import XEUtils from 'xe-utils';


interface Props {
  action: RuleSearchTermAction;
}

const props = defineProps<Props>();
const keywordBidding = ref(false);
const productBidding = ref(false);
const MatchTypeMap = {
  EXACT: '精准匹配',
  BROAD: '广泛匹配',
  PHRASE: '词组匹配',
};
if (!props.action.keywords) {
  props.action.keywords = [
    {
      bidType: '1',
      type: 'increase',
      numType: '1',
      defaultBidding: '1.00',
      min: '',
      max: '',
      matchType: 'EXACT',
      use: false
    },
    {
      bidType: '1',
      type: 'increase',
      numType: '1',
      defaultBidding: '1.00',
      min: '',
      max: '',
      matchType: 'BROAD',
      use: false
    },
    {
      bidType: '1',
      type: 'increase',
      numType: '1',
      defaultBidding: '1.00',
      min: '',
      max: '',
      matchType: 'PHRASE',
      use: false
    },
  ];
}
if (!props.action.target) {
  props.action.target = {
    bidType: '1',
    type: 'increase',
    numType: '1',
    defaultBidding: '1',
    min: '',
    max: '',
    matchType: 'EXACT',
    use: false,
  };
}

const valid = computed(() => {
  const index = XEUtils.findIndexOf(props.action.keywords, (item) => item.use);
  if (index !== -1) return true;
  return props.action.target.use;
});

defineExpose({ valid });
</script>

<template>
  <div>
    <div class="asj-h3">
      <span class="custom-title-icon"></span>
      设置竞价
    </div>
    <div>
      <el-checkbox v-model="keywordBidding" label="关键词竞价" size="large"></el-checkbox>
    </div>

    <div v-for="(info, index) in action.keywords" v-if="keywordBidding" class="bid">
      <el-checkbox v-model="info.use" :label="info.matchType">{{ MatchTypeMap[info.matchType] }}</el-checkbox>
      <STBidInput v-show="info.use" :bid-data="info" :index="index"></STBidInput>
    </div>
    <div>
      <el-checkbox v-model="productBidding" label="商品定向竞价" size="large"></el-checkbox>
    </div>
    <div v-if="productBidding" class="bid target">
      <el-checkbox v-model="action.target.use" label="target">竞价</el-checkbox>
      <STBidInput v-show="action.target.use" :bid-data="action.target"></STBidInput>
    </div>
    <p v-show="!valid" style="font-size: small; color: #f56c6c">请至少选择一种竞价方式！</p>
  </div>
</template>

<style scoped>
.bid {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  /* margin-bottom: 10px; */
  margin-left: 23px;
  height: 50px;
}

.target {
  gap: 49px;
}

.custom-title-icon {
  padding-right: 10px;
}

.custom-title-icon:before {
  content: '';
  width: 4px;
  height: 15px;
  background: #3569d6;
  position: absolute;
  transform: translateY(25%);
}
</style>
