<template>
    <div class="context">
        <div class="panel">
            <h5>{{pageTitle}}</h5>
        </div>
        <div class="panel-body">
            <div class="panel_control">
                <el-row :gutter="20">
                    <el-col :span="9">
                        <em>课程表模板名称:</em>
                        <el-input v-model="panel.name" placeholder="请输入课程表模板名称"></el-input>
                    </el-col>
                    <!--                    默认不通用-->
                </el-row>
            </div>
        </div>
        <br>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="星期一" name="1"></el-tab-pane>
            <el-tab-pane label="星期二" name="2"></el-tab-pane>
            <el-tab-pane label="星期三" name="3"></el-tab-pane>
            <el-tab-pane label="星期四" name="4"></el-tab-pane>
            <el-tab-pane label="星期五" name="5"></el-tab-pane>
            <el-tab-pane label="星期六" name="6"></el-tab-pane>
            <el-tab-pane label="星期天" name="7"></el-tab-pane>
        </el-tabs>
        <el-button class="seeTemp">预览模板</el-button>
        <div class="table">
            <el-table
                    v-for="tab in tabs"
                    :data="tab.tableData"
                    v-if="tab.days == activeName"
                    border
                    is-horizontal-resize
                    :default-sort="{prop: 'date', order: 'descending'}"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    class=""
                    @selection-change="handleSelectionChange"
            >
                <el-table-column
                        prop="timeScope"
                        label="时间"
                        width="260px"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-time-picker
                                is-range
                                v-model="scope.row.timeLong"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围">
                        </el-time-picker>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ClassId"
                        label="课程"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.ClassId">
                            <el-option
                                    v-for="item in panel.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="TopLimit"
                        label="预约名额"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.TopLimit" :min="1" :max="9999" label=""></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="ConsumeHour"
                        label="消耗课时"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.ConsumeHour" :min="1" :max="9999"
                                         label=""></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="Status"
                        label="操作"
                        width="100px"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button type="text" class="red" @click="delRow(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="rowBottom">
                <el-button type="primary" @click="addRow">新增课表</el-button>
                <!--                ID为0是新建,不为0是修改-->
                <el-button type="primary" @click="confirmLessonTable" v-if="this.$route.query.id == 0">提交</el-button>
                <el-button type="primary" @click="EditLessonTable" v-if="this.$route.query.id != 0">提交</el-button>
                <em class="red wrning">
                    *所有操作提交后生效
                </em>
            </div>
        </div>
        <br>


        <el-dialog title="增删课程会员" :visible.sync="dialogVisible">
            <div class="dialogTitle">
                <span>基础功能</span>
            </div>
            <div>
                <el-transfer filterable v-model="dialogValue" :data="dialogdata"></el-transfer>
            </div>
            <div class="dialogFooter">
                <el-button type="primary" size="small">确定</el-button>
                <el-button @click="dialogVisible = false" size="small">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Global from '../Global.js'
    import {
        SttPlanBasicAdd,
        SttPlanDetailListQuery,
        SttPlanDetailBatchSave,
        SttPlanBasicEdit,
        testTable,
        testTableLong,
        testSelect
    } from "../api/getApiRes";

    let qs = require('qs');
    export default {
        data() {
            return {
                pageTitle: '新增课程表模板',
                dialogVisible: false,
                dialogdata: [],
                dialogValue: [],
                temId: '',
                activeName: '1',
                tableData: [],
                // panel 配置项目
                panel: {
                    usercode: '',
                    username: '',
                    compname: '',
                    keyword: '',
                    USERCODE: '',
                    taskstatus: 99,
                    draw: 1,
                    start: 0,
                    recordsTotal: 0,
                    tableData: [],
                    allTableData: [],
                    limit: '10',
                    multipleSort: false,
                    loading: false,
                    fileList: [],
                    multipleSelection: [],
                    detectedmac: '',
                    options: [
                        {value: 99, label: '全部'},
                        {value: 1, label: '进行中'},
                        {value: 2, label: '已完成'},
                    ],
                    time1: globalBt(),
                },
                multipleSelection: [],
                pageination: {
                    pageItem: 100,
                    pageoptions: pageOptions(),
                    total: 100,
                    pageIndex: 1,
                },
                testRow: {
                    timeLong:[new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
                    BeginStr: '08:30',
                    EndStr: '09:30',
                    ClassId: 1,
                    TopLimit: 0,
                    ConsumeHour: 0,
                },
                tabs: [
                    {
                        tableData: [], days: '1'
                    },
                    {
                        tableData: [
                            // {name:'1'},
                        ], days: '2'
                    },
                    {
                        tableData: [], days: '3'
                    },
                    {
                        tableData: [], days: '4'
                    },
                    {
                        tableData: [], days: '5'
                    },
                    {
                        tableData: [], days: '6'
                    },
                    {
                        tableData: [], days: '7'
                    },
                ]
            }
        },
        mounted() {
            if (this.$route.query.id == 0) {
                //  深拷贝赋初始值
                this.deepValue();
            } else {
                // 读取赋值
                this.getTableQuery();
            }
        },
        methods: {
            // 删除
            delRow(scope){
                let delIndex = parseInt(scope.$index)
                let curIndex = parseInt(this.activeName) -1;
                this.tabs[curIndex].tableData.splice(delIndex, 1)
            },
            // 提交课程模板
            confirmLessonTable() {
                if (!this.panel.name) {
                    this.$message.error('模板名称不能为空');
                    return false
                }
                if (this.panel.name.length < 3) {
                    this.$message.error('模板名称不能小于3个字符');
                    return false
                }
                if (this.panel.name.length > 20) {
                    this.$message.error('模板名称不能大于20个字符');
                    return false
                }
                let that = this;
                let param = {
                    token: localStorage.token,
                    planName: this.panel.name,
                };
                let postdata = qs.stringify(param);
                SttPlanBasicAdd(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.panel.tabId = json.Id;
                        console.log(json.Id);
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 修改课程模板
            EditLessonTable() {
                let that = this;
                // if (this.checkData()) {
                //     this.$message.error('数据内容不完整，请检查后重新输入');
                //     return false
                // }
                // 提交数据

                let planRs = [];
                let thisRow = {};
                let timeLong = []
                for (let i = 0; i < this.tabs.length; i++) {
                    for (let j = 0; j < this.tabs[i].tableData.length; j++) {
                        thisRow = this.tabs[i].tableData[j];
                        thisRow.PlanId = parseInt(this.$route.query.id);
                        thisRow.WeekDay = parseInt(i + 1);
                        thisRow.BeginStr = getHoursAndMin(thisRow.timeLong[0]);
                        thisRow.EndStr = getHoursAndMin(thisRow.timeLong[1]);
                        this.$delete(thisRow, 'Base');
                        this.$delete(thisRow, 'SpdId');
                        // this.$delete(thisRow, 'timeLong');
                        planRs.push(thisRow)
                    }
                }
                let res = JSON.stringify(planRs);
                let param = {
                    token: localStorage.token,
                    planId: this.$route.query.id,
                    planRs: res,
                };
                let postdata = qs.stringify(param);
                SttPlanDetailBatchSave(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.$message({
                            showClose: true,
                            message: '课程模板上传成功！',
                            type: 'success'
                        });
                        this.getTableQuery();
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            // 检查数据
            checkData() {
                // todo
                let tableDate = this.tabs;
                tableDate.map(function (item) {
                    console.log(item.tableData);
                })
            },
            // 新增一行
            addRow() {
                // 读取当前周几
                let index = parseInt(this.activeName) - 1;
                let rows = this.testRow;
                let res = this.deepClone(rows);
                this.tabs[index].tableData.push(res);
            },
            //  深拷贝赋初始值
            deepValue() {
                let that = this;
                let valus = [
                    {BeginStr: '08:30', EndStr: '09:30', ClassId: 0, TopLimit: 0, ConsumeHour: 0},
                ];
                this.tabs.map(function (item) {
                    let res = that.deepClone(valus);
                    item.tableData = res;
                })
            },
            deepClone(obj) {
                let _obj = JSON.stringify(obj),
                    objClone = JSON.parse(_obj);
                return objClone
            },
            handleClick() {
            },
            changeWechat(e, row) {
                // todo
                this.$message.success('当前用户微信已可见');
            },
            // 增删会员课程
            lessonStudenChange() {
                this.dialogVisible = true
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 页面数据查询
            getTableQuery() {
                let that = this;
                that.loading = true;
                let param = {
                    token: localStorage.token,
                    planId: this.$route.query.id,//
                };
                this.panel.name = this.$route.query.name;
                let postdata = qs.stringify(param);
                SttPlanDetailListQuery(postdata).then(res => {
                    let json = res;
                    let Rs = json.Rs
                    let bt = '';
                    let et = '';
                    if (json.Code == 0) {
                        that.loading = false;
                        // 清掉上次的记录
                        for (let i = 0; i <  that.tabs.length; i++) {
                            that.tabs[i].tableData = []
                        }
                        if (Rs) {
                            // 遍历分配
                            Rs.map(function (item) {
                                for (let i = 0; i < 7; i++) {
                                    if (item.WeekDay == i) {
                                        bt = new Date(2016, 9, 10, item.BeginStr.substr(0, 2), item.BeginStr.substr(3, 2));
                                        et = new Date(2016, 9, 10, item.EndStr.substr(0, 2), item.EndStr.substr(3, 2));
                                        item.timeLong = [bt, et];
                                        that.tabs[i - 1].tableData.push(item);
                                    }
                                }
                            })
                        } else {
                            that.allTableData = [];
                            that.recordsTotal = 0;
                        }
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
        },
        watch: {
            $route() {
                this.temId = this.$route.query.id
            },
            temId(e) {
                if (parseInt(e) == 0) {
                    this.pageTitle = '新增课程表模板'
                } else {
                    this.pageTitle = '编辑课程表模板'
                }
            },
        },
    }
</script>

<style scoped>
    @import "../assets/css/panel.css";

    em {
        font-style: normal;
    }

    .context {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-color: #fff !important;
        padding: 30px;
    }

    .panel-body {
        padding: 20px;
        background: #F0F2F5;
    }

    .change {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .change button {
        float: left;
    }

    .change button.pull-right {
        float: right;
    }

    .dialogTitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #000000;
        font-size: 18px;
        text-align: center;
    }

    .dialogTitle span {
        width: 169px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background: #3799FF;
        border-radius: 250px;
        font-size: 18px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .dialogTitle em {
        float: none;
        font-style: normal;
        color: #3799FF;
        margin: 0;
    }

    /deep/ .el-transfer-panel__item .el-checkbox__input {
        left: 40px;
    }

    .dialogFooter {
        width: 90%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
    }

    .dialogFooter button {
        float: right;
        margin-left: 10px;
    }

    /deep/ .panel_control .el-input {
        width: 200px;
        float: left;
    }

    .panel_control em {
        float: left;
        font-size: 14px;
        color: #545454;
        line-height: 45px;
        margin-right: 10px;
    }

    .seeTemp {
        position: relative;
        float: right;
        bottom: 60px;
    }

    .table {
        position: relative;
        top: -50px;
    }

    .el-range-editor.el-input__inner {
        width: 220px;
        padding: 3px 6px;
    }

    .rowBottom {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 10px;
    }

    .rowBottom button {
        float: left;
        margin-right: 10px;
    }
    .wrning {
        float: right;
        font-size: 12px;
    }
</style>
