 <template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader :title="$route.meta.title"
                :content="$route.meta.description"
                hidden-breadcrumb />
        </div>
        <Card :bordered="false"
            dis-hover
            class="ivu-mt">
            <view-table ref="table"
                view-code="InterfaceServer"
                @create="createNew">
                <template slot-scope="{ row, index }"
                    slot="command">
                    <Button size="small"
                        title="编辑"
                        type="primary"
                        custom-icon="fa fa-edit"
                        @click="edit(row)"></Button>
                    <Button size="small"
                        title="删除"
                        type="warning"
                        custom-icon="fa fa-trash-alt"
                        @click="$refs.table.remove(row)"></Button>
                </template>
            </view-table>
        </Card>
        <modal-form ref="form"
            key="itemeform"
            view-code="InterfaceServerEdit">
            <template slot="bottom">
                <view-table ref="itemEditTable"
                    :static="true"
                    view-code="InterfaceUrl"
                    :height="360"
                    @after-init="onAfterInit">
                </view-table>
            </template>
            <template slot="footer">
                <Button type="primary"
                    custom-icon="fa fa-upload"
                    @click="submit">提交</Button>
                <!-- <Button type="primary"
                    custom-icon="fa fa-save"
                    @click="save">保存</Button> -->
            </template>
        </modal-form>
    </div>
</template>
<script>
    import { mixinPage } from '/src/index.js';
    import interfaceServerApi from '../../../api/interfaceServer';

    export default {
        name: 'system-interface-interfaceServer',
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                emptyUrls: []
            };
        },
        created() {},
        methods: {
            async edit(row) {
                const res = await interfaceServerApi.getWithUrls(row.id);

                let interfaceUrls = this.copy(this.emptyUrls);

                for (let i = 0; i < interfaceUrls.length; i++) {
                    let interfaceUrl = res.interfaceUrls.find(item => item.environment == interfaceUrls[i].environment);

                    if (interfaceUrl) {
                        interfaceUrls[i] = interfaceUrl;
                    }
                }

                this.$refs.form.open(res.interfaceServer);
                this.$refs.itemEditTable.loadData(interfaceUrls);
            },
            async submit() {
                let isOK = await this.$refs.form.validate();
                let data = this.$refs.form.data;
                if (!isOK) {
                    this.error('有内容不符合要求，请正确填写！');
                } else {
                    this.confirm('确定要提交吗？', async () => {
                        if (!this.$refs.form.data.id) {
                            await interfaceServerApi.add(data, this.$refs.itemEditTable.data);
                        } else {
                            await interfaceServerApi.update(data, this.$refs.itemEditTable.data);
                        }

                        this.success('提交成功!', () => {
                            this.$refs.table.loadData();
                            this.$refs.form.close();
                        });
                    });
                }
            },
            createNew() {
                this.$refs.itemEditTable.loadData(this.copy(this.emptyUrls));
                this.$refs.form.open();
            },
            // 给默认值赋初始值
            onAfterInit() {
                for (let i = 0; i < 3; i++) {
                    this.emptyUrls.push(this.$refs.itemEditTable.getDefaultData());
                }

                this.emptyUrls[0].environment = 'Dev';
                this.emptyUrls[1].environment = 'Test';
                this.emptyUrls[2].environment = 'Prd';
            }
        }
    };
</script>