<script lang="ts" setup>
/**
 * @Name: switch-campaign
 * @Description: 自动化-广告活动
 * @Author: Cheney
 */

import { ref } from 'vue';
import SelectTmpl from './select-tmpl.vue';
import conditionBuilder from '/@/components/conditionBuilder/index.vue';
import { userFormData } from './common';
import FreqSetting from '../freq-setting.vue';

interface Props {
  data: {
    campaignId: string;
    campaignType: string;
    profileId: string;
    ruleType: number;
  };
  RuleStatusButton?: { [key: string]: any };
}

const props = defineProps<Props>();
const emits = defineEmits(['refresh']);
const formRef = ref();
const condiBuilderRef = ref();
const { formData, submitFormData } = userFormData(props);
formData.value.rule.action.state = [];
formData.value.rule.action.setTime = '';

const condidateFields = [
  { label: '曝光量', value: 'impressions' },
  { label: '点击量', value: 'clicks' },
  { label: '转化率', value: 'cr', suffix: '%' },
  { label: '单次点击费用', value: 'cpc', prefix: '$' },
];

function addConditions() {
  if (formData.value.rule.conditions.length === 0) {
    condiBuilderRef.value.addConditionGroup();
  }
}

async function validateConditionsForm() {
  const validList = await condiBuilderRef.value.validate();
  if (validList.includes(false)) {
    return false;
  }
  return true;
}

async function submitForm() {
  const valid2 = await validateConditionsForm();
  formRef.value.validate(async (valid: any) => {
    if (valid && valid2) {
      await submitFormData();
      emits('refresh');
    } else {
      console.log('验证失败');
    }
  });
}

function cancel() {
  emits('refresh');
}
</script>

<template>
  <div class="mx-5">
    <div class="asj-h2">广告活动</div>
    <SelectTmpl :data="formData" />
    <el-card class="mt-3">
      <FreqSetting :rule="formData.rule" :disabled="formData.useTmpl" />
      <el-divider />
      <el-form :model="formData" label-position="top" style="margin-top: 20px" ref="formRef" :disabled="formData.useTmpl">
        <div class="asj-h3">
          <span class="custom-title-icon"></span>
          操作
        </div>
        <el-checkbox-group v-model="formData.rule.action.state" :disabled="formData.useTmpl">
          <div>
            <el-checkbox label="enabled">开始</el-checkbox>
            <div v-show="formData.rule.action.state.includes('enabled')" style="display: block; margin: 10px 0">
              <el-form-item
                prop="rule.action.setTime"
                :rules="[{ required: formData.rule.action.state.includes('enabled'), message: '必填项', trigger: 'blur' }]">
                <el-date-picker
                  v-model="formData.rule.action.setTime"
                  type="datetime"
                  format="YYYY-MM-DD HH:mm"
                  time-format="HH:mm"
                  value-format="YYYY-MM-DD HH:mm" />
              </el-form-item>
            </div>
          </div>
          <el-checkbox label="paused" @click="addConditions">暂停</el-checkbox>
        </el-checkbox-group>
      </el-form>
      <div v-show="formData.rule.action.state.includes('paused')">
        <conditionBuilder
          :data="formData.rule.conditions"
          :candidate-fields="condidateFields"
          ref="condiBuilderRef"
          :disabled="formData.useTmpl" />
      </div>
    </el-card>

    <div class="auto-page-foot">
      <el-button style="width: 200px" @click="cancel">取消</el-button>
      <el-button style="width: 200px" type="primary" @click="submitForm">提交</el-button>
    </div>
  </div>
</template>

<style scoped>
.custom-title-icon {
  padding-right: 10px;
}

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