<template>
    <div>
        <Form :label-width="120">
            <Row :gutter="20" class="code-row-bg" v-for="row in rows" :key="row">
                <Col span="10" v-for="col in 2" :key="col" v-if="!!attributes[((row - 1) * 2) + (col - 1)]">
                <Form-item prop="userCode" :label="attributes[((row - 1) * 2) + (col - 1)].ffeaCode">
                    <Input v-model="attributes[((row - 1) * 2) + (col - 1)][attributes[((row - 1) * 2) + (col - 1)].ffeaUseColumn]" placeholder="" />
                </Form-item>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
export default {
    name: 'flex-fields',
    components: {

    },
    props: {
        fields: {
            type: Object,
            default() {
                return null;
            }
        },
        orgId: {
            type: String,
            default() {
                return undefined
            }
        },
        value: {
            type: Object,
            default() {
                return {}
            }
        },
        code: {
            type: String,
            default() {
                return ''
            }
        }
    },
    data() {
        return {
            global: [],
            refAttr: [],
            orgs: [],
            referenceField: undefined,

        }
    },
    computed: {
        attributes() {
            return [].concat(this.global, this.refAttr);
        },
        rows() {
            return Math.ceil(this.attributes.length / 2);
        },
        currentOrg() {
            if (this.orgs.length < 1) {
                return null;
            }
            let i = this.orgs.findIndex((o) => {
                return !!this.orgId && !!o ? (o.orgId == this.orgId) : false;
            })
            return ~i ? Object.assign({}, this.orgs[i]) : null;
        }
    },
    created: function () {
        this.init();
    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {
        getFields() {
            let obj = {};
            this.attributes.map((field) => {
                obj[field.ffeaUseColumn] = field[field.ffeaUseColumn]
            })
            return obj;
        },
        init() {
            $store.dispatch('GetFlexField', this.code).then((response) => {
                this.global = [].concat(response.data.global || []);
                this.referenceField = response.data.ffRefBeanAttribute;
                this.orgs = [].concat(response.data.orgs || []);
                this.match(this.fields);
                this.setValues();
            })
        },
        matchCurrentOrg() {

        },
        match(obj) {
            if (!this.currentOrg) return;
            let _org = Object.assign({}, this.currentOrg);
            let i = _org.keys.findIndex((val) => {
                console.log(String(obj[this.referenceField]), String(val.ffeCode), !!~String(obj[this.referenceField]).indexOf(String(val.ffeCode)))
                return !!~String(obj[this.referenceField]).indexOf(String(val.ffeCode))
            })
            ~i || (this.refAttr = [])
            ~i && (this.refAttr = [].concat(_org.keys[i].attributes))
        },
        setValues() {
            this.global.map((val) => {
                !!this.value[val.ffeaUseColumn] && (val[val.ffeaUseColumn] = this.value[val.ffeaUseColumn])
            })
            this.refAttr.map((val) => {
                !!this.value[val.ffeaUseColumn] && (val[val.ffeaUseColumn] = this.value[val.ffeaUseColumn])
            })
            this.$forceUpdate();
        }
    },
    watch: {
        fields: {
            handler(obj) {
                if (!this.currentOrg || !this.referenceField) {
                    this.refAttr = []
                    return false;
                }
                this.match(obj);
            },
            deep: true
        }
    },
    directives: {

    }
}
</script>
