<script lang="ts" setup>
/**
 * @Name: target-select.vue
 * @Description: 自动化-定向规则-生效对象
 * @Author: Cheney
 */
import AdGroupSelect from '/@/views/components/ad-group-select/index.vue';
import SelectTarget from '/@/views/components/auto/auto-campaigns/select-target.vue';
import { ref, watch } from 'vue';
import ViewTargetRules from '/@/views/components/auto/auto-campaigns/view-target-rules.vue';


interface Props {
  mode: string;
  data: AutoRule;
  useTmpl?: boolean;
  campaignInfo: any;
}

const props = defineProps<Props>();
const dialogVisible = ref(false);
const checkTarget = ref();

function handleSelectTarget() {
  checkTarget.value = {
    profileId:props.campaignInfo.profileId,
    campaignId:props.campaignInfo.campaignId,
  }
  dialogVisible.value = true;
}

watch(() => props.data.campaignAd, (val) => {

});

</script>

<template>
  <div>
    <span class="custom-title-icon"></span>
    <span class="asj-h3">生效对象</span>
    <div style="display: flex; flex-direction: column; align-items: flex-start">
      <div style="margin: 5px 0">
        <span>广告类型：</span>
        <el-select v-model="data.campaignType" :disabled="mode === 'edit' || useTmpl">
          <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>
      </div>
      <el-radio-group v-model="data.activeModel" :disabled="mode === 'edit' || useTmpl">
        <div class="target-radio-group">
          <el-radio label="campaign">当前广告活动（所有定向）</el-radio>
          <div class="target-radio-group-item">
            <el-radio label="adGroup">当前广告活动的指定广告组（所有定向）</el-radio>
            <AdGroupSelect
                v-show="mode === 'auto' && data.activeModel === 'adGroup'"
                v-model="data.campaignAd"
                :multiple="true"
                :query="{ profileId: '3006125408623189', campaignType: data.campaignType, campaignId: campaignId }"
                style="padding-left: 23px; width: 450px">
            </AdGroupSelect>
          </div>
          <div class="target-radio-group-item">
            <el-radio label="specified">指定定向</el-radio>
            <el-button v-show="mode === 'auto' && data.activeModel === 'specified'"
                       link style="margin-left: 20px; font-size: 13px;color: #0085ff;"
                       @click="handleSelectTarget">选择定向
            </el-button
            >
          </div>
        </div>
      </el-radio-group>
    </div>
  </div>
  <!--选择定向弹窗-->
  <ViewTargetRules v-if="data.activeModel === 'specified'"
                    v-model="dialogVisible"
                    :checkTarget="checkTarget"
                    @confirm:targetRule="handleConfirm"
  ></ViewTargetRules>
</template>

<style lang="scss" scoped>
.target-radio-group {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;

  .target-radio-group-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

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

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