<template>
    <el-dialog title="编辑" :close-on-click-modal="false" append-to-body :visible.sync="visible"
        class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
        <el-row :gutter="15" class="">
            <el-form ref="formRef" :model="dataForm" :rules="dataRule" size="small"
                label-width="100px" label-position="right">
                <template v-if="!loading">
                    <!-- 具体表单 -->
                    <el-col :span="24">
                        <jnpf-form-tip-item label="类型" align="left" prop="type">
                            <JnpfSelect v-model="dataForm.type" placeholder="请选择" clearable
                                :style='{"width":"100%"}' :options="typeOptions" :props="typeProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="分组" align="left" prop="proType">
                            <JnpfSelect v-model="dataForm.proType" placeholder="请选择" clearable
                                :style='{"width":"100%"}' :options="proTypeOptions"
                                :props="proTypeProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="排序" align="left" prop="sort">
                            <JnpfInputNumber v-model="dataForm.sort" placeholder="数字文本" :min="1"
                                :step="1" :controls="false">
                            </JnpfInputNumber>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="企微名称" align="left" prop="mscodeProNameQywx">
                            <JnpfInput v-model="dataForm.mscodeProNameQywx" placeholder="请输入"
                                clearable :style='{"width":"100%"}'
                                :maskConfig="maskConfig.mscodeProNameQywx">
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="企微描述" align="left" prop="descriptionQywx">
                            <JnpfTextarea v-model="dataForm.descriptionQywx" placeholder="请输入"
                                :style='{"width":"100%"}' true type="textarea"
                                :autoSize='{minRows:6,maxRows:8}'
                                :maskConfig="maskConfig.descriptionQywx">
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="企微启用" align="left" prop="usedQywx">
                            <JnpfSelect v-model="dataForm.usedQywx" placeholder="请选择" clearable
                                :style='{"width":"100%"}' :options="usedQywxOptions"
                                :props="usedQywxProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="小程序名称" align="left" prop="mscodeProNameWx">
                            <JnpfInput v-model="dataForm.mscodeProNameWx" placeholder="请输入"
                                clearable :style='{"width":"100%"}'
                                :maskConfig="maskConfig.mscodeProNameWx">
                            </JnpfInput>
                        </jnpf-form-tip-item>
                    </el-col>

                    <el-col :span="24">
                        <jnpf-form-tip-item label="小程序描述" align="left" prop="descriptionWx">
                            <JnpfTextarea v-model="dataForm.descriptionWx" placeholder="请输入"
                                :style='{"width":"100%"}' true type="textarea"
                                :autoSize='{minRows:6,maxRows:8}'
                                :maskConfig="maskConfig.descriptionWx">
                            </JnpfTextarea>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="小程序启用" align="left" prop="usedWx">
                            <JnpfSelect v-model="dataForm.usedWx" placeholder="请选择" clearable
                                :style='{"width":"100%"}' :options="usedWxOptions"
                                :props="usedWxProps">
                            </JnpfSelect>
                        </jnpf-form-tip-item>
                    </el-col>
                    <el-col :span="24">
                        <jnpf-form-tip-item label="图标" align="left" prop="icon">
                            <div
                                style="display: flex;align-items: center;justify-content: space-between;">
                                <div style="width: 80px;height: 80px">
                                    <el-image :src="minioPath+ dataForm.icon" fit="contain"
                                        :preview-src-list="[minioPath+dataForm.icon]"></el-image>
                                </div>
                                <el-button @click="iconChooseFormVisible = true">选择图标</el-button>
                            </div>

                        </jnpf-form-tip-item>
                    </el-col>
                    <!-- 表单结束 -->
                </template>
            </el-form>

        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false"> 取 消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确
                定</el-button>
        </span>
        <iconForm :visible.sync="iconChooseFormVisible" @choiceIcon="setIcon" />
    </el-dialog>
</template>


<script>
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import iconForm from './iconForm'

import { getFormDetail, putDetail } from "@/api/governmentCloud/processConfiguration/processConfiguration";

import { minioPath } from '@/utils/apiUrl'


