<template>
    <div class="capacity">
        <Row>
            <Col :span="19">
            <Card style="margin:6px 3px 0 6px;overflow:auto"
                title="建设内容">
                <Button type="primary"
                    slot="extra"
                    @click="save">保存</Button>
                <table class="main-table">
                    <thead>
                        <tr>
                            <th rowspan="2">品牌</th>
                            <th v-for="(header, index) in headers"
                                :key="index"
                                :colspan="header.children.length"
                                :rowspan="header.children.length==0?2:1">{{header.name}}</th>
                            <th rowspan="2"
                                colspan="1">考试</th>
                        </tr>
                        <tr>
                            <template v-for="(header,index) in headers">
                                <template v-if="header.children.length!==0">
                                    <th v-for="(child, ix) in header.children"
                                        :key="index + 'H' + ix">{{child.name}}</th>
                                </template>
                            </template>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(brand, index) in brands"
                            :key="index">
                            <td>{{brand.name}}</td>
                            <template v-for="(header,ix1) in headers">
                                <template v-if="header.children.length===0">
                                    <td :key="header.name">
                                        <DataCell :data="data"
                                            :brand="brand.name"
                                            :header="header.name"
                                            @on-show-pdf="onShowPdf"
                                            @on-show-video="onShowVideo"></DataCell>
                                    </td>
                                </template>
                                <template v-else>
                                    <td v-for="(child,ix) in header.children"
                                        :key="ix1 + '_' + ix">
                                        <DataCell :data="data"
                                            :brand="brand.name"
                                            :header="child.name"
                                            @on-show-pdf="onShowPdf"
                                            @on-show-video="onShowVideo"></DataCell>
                                    </td>
                                </template>
                            </template>
                            <td>
                                <ExamCell :exams="exams"
                                    :brand="brand.name" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </Card>
            </Col>
            <Col :span="5">
            <Card title="月份"
                style="margin:6px 6px 6px 3px;">
                <DatePicker type="month"
                    v-model="currMonth"
                    placeholder="选择月份"
                    style="width: 140px"></DatePicker>
            </Card>
            <Card title="表头"
                style="margin:6px 2px 6px 3px;"
                :padding="3">
                <table class="header">
                    <tr>
                        <th style="width:32px;font-weight:bold">序号</th>
                        <th>标题</th>
                        <th>子标题</th>
                        <th style="width:32px">操作</th>
                    </tr>
                    <tr v-for="(item, index) in headers"
                        :key="index">
                        <td style="text-align:center">{{index + 1}}</td>
                        <td>{{item.name}}</td>
                        <td>
                            <div class="children"
                                v-for="(c, ix) in item.children"
                                :key="ix">
                                {{c.name}}
                            </div>
                        </td>
                        <td style="text-align:center">
                            <Icon class="delete"
                                type="ios-trash-outline"
                                color="#f00"
                                size="18"
                                title="删除"
                                @click.native="handleRemoveHeader(index)"></Icon>
                        </td>
                    </tr>
                </table>
                <Button type="dashed"
                    icon="md-add"
                    style="margin-top: 6px;"
                    @click="addHeader">新增表头</Button>
            </Card>
            <Card title="品牌"
                style="margin:6px 6px 0 3px;"
                :padding="3">
                <div>
                    <div class="brand"
                        v-for="(item, index) in brands"
                        :key="index"
                        style="display:flex;">
                        <span style="width: 32px">{{index + 1}}</span>
                        <span style="flex: 1">{{item.name}}</span>
                        <Icon class="delete"
                            type="ios-trash-outline"
                            color="#f00"
                            size="18"
                            title="删除"
                            @click.native="handleRemoveBrand(index)"></Icon>
                    </div>
                </div>
                <Button type="dashed"
                    icon="md-add"
                    style="margin-top: 6px;"
                    @click="addBrand">新增品牌</Button>
            </Card>
            </Col>
        </Row>
        <Modal title="预览"
            v-model="showPdf"
            width="840">
            <iframe :src="currPdf"
                frameborder="0"
                style="width:100%;height:400px;overflow:auto"></iframe>
        </Modal>
        <Modal title="预览"
            v-model="showVideo"
            width="352">
            <video width="320"
                height="240"
                :src="currVideo"
                controls>
            </video>
        </Modal>
    </div>
