<template>
    <div class="q-pa-md customerField">
        <div style="text-align: right;">
            <q-btn color="accent" style="float:right;margin-bottom: 10px;" size="sm" class="q-mr-md" icon="add"
                label="新增字段" @click="goaddfield()"></q-btn>
        </div>
        <table class="payTable">
            <thead>
                <tr>
                    <th>字段名称</th>
                    <th>字段类型</th>
                    <th>所属部门</th>
                    <th>是否启用</th>
                    <th>是否必填</th>
                    <th width="13%">操作信息</th>
                    <th width="12%">操作</th>
                    <th width="4%"></th>
                </tr>
            </thead>
            <tr v-if="data && data.length==0">
                <td :colspan="8" align="center">暂无数据</td>
            </tr>
            <draggable v-model="data" tag="tbody" item-key="Id" :move="getdata" @update="datadragEnd">
                <template #item="{ element }">
                    <tr>
                        <td><span>{{element.Name}}</span></td>
                        <td>
                            <span v-if="element.IsSystem!=1">{{element.TypeName}}</span>
                            <span v-if="element.IsSystem==1">系统字段</span>
                        </td>
                        <td><span>{{element.DeptName}}</span></td>
                        <td>
                            <q-toggle v-if="element.IsLock==1" v-model="element.Enable" :true-value="1" :false-value="2"
                                icon="lock" disable />
                            <q-toggle v-else v-model="element.Enable" :true-value="1" :false-value="2"
                                @update:model-value="godelete(element,1)" />
                        </td>
                        <td>
                            <q-toggle v-model="element.Required" :true-value="1" :false-value="2"
                                @update:model-value="godelete(element,2)" />
                        </td>
                        <td>
                            <div>{{element.UpdateByName}}</div>
                            <div>{{element.UpdateTime}}</div>
                        </td>
                        <td>
                            <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                                label="编辑" @click="goedit(element)" />
                            <q-btn v-if='element.IsDefault!=1' flat size="xs" icon="delete" color="negative"
                                class="q-mr-xs" label="删除" @click="godelete(element,3)" />
                        </td>
                        <td>
                            <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
                        </td>
                    </tr>
                </template>
            </draggable>

        </table>
        <div>
            <addfield v-if="Isadd" @getcancel='getcancel' :passobj="addMsg" :passdeptl="deptl" :passtabsList="tabsList"
                :passcheckboxList="checkboxList"></addfield>
        </div>

    </div>
