<template>
    <div class="goCardGridCtl gridCtl" :class="type" :id="id">
        <div class="grid_body go_card_list" :style="extendStyle">
            <!--新增卡片的item-->
            <div class="card_item" @click="addRecord" :style="cardStyle" v-show="editor">
                <div class="add_item">
                      <span class="addIcon">
                        <Icon type="md-add" />
                      </span>
                    <span class="label">{{addLabel}}</span>
                </div>
            </div>
            <!--卡片item对象-->
            <goCardItemOne @editorRecord="editorRecord" :labelWidth="labelWidth" :custom="custom"  :height="itemHeight" :width="itemWidth" @delRecord="delRecord" :operation="editor" :item="item" v-for="(item,index) of items" :key="index">
                <slot slot="content" name="content" :item="item"></slot>
            </goCardItemOne>



        </div>
        <div v-if="hasPagin" class="grid_page">
            <Page :total="totalSize" show-total :page-size="pageSize" :on-page-size-change="pageSizeChange" :on-change="changePage" :current="curPage" show-sizer />
        </div>
    </div>
</template>

<script>
    import GridMixins from "../../ctlMixins/GridMixins";
    import goCardItemOne from './components/go-card-item-one';
    import {AssertUtils,GoingUtils} from 'goingutils';
    import {_getGridWidAndHeight} from "../../commonFun/CommonFun";
    import {QueryCommand} from "goingutils";

    export default {
        name: "go-card-grid",
        mixins: [GridMixins],
        data: function () {
            return {
                pageSize:GoingUtils.pageSizeNumber,
                totalSize:0,
                curPage:1,
                gridObj: null,
                initFlag: false,
                items:this.datas,
            };
        },
        props: {
            //是否是自定义内容区域
            custom:{
                type:Boolean,
                default:false
            },
            datas: {
                type: Array,
                default: null
            },
            //是否是异步
            autoSize:{
                type:Boolean,
                default:true
            },
            labelWidth:{
                type:Number,
                default:70
            },
            //card的高度
            itemHeight:{
                type:Number,
                default:155
            },
            //card的宽度
            itemWidth:{
                type:Number,
                default:350
            },
            addLabel:{
                type:String,
                default:'新增'
            },
            editor: {
                type: Boolean,
                default: false
            },
        },
        computed: {

            extendStyle(){
                let sty={};
                //如果不存在分页条
                if(!this.hasPagin){
                    sty["height"]="99%";
                }
                return sty;
            },
            //卡片样式信息
            cardStyle(){
                let styles={};
                styles["width"]=this.itemWidth+"px";
                styles["height"]=this.itemHeight+"px";
                return styles;
            }
        },
        methods: {
            //初始化表格的宽 高
            initGridObj(pWid, pHeight){
                $("#"+this.id).css("width",pWid).css("height",pHeight);
            },
            //点击新增按钮
            addRecord(){
                this.$emit("addRecord",{});
            },
            //编辑记录
            editorRecord({id,item}){
                this.$emit("editorRecord",{id,item});
            },
            //删除记录
            delRecord({id,item}){
                this.$emit("delRecord",{id,item});
            },
            _getFieldItem(fieldId,fieldAry){
                let itemObj={};
                for(let num=0;num<fieldAry.length;num++){
                    let itemObjTemp=fieldAry[num];
                    if(fieldId===itemObjTemp["id"]){
                        itemObj=itemObjTemp;
                        break;
                    }
                }
                return itemObj;
            },
            //获取真正的值
            _getFieldValue(fieldItem,fieldVal){
                //如果是下拉值
                if("sysCoding_ro"===(fieldItem.type)){
                    let dropOption=this._getFieldItem(fieldVal+"",fieldItem.items);
                    fieldVal=dropOption["label"];
                }
                return fieldVal;
            },
            //解析数据
            _parseData(backData){
                this.items=backData;
            },
            //界面条数变更
            pageSizeChange(pageSize){
                this.pageSize=pageSize;
                this.reloadData();
            },
            //进行页面数据查询
            changePage(curPage) {
                this.curPage=curPage;
                this.reloadData();
            },
            //发起ajax查询
            _queryDatas(queryUrl){
                let params={};
                //设置当前页序号
                params["currentPage"]=this.curPage;
                if(AssertUtils.isNotEmpty(queryUrl)){
                    let queryCommand=new QueryCommand({url:queryUrl});
                    queryCommand.executeQuery({params,successFun:(backData)=>{
                        let hasTotal=false;
                        if(backData!=null){
                            this.totalSize=backData["total"];
                            hasTotal=true;
                        }
                        //如果存在list对象
                        if(backData!=null&&backData["records"]!=null){
                            backData=backData["records"];
                        }
                        //设置记录总数
                        if(hasTotal===false){
                            this.totalSize=backData.length;
                        }
                        //解析数据
                        this._parseData(backData);
                    }});
                }

            },
            //加载数据
            reloadData(){
                //如果查询url 存在则根据url进行查询
                if(AssertUtils.isNotEmpty(this.queryUrl)){
                    this._queryDatas(this.queryUrl);
                }else{
                    if(AssertUtils.isNotEmpty(this.config.queryUrl)){
                        this._queryDatas(this.config.queryUrl);
                    }
                }
            }
        },
        mounted() {
            this.$nextTick(()=>{
                //如果autoSize为true 则采用百分比 如果autoSize为false 则进行计算
                if(!this.autoSize){
                    if (AssertUtils.isNotEmpty(this.height)) {
                        this.initGridObj(this._getGridWidth(), this.height);
                    } else {
                        //获取宽度 和高度
                        let {pWid, pHeight} = _getGridWidAndHeight(
                            this.id,
                            this.hasPagin,
                            this.topHeight,
                            this.hasToolBar
                        );
                        this.initGridObj(pWid, pHeight);
                    }
                }

                this.reloadData();
            });
        },
        watch: {
            queryUrl(){
                this.reloadData();
            }
        },
        beforeDestroy() {

        },
        components:{
            goCardItemOne
        }
    };
</script>