</template>
<script type="text/javascript">
import Vue from 'vue'
import CapacityHead from './capacity-head'
import CapacityBrand from './capacity-brand'
import DataCell from './data-cell'
import ExamCell from './exam-cell'
import dayjs from 'dayjs'

import { saveConfig, loadConfig } from '../api/capacity'


export default {
    name: 'Capacity',
    data() {
        return {
            showVideo: false,
            currVideo: '',
            showPdf: false,
            currPdf: '',
            currMonth: new Date(),
            data: {},
            exams: {},
            headers: [],
            brands: []
        }
    },
    components: {
        DataCell,
        ExamCell
    },
    watch: {
        currMonth: {
            handler(newVal) {
                this.loadContent(dayjs(newVal).format('yyyy-MM'))
            },
            immediate: true
        }
    },
    methods: {
        onShowPdf(file) {
            this.currPdf = file
            this.showPdf = true
        },
        onShowVideo(file) {
            this.currVideo = file
            this.showVideo = true
        },
        addHeader() {
            const D = Vue.extend(CapacityHead);
            const $vm = new D({
                data: {},
                propsData: {
                    header: { children: [] }
                },
                methods: {
                    onOkCb: (header) => {
                        this.headers.push(header)
                    }
                }
            });

            $vm.$mount();
            document.body.appendChild($vm.$el);
        },

        handleRemoveHeader(index) {
            this.$Modal.confirm({
                title: '确定',
                content: '确定删除？',
                onOk: () => {
                    this.headers.splice(index, 1)
                }
            })
        },

        addBrand() {
            const D = Vue.extend(CapacityBrand);
            const $vm = new D({
                data: {},
                propsData: {
                    brand: { children: [] }
                },
                methods: {
                    onOkCb: (brand) => {
                        this.brands.push(brand)
                    }
                }
            });

            $vm.$mount();
            document.body.appendChild($vm.$el);
        },
        handleRemoveBrand(index) {
            this.$Modal.confirm({
                title: '确定',
                content: '确定删除？',
                onOk: () => {
                    this.brands.splice(index, 1)
                }
            })
        },
        loadContent(dateStr) {
            loadConfig({ tenant_id: this.tenantId, data_month: dateStr }).then(req => {
                this.data = req.data || {}
                this.exams = req.exams || {}
                this.headers = req.headers || []
                this.brands = req.brands || []
            })
        },
        getDataKeys() {
            let keys = []

            for (let b of this.brands) {
                for (let h of this.headers) {
                    if (h.children.length == 0) {
                        keys.push(`${b.name}_${h.name}`)
                    } else {
                        for (let c of h.children) {
                            keys.push(`${b.name}_${c.name}`)
                        }
                    }
                }
            }

            return keys
        },
        save() {
            const keys = this.getDataKeys()
            Object.keys(this.data).forEach(key => {
                if (!keys.includes(key)) {
                    delete this.data[key]
                }
            })

            let data = {
                data: this.data,
                exams: this.exams,
                headers: this.headers,
                brands: this.brands
            }

            saveConfig({ tenant_id: this.tenantId, data_month: DateUtils.formatDate(this.currMonth, 'yyyy-MM'), config: JSON.stringify(data) }).then(() => {
                this.$Message.success('成功保存');
            })
        }
    },

    mounted() {}
};
</script>
<style lang="less">
.capacity {
    .capacity-tools {
        padding: 6px 20px 6px 20px;
        display: flex;
    }

    .main-table {
        border-collapse: collapse;
        margin-left: 20px;

        th,
        td {
            min-width: 140px;
            padding: 6px;
            height: 40px;
            border: 1px solid #e9eaec;
        }

        th {
            background-color: #f8f8f9;
        }

        td {
            background-color: #fff;
            text-align: center;
        }
    }

    .header {
        width: 100%;
        border-collapse: collapse;

        th {
            height: 32px;
            border: 1px solid #e9eaec;
        }

        td {
            border: 1px solid #e9eaec;
            padding: 2px;
            height: 32px;

            .children {
                margin: 2px;
                border-radius: 4px;
                background-color: #f4f4f4;
            }
        }
    }

    .brand {
        margin: 2px;
        padding: 4px;
        border-radius: 4px;
        background-color: #f4f4f4;
    }
}
</style>