<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="100px"
            label-position="right"
            size="small"
            style="max-width: 700px;"
        >
            <el-timeline>
                <el-timeline-item placement="top" size="normal" timestamp="基本信息">
                    <el-card shadow="hover" :body-style="{ padding: '20px' }">
                        <div>
                            <el-form-item prop="year" label="年度">
                                <el-select v-model="formData.year" style="width: 300px" disabled>
                                    <el-option
                                        v-for="item in years"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="name" label="名称" v-if="formData.year">
                                <el-input v-model="formData.name" style="width: 300px" readonly></el-input>
                            </el-form-item>
                            <el-form-item label="报名起始时间">
                                <el-date-picker
                                    v-model="dateRange"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="请选择开始时间"
                                    end-placeholder="请选择结束时间"
                                    range-separator="至"
                                    style="width: 300px"
                                    readonly
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item prop="online" label="展演形式">
                                <el-radio-group v-model="formData.online" disabled>
                                    <el-radio :label="true">线上</el-radio>
                                    <el-radio :label="false">线下</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                    </el-card>

                    <!-- content -->
                </el-timeline-item>

                <el-timeline-item placement="top" size="normal" timestamp="计划安排">
                    <el-card shadow="hover" :body-style="{ padding: '20px' }">
                        <div v-for="(item, index) in schedules" :key="index">
                            <div v-if="!item.del">
                                <el-row>
                                    <el-col :span="11">
                                        <el-form-item prop="content" label="活动内容">
                                            <el-input v-model="item.content" readonly></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="11">
                                        <el-form-item prop="date" label="活动时间">
                                            <el-date-picker
                                                v-model="item.date"
                                                type="date"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期"
                                                readonly
                                            >
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="活动地点">
                                            <el-input v-model="item.address" readonly></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
                </el-timeline-item>

                <el-timeline-item placement="top" size="normal" timestamp="咨询电话">
                    <el-card shadow="hover" :body-style="{ padding: '20px' }">
                        <div v-for="(item, index) in phones" :key="index">
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="联系人">
                                        <el-input v-model="item.name" readonly></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="电话">
                                        <el-input v-model="item.phone" readonly></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-timeline-item>

                <el-timeline-item placement="top" size="normal" timestamp="其他信息">
                    <el-card shadow="hover" :body-style="{ padding: '20px' }">
                        <div>
                            <el-form-item prop="email" label="活动邮箱">
                                <el-input v-model="formData.email" style="width: 300px" readonly></el-input>
                            </el-form-item>
                            <el-form-item prop="annex" label="活动方案">
                                <file-upload v-model="formData.annex" :readonly="true"></file-upload>
                            </el-form-item>
                            <el-form-item prop="codeImg" label="活动工作群">
                                <el-image
                                    style="width: 100px; height: 100px;"
                                    :src="formData.codeImg"
                                    fit="cover"
                                    :preview-src-list="[formData.codeImg]"
                                ></el-image>
                            </el-form-item>
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>

            <el-form-item>
                <el-button @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'PerformanceShow',
    created() {
        if (this.$route.query.id) {
            this.$http
                .get('performance/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                    if (typeof res.performanceEnquiries != 'undefined') {
                        this.phones = res.performanceEnquiries;
                    }
                    this.dateRange = [res.startDate, res.endDate];

                    this.$http
                        .post(
                            '/performanceSchedule/all',
                            { size: 100, query: { performanceId: this.$route.query.id } },
                            { body: 'json' }
                        )
                        .then(res => {
                            this.schedules = res.content;
                        });
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {},
            statusOptions: [
                { label: '报名中', value: 'APPLY' },
                { label: '已结束', value: 'END' }
            ],
            dateRange: [],
            eventTimeRange: '',
            display: false,
            years: ['2020', '2021', '2022', '2023', '2024'],
            schedules: [],
            phones: [],
            performanceId: ''
        };
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    padding: 0 0;
    background-color: transparent;
}
.add-con {
    background-color: #f7f7f7;
    width: 100%;
    margin: 7px 0;
    padding-top: 14px;
}
.del {
    float: right;
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
/deep/.el-radio__input.is-disabled + span.el-radio__label {
    color: #606266; // #409EFF;
}
</style>
