<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>
            <tr v-for="(item,index) in data" :key="index">
                <td><span>{{item.Name}}</span></td>
                <td>
                    <span v-if="item.IsSystem!=1">{{item.TypeName}}</span>
                    <span v-if="item.IsSystem==1">系统字段</span>
                </td> 
                <td><span>{{item.DeptName}}</span></td>
                <td>
                    <q-toggle v-if="item.IsLock==1" v-model="item.Enable" :true-value="1" :false-value="2"
                        icon="lock" disable />
                    <q-toggle v-else v-model="item.Enable" :true-value="1" :false-value="2" @input="godelete(item,1,index)" />
                </td>
                <td>
                    <q-toggle v-model="item.Required" :true-value="1" :false-value="2" @input="godelete(item,2,index)"/>
                </td>
                <td>
                    <div>{{item.UpdateByName}}</div>
                    <div>{{item.UpdateTime}}</div>
                </td>
                <td>
                    <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                        label="编辑" @click="goedit(item)" />
                    <q-btn v-if='item.IsDefault!=1' flat size="xs" icon="delete" color="negative" class="q-mr-xs"
                        label="删除" @click="godelete(item,3,index)" />
                </td>
                <td>
                    <i class="iconfont icon-weiyi" style="font-size: 14px;color: #777;"></i>
                </td>
            </tr>
        </table>

    </div>
</template>
<script lang="ts">
    import { defineComponent , onMounted } from 'vue'
    import customerService from '@/api/customer'

    export default defineComponent({
        setup() {
            const data = [{
                DeptId: 0,
                DeptName: "-",
                Digits: 0,
                Enable: 1,
                Id: 21,
                InputType: "2",
                IsDefault: 0,
                IsLock: 0,
                IsSystem: 0,
                Name: "姓名",
                Options: "[\r\n  {\r\n    \"Id\": 0,\r\n    \"Name\": \"\"\r\n  }\r\n]",
                OptionsList: [{ Id: 0, Name: "" }],
                Required: 1,
                Sort: 1,
                Type: 1,
                TypeName: "单行文本",
                UpdateBy: 1,
                UpdateByName: "管理员",
                UpdateTime: "2021-09-28 11:06:00",
                WordNum: 11,
            }];
            const changePage = () => {
                customerService.getCustomerFiledList({ Enable: -1 }).then((res) => {
                    console.log(res)
                })

            }
            onMounted(() => {
                changePage()

            })
            return {
                data,
                changePage

            }
        }
    })
</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>