<template>
  <el-form :model="formDataForm" label-width="120px" ref="form" v-loading="loading" class="pr-4">
    <el-form-item label="推广ID" prop="name" :rules="[{ required: true, message: '推广ID必须填写' }]">
      <el-input disabled v-model="formDataForm.id" name="name" clearable />
    </el-form-item>
    <el-form-item label="推广名称" prop="total_episode_num" :rules="[{ required: false, message: '推广名称必须填写' }]">
      <el-input disabled v-model="props.primary.name" name="author" clearable />
    </el-form-item>
    <el-form-item label="回传类型" prop="callback_type" :rules="[{ required: true, message: '请选择回传类型', trigger: 'change' }]">
      <el-select v-model="formDataForm.callback_type" filterable clearable placeholder="选择回传类型">
        <el-option v-for="(item, index) in callbackTypeList" :key="index" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="回传配置" prop="callback_config_id"
      :rules="[{ required: true, message: '请选择回传配置', trigger: 'change' }]">
      <el-select v-model="formDataForm.callback_config_id" filterable remote clearable :remote-method="remoteMethod"
        placeholder="选择回传配置">
        <el-option v-for="(item, index) in callbackConfigList" :key="index" :label="item.adv_account_name"
          :value="item.id" />
      </el-select>
      <el-button type="primary" link size="default" @click="addPayback">新增回传</el-button>
    </el-form-item>
    <el-form-item label="备注" prop="name" :rules="[{ required: false, message: '备注必须填写' }]">
      <el-input v-model="formDataForm.remark" clearable />
    </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 { useRouter, useRoute } from 'vue-router'
import { FormInstance } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue';
import { callbackJuliangAccountList } from '@/api/backConfig/index'
import { tuiguangPromotionUpdateCallbackConfig } from '@/api/promotion/index'
const props = defineProps({
  primary: Object,
});
const router = useRouter()
const route = useRoute()
const callbackConfigList = ref([])
const form = ref<FormInstance>();
const loading = ref(false);
const formDataForm = ref({ videos: [] })
const callbackTypeList = ref([{ id: 1, value: 1, name: '巨量账户级回传' }])
const emit = defineEmits(['close']);
const init = (params?: object) => {
  callbackJuliangAccountList({ limit: 666, unbind: 1, ...params }).then(res => {
    callbackConfigList.value = res.data
  })
}
const addPayback = () => {
  router.push({ path: '/payback/juliangAccount', query: { promotionId: props.primary.id } })
}
const remoteMethod = (query: string) => {
  if (query) {
    init({ account_name: query })
  } else {
    init()
  }
}
const submitForm = (formEl: FormInstance | undefined) => {
  loading.value = true;
  console.log(formDataForm.value, formEl, 'formEl');
  if (!formEl) return;
  formEl
    .validate(valid => {
      if (valid) {
        tuiguangPromotionUpdateCallbackConfig(formDataForm.value).then(res => {
          loading.value = false;
          emit('close')
        }).catch(e => {
          loading.value = false;
        })
        console.log(formDataForm.value, 'params');
      } else {
        loading.value = false;
      }
    })
    .then(() => { });
}
if (props.primary) {
  console.log(props.primary, 'props.primary');
  formDataForm.value.name = props.primary.name
  formDataForm.value.id = props.primary.id
}
onMounted(async () => {
  init()
});
</script>
