<template>
<Card :bordered="false" :padding="0" dis-hover>
    <p  @click="toggle" style="cursor:pointer;" >
        <Row  type="flex" :gutter="0"  justify="start" align="middle" style="margin-bottom:14px;margin-top:14px;">
            <Col span="18">
            <Icon custom='iconfont icon-custom-pack' color="#f3b352" v-show="showForm" size="14" /><Icon  v-show="!showForm" color="#f3b352" custom='iconfont icon-custom-spread' size="14"/>
                 <span style="margin-left:10px;font-size: 14px;font-weight:bold" v-text="myConfig.title" />
            </Col>
            <Col  v-show="showForm"  span="6">
            <Row  type="flex" justify="end" :gutter="0"  align="middle">
                <Dropdown  placement="bottom-start"  style="float:right">
                    <Button style="height:21px" type="info">
                        更多操作
                        <Icon type="ios-arrow-down"></Icon>
                    </Button>
                    <template #list>
                        <DropdownMenu>
                            <DropdownItem>
                                <Button  @click.stop="openForm" >全部展开</Button>
                            </DropdownItem>
                                <DropdownItem >
                                <Button   @click.stop="closeForm">全部收起</Button>
                            </DropdownItem>
                        </DropdownMenu>
                    </template>
                </Dropdown>
            </Row>
            </Col>
        </Row>
    </p>
    <Divider style="margin-left:24px;margin-bottom:10px;margin-top: 0px;"/>
    <div style="margin-left:24px;" v-show="showForm" >
        <Row style="margin-bottom:10px;">
            <Button  style="padding-left:0px;padding-right:0px" customIcon="iconfont icon-custom-rowadd3"  type="text"  :disabled="btnReadOnly" @click="add" >添加</Button>
        </Row>   
        <FormDetail v-if="showAdd" ref="addform" :config="myConfig" :isAdd="true"   @doAction="newDoAction" :dictData="dictData"/>
        <FormDetail v-for="(temp,index) in data"  :ref="temp.curlIndex" :key="temp.curlIndex"  :valueData="temp" :curlIndex="temp.curlIndex" :index="index"  :config="myConfig"  @doAction="doAction" :dictData="dictData"/>
    </div>
</Card>
</template>

