<template>
    <div>
        <template v-if="myConfig.modeType === 'normal'">
            <Card :padding="0" :class="cardClass">
                <template   v-if="showTitle" #title>
                 <p :style="pStyle" @click="toggle" >
                        <span :class="titleClass" v-text="myConfig.title" /><Icon v-if="myConfig.hide" class="efuture-title-icon" :style="iconStyle" type='ios-arrow-forward'/>
                </p>
                </template>
                <template  #extra>
                <a  v-if="!showAdd && !readOnly && myConfig.addBtnType === '1'"  href="#" @click.prevent="add">{{myConfig.addBtnName}} </a>
                </template>
                <div  v-show="showForm"  style="padding:16px">
                    <FormDetail v-if="showAdd" ref="addform" :config="myConfig" :isAdd="true"   @doAction="newDoAction" :dictData="dictData"/>
                    <FormDetail v-for="temp in data"  :ref="temp.index" :key="temp.index"  :valueData="temp" :index="temp.index" style="margin-bottom:10px;"  :config="myConfig"  @doAction="doAction" :dictData="dictData"/>
                    <Row v-if="!readOnly && !showAdd && myConfig.addBtnType === '2'"  type="flex" justify="center" style="margin-top: 10px;margin-bottom:10px;" >
                        <Col span="22" ><Button type="default" style="background-color:#f8f8f9"  @click="add" long>{{myConfig.addBtnName}}</Button> </Col>
                    </Row>
                </div>
            </Card>
        </template>
         <template v-if="myConfig.modeType === 'pop'">
            <Card :padding="0" :class="cardClass">
                 <template   v-if="showTitle" #title>
                  <p   :style="pStyle" @click="toggle" >
                    <span :class="titleClass" v-text="myConfig.title" /><Icon v-if="myConfig.hide" class="efuture-title-icon" :style="iconStyle" type='ios-arrow-forward'/>
                 </p>
                 </template>
                  <template   #extra>
                    <a href="#" v-if="showBtn && !btnReadOnly" @click.prevent="editDetails">{{myConfig.editBtnName}} </a>
                    <span v-if="showBtn && btnReadOnly" >{{myConfig.editBtnName}} </span>
                  </template>
                <div  v-show="showForm"  style="padding:16px">
                    <FormDetail v-for="temp in data"  :ref="temp.index+'_static'" :key="temp.index+'_static'"  :valueData="temp" :index="temp.index" style="margin-bottom:10px;"  :config="myConfig"  @doAction="doAction" :dictData="dictData"  btnType="3" />
                </div>
                 <Modal v-model="editFlag" fullscreen  :closable="false">
                    <template   v-if="showTitle" #header>
                    <p v-if="showTitle"  :style="pStyle"  >
                        <span :class="titleClass" v-text="myConfig.title" />
                        <a  href="#"  style="float:right;margin-right:20px;font-size: 12px;" @click.prevent="addDetails">{{myConfig.addBtnName}} </a>
                    </p>
                    </template>
                    <FormDetail v-for="temp in popData"  :ref="temp.index" :key="temp.index"  :valueData="temp" :index="temp.index" style="margin-bottom:10px;"  :config="myConfig"  @doAction="doAction" :dictData="dictData" btnType="2"/>
                     <template #footer>
                    <Row type="flex" justify="center" align="middle" style="margin-top: 10px;margin-bottom: 10px;" :gutter="16">
                        <Col>
                        <Button  type="primary" @click="save">保存</Button>
                        <Button  style="margin-left: 20px;" @click="cancel">放弃</Button>
                        </Col>
                    </Row>
                    </template>
                </Modal>
            </Card>
        </template>
        <template v-if="myConfig.modeType === 'group'">
             <Card :padding="0" :class="cardClass">
                  <template v-if="showTitle" #title>
                  <p :style="pStyle" @click="toggle" >
                    <span :class="titleClass" v-text="myConfig.title" /><Icon v-if="myConfig.hide" class="efuture-title-icon" :style="iconStyle" type='ios-arrow-forward'/>
                 </p>
                  </template>
                   <template  #extra>
                  <a  href="#"  style="font-size: 12px;" @click.prevent="addDetails">{{myConfig.addBtnName}} </a>
                   </template>
                  <FormDetail v-for="temp in popData"  :id="temp.index" :ref="temp.index" :key="temp.index"  :valueData="temp" :index="temp.index" style="margin-bottom:10px;"  :config="myConfig"  @doAction="doAction" :dictData="dictData"  btnType="2"/>
             </Card>
        </template>
    </div>
