<template>
  <div>
    <div class="asj-h2">广告活动</div>
    <el-form :model="formData" label-position="top" style="margin-top: 20px" ref="formRef">
      <el-form-item prop="name" :rules="{ required: true, message: '必填项', trigger: 'blur' }">
        <template #label>
          <span class="asj-h3">模板名称</span>
        </template>
        <el-input v-model="formData.name" style="width: 30%"></el-input>
      </el-form-item>

      <div class="asj-h3">操作</div>
      <el-checkbox-group v-model="formData.rule.action.state">
        <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" ref="condiBuilderRef" />
    </div>
  </div>

  <div class="asj-h3">频率设置</div>
  <el-checkbox-group v-model="formData.rule.weekdays">
    <el-checkbox v-for="i in [1, 2, 3, 4, 5, 6, 0]" :label="i" :key="i">{{ WeekMap[i] }}</el-checkbox>
  </el-checkbox-group>

  <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>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { WeekMap } from '../enum'
import conditionBuilder from '/@/components/conditionBuilder/index.vue'
import XEUtils from 'xe-utils'

interface Props {
  mode: string
  data: AutoTemplate
  submitFormData: Function
}
const props = defineProps<Props>()
const emits = defineEmits(['refresh'])
const formRef = ref()
const condiBuilderRef = ref()
const formData = ref(props.data)
if (props.mode === 'add') {
  formData.value.rule.action.state = []
  formData.value.rule.action.setTime = ''
}

const addConditions = () => {
  if (props.mode === 'add' && formData.value.rule.conditions.length === 0) {
    condiBuilderRef.value.addConditionGroup()
  }
}

const validateConditionsForm = async () => {
  const validList = await condiBuilderRef.value.validate()
  if (validList.includes(false)) {
    return false
  }
  return true
}
const submitForm = async () => {
  const valid2 = await validateConditionsForm()
  formRef.value.validate(async (valid: any) => {
    if (valid && valid2) {
      await props.submitFormData()
      emits('refresh')
    } else {
      console.log('验证失败')
    }
  })
}
const cancel = () => {
  emits('refresh')
}
</script>

<style scoped></style>
