<template>
  <!-- 对话框表单 -->
  <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        <!-- 因特殊符号无法模板绑定，在使用前请取消注解 -->
       <!-- \{{ baTable.form.operate ? baTable.form.operate=='edit'?'编辑' : '添加':'无标题' }}-->
      </div>
    </template>
    <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
      <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'">
        <el-form ref="formRef" @keyup.enter="baTable.onSubmit(formRef)" :model="baTable.form.items"
          label-position="right" :label-width="baTable.form.labelWidth + 'px'" :rules="rules"
          v-if="!baTable.form.loading">
          <el-form-item prop="name" label="名称">
            <el-input v-model="baTable.form.items!.name" type="string"
              placeholder="请输入职务名称"></el-input>
          </el-form-item>
          <el-form-item prop="code" label="唯一编码">
            <el-input v-model="baTable.form.items!.code" type="string"
              placeholder="请输入唯一编码"></el-input>
          </el-form-item>

          <el-form-item prop="sort" label="排序">
            <el-input v-model="baTable.form.items!.sort" type="string"
              placeholder="请输入排序编码"></el-input>
          </el-form-item>

          <el-form-item prop="remark" label="备注">
            <el-input v-model="baTable.form.items!.remark" type="textarea"  maxlength="100" show-word-limit :rows="6"
              placeholder="请输入备注信息"></el-input>
          </el-form-item>

        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
          <!-- 因特殊符号无法模板绑定，在使用前请取消注解 -->
          <!-- \{{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? '保存并编辑下一项' : '保存' }} -->
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject } from 'vue'

import type baTableClass from '/@/utils/baTable'
import type { ElForm, FormItemRule } from 'element-plus'

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject('baTable') as baTableClass



const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    name: [
        {
            required: true,
            message: '请输入职务名称',
            trigger: 'blur',
        },
    ],
    code: [
        {
            required: true,
            message: '请输入唯一编码',
            trigger: 'blur',
        },
    ],
    sort: [
        {
            required: true,
            message: '请输入排序编号',
            trigger: 'blur',
        },
    ],
})

</script>

<style scoped lang="scss">
:deep(.penultimate-node) {
    .el-tree-node__children {
        padding-left: 60px;
        white-space: pre-wrap;
        line-height: 12px;
        .el-tree-node {
            display: inline-block;
        }
        .el-tree-node__content {
            padding-left: 5px !important;
            padding-right: 5px;
            .el-tree-node__expand-icon {
                display: none;
            }
        }
    }
}
</style>