<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="127px"
            label-position="right"
            size="small"
            style="max-width: 700px;"
        >
            <el-card shadow="hover" :body-style="{ padding: '20px' }">
                <el-form-item prop="examinationName" label="考级活动名称">
                    <el-input class="input1" v-model="formData.examinationName" readonly></el-input>
                </el-form-item>
                <el-form-item prop="examinationStartTime" label="考级活动时间">
                    <el-date-picker
                        class="input2"
                        v-model="dateRange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        start-placeholder="请选择开始时间"
                        end-placeholder="请选择结束时间"
                        range-separator="至"
                        readonly
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="examinationAgency" label="考级机构名称">
                    <el-input class="input1" v-model="formData.examinationAgency" readonly></el-input>
                </el-form-item>
                <el-form-item prop="category" label="单位类别">
                    <el-input class="input1" v-model="formData.category" readonly></el-input>
                </el-form-item>
                <el-form-item prop="organizer" label="承办单位名称">
                    <el-input class="input1" v-model="formData.organizer" readonly></el-input>
                </el-form-item>

                <el-collapse-transition>
                    <div v-show="showMore">
                        <el-form-item prop="uscc" label="统一社会信用代码">
                            <el-input class="input1" v-model="formData.uscc" readonly></el-input>
                        </el-form-item>
                        <el-form-item prop="examinationDistrict" label="考级地点">
                            <el-select
                                class="input1"
                                v-model="formData.district"
                                style="margin-bottom: 10px;display:block"
                                disabled
                            >
                                <el-option
                                    v-for="item in district"
                                    :key="item.id"
                                    :value="item.name"
                                    :label="item.name"
                                ></el-option>
                            </el-select>
                            <el-input
                                type="textarea"
                                class="input2"
                                :rows="3"
                                v-model="formData.examinationAddress"
                                readonly
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="examCenterQuantity" label="考场数量">
                            <el-input-number
                                v-model="formData.examCenterQuantity"
                                class="input1"
                                disabled
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item prop="examQuantity" label="报考人数">
                            <el-input-number v-model="formData.examQuantity" class="input1" disabled></el-input-number>
                        </el-form-item>
                        <el-form-item prop="examinerQuantity" label="考官人数">
                            <el-input-number
                                v-model="formData.examinerQuantity"
                                class="input1"
                                disabled
                            ></el-input-number>
                        </el-form-item>
                        <el-form-item prop="examOwner" label="考点负责人">
                            <el-input
                                v-model="formData.examOwner"
                                suffix-icon="el-icon-user-solid"
                                class="input1"
                                placeholder="联系人"
                                readonly
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="examOwnerPhone">
                            <el-input
                                v-model="formData.examOwnerPhone"
                                suffix-icon="el-icon-phone"
                                class="input1"
                                placeholder="手机号"
                                readonly
                            ></el-input>
                        </el-form-item>

                        <el-form-item prop="securityOwner" label="安全负责人">
                            <el-input
                                v-model="formData.securityOwner"
                                suffix-icon="el-icon-user-solid"
                                class="input1"
                                placeholder="联系人"
                                readonly
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="securityOwnerPhone" label="">
                            <el-input
                                v-model="formData.securityOwnerPhone"
                                suffix-icon="el-icon-phone"
                                class="input1"
                                placeholder="手机号"
                                readonly
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="recordTime" label="备案时间">
                            <el-date-picker
                                class="input1"
                                v-model="formData.recordTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                readonly
                            >
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-collapse-transition>

                <el-button
                    class="more"
                    round
                    type="primary"
                    :plain="!showMore"
                    :icon="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                    @click="showMore = !showMore"
                ></el-button>
            </el-card>

            <el-card shadow="hover" :body-style="{ padding: '20px' }">
                <el-table
                    :data="recordSpecialties"
                    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"
                    @expand-change="load"
                >
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-card
                                shadow="hover"
                                :body-style="{ padding: '20px' }"
                                v-loading="!experts.has(props.row.id)"
                            >
                                <el-table
                                    :data="experts.has(props.row.id) ? experts.get(props.row.id) : []"
                                    row-key="id"
                                    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="name" label="名称" width="100"> </el-table-column>
                                    <el-table-column prop="sex" label="性别"> </el-table-column>
                                    <el-table-column prop="idNo" label="证件号码"> </el-table-column>
                                    <el-table-column prop="external" label="是否外聘">
                                        <template slot-scope="{ row }">
                                            <span v-if="row.external">是</span>
                                            <span v-else>否</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="position" label="职称">
                                        <template slot-scope="{ row }">
                                            <span v-if="row.position"> {{ row.position }} </span>
                                            <span v-else>无</span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-card>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="专业名称" width="100"> </el-table-column>
                    <el-table-column prop="code" label="专业代码"> </el-table-column>
                    <el-table-column prop="level" label="总级数"> </el-table-column>
                    <el-table-column prop="numOfExam" label="考场数量"> </el-table-column>
                    <el-table-column prop="examinerQuantity" label="考官人数"></el-table-column>
                </el-table>
                <!-- card body -->
            </el-card>
            <el-button @click="$router.go(-1)" style="margin-top: 10px">返回</el-button>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'RecordEdit',
    created() {
        if (this.$route.query.rid) {
            this.$http
                .get('record/get/' + this.$route.query.rid)
                .then(res => {
                    this.formData = res;
                    this.dateRange = [res.examinationStartTime, res.examinationEndTime];
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
            this.$http
                .post(
                    'recordSpecialty/all',
                    { size: 1000, query: { recordId: Number(this.$route.query.rid) } },
                    { body: 'json' }
                )
                .then(res => {
                    this.recordSpecialties = res.content.map(item => {
                        return {
                            ...item,
                            children: []
                        };
                    });
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        this.$http
            .get('/district/NJ')
            .then(res => {
                this.district = res;
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
    },
    data() {
        return {
            saving: false,
            activeName: '1',
            formData: {},
            rules: {
                examOwnerPhone: {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号',
                    trigger: 'blur'
                },
                securityOwnerPhone: {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '请输入正确的手机号',
                    trigger: 'blur'
                }
            },
            categoryOptions: [{ label: '承办单位', value: 'ORGANIZER' }],
            district: [],
            dateRange: [],
            recordSpecialties: [],
            experts: new Map(),
            showMore: false
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };
            data.examinationStartTime = this.dateRange[0];
            data.examinationEndTime = this.dateRange[1];
            this.saving = true;
            this.$http
                .post('/record/save', data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/record/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 || '删除失败');
                    }
                });
        },
        load(row) {
            if (this.experts.has(row.id)) {
                return;
            }

            let experts = new Map([...this.experts]);
            let list = [];
            this.$http
                .post('recordExpert/bySpecialtyId', { recordSpecialtyId: row.id })
                .then(res => {
                    if (res.length > 0) {
                        list = res;
                    }
                })
                .catch(() => {})
                .then(() => {
                    experts.set(row.id, list);
                    this.experts = experts;
                });
        }
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    background-color: transparent;
}
.date-width {
    width: 100%;
}
.info-content {
    // padding: 39px 25px 25px;
    // margin: 5px auto;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/deep/ .address {
    display: flex;
    width: 100%;
    .el-form-item__content {
        flex-grow: 1;
    }
}
/deep/ .el-divider__text,
.el-link {
    font-size: 12px;
}
.el-card + .el-card {
    margin-top: 30px;
}
/deep/ .el-card__body {
    position: relative;
}
.el-card {
    overflow: visible;
}
.more {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    padding: 9px 9px;
}
/deep/.el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
</style>
