﻿<script lang="ts" setup>
import { reactive, ref } from "vue";
import { FormInstance } from "ant-design-vue";
import Tools from "@/core/utils/Tools";
import T_App_ConfigService from "@/services/apps/Ext/T_App_ConfigService";
import MonacoEditor from "@/core/components/MonacoEditor.vue";
//定义组件事件
const props = defineProps<{ onSuccess: () => void }>();

const state = reactive({
  vm: {
    id: "",
    form: {} as any,
  },
  visible: false,
  loading: false,
});

//表单实例
const refForm = ref<FormInstance>();

//向父级导出 函数
defineExpose({
  /**
   * 打开表单初始化
   * @param key
   */
  open: (key: string = "") => {
    state.visible = true;
    if (state.visible) {
      state.vm.id = key;
    }
    refForm.value?.resetFields();
    //初始化表单数据
    state.loading = true;
    T_App_ConfigService.findForm(key).then((res) => {
      state.loading = false;
      if (res.code != 200) return;
      if (res.data.form.id == 0) {
        res.data.form.configType = 1;
        // res.data.form.actionId = 0;
        res.data.form.isEnabled = true;
      }
      if (res.data.form.configValue == null) {
        res.data.form.configValue = "";
      }
      if (res.data.form.isEnabled == null) {
        res.data.form.isEnabled = false;
      }

      state.vm = res.data;
    });
  },
});

/**
 *保存数据
 */
function save() {
  refForm.value?.validate().then(async () => {
    try {
      state.loading = true;
      const result = await T_App_ConfigService.saveForm(
        state.vm.id,
        state.vm.form
      );
      state.loading = false;
      if (result.code != 200) return;
      Tools.message.success("操作成功!");
      props.onSuccess();
      state.visible = false;
    } catch (error) {
      state.loading = false;
    }
  });
}
var xxx = "32132132";
var x = [
  { configType: 3, value: 1, lable: "游戏配置-玩游戏统一消耗费用" },
  { configType: 7, value: 1, lable: "审核配置" },
  { configType: 8, value: 1, lable: "用户协议配置" },
  { configType: 8, value: 2, lable: "隐私协议配置" },
];
const querySearch = (queryString: string, cb: any) => {
  // call callback function to return suggestions
  if (state.vm.form.configType != 0) {
    var c = x.filter((it) => it.configType == state.vm.form.configType);
    cb(c);
    return;
  }
  cb([]);
};
</script>

<template>
  <a-modal
    v-model:open="state.visible"
    :title="state.vm.id ? '编辑' : '新建'"
    centered
    @ok="state.visible = false"
    :maskClosable="false"
    :width="900"
  >
    <template #footer>
      <a-button type="primary" :loading="state.loading" @click="save()">
        提交</a-button
      >
      <a-button @click="state.visible = false">关闭</a-button>
    </template>
    <a-spin :spinning="state.loading">
      <a-form ref="refForm" layout="vertical" :model="state.vm.form">
        <a-row :gutter="[16, 0]">
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-item
              label="配置名称"
              name="name"
              :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
            >
              <a-input
                v-model:value="state.vm.form.name"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="配置类型" name="configType">
              <h-common-select
                code="appconfigManage_type"
                v-model="state.vm.form.configType"
                :ShowAll="false"
                :defaultValue="1"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="配置ID" name="configId"  :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-autocomplete
                style=""
                v-model="state.vm.form.configId"
                :fetch-suggestions="querySearch"
                clearable
                class="inline-input"
       
                placeholder=""
              >
                <template #default="{ item }">
                  <span class="link">[{{ item.value }}]{{ item.lable }}</span>
                </template>
              </el-autocomplete>
            </a-form-item>
          </a-col>
          <a-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <a-form-item label="渠道号" name="channelId">
              <a-input
                v-model:value="state.vm.form.channelId"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <a-form-item label="平台类型" name="plat">
              <h-common-select
                code="platform"
                v-model="state.vm.form.plat"
                :ShowAll="true"
                defaultValue=""
              />
            </a-form-item>
          </a-col>
          <a-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <a-form-item label="app版本号" name="appVersion">
              <a-tooltip
                placement="bottomLeft"
                title="1.0.1表示app等于1.0.1版本， +1.0.1表示app大于1.0.1的版本，-1.0.1表示app小于1.0.1版本"
              >
                <a-input
                  v-model:value="state.vm.form.appVersion"
                  placeholder="请输入"
                />
              </a-tooltip>
            </a-form-item>
          </a-col>
          <a-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <a-form-item label="是否启用" name="isEnabled">
              <a-radio-group
                v-model:value="state.vm.form.isEnabled"
                name="isEnabled"
              >
                <a-radio :value="false">否</a-radio>
                <a-radio :value="true">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <a-form-item label="配置值类型" name="actionId">
              <h-common-select
                code="appconfigManage_action"
                v-model="state.vm.form.actionId"
                :defaultValue="0"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <a-form-item label="州" name="continent">
              <a-input
                v-model:value="state.vm.form.continent"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
            <a-form-item label="国家" name="countryName">
              <a-input
                v-model:value="state.vm.form.countryName"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-item label="配置值" name="configValue">
              <a-textarea
                v-if="state.vm.form.actionId == 0"
                v-model:value="state.vm.form.configValue"
                placeholder=""
                :auto-size="{ minRows: 10, maxRows: 10 }"
              />
              <h-image-btn
                v-if="state.vm.form.actionId == 1"
                v-model="state.vm.form.configValue"
              />
              <MonacoEditor
                v-if="state.vm.form.actionId == 3"
                v-model:model-value="state.vm.form.configValue"
              ></MonacoEditor>
              <WangEditor
                v-if="state.vm.form.actionId == 2"
                v-model:html="state.vm.form.configValue"
                domainName="http://localhost:5600"
                previewDomainName="http://localhost:5600"
                :height="200"
              />
            </a-form-item>
          </a-col>

          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-item label="备注" name="desc">
              <a-input
                v-model:value="state.vm.form.desc"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<style>
.monaco-editor {
  width: 100%;
  height: 200px;
}
</style>