export default {
    props: [],
    components: { iconForm },
    data() {
        return {
            minioPath: minioPath,
            dataFormSubmitType: 0,
            visible: false,
            loading: false,
            btnLoading: false,
            formRef: 'formRef',
            dataForm: null,
            dataRule: null,
            iconChooseFormVisible: false,


            usedQywxOptions: [],
            usedQywxProps: { "label": "fullName", "value": "enCode" },

            usedWxOptions: [],
            usedWxProps: { "label": "fullName", "value": "enCode" },

            typeOptions: [],
            typeProps: { "label": "fullName", "value": "enCode" },
            proTypeOptions: [],
            proTypeProps: { "label": "fullName", "value": "enCode" },
            currentOptions: [],
            currentProps: { "label": "fullName", "value": "enCode" },
            categoryOptions: [],
            categoryProps: { "label": "fullName", "value": "enCode" },
            hasNewVersionOptions: [],
            hasNewVersionProps: { "label": "fullName", "value": "enCode" },



            childIndex: -1,
            isEdit: false,
            //掩码配置
            maskConfig: {
                itsmProId: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
                itsmProKey: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
                itsmProName: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
                mscodeProNameQywx: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
                mscodeProNameWx: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
                icon: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
                perfix: { "prefixType": 1, "useUnrealMask": false, "maskType": 1, "unrealMaskLength": 1, "prefixLimit": 0, "suffixLimit": 0, "filler": "*", "prefixSpecifyChar": "", "suffixType": 1, "ignoreChar": "", "suffixSpecifyChar": "" },
            },
        }
    },
    created() {
        this.dataAll()
    },
    mounted() { },
    methods: {
        setIcon(val) {
            this.dataForm.icon = val
            this.iconChooseFormVisible = false
        },
        async dataAll() {
            this.getusedOptions();
            this.getusedQywxOptions();
            this.getusedWxOptions();
            this.gettypeOptions();
            this.getproTypeOptions();
            this.getcurrentOptions();
            this.getcategoryOptions();
            this.gethasNewVersionOptions();
        },
        getusedOptions() {
            getDictionaryDataSelector('581828792310302341').then(res => {
                this.usedOptions = res.data.list
            })
        },

        getusedQywxOptions() {
            getDictionaryDataSelector('581828792310302341').then(res => {
                this.usedQywxOptions = res.data.list
            })
        },
        getusedWxOptions() {
            getDictionaryDataSelector('581828792310302341').then(res => {
                this.usedWxOptions = res.data.list
            })
        },
        gettypeOptions() {
            getDictionaryDataSelector('530743039916774085').then(res => {
                this.typeOptions = res.data.list
            })
        },
        getproTypeOptions() {
            getDictionaryDataSelector('531739994696455109').then(res => {
                this.proTypeOptions = res.data.list
            })
        },
        getcurrentOptions() {
            getDictionaryDataSelector('581822083621717573').then(res => {
                this.currentOptions = res.data.list
            })
        },
        getcategoryOptions() {
            getDictionaryDataSelector('581831566452328069').then(res => {
                this.categoryOptions = res.data.list
            })
        },
        gethasNewVersionOptions() {
            getDictionaryDataSelector('582548175462596869').then(res => {
                this.hasNewVersionOptions = res.data.list
            })
        },

        init(data) {
            this.loading = true
            getFormDetail(data.id).then(res => {
                this.dataForm = res.data
                this.loading = false
                this.visible = true;
            })
        },
        // 表单提交
        dataFormSubmit() {
            this.$refs['formRef'].validate((valid) => {
                if (valid) {
                    this.request()
                }
            })
        },
        request() {
            let _data = this.dataList()
            this.btnLoading = true
            putDetail(_data, _data.id).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: '编辑成功',
                        type: 'success',
                        duration: 1500
                    })
                    this.btnLoading = false
                    this.visible = false
                    this.$emit('refreshData')
                }

            }).catch(() => {
                this.btnLoading = false
                this.continueBtnLoading = false
            })
        },
        dataList() {
            var _data = this.dataForm;
            return _data;
        },
        dataInfo(dataAll) {
            let _dataAll = dataAll
            this.dataForm = _dataAll
            this.isEdit = true
            this.dataAll()
            this.childIndex = -1
        },
    },
}

</script>
