<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="tDevCptBaseSearchForm" :model="tDevCptBaseSearchForm" :rules="tDevCptBaseSearchFormRules"
                     :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                    <el-input v-model="tDevCptBaseSearchForm.likeStr" placeholder="名称"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tDevCptBaseRef" :options.sync="tDevCptBaseOpt"></ap-table>
        </ap-main>

        <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.isVisible" @close="resetTDevCptBaseForm"
                   width="700px">
            <el-form ref="tDevCptBaseFormRef" :model="tDevCptBaseForm" v-loading="dialogInfo.formIsLoading"
                     label-width="80px" :inline="true">

                <el-form-item label='名称' prop='fdName'>
                    <el-input v-model='tDevCptBaseForm.fdName'></el-input>
                </el-form-item>
                <br>
                <el-form-item label='左侧空间' prop='fdLeftSpace'>
                    <el-input v-model='tDevCptBaseForm.fdLeftSpace'></el-input>
                </el-form-item>
                <el-form-item label='排序' prop='fdSort'>
                    <el-input v-model='tDevCptBaseForm.fdSort'></el-input>
                </el-form-item>
                <el-form-item label='模板' prop='fdTemplate'>
                    <el-input type="textarea" v-model='tDevCptBaseForm.fdTemplate' style="width: 500px" :rows="10"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="dialogInfo.isVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveTDevCptBaseForm"
                           :loading="dialogInfo.saveBtnIsLoading">确 定</el-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
export default {
    name: 'TDevCptBase',
    data() {
        let columns = [
            {
                prop: 'fdName',
                label: '名称',
                type: 'input',
                width: '120'
            }, {
                prop: 'fdLeftSpace',
                label: '向右偏移',
                type: 'input',
                help: '模板整体向右偏移空格数',
                width: '100'
            }, {
                prop: 'fdSort',
                label: '排序',
                type: 'input',
                width: '100'
            }, {
                prop: 'fdTemplate',
                label: '模板',
                type: 'input',
                html: (value, row) =>{
                    console.log(value);
                    value = value.replaceAll("<", "&lt;")
                    let html = `<div class="api-code" style="line-height: 14px;">${value}</div>`;
                    return html;
                },
                help: `1、参数格式：\${xxxx}<br> xxx只能是字母，默认空格连接<br>
2、数组参数格式：\${xxxx#abc}<br>使用#连接，abc为自定义连接符。使用\\n表示换行<br>
3、行以参数开头，则前缀空格会被自动清空。可使用组件模板控制前置空格。`
            }
        ];
        let toolbarBtn = [
            {type: "add", onClick: this.openAddDialog},
            {type: "edit", onClick: this.openEditDialog},
            "del", "refresh", "save"
        ];
        let tableOpt = {
            title: "组件基础模板",
            columns: columns,
            dataUrl: "/apd/TDevCptBase/getTDevCptBaseGridList",
            deletePk: "fdId", // 默认fdId
            deleteUrl: "/apd/TDevCptBase/deleteTDevCptBaseGridData",
            toolbarBtn: toolbarBtn,
            initData: true, // 默认false
            params: () => {
                return {
                    likeStr: this.tDevCptBaseSearchForm.likeStr
                }
            }
        };

        let tDevCptBaseForm = {
            fdName: '',
            fdLeftSpace: '',
            fdTemplate: '',
            fdSort: '',
        };;
        return {
            tDevCptBaseOpt: tableOpt,
            tDevCptBaseForm: tDevCptBaseForm,
            tDevCptBaseFormRules: {
            },
            dialogInfo: {
                title: "",
                isAdd: false,
                isVisible: false,
                saveBtnIsLoading: false,
                formIsLoading: false
            },
            tDevCptBaseSearchForm: {
                likeStr: ""
            },
            tDevCptBaseSearchFormRules: {
                // TODO 自定义rules
                likeStr: [{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}]
            }
        }
    },
    methods: {
        // 打开添加dialog
        openAddDialog() {
            this.dialogInfo.isAdd = true;
            this.dialogInfo.title = "添加数据";
            this.dialogInfo.isVisible = true;
        },
        // 打开编辑dialog
        openEditDialog() {
            let selectedRows = this.$refs.tDevCptBaseRef.getSelection();
            if (selectedRows.length < 1) {
                this.$message.error("请选择需要编辑的行！");
                return;
            }
            if (selectedRows.length > 1) {
                this.$message.error("只能选择单行数据进行编辑！");
                return;
            }

            this.dialogInfo.isAdd = false;
            this.dialogInfo.title = "编辑数据";
            this.dialogInfo.isVisible = true;
            this.dialogInfo.formIsLoading = true;
            // 获取单条数据
            this.$request({
                url: '/apd/TDevCptBase/getTDevCptBaseByFdId',
                method: 'post',
                data: {
                    fdId: selectedRows[0].fdId
                }
            }).then(response => {
                this.tDevCptBaseForm = response.data;
            }).finally(() => {
                this.dialogInfo.formIsLoading = false;
            })
        },
        // 重置表单
        resetTDevCptBaseForm() {
            this.$refs.tDevCptBaseFormRef.resetFields();
        },
        // dialog表单保存
        saveTDevCptBaseForm() {
            // 表单rules认证
            this.$refs.tDevCptBaseFormRef.validate((valid) => {
                if (!valid) {
                    this.$message.error('数据校验错误！');
                    return false;
                }
                this.dialogInfo.saveBtnIsLoading = true;

                let fnName = this.dialogInfo.isAdd ? "insertTDevCptBase" : "updateTDevCptBase";
                // 添加数据
                this.$request({
                    url: '/apd/TDevCptBase/' + fnName,
                    method: 'post',
                    data: this.tDevCptBaseForm
                }).then(response => {
                    this.$message.success(`保存成功！`)
                    this.dialogInfo.isVisible = false;
                    // 刷新表格
                    this.$refs.tDevCptBaseRef.refresh();
                }).finally(() => {
                    this.dialogInfo.saveBtnIsLoading = false;
                })
            });
        },
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.tDevCptBaseSearchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tDevCptBaseRef.refresh();
            });
        }
    }
}
</script>

<style scoped>
</style>
