<template>
  <div class="pages-card">
    <div class="med-head" style="padding: 20px">
      <div class="title">开放平台设置</div>
    </div>

    <!-- 添加或修改开放平台设置对话框 -->
    <el-form ref="openPlatformSettingFormRef" :model="form" :rules="rules" label-width="150px" style="width: 650px; padding: 20px">
      <el-form-item label="开放平台AppId" prop="appId">
        <el-input v-model="form.appId" :disabled="editBtn" />
      </el-form-item>
      <el-form-item label="开放平台AppSecret" prop="appSecret">
        <el-input v-model="form.appSecret" :disabled="editBtn" />
      </el-form-item>
      <el-form-item label="消息通知TOKEN" prop="infoToken">
        <el-input v-model="form.infoToken" :disabled="editBtn" />
      </el-form-item>
      <el-form-item label="消息通知秘钥" prop="infoSecretKey">
        <el-input v-model="form.infoSecretKey" :disabled="editBtn" />
      </el-form-item>
      <el-form-item label="开发小程序ID" prop="miniId">
        <el-input v-model="form.miniId" :disabled="editBtn" />
      </el-form-item>
      <el-form-item label="开发小程序上传秘钥" prop="miniSecretKey">
        <el-input v-model="form.miniSecretKey" :disabled="editBtn" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" v-hasPermi="['system:openPlatformSetting:add']" v-if="!editBtn">
          &nbsp;&nbsp;&nbsp;保存设置&nbsp;&nbsp;&nbsp;
        </el-button>
        <el-button type="primary" @click="editBtn = false" v-hasPermi="['system:openPlatformSetting:add']" v-if="editBtn">
          &nbsp;&nbsp;&nbsp;编辑设置&nbsp;&nbsp;&nbsp;
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="OpenPlatformSetting" lang="ts">
import {
  getOpenPlatformSetting,
  getOpenPlatformSettingData,
  addOpenPlatformSetting,
  updateOpenPlatformSetting
} from '@/api/setting/openPlatformSetting/index';
import { OpenPlatformSettingVO, OpenPlatformSettingQuery, OpenPlatformSettingForm } from '@/api/setting/openPlatformSetting/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const buttonLoading = ref(false);
const loading = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const editBtn = ref<boolean>(true);

const queryFormRef = ref<ElFormInstance>();
const openPlatformSettingFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: OpenPlatformSettingForm = {
  id: undefined,
  appId: undefined,
  appSecret: undefined,
  infoToken: undefined,
  infoSecretKey: undefined,
  miniId: undefined,
  miniSecretKey: undefined,
  status: undefined,
  remark: undefined
};
const data = reactive<PageData<OpenPlatformSettingForm, OpenPlatformSettingQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: undefined,
    appId: undefined,
    appSecret: undefined,
    infoToken: undefined,
    infoSecretKey: undefined,
    miniId: undefined,
    miniSecretKey: undefined,
    status: undefined,
    params: {}
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询开放平台设置列表 */
const getList = async () => {
  loading.value = true;
  const res = await getOpenPlatformSettingData();
  if (res.data) {
    form.value = res.data;
  }
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  openPlatformSettingFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: OpenPlatformSettingVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加开放平台设置';
};

/** 修改按钮操作 */
const handleUpdate = async (row?: OpenPlatformSettingVO) => {
  reset();
  const _id = row?.id || ids.value[0];
  const res = await getOpenPlatformSetting(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '修改开放平台设置';
};

/** 提交按钮 */
const submitForm = () => {
  openPlatformSettingFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateOpenPlatformSetting(form.value).finally(() => (buttonLoading.value = false));
      } else {
        await addOpenPlatformSetting(form.value).finally(() => (buttonLoading.value = false));
      }
      proxy?.$modal.msgSuccess('操作成功');
      dialog.visible = false;
      await getList();
    }
  });
};

onMounted(() => {
  getList();
});
</script>
