<template>
    <div class="q-pa-md customerField">
        <div style="text-align: right;">
            <el-button type="primary" style="float:right;margin-bottom: 10px;" size="sm" class="q-mr-md" icon="plus"
                 @click="goaddfield()">新增字段</el-button>
        </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>
                    <tr v-for="element in data" :key="element.Id">
                        <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>
                            <el-button flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs"
                                @click="goedit(element)">编辑</el-button>
                            <el-button v-if='element.IsDefault!=1' flat size="xs" icon="delete" color="negative"
                                class="q-mr-xs" @click="godelete(element,3)">删除</el-button>
                        </td>
                        <td>
                            <i class="iconfont icon-drag" style="font-size: 20px;color: #777;"></i>
                        </td>
                    </tr>
                </template>
            <!-- </draggable> -->

        </table>
        <div>
        <el-dialog :visible.sync="Isadd" persistent title="新建/修改字段">
            <addfield @getcancel='getcancel' :passobj="addMsg" :passdeptl="deptl" :passtabsList="tabsList"
                :passcheckboxList="checkboxList"></addfield>
        </el-dialog>
        </div>

    </div>
</template>
<scr
<script>
    import draggable from "vuedraggable";
    import Vue from 'vue'
    import addfield from './addfield.vue'
    export default {
        components: { draggable, addfield },
        data() {
            return {
                data: [],
                tabsList: [],
                deptl: [],
                checkboxList: [],
                dragId: 0,
                Isadd: false,
                addMsg: {
                    Id: 0,
                    Type: 1,
                    Name: '',
                    Required: 2,
                    DeptId: 0,
                    WordNum: 1,
                    InputType: '',
                    OptionsList: [{
                        Id: 1,
                        Name: ''
                    }],
                    Digits: 0,
                    Enable: 1,
                }
            }
        },
         mounted() {
                this.changePage()
                this.getCustomerFieldType()
                this.getDepartList()//获取部门
                this.getFieldInputType()//输入类型
        },
        methods: {
            changePage() {
        this.apipost("/api/Scene/GetCustomerFiledList", {Enable: -1}, (res) => {
          if (res.data.resultCode == 1) {
                this.data = res.data.data
          }
        });
            },
            datadragEnd(e) {
                let olddragId = 0
                if (e.newIndex > 0) {
                    olddragId = data[e.newIndex - 1].Id
                } else {
                    olddragId = 0
                }
                let msg = {
                    Type: 4,
                    FiledId: dragId,
                    SortFiledId: olddragId,
                }
                this.apipost('/api/Scene/SetCustomerFiledState',msg,(res) => {
                    if (res.data.Code == 1) {
                    } else {//如果移动失败 重新获取列表
                        this.changePage()
                    }
                })

            },
            getdata(e) {
                this.dragId = e.draggedContext.element.Id
            },
            setFiledState(item, Type) {
                let msg = {
                    Type: Type,
                    FiledId: item.Id,
                    SortFiledId: 0,
                }
                this.apipost('/api/Scene/SetCustomerFiledState',msg,(res) => {
                    if (res.data.Code == 1) {
                        this.$message.success({
                            icon: 'iconfont icon-chenggong',
                            color: 'accent',
                            timeout: 2000,
                            message: `操作成功`,
                            position: 'top'
                        })
                        this.changePage()
                    } else {//如果移动失败 重新获取列表
                    }
                })
            },
            godelete(item, type) {
                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 = '删除后字段不在显示,是否删除？'
                }
                this.$confirm({
                    title: "提示信息",
                    message: text,
                    cancel: {
                        label: "取消",
                        flat: true
                    },
                    ok: {
                        label: "确认",
                        flat: true,
                    }
                }).onOk(() => {
                    this.setFiledState(item, type)
                });
            },
            getCustomerFieldType() {
                this.apipost('/api/Scene/GetCustomerFieldTypeEnumList',{},(res) => {
                    if (res.data.Code == 1) {
                        this.tabsList = res.data.Data
                        this.tabsList.forEach(x => {
                            x.disable = false
                        })
                    }
                })
            },
            goedit(item) {
                this.addMsg = JSON.parse(JSON.stringify(item))
                this.Isadd = true;
            },
            goaddfield() {
                this.Isadd = true;
                console.log('@vue/composition-api goaddfield', this.Isadd)
                this.addMsg = {
                    Id: 0,
                    Type: 1,
                    Name: '',
                    Required: 2,
                    DeptId: 0,
                    WordNum: 1,
                    InputType: '',
                    OptionsList: [{
                        Id: 1,
                        Name: ''
                    }],
                    Digits: 0,
                    Enable: 1,
                };
            },
            getcancel(type) {
                this.Isadd = false;
                this.tabsList.forEach(x => {
                    x.disable = false
                })
                if (type == 2) {
                    this.changePage()
                }
            },
            getDepartList() {
                this.apipost('/User/GetDeptTree',{ School_Id: 0 },(res) => {
                    if (res.data.Code == 1) {
                        this.deptl = res.data.Data
                    }
                })
            },
            getFieldInputType() {
                this.apipost('/api/Scene/GetCustomerFieldInputTypeEnumList', {},(res) => {
                    if (res.data.Code == 1) {
                        this.checkboxList = res.data.Data
                    }
                })
            }
        },
    }
</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>