<template>
    <div class="q-pa-md customerField">
        <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"  @update="datadragEnd" :clone="cloneFun">
                <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"
                                @input="godelete(element,1,index)" />
                        </td>
                        <td>
                            <q-toggle v-model="element.Required" :true-value="1" :false-value="2"
                                @input="godelete(element,2,index)" />
                        </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,index)" />
                        </td>
                        <td>
                            <i class="iconfont icon-weiyi" style="font-size: 14px;color: #777;"></i>
                        </td>
                    </tr>
                </template>
            </draggable>

        </table>

    </div>
</template>
<script lang="ts">
    import { defineComponent ,ref, onMounted } from 'vue'
    import customerService from '@/api/customer'
    import draggable from "vuedraggable";
    export default defineComponent({
        components: { draggable },
        setup() {
            const data =ref([]);
            const changePage = () => {
                customerService.getCustomerFiledList({ Enable: -1 }).then((res) => {
                    console.log(132,res)
                    data.value=res.data.Data
                })
            }
            const datadragEnd = (e:any) => {
                console.log('拖动结束',e)

            }
            onMounted(() => {
                changePage()

            })
            return {
                data,
                changePage,
                datadragEnd,

            }
        }
    })
</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: #DDDEE0;
    }

    .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>