<template>
  <div>
    <div class="asj-h3">添加到</div>
    <el-radio-group style="display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px" v-model="rule.activeModel">
      <el-radio label="all">当前广告活动（所有广告组）</el-radio>
      <el-radio label="current">当前广告活动（当前广告组）</el-radio>
      <el-radio label="specified">指定广告活动的广告组</el-radio>
      <div style="margin-left: 23px" v-if="rule.activeModel === 'specified'">
        <el-form :inline="true" :model="rule" :disabled="disabled" ref="formRef">
          <el-form-item
            v-for="(info, index) in rule.campaignAd"
            style="margin: 10px auto"
            :prop="`campaignAd[${index}].adGroupId`"
            :rules="{ required: true, message: '广告组必填' }">
            <div style="display: flex; align-items: center; gap: 10px">
              <el-select v-model="info.campaignType" style="width: 100px" @change="changeCampaignType(info)">
                <el-option label="SP" value="sp"></el-option>
                <el-option label="SB" value="sb"></el-option>
                <!-- <el-option label="SD" value="sd"></el-option> -->
              </el-select>
              <CampaignSelect
                v-model="info.campaignId"
                :query="{ profileId: '3006125408623189', campaignType: info.campaignType }"
                @change="info.adGroupId = ''"
                width="450px"></CampaignSelect>
              <AdGroupSelect
                v-model="info.adGroupId"
                width="450px"
                :query="{ profileId: '3006125408623189', campaignType: info.campaignType, campaignId: info.campaignId }">
              </AdGroupSelect>
              <el-button link :icon="Delete" type="danger" @click="delCampaignAd(index)" v-show="rule.campaignAd.length > 1"></el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-button link :icon="Plus" type="primary" @click="addCampaignAd">添加</el-button>
      </div>
    </el-radio-group>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
import CampaignSelect from '/@/views/components/campaign-select/index.vue'
import AdGroupSelect from '/@/views/components/ad-group-select/index.vue'

interface Props {
  rule: AutoRule
  disabled?: boolean
}

const props = defineProps<Props>()
const formRef = ref()

const addCampaignAd = () => {
  props.rule.campaignAd.push({
    campaignType: 'sp',
    campaignId: '',
    adGroupId: '',
  })
}
if (props.rule.campaignAd.length === 0) {
  addCampaignAd()
}
if (!props.rule.activeModel) {
  props.rule.activeModel = 'all'
}
const delCampaignAd = (index: number) => {
  props.rule.campaignAd.splice(index, 1)
}

const changeCampaignType = async (info: any) => {
  info.campaignId = ''
  info.adGroupId = ''
}

const validate = async () => {
  let ret = true
  if(!formRef.value) return ret
  await formRef.value.validate(async (valid: boolean) => {
    ret = valid
  })
  return ret
}
defineExpose({ validate })
</script>

<style scoped></style>
