<script setup lang="ts">
import { ref } from 'vue'
import KeywordTarget from './KeywordTarget.vue'
import NegativeWord from './NegativeWord.vue'
import ProductOrientation from './ProductOrientation.vue'
import NegativeGood from './NegativeGood.vue'

const deliveryTypeRadio = ref('keyword')
</script>

<template>
  <div class="customize-container">
    <el-card body-style="padding: 20px 80px 20px 80px;">
      <div style="font-weight: 700; padding-bottom: 18px">
        <span style="color: #306cd7; font-size: 26px">|</span>
        <span style="font-size: 18px; padding-left: 5px">投放类型</span>
      </div>
      <div class="delivery-type-radio-group">
        <el-radio-group v-model="deliveryTypeRadio" style="display: flex; justify-content: space-between">
          <el-radio class="delivery-type-radio" label="keyword" border>
            <div>关键词定向</div>
            <div style="color: #88909b; font-weight: 400; padding-top: 5px;">选择关键词以帮助您的商品出现在购物者搜索中</div>
          </el-radio>
          <el-radio class="delivery-type-radio" label="commodity" border>
            <div>商品定向</div>
            <div style="color: #88909b; font-weight: 400; padding-top: 5px;">选择要在亚马逊上投放的目标商品</div>
          </el-radio>
        </el-radio-group>
      </div>

      <KeywordTarget v-if="deliveryTypeRadio === 'keyword'"></KeywordTarget>
      <NegativeWord v-if="deliveryTypeRadio === 'keyword'"></NegativeWord>
      <ProductOrientation v-if="deliveryTypeRadio === 'commodity'"></ProductOrientation>
      <NegativeGood v-if="deliveryTypeRadio === 'commodity'"></NegativeGood>
    </el-card>
  </div>
</template>

<style scoped>
.customize-container {
  margin-top: 10px;
}
::v-deep(.delivery-type-radio-group .el-radio__label) {
  width: 100%;
}
.delivery-type-radio {
  height: auto;
  flex: 1;
  align-items: flex-start;
  padding: 15px 10px 15px 10px;
}
::v-deep(.delivery-type-radio-group .el-radio-group .el-radio__inner) {
  /* 着陆页单选按钮 */
  margin-top: 3px;
}
::v-deep(.delivery-type-radio-group .el-radio.is-bordered.is-checked.el-radio--default.delivery-type-radio) {
  /* 选中后的背景颜色 */
  background: #f5f7fe;
}
</style>
