<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">
    <el-dialog
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        width="780px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        align-center>
      <el-form
          inline
          :model="state.ruleForm"
          :rules="state.rules"
          label-position="top"
          ref="formRef"
          size="default"
          label-width="100px"
          class="mt5">
        <div class="sub-group-bottom"> 服务端 </div>
        <el-form-item label="公司名称（服务端）" prop="companyName" class="wd300">
          <el-input
              v-model="state.ruleForm.companyName"
              placeholder="公司名称（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="平台名称（服务端）" prop="platformName" class="wd300">
          <el-input
              v-model="state.ruleForm.platformName"
              placeholder="平台名称（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="运营商ID（服务端）" prop="operatorId" class="wd300">
          <el-input
              v-model="state.ruleForm.operatorId"
              placeholder="运营商ID（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="运营商密钥（服务端）" prop="operatorSecret" class="wd300">
          <el-input
              v-model="state.ruleForm.operatorSecret"
              placeholder="运营商密钥（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="消息密钥（服务端）" prop="dataSecret" class="wd300">
          <el-input
              v-model="state.ruleForm.dataSecret"
              placeholder="消息密钥（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="消息密钥初始化向量（服务端）" prop="dataSecretIv" class="wd300">
          <el-input
              v-model="state.ruleForm.dataSecretIv"
              placeholder="消息密钥初始化向量（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="签名密钥（服务端）" prop="sigSecret" class="wd300">
          <el-input
              v-model="state.ruleForm.sigSecret"
              placeholder="签名密钥（服务端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>

        <div class="sub-group-bottom"> 需求端 </div>
        <el-form-item label="平台名称（需求端）" prop="userPlatformName" class="wd300">
          <el-input
              v-model="state.ruleForm.userPlatformName"
              placeholder="平台名称（需求端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="运营商ID（需求端）" prop="userOperatorId" class="wd300">
          <el-input
              v-model="state.ruleForm.userOperatorId"
              placeholder="运营商ID（需求端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="运营商密钥（需求端）" prop="userOperatorSecret" class="wd300">
          <el-input
              v-model="state.ruleForm.userOperatorSecret"
              placeholder="运营商密钥（需求端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="消息密钥（需求端）" prop="userDataSecret" class="wd300">
          <el-input
              v-model="state.ruleForm.userDataSecret"
              placeholder="消息密钥（需求端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="消息密钥初始化向量（需求端）" prop="userDataSecretIv" class="wd300">
          <el-input
              v-model="state.ruleForm.userDataSecretIv"
              placeholder="消息密钥初始化向量（需求端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="签名密钥（需求端）" prop="userSigSecret" class="wd300">
          <el-input
              v-model="state.ruleForm.userSigSecret"
              placeholder="签名密钥（需求端）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>


        <div class="sub-group-bottom"> 其它信息 </div>
        <el-form-item label="服务器请求地址URL" prop="apiDomain" class="w100">
          <el-input
              v-model="state.ruleForm.apiDomain"
              placeholder="服务器请求地址URL"
              clearable
              type="textarea"
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="通知推送地址URL" prop="notifyDomain" class="w100">
          <el-input
              v-model="state.ruleForm.notifyDomain"
              placeholder="通知推送地址URL"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
        <el-form-item label="环境" prop="env" class="wd300">
          <el-input
              v-model="state.ruleForm.env"
              placeholder="环境：dev/test/prod"
              clearable
              class="w100">
          </el-input>
        </el-form-item>

        <el-form-item label="最小充电余额（分）" prop="chargeMinAmount" class="wd300">
          <el-input
              v-model="state.ruleForm.chargeMinAmount"
              placeholder="最小充电余额（分）"
              clearable
              class="w100">
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="PlatformDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {Msg} from "/@/utils/message";
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: 0
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  rules: {
    companyName:[u.validator.required],
    platformName:[u.validator.required],
  },
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.dialog.title = u.dialog.actions[action].title + "『互联互通平台』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『互联互通平台』"
  state.dialog.isShowDialog = true;
  if (action !== 'add') {
    loadData(row.id);
  } else {
    state.ruleForm = Object.assign(state.ruleForm, row);
  }
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  formRef.value.validate((v: boolean) => {
    if (v) {
      state.btnLoading = true;
      const url = state.ruleForm.id > 0 ? "platform/modify" : "platform/add"
      $body(url, state.ruleForm).then(() => {
        state.btnLoading = false;
        Msg.message('操作成功');
        console.log('submit!')
        onClose();
        emit('refresh');
      })
    } else {
      state.btnLoading = false;
      Msg.message('请先完整填写表单', 'error');
    }
  })
};

const handleFormChange = (formData: any) => {
  console.log(formData)
}

// 初始化数据
const loadData = (id: number) => {
  $get(`platform/detail/${id}`).then((res: any) => {
    state.ruleForm = res;
  })
}

// 暴露变量
defineExpose({
  open
});


</script>