<script setup lang="ts">
import { cloneDeep } from 'lodash'

const openDialog = () => {
  dialogVisible.value = true
}

const dialogVisible = ref(false)
const formData = ref({
  submitter: '',
  signature: '',
  authorized_email: '',
  authorized_tel: ''
})

const defaultSetting = ref()
const getDefaultSettings = () => {
  $api
    .getVGMDefaultSet()
    .then((res) => {
      formData.value = res.data.vgm
      defaultSetting.value = cloneDeep(res.data.vgm)
    })
    .catch(() => {})
}
getDefaultSettings()

const handleSave = () => {
  $api
    .saveVGMDefaultSet(formData.value)
    .then(() => {
      defaultSetting.value = cloneDeep(formData.value)
      ElMessage.success('Settings saved successfully')
    })
    .catch(() => {})
}

const emit = defineEmits(['close'])
const clearData = () => {
  formData.value = cloneDeep(defaultSetting.value) || {
    submitter: '',
    signature: '',
    authorized_email: '',
    authorized_tel: ''
  }
  emit('close', cloneDeep(defaultSetting.value))
}

defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="Default Settings"
    width="50%"
    @closed="clearData"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="form">
      <div class="form-row">
        <div class="form-item">
          <div class="label">Submitter</div>
          <div class="content">
            <el-input
              v-model="formData.submitter"
              placeholder="Please enter..."
              clearable
            ></el-input>
          </div>
        </div>
        <div class="form-item">
          <div class="label">Signature</div>
          <div class="content">
            <el-input
              v-model="formData.signature"
              placeholder="Please enter..."
              clearable
            ></el-input>
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-item">
          <div class="label">Authorized Email</div>
          <div class="content">
            <el-input
              v-model="formData.authorized_email"
              placeholder="Please enter..."
              clearable
            ></el-input>
          </div>
        </div>
        <div class="form-item">
          <div class="label">Authorized Tel</div>
          <div class="content">
            <el-input
              v-model="formData.authorized_tel"
              placeholder="Please enter..."
              clearable
            ></el-input>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button style="width: 81px" class="el-button--default" @click="dialogVisible = false"
        >Cancel</el-button
      >
      <el-button @click="handleSave" class="el-button--dark" style="width: 86px">Save</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form {
  position: relative;
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    .form-item {
      flex: 1;
      .label {
        display: flex;
        align-items: flex-start;
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 16px;
        color: var(--dashboard-text-color);
      }
      .content {
        display: flex;
        align-items: center;
        height: 32px;
        .el-input {
          width: 100%;
        }
      }
    }
  }
  .default-setting {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 21px;
    line-height: 21px;
    color: var(--color-theme);
    border-bottom: 1px solid var(--color-theme);
    cursor: pointer;
  }
}
</style>
