<template>
    <el-dialog
        v-loading="saving"
        @close="closeDialog"
        title="节目详情"
        center
        :visible.sync="dialogVisible"
        width="800px"
    >
        <div class="edit-view">
            <el-form
                :model="formData"
                :rules="rules"
                ref="form"
                label-width="80px"
                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' }">
                            <el-form-item prop="name" label="节目名称">
                                <el-input v-model="formData.name" class="width" readonly></el-input>
                            </el-form-item>
                            <el-form-item prop="specialtyId" label="参赛专业">
                                <el-input v-model="formData.specialty" class="width" readonly></el-input>
                            </el-form-item>
                            <el-form-item prop="competitionGroup" label="参赛组别">
                                <el-select
                                    v-model="formData.competitionGroup"
                                    class="width"
                                    clearable
                                    filterable
                                    placeholder="请选择"
                                    disabled
                                >
                                    <el-option
                                        v-for="(item, index) in competitionGroupOptions"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="levelSettingId" label="参赛级别" v-if="formData.competitionGroup">
                                <el-input v-model="formData.level" class="width" readonly></el-input>
                            </el-form-item>
                            <el-form-item
                                prop="durationOfWork"
                                label="作品时长"
                                v-if="
                                    formData.specialtyId !== 187 &&
                                        formData.specialtyId !== 188 &&
                                        formData.specialtyId !== 189 &&
                                        formData.specialtyId !== 190 &&
                                        formData.specialtyId !== 191 &&
                                        formData.specialtyId !== 192 &&
                                        formData.specialtyId !== 193 &&
                                        formData.specialtyId !== 194 &&
                                        formData.specialtyId !== 589 &&
                                        formData.specialtyId !== 590 &&
                                        formData.specialtyId !== 591 &&
                                        formData.specialtyId !== 592 &&
                                        formData.specialtyId !== 593 &&
                                        formData.specialtyId !== 594 &&
                                        formData.specialtyId !== 595 &&
                                        formData.specialtyId !== 596 &&
                                        formData.specialtyId !== 597 &&
                                        formData.specialtyId !== 598 &&
                                        formData.specialtyId !== 599 &&
                                        formData.specialtyId !== 600 &&
                                        formData.specialtyId !== 601 &&
                                        formData.specialtyId !== 602 &&
                                        formData.specialtyId !== 603 &&
                                        formData.specialtyId !== 604 &&
                                        formData.specialtyId !== 605
                                "
                            >
                                <el-input v-model="formData.durationOfWork" class="width" readonly></el-input>
                            </el-form-item>
                            <el-form-item prop="instructor" label="指导老师">
                                <el-input v-model="formData.instructor" class="width" readonly></el-input>
                            </el-form-item>
                            <el-form-item prop="instructorPhone" label="联系方式">
                                <el-input v-model="formData.instructorPhone" class="width" readonly></el-input>
                            </el-form-item>
                            <div
                                v-if="
                                    formData.specialty == '中国画' ||
                                        formData.specialty == '美术' ||
                                        formData.specialty == '西画' ||
                                        formData.specialty == '书法' ||
                                        formData.specialty == '漫画' ||
                                        formData.specialty == '手工技艺' ||
                                        formData.specialty == '摄影' ||
                                        formData.specialty == '篆刻' ||
                                        formData.specialty == '人物' ||
                                        formData.specialty == '山水' ||
                                        formData.specialty == '花鸟' ||
                                        formData.specialty == '素描' ||
                                        formData.specialty == '速写' ||
                                        formData.specialty == '水粉画' ||
                                        formData.specialty == '水彩画' ||
                                        formData.specialty == '油画' ||
                                        formData.specialty == '软笔书法' ||
                                        formData.specialty == '硬笔书法' ||
                                        formData.specialty == '剪纸' ||
                                        formData.specialty == '泥塑' ||
                                        formData.specialty == '年画' ||
                                        formData.specialty == '皮影制作' ||
                                        formData.specialty == '陶艺' ||
                                        formData.specialty == '染织' ||
                                        formData.specialty == '版画'
                                "
                            >
                                <el-form-item prop="annex" v-if="formData.annex" label="作品图片">
                                    <img class="imgBox" :src="formData.annex" alt="" />
                                </el-form-item>
                            </div>
                            <div v-else>
                                <el-form-item prop="video" label="作品视频" v-if="formData.video">
                                    <video-upload v-model="videos" class="width" :readonly="true"></video-upload>
                                </el-form-item>
                            </div>
                        </el-card>
                    </el-timeline-item>
                    <el-collapse-transition>
                        <div v-show="showMore">
                            <el-timeline-item placement="top" size="normal" timestamp="单位信息">
                                <el-card shadow="hover" :body-style="{ padding: '20px' }">
                                    <el-form-item prop="gradingOrganizationId" label="考级机构">
                                        <el-input
                                            v-model="formData.gradingOrganization"
                                            class="width"
                                            readonly
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item prop="organizationId" label="承办单位">
                                        <el-input v-model="formData.organization" class="width" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item prop="examPoint" label="考级点">
                                        <el-input v-model="formData.examPoint" class="width" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item prop="contact" label="联系人">
                                        <el-input v-model="formData.contact" class="width" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item prop="phone" label="联系电话">
                                        <el-input v-model="formData.phone" class="width" readonly></el-input>
                                    </el-form-item>
                                </el-card>
                            </el-timeline-item>

                            <el-timeline-item placement="top" size="normal" timestamp="参演人员">
                                <el-card shadow="hover" :body-style="{ padding: '20px' }">
                                    <el-table
                                        :data="participants"
                                        ref="table"
                                        header-row-class-name="table-header-row"
                                        header-cell-class-name="table-header-cell"
                                        row-class-name="table-row"
                                        cell-class-name="table-cell"
                                    >
                                        <el-table-column prop="img" label="证件照">
                                            <template slot-scope="{ row }">
                                                <el-image
                                                    style="width: 30px; height: 30px;"
                                                    :src="row.img"
                                                    fit="cover"
                                                    :preview-src-list="[row.img]"
                                                ></el-image>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="姓名" min-width="80"> </el-table-column>
                                        <el-table-column prop="birthday" label="出生年月" min-width="100">
                                        </el-table-column>
                                        <el-table-column prop="sex" label="性别" min-width="70"> </el-table-column>
                                        <el-table-column prop="phone" label="联系方式" min-width="100">
                                        </el-table-column>
                                        <el-table-column prop="certificate" label="考级证书">
                                            <template slot-scope="{ row }">
                                                <el-image
                                                    style="width: 30px; height: 30px;"
                                                    :src="row.certificate"
                                                    fit="cover"
                                                    :preview-src-list="[row.certificate]"
                                                ></el-image>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="idNo" label="身份证号" min-width="100">
                                        </el-table-column>
                                    </el-table>
                                </el-card>
                            </el-timeline-item>
                        </div>
                    </el-collapse-transition>
                    <div style="width:100%;textAlign:center">
                        <el-button
                            class="more"
                            round
                            type="primary"
                            :plain="!showMore"
                            :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                            @click="showMore = !showMore"
                        ></el-button>
                    </div>
                </el-timeline>
                <!-- <el-form-item> </el-form-item> -->
            </el-form>
            <!-- <div class="btn">
                <el-button @click="$router.go(-1)">返回</el-button>
            </div> -->
        </div>
    </el-dialog>
