<template>
    <div style="padding: 0;margin: 0;">
        <q-dialog v-model="Isadd" persistent>
            <q-card style="width: 700px; max-width: 80vw;" class="addfield">
                <q-card-section>
                    <div class="text-h6">新建/修改字段</div>
                </q-card-section>
                <q-separator />

                <q-card-section class="q-pt-none" style="margin-top: 15px;">
                    <q-splitter v-model="splitterModel">
                        <template v-slot:before>
                            <q-tabs v-model="tab" vertical @click="getdefault">
                                <q-tab v-for="(x,y) in tabsList" :key='y' :name="x.Id" :label="x.Name"
                                    :disable="x.disable" />
                            </q-tabs>
                        </template>
                        <template v-slot:after>
                            <div style="height: 100%; width: 100%;padding: 16px">
                                <div class="rightrow" style="margin-top: 0px;">
                                    <div class="leftwidth">字段名称：</div>
                                    <q-input clearable outlined v-model="addMsg.Name" counter maxlength="8" placeholder="请输入字段名称"
                                        :rules="[val => !!val || '请输入字段名称']" dense style="width: 400px;" />
                                </div>
                                <div class="rightrow" style="margin-top: 0px;">
                                    <div class="leftwidth">部门选择：</div>
                                    <div>
                                        <q-radio v-model="departmentType" val="1" label="公司字段"
                                            @input='addMsg.DeptId=0' />
                                        <q-radio v-model="departmentType" val="2" label="部门字段"
                                            @input='addMsg.DeptId=0' />
                                        <div v-if="departmentType==2">
                                            <el-tree :treeData='deptl' :defaultArray="returnString" nodeKey="DeptId" style="width: 300px;" 
                                                :multiple="false" labelKey="DeptName" childrenKey="ChildList"
                                                tipText="选择部门" @getChild="getChild" classStr="col-6 q-pb-lg">
                                            </el-tree>
                                        </div>
                                    </div>

                                </div>


                                <div class="rightrow" v-if='tab==1'>
                                    <div class="leftwidth">字数限制：</div>
                                    <q-input v-model.number="addMsg.WordNum" outlined dense type="number" :max='50' placeholder="请输入"
                                        :min='0' maxlength="8" style="width: 400px" />
                                </div>
                                <div class="rightrow" v-if='tab==1'>
                                    <div class="leftwidth">输入类型：</div>
                                    <q-checkbox v-model="addMsg.InputType" v-for="(x,y) in checkboxList" :key='y'
                                        :val="x.Id" :label="x.Name" />
                                </div>
                                <div class="rightrow" v-if='tab==2'>
                                    <div class="leftwidth">文字字数：</div>
                                    <q-input v-model.number="addMsg.WordNum" outlined dense type="number" :max='2000' placeholder="请输入"
                                        :min='0' maxlength="2000" style="width: 400px" />
                                </div>
                                <div class="rightrow" v-if='tab==3|| tab==4'>
                                    <div class="leftwidth">列表选项：</div>
                                    <draggable v-model="addMsg.OptionsList" item-key="Id">
                                        <template #item="{ element ,index}">
                                            <div style="display: flex;margin-bottom: 10px;">
                                                <i class="iconfont icon-drag"
                                                    style="font-size: 26px;color: #777;margin-right: 10px;"></i>
                                                <q-input v-model.number="element.Name" outlined dense clearable placeholder="请输入"
                                                    style="width: 250px" />
                                                <div
                                                    style="display: flex;align-items: center;margin-top: 8px;margin-left: 10px;height: 26px;">
                                                    <div style="width: 26px;height: 26px;margin-right: 10px;"
                                                        v-if="addMsg.OptionsList.length>1">
                                                        <q-btn round size="xs" color="deep-orange" icon="delete"
                                                            @click="addMsg.OptionsList.splice(index,1)" />
                                                    </div>
                                                    <div style="width: 26px;height: 26px;"
                                                        v-if="addMsg.OptionsList.length==index+1">
                                                        <q-btn round size="xs" color="primary" icon="add"
                                                            @click="addMsg.OptionsList.push({Id:0,Name:''})" />
                                                    </div>
                                                </div>
                                            </div>

                                        </template>
                                    </draggable>
                                </div>
                                <div class="rightrow" v-if='tab==7'>
                                    <div class="leftwidth">小数位数：</div>
                                    <q-select filled stack-label option-value="Id" option-label="Id"
                                        style="width: 300px;" v-model="addMsg.Digits" ref="Id" :options="decimalslist"
                                        dense map-options />
                                </div>
                                <div class="rightrow">
                                    <div class="leftwidth">属性设置：</div>
                                    <div class="q-gutter-sm">
                                        <q-toggle v-model="addMsg.Required" label="必填项" :true-value="1"
                                            :false-value="2" />
                                        <q-toggle v-model="addMsg.Enable" label="启用" :true-value="1" :false-value="2" />
                                    </div>
                                </div>

                                <!-- <el-form label-width="120px">
                                   
                                    <el-form-item label="部门选择：">
                                      
                                        <div v-if="departmentType==2">
                                            
                                        </div>
                                    </el-form-item>
                                 
                                    
                                    
                                </el-form> -->
                            </div>
                        </template>
                    </q-splitter>
                </q-card-section>
                <q-separator />
                <q-card-actions align="right" class="bg-white">
                    <q-btn class="q-mr-md" label="取消" @click="getcancel()" />
                    <q-btn color="accent" class="q-mr-md" label="确定" @click="savewb()" :loading="loading" />
                </q-card-actions>
            </q-card>
        </q-dialog>
    </div>
