<template>
<Card  :bordered="false" :padding="0" style="padding-top:14px;padding-left:16px;padding-right:16px;padding-bottom:14px" dis-hover>
    <Row type="flex" justify="start" align="middle">
        <Col span='18'>
         <span>显示这些字段</span>
        </Col>
        <Col span='6'>
            <Row  type="flex" justify="end" align="middle" >
                <Col>
                <p  style="cursor:pointer" @click.stop="close">
                    <Icon type="ios-close" size="24" />
                </p>
                </Col>
             </Row>   
        </Col>
     </Row>     
    <Card :padding="0" dis-hover style="width:330px;margin-top:20px;">
        <template #title>
        <p  style="margin-top: 3px;margin-bottom: 3px;margin-left: 8px;margin-right: 10px;">
          <span style="font-size:14px">已选择字段: </span><span style="color:#AF292E;font-size:14px">{{num}}个</span>
        </p>
        </template>
        
        <div style="max-height:400px;overflow-y:auto;overflow-x:hidden;margin:14px 16px">
        <VueDraggable v-model="data" @start="drag = true"  :options="{animation:300}" @end="drag = false">
                <Card  v-for="(tmp,index) in data" :key="tmp.name + '_col_' + index " :padding="0" :bordered="false"   dis-hover style="padding-top:6px;padding-bottom:6px">
                    <Row type="flex" justify="start" align="middle"  :gutter="0" class="gridcelrow">
                        <Col>
                            <Icon custom="iconfont icon-custom-sort"  class="colset" color="#A8ABB2" size="22" />
                        </Col>
                        <Col span="17" style="padding-left:14px;">
                            <Checkbox v-model="form[tmp.name]" @on-change="countNum"><span style="padding-left:14px;">{{tmp.label}}</span></Checkbox>
                        </Col>
                        <Col >
                        <Tooltip  placement="left">
                            <template #content>
                            <div>
                                <span style="font-size:12px"> 冻结列 </span>
                            </div>
                             </template>
                            <p  @click.stop="doFixed(tmp.name)" style="padding-right:14px;">
                                <Icon v-if="formFixed[tmp.name]" custom="iconfont icon-custom-fixed"   color="#AF292E"  size="22" />
                                <Icon v-else class="colset" custom="iconfont icon-custom-fixed"  size="22" color="#A8ABB2" />
                            </p> 
                         </Tooltip>
                        </Col>
                        <Col>
                        <Tooltip  placement="left">
                            <template #content>
                            <div>
                                <span style="font-size:12px"> 置顶 </span>
                            </div>
                             </template>
                            <p   @click.stop="doStick(index)">
                                <Icon custom='iconfont icon-custom-stick' class="colset" color="#A8ABB2" size="22" />
                            </p>   
                         </Tooltip>
                        </Col>
                    </Row>
                </Card>
        </VueDraggable>
        </div>
    </Card>
     <Row style="margin-top:14px" type="flex" justify="end" align="middle" :gutter="10" >
         <Col>
           <Button  @click="reset" >重置</Button>
           </Col>
            <Col>
           <Button type="info" @click="ok" >确定</Button>
           </Col>
     </Row>    
</Card>   
</template>

<script>
import {VueDraggable} from 'vue-draggable-plus';
export default {
    name:'gridcolset',
    components:{
            VueDraggable
        },
    data () {
        return {
            myConfig:{
            },
            defaultData:[],
            moreFlag:false,
            btnItems:[],
            num:0,
            form:{},
            data:[],
            formFixed:{}
        };
    },
    props:{
        config: {
            type:Object,
            default:null
        }
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            this.myConfig =  Object.assign({},this.myConfig, this.config);
            this.initData = [];
            this.initform ={};
            this.initFixed ={};
            this.num = 0;
            this.myConfig.items.forEach(el => {
                if (el.visible !== false && el.key !== 'actionbtn') {
                    let tmp = {};
                    tmp.label = el.label;
                    if (el.name) {
                        tmp.name = el.name;
                    } else {
                        if (el.sname) {
                            tmp.name = el.sname;
                        }
                    }
                    this.initData.push(tmp);
                    this.initform[tmp.name] = true;
                    this.initFixed[tmp.name] = false;
                    this.num++;
                }
            });
            this.data = this.$Method.copy(this.initData);
            this.form = this.$Method.copy(this.initform);
            this.formFixed = this.$Method.copy(this.initFixed);
         
        },
        reset() {
            this.data = this.$Method.copy(this.initData);
            this.$nextTick(() => {
                Object.assign(this.form,this.initform);
                Object.assign(this.formFixed,this.initFixed);
                this.ok();
            })
        },
        ok () {
            let tmp = [];
            this.data.forEach(el => {
                let obj = {};
                obj.name = el.name;
                obj.visible = true;
                obj.visible = this.form[obj.name];
                if (obj.visible) {
                    obj.fixed =this.formFixed[obj.name];
                } else {
                     obj.fixed = false;
                }
                tmp.push(obj);
            });
            let temp = {};
            temp.name = 'saveGridCol';
            temp.para = tmp;
            this.$emit('doAction',temp);
        },
        close() {
            let temp = {};
            temp.name = 'closeGridCol';
            this.$emit('doAction',temp);
        },
        doStick(index) {
            let data = this.$Method.copy(this.data);
            this.data = this.swapArrData(0,index,data);
        },
        swapArrData  (index1,index2,arr) {
            const temp = arr.splice(index2, 1, arr[index1]);
            arr[index1] = temp[0];
            return arr;
        },
        setData(data) {
            let tmp = [];
            let form = {};
            let formFixed = {};
            let num = 0;
            data.forEach(el => {
                let config = this.initData.find(el2 => el.name === el2.name);
                if (config) {
                    tmp.push(config);
                    form[el.name] = el.visible;
                    formFixed[el.name] = el.fixed;
                    if (el.visible) {
                        num++;
                    } else {
                        formFixed[el.name] = false;
                    }
                }
            });
            this.form = form;
            this.formFixed = formFixed;
            this.data = tmp;
            this.num = num;
        },
        countNum() {
            this.$nextTick(() => {
                let num = 0;
                let initFixed = {};
                for(let tmp in this.form) {
                    if (this.form[tmp]) {
                        num++;
                    } else {
                        if (this.formFixed[tmp]){
                            initFixed[tmp] = false;
                        }
                    }
                }
                Object.assign(this.formFixed, initFixed);
                this.num = num;
            });
        },
        doFixed(name) {
            let obj = {};
            obj[name] = !this.formFixed[name];
            this.formFixed = Object.assign({},this.formFixed,obj);
        }
    }

};
</script>
<style scoped>
 .colset:hover {
     color: #606266 !important;
 }
</style>