</template>
<script lang="ts">
    import { defineComponent, ref, onMounted, } from 'vue'
    import customerSetService from '@/api/customerSet'
    import draggable from "vuedraggable";
    import { useQuasar } from 'quasar'
    import { customerFieldlistType, customerFieldaddMsgType, customerFieldtabsType } from '@/@types/customer'
    import addfield from '@/components/customer/addfield.vue'
    export default defineComponent({
        components: { draggable, addfield },
        setup() {
            const $q = useQuasar()
            let data = ref < Array < customerFieldlistType >> ([])
            let tabsList = ref < Array < customerFieldtabsType >> ([])
            let deptl = ref([])
            let checkboxList = ref < Array < customerFieldtabsType >> ([])
            let dragId = ref(0);
            let Isadd = ref(false)
            let addMsg = ref < customerFieldaddMsgType > (
                {
                    Id: 0,
                    Type: 1,
                    Name: '',
                    Required: 2,
                    DeptId: 0,
                    WordNum: 1,
                    InputType: '',
                    OptionsList: [{
                        Id: 1,
                        Name: ''
                    }],
                    Digits: 0,
                    Enable: 1,
                }
            )
            const changePage = () => {
                customerSetService.getCustomerFiledList({ Enable: -1 }).then((res) => {
                    data.value = res.data.Data
                })
            }
            const datadragEnd = (e: any) => {
                // console.log('拖动结束',e)
                let olddragId = 0
                if (e.newIndex > 0) {
                    olddragId = data.value[e.newIndex - 1].Id
                } else {
                    olddragId = 0
                }
                let msg = {
                    Type: 4,
                    FiledId: dragId.value,
                    SortFiledId: olddragId,
                }
                customerSetService.setCustomerFiledState(msg).then((res) => {
                    if (res.data.Code == 1) {
                        console.log(res)
                    } else {//如果移动失败 重新获取列表
                        changePage()
                    }
                })

            }
            const getdata = (e: any) => {
                dragId.value = e.draggedContext.element.Id
            }
            const setFiledState = (item, Type) => {
                let msg = {
                    Type: Type,
                    FiledId: item.Id,
                    SortFiledId: 0,
                }
                customerSetService.setCustomerFiledState(msg).then((res) => {
                    if (res.data.Code == 1) {
                        $q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: `操作成功`,
                            position: 'top'
                        })
                        changePage()
                    } else {//如果移动失败 重新获取列表
                    }
                })
            }
            const godelete = (item: customerFieldlistType, type: number) => {
                let text = ''
                if (type == 1) {//tyep等于1和2的时候 先让弹出提示 然后再给予掉接口 所以把原本的值暂时先赋值给本身
                    text = '确定修改启用状态'
                    if (item.Enable == 2) {
                        item.Enable = 1
                    } else {
                        item.Enable = 2
                    }
                } else if (type == 2) {
                    text = '确定修改必填状态'
                    if (item.Required == 2) {
                        item.Required = 1
                    } else {
                        item.Required = 2
                    }
                } else if (type == 3) {
                    text = '删除后字段不在显示,是否删除？'
                }
                $q.dialog({
                    title: "提示信息",
                    message: text,
                    cancel: {
                        label: "取消",
                        flat: true
                    },
                    ok: {
                        label: "确认",
                        flat: true,
                    }
                }).onOk(() => {
                    setFiledState(item, type)
                });
            }
            const getCustomerFieldType = () => {
                customerSetService.getCustomerFieldTypeEnumList({}).then((res) => {
                    if (res.data.Code == 1) {
                        tabsList.value = res.data.Data
                        tabsList.value.forEach(x => {
                            x.disable = false
                        })
                    }
                })
            }
            const goedit = (item: customerFieldlistType) => {
                addMsg.value = JSON.parse(JSON.stringify(item))
                Isadd.value = true;
            }
            const goaddfield = () => {
                Isadd.value = true;
                addMsg.value = {
                    Id: 0,
                    Type: 1,
                    Name: '',
                    Required: 2,
                    DeptId: 0,
                    WordNum: 1,
                    InputType: '',
                    OptionsList: [{
                        Id: 1,
                        Name: ''
                    }],
                    Digits: 0,
                    Enable: 1,
                };
            }
            const getcancel = (type: number) => {
                Isadd.value = false;
                tabsList.value.forEach(x => {
                    x.disable = false
                })
                if (type == 2) {
                    changePage()
                }
            }
            const getDepartList = () => {
                customerSetService.getDeptTree({ School_Id: 0 }).then((res) => {
                    if (res.data.Code == 1) {
                        deptl.value = res.data.Data
                    }
                })
            }
            const getFieldInputType = () => {
                customerSetService.getCustomerFieldInputTypeEnumList({}).then((res) => {
                    if (res.data.Code == 1) {
                        checkboxList.value = res.data.Data
                    }
                })
            }

            onMounted(() => {
                changePage()
                getCustomerFieldType()
                getDepartList()//获取部门
                getFieldInputType()//输入类型
            })
            return {
                data,
                changePage,
                datadragEnd,
                getdata,
                godelete,
                setFiledState,
                goaddfield,
                Isadd,
                addMsg,
                getcancel,
                getCustomerFieldType,
                getDepartList,
                deptl,
                getFieldInputType,
                checkboxList,
                tabsList,
                goedit

            }
        }
    })
</script>
<style>
    .customerField .payTable {
        width: 100%;
        border-collapse: collapse;
    }

    .customerField .payTable tr th {
        background: #fff;
        height: 40px;
        font-size: 12px;
        font-weight: bold;
        color: #2D2D2D;
        background: #f5f5fa;
    }

    .customerField .payTable tr {
        background: #fff;
        text-align: center;
        height: 40px;
    }

    .customerField .payTable tr td {
        font-size: 13px;
        text-align: center;
        color: #2D2D2D;
        padding: 10px 0;
        font-weight: bold;
        border-bottom: 1px solid #E5E5E5;
    }
</style>