<template>
    <div style="padding: 0;margin: 0;">
        <el-card style="width: 700px; max-width: 80vw;" class="addfield">
            <div class="q-pt-none" style="margin-top: 15px;">
                <div>
                    <template>
                        <el-tabs v-model="tab" vertical @click="getdefault">
                            <el-tab v-for="(x,y) in tabsList" :key='y' :name="x.Id" :label="x.Name"
                                :disable="x.disable" />
                        </el-tabs>
                    </template>
                    <template>
                        <div style="height: 100%; width: 100%;padding: 16px">
                            <div class="rightrow" style="margin-top: 0px;">
                                <div class="leftwidth">字段名称：</div>
                                <el-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>
                                    <el-radio v-model="departmentType" val="1" label="公司字段" @input='addMsg.DeptId=0' />
                                    <el-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>
                                <el-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>
                                <el-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>
                                <el-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>
                                            <el-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">
                                                    <el-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">
                                                    <el-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>
                                <el-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">
                                    <el-switch v-model="addMsg.Required" :true-value="1" :false-value="2"></el-switch>
                                    必填项
                                    <el-switch v-model="addMsg.Enable" :true-value="1" :false-value="2"></el-switch>启用
                                </div>
                            </div>

                            <!-- <el-form label-width="120px">
                                   
                                    <el-form-item label="部门选择：">
                                      
                                        <div v-if="departmentType==2">
                                            
                                        </div>
                                    </el-form-item>
                                 
                                    
                                    
                                </el-form> -->
                        </div>
                    </template>
                </div>
            </div>
            <div align="right" class="bg-white">
                <el-button class="q-mr-md" @click="getcancel()">取消</el-button>
                <el-button type="primary" class="q-mr-md" @click="savewb()" :loading="loading">确定</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
    import draggable from "vuedraggable";
    export default {
        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 == '') {
                    this.$message.error({
                        type: 'negative',
                        message: `请填写字段名称`,
                        position: 'top'
                    })
                    return
                }
                if ((submitobj.Type == 1 || submitobj.Type == 2) && submitobj.WordNum == '') {
                    this.$message.error({
                        type: 'negative',
                        message: `字数不能为空`,
                        position: 'top'
                    })
                    return
                }
                if (departmentType.value == '2' && (submitobj.DeptId == 0 || submitobj.DeptId == '')) {
                    this.$message.error({
                        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) {
                            this.$message.error({
                                type: 'negative',
                                message: `请填写列表选项值`,
                                position: 'top'
                            })
                            return
                        }
                        submitobj.OptionsList[i].Id = i + 1
                    }
                }
                if (submitobj.Type == 1) {
                    if (submitobj.InputType.length == 0) {
                        this.$message.error({
                            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) {
                        this.$message.error({
                            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>