<template>
    <div class="add-edit-dialog-container">
        <el-dialog title="诊单详情" :visible.sync="visible" width="500px" :before-close="close">
            <el-form :model="detailsDialogForm" ref="detailsDialogForm" label-width="90px">
                <el-form-item label="发起人:" class="classify-input">{{formData.name}}</el-form-item>
                <el-form-item
                    label="诊单类型:"
                    class="classify-input"
                >{{formData.dataTable | diagnosisPipe}}</el-form-item>
                <el-form-item
                    label="诊单状态:"
                    class="classify-input"
                >{{formData.statuz | caseStatusPipe(formData.dataTable)}}</el-form-item>
                <el-form-item
                    label="总金额:"
                    class="classify-input"
                >{{formData.totalCost | pricePipe(2, '￥', true)}}</el-form-item>
                <el-form-item
                    label="实付金额:"
                    class="classify-input"
                >{{formData.payCost | pricePipe(2, '￥', true)}}</el-form-item>
                <el-form-item label="专家:" class="classify-input">{{formData.chargeName}}</el-form-item>
                <el-form-item label="品牌:" class="classify-input">{{formData.brandName}}</el-form-item>
                <el-form-item label="问题描述:" class="classify-input">{{formData.expression}}</el-form-item>
                <el-form-item label="已尝试方法:" class="classify-input">{{formData.usedMethods}}</el-form-item>
                <el-form-item label="图片:" class="classify-input">
                    <div v-for="(item, index) in formData.imgs" :key="index">
                        <span @click="imgOpen(formData.imgs)">
                        <el-image
                            :src="item | pathPipe"
                            fit="cover"
                            style="width:50px;height:50px;float:left;margin-left:4px;cursor:pointer;"
                        ></el-image>
                        </span>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" round @click="enterChatRoom()">进入聊天室</el-button> -->
                <el-button
                    type="primary"
                    @click="submitForm('detailsDialogForm')"
                    :disabled="submitBtndisabled"
                    plain
                    round
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryLiftCasesDetail } from '@/apps/mobile/api/monitoring-center/index';
export default {
    data() {
        return {
            id: null,
            formData: {},
            visible: false,
            submitBtndisabled: false,
            detailsDialogForm: {},
        };
    },
    methods: {
        submitForm() {
            this.close();
        },
        open(data) {
            console.log(data);
            if (data.imgs) {
                let imgArr = data.imgs.split(',') || [];
                data.imgs = imgArr;
            } else {
                data.imgs = [];
            }
            this.formData = data;
            this.visible = true;
        },
        close() {
            this.formData = {};
            this.visible = false;
        },
        enterChatRoom() {
            this.$router.push({
                path: '/chat-room',
            });
        },
        imgOpen(imgs) {
            window.open(imgs);
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    .file-input {
        width: 200px;
    }

    .sort-input {
        width: 120px;
    }

    .upload {
        display: inline-block;
    }
}

.el-image {
    margin-right: 5px;
}
</style>
