<template>
  <ADialog v-model:show="showDialog"
    :title="status==='add'?'新增模板':'修改模板'"
    width="25vw"
    @close="dialogCloseHandler">
    <ElForm :model="tplFormData"
      class="sys_tpl-form"
    >
      <ElFormItem label="模板名称">
        <ElInput
          v-model="tplFormData.tplName"
          placeholder="模板名称"/>
      </ElFormItem>
      <ElFormItem label="前端/后端">
        <ElSelect
          v-model="tplFormData.lang"
          placeholder="前端/后端"
        >
          <ElOption
            label="前端"
            value="ts"/>
          <ElOption
            label="后端"
            value="java"/>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="模板内容">
        <ElInput
          v-model="tplFormData.tpl.content"
          :spellcheck="false"
          placeholder="模板内容"
          resize="none"
          type="textarea"/>
      </ElFormItem>

      <ElFormItem label="文件路径">
        <ElInput
          :spellcheck="false"
          v-model="tplFormData.tpl.dir"
          placeholder="文件路径"
          resize="none"
          type="textarea"/>
      </ElFormItem>

      <ElFormItem label="文件名称">
        <ElInput
          :spellcheck="false"
          v-model="tplFormData.tpl.filename"
          placeholder="文件名称"
          resize="none"
          type="textarea"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ADialog>
</template>
<script lang="ts" setup>
import TplApi from '@/pages/sys/gen/tpl/tpl-api.ts'
import Strings from '@/common/utils/strings.ts'
import { ElMessage } from 'element-plus'
import ADialog from '@/components/a-dialog/ADialog.vue'

const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const tplFormData = ref<TplTypes.SearchTplResult>({
  tpl: {},
})

function dialogCloseHandler() {
  tplFormData.value = {tpl: {}}
}

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (tplFormData.value.id != null) {
    TplApi.modify(tplFormData.value)
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
    TplApi.add(tplFormData.value)
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: TplTypes.SearchTplResult = {tpl: {}}) {
    showDialog.value = true
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      TplApi.detail(data.id!)
        .then(res => {
          tplFormData.value = res.data
        })
    } else {
      status.value = 'add'
      tplFormData.value = data
    }
  },
})
</script>
<style lang="stylus" scoped>
.sys_tpl-form {
  padding 20px
}
</style>