<script>
import FormDetail from './formdetailtwo.vue';
import random from '../../utils/random_str';
export default {
    name:'mdetail',
    components:{
        FormDetail
    },
    data () {
        return {
            readOnly:false,
            showAdd:false,
            isGrid:false,
            myConfig:{
                title:'',
                titleType:1,
                addBtnType:'1',
                hide:true,
                addBtnName:'新增',
                editBtnName:'编辑'
            },
            showForm:true,
            editFlag:false,
            showBtn:true,
            iconStyle:'',
            pStyle:'',
            data:[],
            delData:[],
            btnReadOnly:false
        };
    },
    props:{
        config:{
            type:Object,
            default:null
        },
        dictData: {
            type: Object,
            default:null
        }
    },
    created () {
        this.init();
    },
    computed: {
    },
    methods:{
        init (){
            this.myConfig = Object.assign({},this.myConfig,this.config);
            if (this.myConfig.effectKey) {
               if (this.myConfig.gridConfig) {
                   if (this.myConfig.gridConfig.effectKey === undefined) {
                       this.myConfig.gridConfig.effectKey = this.myConfig.effectKey;
                   }
               }
            }
            delete this.myConfig.formConfig.name;
            delete this.myConfig.formConfig.title;
            delete this.myConfig.gridConfig.name;
            delete this.myConfig.gridConfig.title;
        },
        setShowGrid (value) {
            this.showForm = value;
        },
        toggle () {
            this.showForm = !this.showForm;
        },
        getRowObject(index) {
            if (index < this.date.length) {
                if (this.$refs[this.date[index].curlIndex] && this.$refs[this.date[index].curlIndex][0]) {
                    return this.$refs[this.date[index].curlIndex][0];
                }
            }
            return null;
        },
        getRandom() {
            return random(8);
        },
        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.showForm = true;
            } 
            this.showAdd = false;
            let self = this;
            this.$nextTick(() => {
                this.showAdd  = true;
                this.$nextTick(() => {
                    setTimeout(() => {
                        row.flag = 'I';
                        self.$refs.addform.clearData();
                        self.$refs.addform.setData(row);
                        self.$refs.addform.setFormReadOnly(false);
                    }, 200);
                });
            });
        },
        newDoAction (obj) {
            if (this['new' + obj.name]) {
                this['new' + obj.name](obj);
            }
        },
        newsaveForm (obj) {
            let flag = true;
            let temp = obj.para.data;
            temp.curlIndex = 'formdetail_' + this.getRandom();
            temp.flag = 'I';
            if (this.myConfig.newSaveFormBefore) {
                flag = this.myConfig.newSaveFormBefore(temp);
            }
            if (flag) {
                this.data.push(temp);
                this.showAdd = false;
            }
          
        },
        isChange () {
            let flag = false;
            if (this.data && this.data.length > 0) {
                this.data.forEach(el => {
                    if (!flag) {
                        if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
                            flag = this.$refs[el.curlIndex][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 = [];
            this.data.forEach(el => {
                let obj = this.$Method.copy(el);
                if (!flag) {
                    delete obj.curlIndex;
                }
                data.push(obj);
            });
            return data;
        },
        setData (data) {
            this.data = [];
            this.delData = [];
            data.forEach(el => {
                el.curlIndex = 'formdetail_' + this.getRandom();
            });
            this.$nextTick(() => {
                this.data =this.$Method.copy(data);
            });
        },
        setEffectData(data) {
           this.data.forEach(el => {
               if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
                   let tmp = [];
                   if (this.myConfig.effectKey) {
                        let tmpIdex = data.findIndex(el2 => el[this.myConfig.effectKey] === el2[this.myConfig.effectKey]);
                        if (tmpIdex > -1) {
                            tmp = this.$Method.copy(data[tmpIdex]);
                        }
                        this.$refs[el.curlIndex][0].setEffectData(tmp);
                   }
               }
           });
        }, 

        saveForm (obj) {
            let index = this.data.findIndex(el => el.curlIndex === obj.para.curlIndex);
            if (index > -1) {
                if (this.data[index].flag === undefined) {
                    obj.para.data.flag = 'U';
                }
                this.data.splice(index, 1, obj.para.data);
            }
        },
        delForm (obj) {
            this.delCommonForm(obj); 
        },
        delCommonForm(obj) {
            let index = this.data.findIndex(el => el.curlIndex === obj.para.curlIndex);
            let that  = this;
            if (index > -1) {
                let form = this.$Method.copy(this.data[index]);
                if (this.$refs[obj.para.curlIndex] && this.$refs[obj.para.curlIndex][0]) {
                    form = this.$refs[obj.para.curlIndex][0].getData();
                }
                if (this.myConfig.delRowBefore) {
                    let obj = {};
                    obj.index = index;
                    obj.gridObject = that;
                    obj.form = Object.assign({}, form);
                    let flag = this.myConfig.delRowBefore(obj);
                    if (flag === false) {
                        return;
                    }
                }
                if (form.flag === undefined  || form.flag === 'U') {
                    form.flag = 'D';
                    delete form.index;
                    delete form.curlIndex;
                    this.delData.push(form);
                }
                this.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.curlIndex] && this.$refs[el.curlIndex][0]) {
                        this.$refs[el.curlIndex][0].setReadOnly(value);
                    }
                });
            });
            if (this.readOnly) {
                this.showAdd = false;
            }
            this.setBtnReadOnly(value);
        },
        clearData () {
            this.data = [];
            this.delData = [];
            this.showAdd = false;
            if (this.$refs.addform) {
                this.$refs.addform.clearData();
            }
        },
        getChangeData() {
            return this.getCommonChangeData(this.data);
        },
        getCommonChangeData(data) {
            let changeData = [];
            if (data.length > 0) {
                data.forEach(el => {
                    if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
                        if (this.$refs[el.curlIndex][0].isChange()) {
                            changeData.push(this.$refs[el.curlIndex][0].getChangeData());
                        }
                    } 
                });
            }
            return changeData.concat(this.delData);
        },
        editDetails() {
            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);
        },
        delRowData (obj) {
            this.delForm(obj);
        },
        checkValidate () {
            let flag = false;
            this.data.some(el => {
                if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
                    flag = this.$refs[el.curlIndex][0].checkValidate();
                    if (flag) {
                        return true;
                    }
                }
            });
            if (flag) {
                this.alert('必填项不允许为空');
            }
            return flag;
        },
        cancel() {
            this.editFlag = false;
            this.delData = [];
        },
        setShowBtn(value) {
            this.showBtn = value;
        },
        setBtnReadOnly(value) {
            this.btnReadOnly = value;
        },
        openForm () {
            this.data.forEach(el => {
                if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
                    this.$refs[el.curlIndex][0].setShowForm(true);
                }
            });
        },
        closeForm() {
            this.data.forEach(el => {
                if (this.$refs[el.curlIndex] && this.$refs[el.curlIndex][0]) {
                    this.$refs[el.curlIndex][0].setShowForm(false);
                }
            });
            this.showAdd = false;
        },
    },
    mounted () {
    }
};
</script>
