<template>
    <!-- 添加或修改项目信息对话框 -->
    <div class="el-drawer__wrapper">
        <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
            <div class="page-container form-container">
            <div class="form-btns-container">
                    <span class="title-label"><el-icon>
                            <Document />
                        </el-icon> 项目信息</span>
                <el-button-group>
                    <el-button v-if="editStatus" type="primary" size="small" icon="Finished"
                               @click="submitForm">保存</el-button>
                    <el-button v-else type="warning" size="small" icon="Edit" @click="editStatus = true">编辑</el-button>
                    <el-button v-if="form.id && editStatus" type="info" size="small" icon="Close"
                               @click="editStatus = false">取消编辑</el-button>
                    <el-button v-if="form.id" type="success" size="small" @click="getForm">
                        <i class="fa fa-refresh" aria-hidden="true" /> 刷新
                    </el-button>
                </el-button-group>
                <div class="screen-btn" @click="handleScreen">
                    <template v-if="!isFullscreen">
                        <i class="fa fa-window-maximize" aria-hidden="true" />
                        <!-- <span>全屏</span> -->
                    </template>
                    <template v-else>
                        <i class="fa fa-window-restore" aria-hidden="true" />
                        <!-- <span>还原</span> -->
                    </template>
                </div>
                <div class="close-btn" @click="cancel">
                    <i class="fa fa-times" aria-hidden="true" />
                    <!-- <span>关闭</span> -->
                </div>
            </div>
            <div class="Y-scrollbar" style="position: absolute; top: 32px; bottom: 0; width: 100%; overflow: auto">
            </div>
            <el-form ref="${businessName}Ref" class="master-container" :model="form" :rules="rules" label-width="120px">
                <el-row :gutter="30">
                        #foreach($column in $columns)
                            #set($field=$column.javaField)
                            #if($column.insert && !$column.pk)
                                #if(($column.usableColumn) || (!$column.superColumn))
                                    #set($parentheseIndex=$column.columnComment.indexOf("（"))
                                    #if($parentheseIndex != -1)
                                        #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                                    #else
                                        #set($comment=$column.columnComment)
                                    #end
                                    #set($dictType=$column.dictType)
                                    #if($column.htmlType == "input")
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-input  v-if="editStatus" v-model="form.${field}" placeholder="请输入${comment}" />
                                            <span v-else>{{ form.${field} }}</span>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "imageUpload")
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <image-upload v-model="form.${field}"/>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "fileUpload")
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <file-upload v-model="form.${field}"/>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "editor")
                                    <el-col :span="6">
                                        <el-form-item label="${comment}">
                                            <editor v-model="form.${field}" :min-height="192"/>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "select" && "" != $dictType)
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-select v-model="form.${field}" placeholder="请选择${comment}">
                                                <el-option
                                                        v-for="dict in ${dictType}"
                                                        :key="dict.value"
                                                        :label="dict.label"
                                                    #if($column.javaType == "Integer" || $column.javaType == "Long")
                                                        :value="parseInt(dict.value)"
                                                    #else
                                                        :value="dict.value"
                                                    #end
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "select" && $dictType)
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-select v-model="form.${field}" placeholder="请选择${comment}">
                                                <el-option label="请选择字典生成" value="" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "checkbox" && "" != $dictType)
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-checkbox-group v-model="form.${field}">
                                                <el-checkbox
                                                        v-for="dict in ${dictType}"
                                                        :key="dict.value"
                                                        :label="dict.value">
                                                    {{dict.label}}
                                                </el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "checkbox" && $dictType)
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-checkbox-group v-model="form.${field}">
                                                <el-checkbox>请选择字典生成</el-checkbox>
                                            </el-checkbox-group>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "radio" && "" != $dictType)
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-radio-group v-model="form.${field}">
                                                <el-radio
                                                        v-for="dict in ${dictType}"
                                                        :key="dict.value"
                                                    #if($column.javaType == "Integer" || $column.javaType == "Long")
                                                        :label="parseInt(dict.value)"
                                                    #else
                                                        :label="dict.value"
                                                    #end
                                                >{{dict.label}}</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "radio" && $dictType)
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-radio-group v-model="form.${field}">
                                                <el-radio label="1">请选择字典生成</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "datetime")
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-date-picker v-if="editStatus" clearable
                                                            v-model="form.${field}"
                                                            type="date"
                                                            value-format="YYYY-MM-DD"
                                                            placeholder="请选择${comment}">
                                            </el-date-picker>
                                            <span v--else>{{ form.${field} }}</span>
                                        </el-form-item>
                                    </el-col>
                                    #elseif($column.htmlType == "textarea")
                                    <el-col :span="6">
                                        <el-form-item label="${comment}" prop="${field}">
                                            <el-input v-if="editStatus" v-model="form.${field}" type="textarea" placeholder="请输入内容" />
                                            <span v-else>{{ form.${field} }}</span>
                                        </el-form-item>
                                    </el-col>
                                    #end
                                #end
                            #end
                        #end
                </el-row>
                #if($table.sub)
                    <el-divider content-position="center">${subTable.functionName}信息</el-divider>
                    <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                            <el-button type="primary" icon="Plus" @click="handleAdd${subClassName}">添加</el-button>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button type="danger" icon="Delete" @click="handleDelete${subClassName}">删除</el-button>
                        </el-col>
                    </el-row>
                    <el-table :data="${subclassName}List" :row-class-name="row${subClassName}Index" @selection-change="handle${subClassName}SelectionChange" ref="${subclassName}">
                        <el-table-column type="selection" width="50" align="center" />
                        <el-table-column label="序号" align="center" prop="index" width="50"/>
                        #foreach($column in $subTable.columns)
                            #set($javaField=$column.javaField)
                            #set($parentheseIndex=$column.columnComment.indexOf("（"))
                            #if($parentheseIndex != -1)
                                #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                            #else
                                #set($comment=$column.columnComment)
                            #end
                            #if($column.pk || $javaField == ${subTableFkclassName})
                            #elseif($column.list && $column.htmlType == "input")
                                <el-table-column label="$comment" prop="${javaField}" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.$javaField" placeholder="请输入$comment" />
                                    </template>
                                </el-table-column>
                            #elseif($column.list && $column.htmlType == "datetime")
                                <el-table-column label="$comment" prop="${javaField}" width="240">
                                    <template #default="scope">
                                        <el-date-picker clearable
                                                        v-model="scope.row.$javaField"
                                                        type="date"
                                                        value-format="YYYY-MM-DD"
                                                        placeholder="请选择$comment">
                                        </el-date-picker>
                                    </template>
                                </el-table-column>
                            #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" != $column.dictType)
                                <el-table-column label="$comment" prop="${javaField}" width="150">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
                                            <el-option
                                                    v-for="dict in $column.dictType"
                                                    :key="dict.value"
                                                    :label="dict.label"
                                                    :value="dict.value"
                                            ></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            #elseif($column.list && ($column.htmlType == "select" || $column.htmlType == "radio") && "" == $column.dictType)
                                <el-table-column label="$comment" prop="${javaField}" width="150">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.$javaField" placeholder="请选择$comment">
                                            <el-option label="请选择字典生成" value="" />
                                        </el-select>
                                    </template>
                                </el-table-column>
                            #end
                        #end
                    </el-table>
                #end
            </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
    import {get${BusinessName}} from "@/api/${moduleName}/${businessName}";
    const { proxy } = getCurrentInstance()
    /** 父组件传参 */
    const props = defineProps({
        getList: {
            type: Function,
            default: () => { }
        }
    })
    const { getList } = toRefs(props)
    /** 字典数组区 */
    #if(${dicts} != '')
        #set($dictsNoSymbol=$dicts.replace("'", ""))
    const { ${dictsNoSymbol} } = proxy.useDict(${dicts});
    #end
    /** 表单抽屉 页变量 */
    const title = ref("")
    const loading = ref(false)
    const multiple = ref(true)
    const visible = ref(false)
    const editStatus = ref(false)
    const isFullscreen = ref(false)
    const webHost = import.meta.env.VITE_APP_BASE_API
        #foreach ($column in $columns)
            #if($column.htmlType == "datetime" && $column.queryType == "BETWEEN")
                #set($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
            const daterange${AttrName} = ref([]);
            #end
        #end
    const data = reactive({
        form: {},
        rules: {
            #foreach ($column in $columns)
                #if($column.required)
                    #set($parentheseIndex=$column.columnComment.indexOf("（"))
                    #if($parentheseIndex != -1)
                        #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                    #else
                        #set($comment=$column.columnComment)
                    #end
                        $column.javaField: [
                        { required: true, message: "$comment不能为空", trigger: #if($column.htmlType == "select" || $column.htmlType == "radio")"change"#else"blur"#end }
                    ]#if($foreach.count != $columns.size()),#end
                #end
            #end
        }
    });
    const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
    /** 打开抽屉 */
    function open(id) {
        reset();
        visible.value = true;
        if (id) {
            get${BusinessName}(id).then(response => {
                form.value = response.data;
                editStatus.value = false
                title.value = "修改项目信息"
            })
        } else {
            editStatus.value = true
            title.value = "添加项目信息"
        }
    }

    /** 取消按钮 */
    function cancel() {
        visible.value = false;
        reset();
    }

    /** 表单重置 */
    function reset() {
        form.value = {
            #foreach ($column in $columns)
                #if($column.htmlType == "checkbox")
                        $column.javaField: []#if($foreach.count != $columns.size()),#end
                #else
                        $column.javaField: null#if($foreach.count != $columns.size()),#end
                #end
            #end
        };
        #if($table.sub)
                ${subclassName}List.value = [];
        #end
        proxy.resetForm("${businessName}Ref");
    }

    /** 全屏缩放 */
    function handleScreen() {
    const dom = document.querySelector('.list-container > .el-drawer__wrapper > .el-overlay')
    isFullscreen.value = !isFullscreen.value
    dom.style.position = isFullscreen.value ? 'fixed' : 'absolute'
    }


/** 提交按钮 */
function submitForm() {
  proxy.#[[$]]#refs["${businessName}Ref"].validate(valid => {
    if (valid) {
#foreach ($column in $columns)
#if($column.htmlType == "checkbox")
      form.value.$column.javaField = form.value.${column.javaField}.join(",");
#end
#end
      if (form.value.${pkColumn.javaField} != null) {
        update${BusinessName}(form.value).then(response => {
          proxy.#[[$modal]]#.msgSuccess("修改成功");
          visible.value = false;
          getList.value()
        });
      } else {
        add${BusinessName}(form.value).then(response => {
          proxy.#[[$modal]]#.msgSuccess("新增成功");
          visible.value = false;
          getList.value()
        });
      }
    }
  });
}

    /** 查询表单信息  */
    function getForm() {
    loading.value = true
    get${BusinessName}(form.value.id).then(response => {
        loading.value = false
        form.value = response.data
    })
    }

    /** 暴露给父组件的方法 */
    defineExpose({
        open
    })
</script>
