<template>
  <component
    is="a-modal"
    v-model:visible="visible"
    :width="tool.getDevice() === 'mobile' ? '100%' : '600px'"
    :title="title"
    :mask-closable="false"
    :ok-loading="loading"
    @cancel="close"
    @before-ok="submit"
    :footer="false">
    <!-- 表单信息 start -->
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
      <a-form-item label="推广媒体" field="media_id">
        <a-select v-model="formData.media_id" placeholder="请选择推广媒体">
          <a-option v-for="item in mediaOptions" :key="item.id" :value="item.id" :label="item.name" />
        </a-select>
      </a-form-item>

      <a-form-item label="推送游戏" field="game_id">
        <!-- <a-tree-select
          v-model="formData.game_id"
          :data="gameOptions"
          tree-checked-strategy="child"
          :tree-checkable="false"
          :max-tag-count="2"
          :fieldNames="{ title: 'name', key: 'id' }"
          allow-search
          allow-clear
          placeholder="请选择游戏"
        /> -->
        <game-select v-model="formData.game_id" />
      </a-form-item>

      <a-form-item label="广告位ID" field="site_id">
        <a-input v-model="formData.site_id" placeholder="请输入广告位ID" />
        <template #extra>
          <Space> {{ formData.site_name }}, 渠道ID：{{ formData.agent_id }} </Space>
        </template>
      </a-form-item>
      <a-button type="primary" class="w-[200px] ml-auto mr-auto" @click="generateParams">生成参数</a-button>
      <Divider />
    </a-form>
    <a-form ref="paramsFormRef" :model="paramsData">
      <a-form-item label="广告位信息" class="flex" field="site_info">
        <a-input readonly v-model="paramsData.site_info" />
      </a-form-item>
      <a-form-item label="APPID" field="appid">
        <a-input readonly v-model="paramsData.appid" />
      </a-form-item>
      <a-form-item label="下载链接" field="download_url" v-if="paramsData.download_url">
        <a-input readonly v-model="paramsData.download_url" />
      </a-form-item>
      <a-form-item label="包名" field="package_name">
        <a-input readonly v-model="paramsData.package_name" />
      </a-form-item>

      <a-form-item label="点击监测地址" field="click_url">
        <a-textarea readonly v-model="paramsData.click_url" auto-size />
      </a-form-item>
      <a-form-item label="小游戏路径参数" field="wxgamepro">
        <a-textarea readonly v-model="paramsData.wxgamepro" />
      </a-form-item>
    </a-form>
    <!-- 表单信息 end -->
  </component>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Divider, Modal, Space } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import commonApi from '../../api/common'
import agentSiteApi from '../../api/advert/agentSite'
import GameSelect from '@/components/game-select/index.vue'
import centerGameApi from '../../api/center/game'

const emit = defineEmits(['success'])

// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)
const siteIds = ref()
const paramsFormRef = ref()

const mediaOptions = ref([])

const paramsData = reactive({
  site_info: '',
})

let title = computed(() => {
  return '联调'
})

// 表单初始值
const initialFormData = {
  media_id: '',
  game_id: '',
  site_id: '',
  site_name: '',
  agent_id: '',
}

// 表单信息
const formData = reactive({ ...initialFormData })

// 验证规则
const rules = {
  media_id: [{ required: true, message: '推广媒体不能为空' }],
  game_id: [{ required: true, message: '推送游戏不能为空' }],
  site_id: [{ required: true, message: '广告位ID不能为空' }],
}

// 打开弹框
const open = async (type = 'ks') => {
  mode.value = type
  // 重置表单数据
  Object.assign(formData, initialFormData)
  formRef.value.clearValidate()
  formRef.value.resetFields()
  paramsFormRef.value?.resetFields()

  visible.value = true
  await initPage()
}

// 初始化页面数据
const initPage = async () => {
  await getMediaOptions()
}

// 获取媒体列表Options
const getMediaOptions = async () => {
  const res = await commonApi.getMediaOptionsApi()
  if (res.code == 200) {
    mediaOptions.value = res.data
  }
}

// 设置数据
const setFormData = async (data) => {
  formData.agent_id = data.agent_id
  formData.site_name = data.name
  formData.media_id = data.media_id
  formData.site_id = data.id
}

// 生成参数
const generateParams = async () => {
  const validate = await formRef.value?.validate()
  if (!validate) {
    // 提交生成监测链接
    const res = await agentSiteApi.linkDebugGenerateParamsApi({
      game_id: formData.game_id,
      agent_id: formData.agent_id,
      site_id: formData.site_id,
      media_id: formData.media_id,
    })
    if (res.code == 200) {
      for (const key in res.data) {
        if (res.data[key] != null && res.data[key] != undefined) {
          paramsData[key] = res.data[key]
        }
      }
      paramsFormRef.value?.setFields(paramsData)
    }
  }
}

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open, setFormData })
</script>
