<template>
    <div class="shceme-info">
        <a-form ref="formRef" :rules="rules" :model="formState" labelAlign="left" :label-col="labelCol"
            :wrapper-col="wrapperCol">
            <a-form-item label="模板编号" name="f_Code">
                <a-input v-model:value="formState.f_Code" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="模板名称" name="f_Name">
                <a-input v-model:value="formState.f_Name" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="模板图标" name="f_Icon">
                <IconPicker :value="formState.f_Icon" />
            </a-form-item>
            <a-form-item label="图标颜色" name="f_Color">
                <a-input type="color" v-model="formState.f_Color" placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item label="模板分类" name="f_Category">
                <a-select v-model:value="formState.f_Category" placeholder="please select your zone">
                    <a-select-option value="shanghai">Zone one</a-select-option>
                    <a-select-option value="beijing">Zone two</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="我的任务创建">
                <a-radio-group v-model:value="formState.f_Mark" name="radioGroup">
                    <a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="移动端创建">
                <a-radio-group v-model:value="formState.f_IsInApp" name="radioGroup">
                    <a-radio v-for="item in data.optionsNotOrOk" :value="item.value">{{item.label}}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-textarea v-model:value="formState.f_Description" placeholder="请填写备注"
                :auto-size="{ minRows: 5, maxRows: 8 }" />


            <a-divider plain="true">撤销操作</a-divider>
            <a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
                <a-tab-pane key="1" tab="执行SQL">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-select v-model:value="formState.undoDbCode" placeholder="请选择执行SQL数据库">
                                <a-select-option value="shanghai">Zone one</a-select-option>
                                <a-select-option value="beijing">Zone two</a-select-option>
                            </a-select>
                        </a-space-compact>
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoDbSQL"
                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="2" tab=".NET方法">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoIOCName" placeholder="请填写.NET方法IOC别名"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="3" tab="第三方接口">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoUrl"
                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
            </a-tabs>

            <a-divider plain="true">作废操作</a-divider>
            <a-tabs v-model:activeKey="formState.deleteType" type="card" size="small" centered="true">
                <a-tab-pane key="1" tab="执行SQL">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-select v-model:value="formState.deleteDbCode" placeholder="请选择执行SQL数据库">
                                <a-select-option value="shanghai">Zone one</a-select-option>
                                <a-select-option value="beijing">Zone two</a-select-option>
                            </a-select>
                        </a-space-compact>
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteDbSQL"
                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="2" tab=".NET方法">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteIOCName" placeholder="请填写.NET方法IOC别名"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="3" tab="第三方接口">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoUrl"
                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
            </a-tabs>

            <a-divider plain="true">删除草稿</a-divider>
            <a-tabs v-model:activeKey="formState.deleteDraftType" type="card" size="small" centered="true">
                <a-tab-pane key="1" tab="执行SQL">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-select v-model:value="formState.deleteDraftDbCode" placeholder="请选择执行SQL数据库">
                                <a-select-option value="shanghai">Zone one</a-select-option>
                                <a-select-option value="beijing">Zone two</a-select-option>
                            </a-select>
                        </a-space-compact>
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteDraftDbSQL"
                                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="2" tab=".NET方法">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
                <a-tab-pane key="3" tab="第三方接口">
                    <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
                        <a-space-compact block>
                            <a-textarea v-model:value="formState.undoUrl"
                                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                                :auto-size="{ minRows: 5, maxRows: 8 }" />
                        </a-space-compact>
                    </a-space>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </div>
</template>
<script lang="ts" setup>
    import { Dayjs } from 'dayjs';
    import { reactive, ref, toRaw } from 'vue';
    import type { UnwrapRef } from 'vue';
    import type { Rule } from 'ant-design-vue/es/form';
    import { IconPicker } from '/@/components/Icon';
    const formRef = ref();
    const labelCol = { span: 7 };
    const wrapperCol = { span: 17 };
    const activeKey = ref('1')
    const data = reactive({
        optionsNotOrOk: [{ label: '允许', value: 1 }, { label: '不允许', value: 2 }],

    })
    const formState = reactive({
        f_Code: '',
        f_Name: '',
        f_Category: '',
        f_Mark: 1,
        f_IsInApp: 2,
        f_Description: '',

        titleRules: '',

        undoType: "1",
        undoDbCode: '',
        undoDbSQL: '',
        undoIOCName: '',
        undoUrl: '',

        deleteType: "1",
        deleteDbCode: '',
        deleteDbSQL: '',
        deleteIOCName: '',
        deleteUrl: '',

        deleteDraftType: "1",
        deleteDraftDbCode: '',
        deleteDraftDbSQL: '',
        deleteDraftIOCName: '',
        deleteDraftUrl: '',
        f_Icon: '',
        f_Color: '#409EFF',
    });
    const rules: Record<string, Rule[]> = {
        f_Code: [
            { required: true, message: '请输入模板编号' },
            // { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
        ],
        f_Name: [
            { required: true, message: '请输入模板名称' }
        ],
        f_Category: [
            { required: true, message: '请选择模板分类' }
        ],
        f_Icon: [
            { required: true, message: '请选择图标' }
        ],
        f_Color: [
            { required: true, message: '请选择颜色' }
        ],
    };
    function getForm() {
        return formState
    }
    defineExpose({
        getForm
    })
</script>
<style lang="less" scoped>
    .site-space-compact-wrapper {
        width: 100%;

        .ant-select {
            width: 100%;
        }
    }

    ::v-deep .ant-tabs {
        padding: 0 !important;
    }
</style>