<template>
    <div class="customerSetup page-body">
        <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>
        <div class="page-content">

            <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.length==0">
                    <td :colspan="8" align="center">暂无数据</td>
                </tr>
                <draggable v-model="data" element="tbody" :move="getdata" @update="datadragEnd">
                    <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>
                </draggable>
            </table>

            <div v-if="Isadd==true">
                <addfield :obj='addMsg' :deptl='deptl' :tabsList='tabsList' :checkboxList='checkboxList'
                    @getcancel='getcancel'></addfield>
            </div>
        </div>
    </div>
</template>

<script>
    import draggable from "vuedraggable"
    import addfield from "./components/addfield"
    import {
        getCustomerFiledList,
        setCustomerFiledState,
        getCustomerFieldInputTypeEnumList,
        getCustomerFieldTypeEnumList,
    } from '../../../../api/system/wechat';
    //部门
    import {
        getDeptTree
    } from '../../../../api/system/dept'
    export default {
        components: {
            addfield,
            draggable
        },

        data() {
            return {
                loading: false,
                msg: {
                    pageIndex: 1,
                    rowsPerPage: 9999,
                },

                data: [],
                Isadd: false,
                addMsg: null,
                Enable: -1,
                deptl: [],//部门下拉
                tabsList: [],
                checkboxList: [],//输入类型 数组
                dragId:0,//拖动的ID
            }
        },
        created() {
            this.getList()
            this.getDepartList()
            this.getFieldInputType()
            this.getCustomerFieldType()
        },
        methods: {
            goaddfield() {//新增字段
                this.Isadd = true;
                this.addMsg = null
            },
            goedit(item) {
                this.Isadd = true;
                this.addMsg = JSON.parse(JSON.stringify(item))
            },
            godelete(item,type,index) {//删除
                let text = ''
                if(type==1){//tyep等于1和2的时候 先让弹出提示 然后再给予掉接口 所以把原本的值暂时先赋值给本身
                    text = '确定修改启用状态'
                    if(item.Enable==2){
                        this.data[index].Enable = 1
                    }else{
                        this.data[index].Enable = 2
                    }
                }else if(type==2){
                    text = '确定修改必填状态'
                    if(item.Required==2){
                        this.data[index].Required = 1
                    }else{
                        this.data[index].Required = 2
                    }
                }else if(type==3){
                    text = '删除后字段不在显示,是否删除？'
                }
                this.$q.dialog({
                    title: "提示信息",
                    message: text,
                    cancel: {
                        label: "取消",
                        flat: true
                    },
                    ok: {
                        label: "确认",
                        flat: true,
                        focus: true
                    }
                }).onOk(() => {
                    this.setFiledState(item, type)
                });
                
            },
     
            setFiledState(item, Type) {
                let msg = {
                    Type: Type,
                    FiledId: item.Id,
                    SortFiledId: 0,
                }
                setCustomerFiledState(msg).then(res => {
                    if (res.Code == 1) {
                        this.$q.notify({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: res.Message,
                            position: 'top'
                        })
                        this.getList()
                    }
                })
            },
            getcancel(type) {
                this.Isadd = false;
                this.tabsList.forEach(x => {
                    x.disable = false
                })
                if (type == 2) {//数据保存成功的处理
                    this.getList()
                }
            },
            getList() {
                this.loading = true
                getCustomerFiledList({ Enable: this.Enable }).then(res => {
                    this.loading = false
                    if (res.Code == 1) {
                        this.data = res.Data;
                    }

                })
            },
            //获取部门下拉数据
            getDepartList(id) {
                let msg = {
                    School_Id: 0
                }
                getDeptTree(msg).then(res => {
                    if (res.Code == 1) {
                        this.deptl = res.Data;
                    }
                })

            },
            getFieldInputType() {//获取客户子段输入类型枚举
                getCustomerFieldInputTypeEnumList({}).then(res => {
                    if (res.Code == 1) {
                        this.checkboxList = res.Data;
                    }
                })
            },
            getCustomerFieldType() {
                getCustomerFieldTypeEnumList({}).then(res => {
                    if (res.Code == 1) {
                        this.tabsList = res.Data;
                        this.tabsList.forEach(x => {
                            x.disable = false
                        })
                    }
                })
            },
            getdata(e){//拖动中的元素
                this.dragId = e.draggedContext.element.Id

            },
            datadragEnd(e){//拖动结束
                let olddragId = 0
                if(e.newIndex>0){
                    olddragId = this.data[e.newIndex-1].Id
                }else{
                    olddragId = 0
                }
                let msg = {
                    Type: 4,
                    FiledId: this.dragId,
                    SortFiledId: olddragId,
                }
                setCustomerFiledState(msg).then(res => {
                    if (res.Code == 1) {
                        // this.$q.notify({
                        //     icon: 'iconfont icon-chenggong',
                        //     color: 'accent',
                        //     timeout: 2000,
                        //     message: res.Message,
                        //     position: 'top'
                        // })

                    }else{//如果移动失败 重新获取列表
                        this.getList()
                    }
                })
            }


        }
    }

</script>

<style>
    .customerSetup .payTable {
        width: 100%;
        border-collapse: collapse;
    }

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

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

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