<template>
  <el-form :model="formDataForm" label-width="120px" ref="form" v-loading="loading" class="pr-4">
    <el-form-item label="推广名称" prop="name" :rules="[{ required: true, message: '推广名称必须填写' }]">
      <el-input v-model="formDataForm.name" name="name" clearable />
    </el-form-item>
    <el-form-item label="入口章节" prop="series_sequence" :rules="[{ required: false, message: '入口章节必须填写' }]">
      <el-input disabled v-model="formDataForm.series_name" name="author" clearable />
    </el-form-item>
    <el-form-item label="充值模板配置">
      <template #label>
        <div class="flex items-center">
          <span class="mr-1 text-red-600">*</span>充值模板配置
        </div>
      </template>
      <div class="items-center w-full withdraw-popup-warn">
        <div>如果没有目标充值模板，请前往<span class="text-lg font-bold text-blue-400 cursor-pointer" @click="toCharge">充值管理</span>进行添加
        </div>
      </div>
      <div class="flex flex-col">
        <div class="flex items-center">
          <div style="width:80px;text-align: end;" class="mb-3 mr-2">首充模板:</div>
          <el-select v-model="formDataForm.first_charge_template_id" filterable remote clearable
            :remote-method="(query) => { remoteMethod(query, 'firstCharge') }" placeholder="请选择首充模板">
            <el-option v-for="(item, index) in firstTemplateList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </div>
        <div class="flex items-center">
          <div style="width:80px;text-align: end;" class="mr-2">非首充模板:</div>
          <el-select v-model="formDataForm.not_first_charge_template_id" filterable remote clearable
            :remote-method="(query) => { remoteMethod(query, 'notFirstCharge') }" placeholder="请选择非首充模板">
            <el-option v-for="(item, index) in nofirstTemplate" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </div>
      </div>
    </el-form-item>
    <div class="flex justify-end">
      <el-button type="primary" @click="submitForm(form)">{{
        $t('system.confirm')
      }}</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import Cache from '@/support/cache';
import { computed, onMounted, ref } from 'vue';
import { useOpen } from '@/hook/curd/useOpen';
import { FormInstance } from 'element-plus';
import { tuiguangPromotionAdd } from '@/api/promotion/index'
import { channelPaytemplateList } from '@/api/charge/index'
const emit = defineEmits(['close']);
const props = defineProps({
  primary: Object,
});
const router = useRouter()
const form = ref()
const formDataForm = ref({})
const playVisible = ref(false)
const linkVisible = ref(false)
const firstTemplateList = ref([])
const nofirstTemplate = ref([])
if (props.primary) {
  console.log(props.primary, 'props.primary');
  if (props.primary?.video_id) {
    formDataForm.value = JSON.parse(JSON.stringify(props.primary))
  }
}

const remoteMethod = (query: string, type: string,) => {
  console.log(query, 'queryquery', type);
  switch (type) {
    case 'firstCharge':
      initRemoteOption('firstCharge', { name: query })
      break;
    case 'notFirstCharge':
      initRemoteOption('notFirstCharge', { name: query })
      break;
  }
}
const toCharge = () => {
  router.push({ path: '/chargeManage/charge' })
}

const initRemoteOption = (type: string, params?: object) => {
  switch (type) {
    case 'firstCharge':
      channelPaytemplateList({ limit: 999, type: 1, ...params }).then(res => {
        firstTemplateList.value = res.data
      })
      break;
    case 'notFirstCharge':
      channelPaytemplateList({ limit: 999, type: 2, ...params }).then(res => {
        nofirstTemplate.value = res.data
      })
      break;
  }
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formDataForm.value.first_charge_template_id) return ElMessage.error('请选择首充模板')
  if (!formDataForm.value.not_first_charge_template_id) return ElMessage.error('请选择非首充模板')
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        tuiguangPromotionAdd(formDataForm.value).then(res => {
          console.log(res, 'tuiguangPromotionAddtuiguangPromotionAdd');
          ElMessage.success(res.message)
          linkVisible.value = false;
          emit('close')
          router.push({ path: '/promotion/promotionList', query: { tab: 0 } })
        })
      } else {
      }
    })
    .then(() => { });
}

onMounted(() => {
  initRemoteOption('firstCharge')
  initRemoteOption('notFirstCharge')
});
</script>

<style lang="scss" scoped>
.note {
  font-size: 16px;
  width: fit-content;
  word-wrap: break-word;
  word-break: break-all;
}

.withdraw-popup-warn {
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.8;
}
</style>