</template>
<script>
import delChild from '@/mixins/delChild';
import { mapState } from 'vuex';
export default {
    name: 'ProgrammeShow',
    mixins: [delChild],
    props: ['dialogVisible'],
    created() {},
    data() {
        return {
            saving: false,
            formData: {},
            show: false,
            showMore: false,
            videos: {},
            level: '',
            rules: {
                phone: [
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ]
            },
            competitionGroupOptions: [
                { label: '个人', value: 'SINGLE' },
                { label: '集体', value: 'COLLECTIVE' }
            ],
            levelSingleOptions: [],
            levelCollectiveOptions: [],
            gradingOrganizationIdOptions: [],
            organizationIdOptions: [],
            artTypes: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children',
                multiple: false,
                emitPath: false,
                checkStrictly: true,
                expandTrigger: 'hover'
            },
            participants: [],
            programmeId: ''
        };
    },
    computed: {
        ...mapState(['organization']),
        saveOtherJson() {
            return [...this.participants]
                .filter(item => {
                    return !!item.name || !!item.sex || !!item.phone;
                })
                .map(item => {
                    return {
                        ...item,
                        programmeId: this.programmeId
                    };
                });
        }
    },
    methods: {
        dataApi(id) {
            if (id) {
                this.$http
                    .get('programme/getByAdmin/' + id)
                    .then(res => {
                        this.formData = res;
                        // console.log(res);
                        this.videos = {
                            src: res.video
                        };
                        this.$http
                            .post('/participant/all', { size: 100, query: { programmeId: id } }, { body: 'json' })
                            .then(res => {
                                this.participants = res.content;
                            });
                    })
                    .catch(e => {
                        console.log(e);
                        this.$message.error(e.error);
                    });
            } else if (this.organization) {
                this.formData.organizationId = this.organization.id;
                this.formData.contact = this.organization.owner;
                this.formData.phone = this.organization.ownerPhone;
                if (this.organization.gradingOrganizationId.length > 0) {
                    this.formData.gradingOrganizationId = this.organization.gradingOrganizationId[0];
                }
            }
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/programme/del/${this.formData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error((e || {}).error || '删除失败');
                    }
                });
        },
        closeDialog() {
            this.$emit('close');
        },
        onAddOtherForm() {
            console.log(this.participants.length);
            if (this.formData.competitionGroup == 'SINGLE' && this.participants.length > 0) {
                this.$alert('单人组别只能添加一个参赛人员信息', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: '添加失败'
                        });
                    }
                });
            } else {
                this.participants.push({
                    name: '',
                    sex: '',
                    birthday: '',
                    phone: '',
                    img: ''
                });
            }
        },
        onDeleteOtherForm(info, index) {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'warning' })
                .then(() => {
                    const schedules = [...this.schedules];
                    if (info.id) {
                        info.del = true;
                        schedules[index] = info;
                    } else {
                        schedules.splice(index, 1);
                    }
                    this.schedules = schedules;
                    this.$message.success('删除成功');
                })
                .catch(e => {});
        }
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    padding: 0 0;
    background-color: transparent;
}
.width {
    width: 260px;
}
// /deep/ .el-timeline-item {
//     padding-bottom: 35px;
// }
.imgBox {
    width: 178px;
    height: 178px;
    border-radius: 4px;
}
.btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    height: 50px;
    line-height: 50px;
    z-index: 999;
    margin-left: -20px;
    padding-left: 20px;
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
/deep/.el-timeline-item__timestamp {
    color: #0561d9;
    line-height: 1;
    font-size: 14px;
}
/deep/.el-timeline-item__node {
    background-color: #5b9bed;
}
/deep/.el-timeline-item__tail {
    border-left: 2px solid #7cace9;
}
</style>
