<!-- 平台接入-新增或者编辑 -->
<template>
  <el-dialog :title="ruleForm.id ? $t('message.iotCard.platformManage.addOrEdit.title.edit') : $t('message.iotCard.platformManage.addOrEdit.title.add')" v-model="isShowDialog" width="650px">
    <el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="110px">
      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.platformType')" prop="types">
        <el-select style="width: 100%;" v-model="ruleForm.types" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.select')">
          <el-option :label="$t('message.iotCard.platformManage.addOrEdit.operators.telecom')" value="1"></el-option>
          <!--            <el-option disabled label="联通" value="2"></el-option>-->
          <!--            <el-option label="移动" value="3"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.name')" prop="name">
        <el-input v-model="ruleForm.name" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.name')" />
      </el-form-item>
      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.appId')" prop="appKey">
        <el-input v-model="ruleForm.appKey" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.appId')" />
      </el-form-item>
      <el-form-item v-if="ruleForm.types == '1'" :label="$t('message.iotCard.platformManage.addOrEdit.form.secretKey')" prop="appSecret">
        <el-input v-model="ruleForm.appSecret" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.secretKey')" />
      </el-form-item>
      <el-form-item v-if="ruleForm.types == '1'" :label="$t('message.iotCard.platformManage.addOrEdit.form.userId')" prop="userId">
        <el-input v-model="ruleForm.userId" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.userId')" />
      </el-form-item>
      <!-- <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" placeholder="请输入密码" />
      </el-form-item> -->
      <el-form-item v-if="ruleForm.types == '3'" :label="$t('message.iotCard.platformManage.addOrEdit.form.interfaceUrl')" prop="restUrl">
        <el-input v-model="ruleForm.restUrl" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.interfaceUrl')" />
      </el-form-item>
      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.status')">
        <!-- 1启用,0禁用 -->
        <el-switch v-model="ruleForm.status" active-value="1" inactive-value="0" inline-prompt :active-text="$t('message.iotCard.platformManage.addOrEdit.switch.enabled')" :inactive-text="$t('message.iotCard.platformManage.addOrEdit.switch.disabled')"></el-switch>
      </el-form-item>
      <el-form-item :label="$t('message.iotCard.platformManage.addOrEdit.form.description')">
        <el-input :rows="6" type="textarea" v-model="ruleForm.remark" :placeholder="$t('message.iotCard.platformManage.addOrEdit.placeholders.description')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">{{ $t('message.iotCard.platformManage.addOrEdit.buttons.cancel') }}</el-button>
        <el-button :loading="btnLoading" type="primary" @click="onSubmit()">{{ $t('message.iotCard.platformManage.addOrEdit.buttons.confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import api from '/@/api/modules/iotCard';
import { ref, unref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';

const isShowDialog = ref(false);
const formRef = ref<HTMLElement | null>(null);
const emit = defineEmits(['updateList']);
const btnLoading = ref(false);
const { t } = useI18n();

const baseForm = {
  id: undefined,
  types: "1",
  name: "",
  userId: "",
  // password: "",
  appSecret: "",
  remark: "",
  appKey: "",
  restUrl: "",
  status: 1
}

const ruleForm = ref({
  ...baseForm
})

const rules = computed(() => ({
  types: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.platformType'), trigger: 'change' }],
  name: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.name'), trigger: 'change' }],
  userId: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.userId'), trigger: 'change' }],
  // password: [{ required: true, message: '请输入密码', trigger: 'change' }],
  appSecret: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.secretKey'), trigger: 'change' }],
  appKey: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.appId'), trigger: 'change' }],
  restUrl: [{ required: true, message: t('message.iotCard.platformManage.addOrEdit.validation.interfaceUrl'), trigger: 'change' }],
}))
/**
 * 新增
 */
const onSubmit = () => {
  const formWrap = unref(formRef) as any;
  if (!formWrap) return;
  formWrap.validate(async (valid: boolean) => {
    if (!valid) return
    btnLoading.value = true
    if (ruleForm.value.id) {
      // 修改
      api.platform.editItem(ruleForm.value)
        .then(() => {
          ElMessage({ type: 'success', message: t('message.iotCard.platformManage.addOrEdit.messages.editSuccess') })
          emit('updateList')
          closeDialog();
          resetForm();
        })
        .finally(() => (btnLoading.value = false))
    } else {
      // 新增
      api.platform.addItem(ruleForm.value)
        .then(() => {
          ElMessage({ type: 'success', message: t('message.iotCard.platformManage.addOrEdit.messages.addSuccess') })
          emit('updateList')
          closeDialog();
          resetForm();
        })
        .finally(() => (btnLoading.value = false))
    }
  });
};

const resetForm = () => {
  ruleForm.value = {
    ...baseForm
  }
}

/**
 * 点击取消按钮
 */
const onCancel = () => {
  closeDialog();
};

/**
 * 关闭弹窗
 */
const closeDialog = () => {
  isShowDialog.value = false;
};

const openDialog = (item: any) => {
  if (item) {
    // 修改
    ruleForm.value = { ...item };
  } else {
    ruleForm.value = { ...baseForm };
  }
  isShowDialog.value = true;
}

defineExpose({ openDialog })
</script>