</template>

<script>
import FormDetail from './formdetailtwo.vue';
export default {
    name:'detail',
    components:{
        FormDetail
    },
    data () {
        return {
            readOnly:false,
            showAdd:false,
            isGrid:false,
            myConfig:{
                title:'',
                titleType:1,
                addBtnType:'1',
                hide:true,
                addBtnName:'新增',
                editBtnName:'编辑',
                modeType:'normal'
            },
            showForm:true,
            editFlag:false,
            showTitle:false,
            showBtn:true,
            iconStyle:'',
            pStyle:'',
            data:[],
            popData:[],
            delData:[],
            btnReadOnly:false
        };
    },
    props:{
        config:{
            type:Object,
            default:null
        },
        dictData: {
            type: Object,
            default:null
        }
    },
    created () {
        this.init();
    },
    computed: {
        titleClass () {
            return `efuture-title-font-${this.myConfig.titleType}`;
        },
        cardClass() {
             if (this.myConfig.showSubSpecialStyle) {
                return (`efuture-card-head-title-${this.myConfig.titleType}` + ' efuture-card-head-title' +  ` efuture-card-extra-title-${this.myConfig.titleType}`);
            } else {
                return `efuture-card-head-title-${this.myConfig.titleType}` + ` efuture-card-extra-title-${this.myConfig.titleType}`;
            }
        }
    },
    methods:{
        init (){
            this.myConfig = Object.assign({},this.myConfig,this.config);
            delete this.myConfig.formConfig.name;
            delete this.myConfig.formConfig.title;
            delete this.myConfig.gridConfig.name;
            delete this.myConfig.gridConfig.title;
            if (this.myConfig.title) {
                this.showTitle = true;
                this.popTitle = this.myConfig.title;
            }
            if (this.myConfig.hide) {
                this.pStyle = 'cursor:pointer';
                if (this.showForm) {
                    this.iconStyle = 'transform: rotate(90deg)';
                } else {
                    this.iconStyle = '';
                }
            }
        },
        setShowGrid(value) {
            this.showForm = value;
            this.setTitleStyle();
        },
        toggle () {
            if (this.myConfig.hide) {
                this.showForm = !this.showForm;
                this.setTitleStyle();
            }
        },
        setTitleStyle () {
            if (this.showForm) {
                this.iconStyle = 'transform: rotate(90deg)';
            } else {
                this.iconStyle = '';
            }
        },
        addDetails(obj) {
            let row = null;
            let index = 'formdetail_' + this.popData.length;
            if (this.myConfig.addRowBefore) {
                row = this.myConfig.addRowBefore(index);
                if (row === false) {
                    return;
                }
            }
            if (!row || row === true) {
                row = {};
            }
            if (obj) {
                row = Object.assign({},row, obj);
            }
            row.index = index;
            row.flag = 'I';
            this.popData.push(row);
            this.$nextTick(() => {
                document.getElementById(index).scrollIntoView();
            });
        },
        getRowObject(index) {
            if (this.$refs[index] && this.$refs[index][0]) {
                return this.$refs[index][0];
            }
            return null;
        },
        add (obj) {
            let row = null;
            if (this.myConfig.addRowBefore) {
                row = this.myConfig.addRowBefore();
                if (row === false) {
                    return;
                }
            }
            if (!row || row === true) {
                row = {};
            }
            if (obj) {
                row = Object.assign({},row, obj);
            }
            if (!this.showForm) {
                this.iconStyle = 'transform: rotate(90deg)';
                this.showForm = true;
            } 
            this.showAdd = true;
            let self = this;
            row.flag = 'I';
            self.$nextTick(() =>{
                self.$refs.addform.setData(row);
                self.$refs.addform.setFormReadOnly(false);
            });
        },
        newDoAction (obj) {
            if (this['new' + obj.name]) {
                this['new' + obj.name](obj);
            }
        },
        newsaveForm (obj) {
            let temp = obj.para.data;
            temp.index = 'formdetail_' + this.data.length;
            temp.flag = 'I';
            this.data.push(temp);
            this.showAdd = false;
            this.$nextTick(() => {
                if (this.$refs[temp.index] && this.$refs[temp.index][0]) {
                    this.$refs[temp.index][0].setReadOnly(true);
                }
            });
        },
        isChange () {
            let flag = false;
            if (this.data && this.data.length > 0) {
                this.data.forEach(el => {
                    if (!flag) {
                        if (this.$refs[el.index] && this.$refs[el.index][0]) {
                            flag = this.$refs[el.index][0].isChange();
                        }
                    }
                });
            }
            return flag;
        },
        isEdit() {
            return this.showAdd;
        },
        newcancelForm () {
            this.showAdd = false;
        },
        doAction (obj) {
            if (this[obj.name]) {
                this[obj.name](obj);
            }
        },
        getData (flag) {
            let data = [];
            if (this.myConfig.modeType === 'normal') {
                this.data.forEach(el => {
                    let obj = this.$Method.copy(el);
                    if (!flag) {
                        delete obj.index;
                    }
                    data.push(obj);
                });
            } else {
                this.popData.forEach(el => {
                    if (this.$refs[el.index] && this.$refs[el.index][0]) {
                        data.push(this.$refs[el.index][0].getData());
                    } 
                });
            }
            return data;
        },
        setData (data) {
            this.data = [];
            this.delData = [];
            this.popData = [];
            data.forEach((el, index) => {
                el.index = 'formdetail_' + index;
            });
            this.$nextTick(() => {
                this.data =this.$Method.copy(data);
                this.popData = this.$Method.copy(data);
            });
        },
        saveForm (obj) {
            let index = this.data.findIndex(el => el.index === obj.para.index);
            if (index > -1) {
                if (this.data[index].flag === undefined) {
                    obj.para.data.flag = 'U';
                }
                this.data.splice(index, 1, obj.para.data);
                this.$nextTick(() => {
                    if (this.$refs[this.data[index].index] && this.$refs[this.data[index].index][0]) {
                        this.$refs[this.data[index].index][0].setReadOnly(true);
                    }
                });
            }
        },
        delForm (obj) {
            if (this.myConfig.modeType !== 'normal') {
                this.delCommonForm(this.popData, obj); 
            } else {
                this.delCommonForm(this.data, obj); 
            }
           
        },
        delCommonForm(data, obj) {
            let index = data.findIndex(el => el.index === obj.para.index);
            let that  = this;
            if (index > -1) {
                if (this.myConfig.delRowBefore) {
                    let obj = {};
                    obj.index = index;
                    obj.gridObject = that;
                    obj.form = Object.assign({}, data[index]);
                    let flag = this.myConfig.delRowBefore(obj);
                    if (flag === false) {
                        return;
                    }
                }
                let form = this.$Method.copy(data[index]);
                if (form.flag === undefined  || form.flag === 'U') {
                    form.flag = 'D';
                    delete form.index;
                    this.delData.push(form);
                }
                data.splice(index, 1);
            }
        },
        editForm(obj) {
            this.showAdd = false;
            if (this.$refs.addform) {
                this.$refs.addform.clearData(obj);
            }
        },
        setReadOnly(value) {
            this.readOnly = value;
            this.$nextTick(() => {
                this.data.forEach(el => {
                    if (this.$refs[el.index] && this.$refs[el.index][0]) {
                        this.$refs[el.index][0].setReadOnly(value);
                    }
                });
            });
            if (this.readOnly) {
                this.showAdd = false;
            }
        },
        clearData () {
            this.data = [];
            this.delData = [];
            this.popData = [];
            this.showAdd = false;
            if (this.$refs.addform) {
                this.$refs.addform.clearData();
            }
        },
        getChangeData() {
            if (this.myConfig.modeType !== 'normal' ) {
                return this.getCommonChangeData(this.popData);
            } else {
                return this.getCommonChangeData(this.data);
            }
        },
        getCommonChangeData(data) {
            let changeData = [];
            if (data.length > 0) {
                if (this.myConfig.modeType !== 'normal') {
                    data.forEach(el => {
                        if (this.$refs[el.index] && this.$refs[el.index][0]) {
                            if (this.$refs[el.index][0].isChange()) {
                                changeData.push(this.$refs[el.index][0].getChangeData());
                            }
                        } 
                    });
                } else {
                    data.forEach(el => {
                        if (el.flag !== undefined) {
                            changeData.push(el);
                        }
                    });
                }
            }
            return changeData.concat(this.delData);
        },
        editDetails() {
            if (this.myConfig.detailsGroup !== undefined) {
                this.myConfig.editDetailsGroup(this.myConfig.detailsGroup);
            } else {
                if (this.myConfig.modeType === 'pop') {
                    this.popData = [];
                    this.$nextTick(() => {
                        this.popData = this.$Method.copy(this.data);
                        this.$nextTick(() => {
                            if (this.checkIsEdit()) {
                                this.editFlag = true;
                                this.setReadOnly(false);
                            } else {
                                this.editFlag = false;
                                this.setReadOnly(true);
                            }
                        });
                    });
                } else {
                    if (this.checkIsEdit()) {
                        this.editFlag = true;
                        this.setReadOnly(false);
                    } else {
                        this.editFlag = false;
                        this.setReadOnly(true);
                    }
                }
               
            }
        },
        checkIsEdit() {
            let flag = true;
            if (this.myConfig.editObjectBefore) {
                flag = this.myConfig.editObjectBefore(this.myConfig.name);
            }
            return flag;
        },
        save () {
            if (this.checkValidate()){
                return;
            }
            let obj = {};
            obj.name = 'saveDetails';
            obj.detailsname = this.myConfig.name;
            this.editFlag = false;
            this.$emit('doAction', obj);
        },
        checkValidate () {
            let flag = false;
            if (this.myConfig.modeType !== 'normal') {
                this.popData.some(el => {
                    if (this.$refs[el.index] && this.$refs[el.index][0]) {
                        flag = this.$refs[el.index][0].checkValidate();
                        if (flag) {
                            return true;
                        }
                    }
                });
                if (flag) {
                    this.alert('必填项不允许为空');
                }
            }
            return flag;
        },
        cancel() {
            this.editFlag = false;
            this.popData = this.$Method.copy(this.data);
            this.delData = [];
        },
        setShowBtn(value) {
            this.showBtn = value;
            if (this.myConfig.modeType === 'pop') {
                this.data.forEach(el => {
                    if (this.$refs[el.index] && this.$refs[el.index][0]) {
                        this.$refs[el.index][0].setShowBtn(value);
                    }
                });
            }
        },
        setBtnReadOnly(value) {
            this.btnReadOnly = value;
            if (this.myConfig.modeType === 'pop') {
                this.data.forEach(el => {
                    if (this.$refs[el.index + '_static'] && this.$refs[el.index + '_static'][0]) {
                        this.$refs[el.index + '_static'][0].setBtnReadOnly(value);
                    }
                });
            }
        }

    },
    mounted () {
    }
};
</script>