</template>
<script>
    import { defineComponent, ref, onMounted, } from '@vue/composition-api'
    import draggable from "vuedraggable";
    export default defineComponent({
        components: { draggable },
        props: {
            passobj: {
                type: Object,
                default: () => { return {} },
            },
            passdeptl: {
                type: Array,
                default: () => [],
            },
            passtabsList: {
                type: Array,
                default: () => [],
            },
            passcheckboxList: {
                type: Array,
                default: () => [],
            },
        },
        setup(props, ctx) {
            // const $q = useQuasar()
            let addMsg = ref(props.passobj)
            let deptl = ref(props.passdeptl)
            let departmentType = ref('1')
            let tab = ref(1)
            let loading = ref(false)
            let tabsList = ref(props.passtabsList)
            let checkboxList = ref(props.passcheckboxList)
            let decimalslist = ref([{ Id: 0 }, { Id: 1 }, { Id: 2 }, { Id: 3 }, { Id: 4 }, { Id: 5 }, { Id: 6 }, { Id: 7 }, { Id: 8 }, { Id: 9 }, { Id: 10 }, { Id: 11 },])
            let returnString = ref([])
            if (addMsg.value.Id > 0) {
                tab.value = addMsg.value.Type
                addMsg.value.InputType  = addMsg.value.InputType.split(',').map(Number)
                if (addMsg.value.DeptId > 0) {
                    departmentType.value = '2'
                    returnString.value = []
                    setTimeout(() => {
                        returnString.value.push(addMsg.value.DeptId)
                    }, 500)
                }
              
                tabsList.value.forEach(x => {
                    if (x.Id != addMsg.value.Type) {
                        x.disable = true
                    }
                })
            } else {
                addMsg.value.InputType = [];
                checkboxList.value.forEach((x) => {
                    addMsg.value.InputType.push(x.Id)
                })
            }
            const getcancel = () => {
                ctx.emit('getcancel', 1)
            }
            const savewb = () => {//数据保存
                let submitobj = JSON.parse(JSON.stringify(addMsg.value))
                submitobj.Type = tab.value //先类型赋值
                if (submitobj.Name == '') {
                    $q.notify({
                        type: 'negative',
                        message: `请填写字段名称`,
                        position: 'top'
                    })
                    return
                }
                if ((submitobj.Type == 1 || submitobj.Type == 2) && submitobj.WordNum == '') {
                    $q.notify({
                        type: 'negative',
                        message: `字数不能为空`,
                        position: 'top'
                    })
                    return
                }
                if (departmentType.value == '2' && (submitobj.DeptId == 0 || submitobj.DeptId == '')) {
                    $q.notify({
                        type: 'negative',
                        message: `请选择部门`,
                        position: 'top'
                    })
                    return
                }
                if (submitobj.Type == 3 || submitobj.Type == 4) {
                    for (let i = 0; i < submitobj.OptionsList.length; i++) {
                        let x = submitobj.OptionsList[i]
                        if (x.Name == ''|| x.Name == null) {
                            $q.notify({
                                type: 'negative',
                                message: `请填写列表选项值`,
                                position: 'top'
                            })
                            return
                        }
                        submitobj.OptionsList[i].Id = i + 1
                    }
                }
                if (submitobj.Type == 1) {
                    if (submitobj.InputType.length == 0) {
                        $q.notify({
                            type: 'negative',
                            message: `至少选择一种输入类型`,
                            position: 'top'
                        })
                        return
                    } else {
                        submitobj.InputType = submitobj.InputType.join(',')
                    }

                } else {
                    submitobj.InputType = '1'
                }
                loading.value = true
                Vue.prototype.apipost.setCustomerFiledInfo(submitobj).then((res) => {
                    if (res.data.Code == 1) {
                        console.log(res)
                        $q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.data.Message,
                            position: 'top'
                        })
                        loading.value = false
                        ctx.emit('getcancel', 2)
                    } else {//如果移动失败 重新获取列表
                        loading.value = false
                    }
                })
            }
            const getChild = (deptArray) => {
                var tempStr = "";
                if (deptArray && deptArray != '') {
                    tempStr = deptArray;
                }
                addMsg.value.DeptId = tempStr
            }
            const getdefault = () => {//切换模式的时候 初始化
                addMsg.value = {
                    Id: 0,
                    Type: 1,
                    Name: '',
                    Required: 2,
                    DeptId: 0,
                    WordNum: 1,
                    InputType: '',
                    OptionsList: [{
                        Id: 1,
                        Name: ''
                    }],
                    Digits: 0,
                    Enable: 1,
                };
            }
            return {
                getcancel,//关闭弹窗
                savewb,//保存数据
                Isadd: ref(true),
                addMsg,
                deptl,
                tabsList,
                checkboxList,
                splitterModel: ref(13),
                tab,
                departmentType,
                decimalslist,
                returnString,
                getChild,
                loading,
                getdefault
            }
        }
    })
</script>
<style>
    .addfield .rightrow {
        display: flex;
        margin-top: 10px;
        align-items: flex-start;
    }

    .addfield .leftwidth {
        width: 120px;
        text-align: right;
        height: 40px;
        vertical-align: middle;
        line-height: 40px;
        font-size: 14px;
        color: #606266;
        padding: 0 12px 0 0;
    }
</style>