<template>
    <div class="edit-view">
        <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            label-width="110px"
            label-position="right"
            size="small"
            style="max-width: 680px;"
        >
            <el-divider direction="horizontal" content-position="left">基本信息</el-divider>
            <el-form-item label="承办单位名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入承办单位名称" readonly></el-input>
            </el-form-item>
            <el-form-item prop="introduction" label="单位概况">
                <el-input
                    readonly
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 6 }"
                    placeholder="请输入单位概况"
                    v-model="formData.introduction"
                ></el-input>
            </el-form-item>
            <el-divider direction="horizontal" content-position="left" v-if="collaborates.length > 0"
                >承办过的考级活动</el-divider
            >
            <div class="add-con" v-for="(item, index) in collaborates" :key="index">
                <div v-if="!item.del" style="padding: 3px 0 0 0">
                    <div class="parameters1">
                        <el-form-item prop="gradingOrganizationId" label="考级机构">
                            <el-select
                                v-model="item.gradingOrganizationId"
                                placeholder="所属考级机构"
                                style="width: 210px"
                            >
                                <el-option
                                    v-for="item in grading"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                    disabled
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="artTypeId" label="代理专业">
                            <el-cascader
                                style="width: 250px"
                                v-model="item.artTypeId"
                                :props="optionProps"
                                :options="artTypes"
                                :show-all-levels="false"
                                placeholder="请选择专业"
                                disabled
                            >
                            </el-cascader>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <el-divider direction="horizontal" content-position="left">分配专家组</el-divider>
            <el-form-item prop="reviewTime" label="审核时间">
                <el-date-picker
                    v-model="dateRange"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    start-placeholder="请选择开始时间"
                    end-placeholder="请选择结束时间"
                    range-separator="至"
                    style="margin-left: 10px"
                    :disabled="formData.status !== 'ASSIGN_EXPERT'"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="expertUserId" label="专家组长">
                <div>
                    <el-select
                        v-model="formData.expertUserId"
                        style="width:350px;margin-left:10px"
                        filterable
                        clearable
                        placeholder="请选择专家组长"
                        :disabled="formData.status !== 'ASSIGN_EXPERT'"
                    >
                        <el-option v-for="item in expert" :key="item.value" :value="item.value" :label="item.label">
                            <!-- <span style="float: left">{{ item.nickname }}</span>
                            <span style="float: left">——{{ item.artType }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span> -->
                        </el-option>
                    </el-select>
                </div>
            </el-form-item>
            <el-form-item prop="expertMemberUserId" label="专家组员">
                <div class="subform">
                    <div style="margin-bottom: 20px">
                        <el-select
                            v-model="employeeId"
                            style="width: 82.5%; margin-right: 10px;"
                            multiple
                            filterable
                            clearable
                            placeholder="请选择专家组员"
                        >
                            <el-option v-for="item in expert" :key="item.value" :value="item.value" :label="item.label">
                                <!-- <span style="float: left">{{ item.nickname }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span> -->
                            </el-option>
                        </el-select>
                        <el-button @click="chooseEmp" v-if="formData.status == 'ASSIGN_EXPERT'">添加</el-button>
                    </div>
                    <el-table :data="emps">
                        <el-table-column prop="nickname" label="用户名"></el-table-column>
                        <el-table-column prop="phone" label="手机号"></el-table-column>
                        <el-table-column prop="artType" label="专业"></el-table-column>
                        <el-table-column label="操作" v-if="formData.status == 'ASSIGN_EXPERT'">
                            <template slot-scope="{ row }">
                                <el-button @click="remove(row)" type="danger" size="mini" plain>移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
            <el-form-item label="变更地址">
                <el-switch v-model="formData.change" :disabled="formData.status !== 'ASSIGN_EXPERT'"></el-switch>
                <el-input
                    type="textarea"
                    :rows="3"
                    v-if="formData.change"
                    placeholder="请输入新地址"
                    v-model="formData.changeAddress"
                    :readonly="formData.status != 'ASSIGN_EXPERT'"
                ></el-input>
            </el-form-item>
            <el-form-item class="fixed-btn">
                <el-button @click="onSave" :loading="saving" type="primary" v-if="formData.status == 'ASSIGN_EXPERT'"
                    >保存</el-button
                >
                <el-button
                    type="danger"
                    v-if="formData.status == 'REVIEW_PENDING'"
                    @click="saveDismiss"
                    :loading="loading"
                >
                    退回
                </el-button>
                <el-button @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'AssignExpert',
    created() {
        if (this.$route.query.id) {
            this.$http
                .get('rate/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                    if (typeof res.reviewStartTime != 'undefined') {
                        this.dateRange.push(res.reviewStartTime);
                        this.dateRange.push(res.reviewEndTime);
                    }
                    this.$http
                        .post('/user/expert', { size: 1000, query: { del: false } }, { body: 'json' })
                        .then(data => {
                            this.users = data.content;
                            data.content.forEach(item => {
                                let nickname = item.nickname;
                                if (nickname.length < 3) {
                                    nickname = nickname.slice(0, 1) + '　' + nickname.slice(1);
                                }
                                this.expert.push({
                                    label: nickname + '--' + item.phone + '--' + item.artType,
                                    value: item.id
                                });
                            });
                            this.getEmp(res);
                        });
                    this.$http
                        .post(
                            '/rateExpertAudit/all',
                            { size: 1000, query: { rateId: this.$route.query.id } },
                            { body: 'json' }
                        )
                        .then(item => {
                            this.audits = item.content;
                        });
                    this.$http
                        .post(
                            '/collaborate/all',
                            { size: 100, query: { rateId: this.$route.query.id } },
                            { body: 'json' }
                        )
                        .then(res => {
                            this.collaborates = res.content;
                        });
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        this.$http
            .post('/gradingOrganization/all', { size: 1000 }, { body: 'json' })
            .then(res => {
                if (res.content.length > 0) {
                    res.content.forEach(item => {
                        this.grading.push({
                            label: item.name,
                            value: item.id
                        });
                    });
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
        this.$http
            .post('/artType/allList')
            .then(res => {
                this.artTypes = this.delChild(res);
            })
            .catch(e => {
                console.log(e);
            });
    },
    data() {
        return {
            saving: false,
            formData: {},
            rules: {},
            users: [],
            emps: [],
            employeeId: '',
            employeeIds: [],
            dateRange: [],
            audits: [],
            grading: [],
            artTypes: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children',
                multiple: true,
                emitPath: false,
                checkStrictly: true,
                expandTrigger: 'hover'
            },
            readonly: true,
            collaborates: [],
            expert: [],
            loading: false
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };
            data.expertMemberUserId = this.employeeIds;
            if (this.dateRange && this.dateRange.length > 0) {
                data.reviewStartTime = this.dateRange[0];
                data.reviewEndTime = this.dateRange[1];
            }
            data.status = 'REVIEW_PENDING';

            this.saving = true;
            this.$http
                .post('/rate/save', data, { body: 'json' })
                .then(res => {
                    this.$nextTick(() => {
                        let audit = {
                            rateId: res.id,
                            remark: '等待专家组进行线下考察',
                            status: 'REVIEW_PENDING'
                        };
                        this.$http.post('/rateAudit/save', audit, {
                            body: 'json'
                        });
                    });
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                });
        },
        getEmp(res) {
            let data = res.expertMemberUserId;
            if (data != undefined && data.length > 0) {
                for (let index in data) {
                    this.emps.push(
                        this.users.find(item => {
                            return item.id === data[index];
                        })
                    );
                }
                this.employeeIds = data;
            }
        },
        chooseEmp() {
            if (this.employeeId.length > 0) {
                this.employeeId.forEach(index => {
                    console.log(index);
                    if (this.employeeIds.indexOf(index) < 0) {
                        this.emps.push(
                            this.users.find(item => {
                                return item.id === index;
                            })
                        );
                        this.employeeIds.push(index);
                    }
                });
                this.employeeId = '';
            }
        },
        remove(row) {
            this.emps.pop(row);
            this.employeeIds.pop(this.employeeId);
        },
        delChild(list) {
            return list.map(item => {
                const info = {
                    ...item,
                    ['children']:
                        item['children'] && item['children'].length > 0 ? this.delChild(item['children']) : null
                };
                return info;
            });
        },
        saveDismiss() {
            this.loading = true;
            this.$alert('短信已发送，确认退回吗？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post('/rate/offline', {
                        id: this.$route.query.id,
                        status: 'ASSIGN_EXPERT'
                    });
                })
                .then(res => {
                    this.loading = false;
                    this.$message.success('退回成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    this.loading = false;
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    }
};
</script>
<style lang="less" scoped>
.edit-view {
    // padding-left: 20%;
    .add-con {
        // background-color: #f7f7f7;
        width: 100%;
        // margin-bottom: 10px;
    }
}
.subform {
    padding: 16px 16px 16px 16px;
    background: #f7f7f7;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 10px;
}
.parameters1 {
    display: flex;
    align-items: center;
    // margin-top: 23px;
}
.el-divider__text {
    left: 0;
    font-size: 18px;
}
.el-divider--horizontal {
    margin: 32px 0;
}
/deep/ .el-input.is-disabled .el-input__inner {
    background-color: #ffffff;
    color: #606266;
}
/deep/ .el-range-editor.is-disabled input {
    background-color: #ffffff;
    color: #606266;
}
/deep/ .el-range-editor.is-disabled {
    background-color: #ffffff;
}
/deep/ .el-range-editor.is-disabled .el-range-separator {
    color: #606266;
}
</style>
