<template>
    <div class="add-edit-dialog-container">
        <el-dialog :title="title" :visible.sync="visible" width="600px" :before-close="close">
            <el-form :model="formData" ref="formData" :rules="rules" label-width="90px">
                <el-form-item label="申述人:">
                    <span>{{ formData.userName }}</span>
                </el-form-item>
                <el-form-item label="专家:">
                    <span>{{ formData.expertName }}</span>
                </el-form-item>
                <el-form-item label="申述内容:">
                    <span>{{ formData.content }}</span>
                </el-form-item>
                <!-- <el-form-item label="封面图:">
                    <el-image :src="formData.cover | pathPipe" style="width:100px;height:100px;"></el-image>
                </el-form-item>-->
                <!-- <el-form-item label="视频:">
                    <span>{{ formData.url }}</span>
                </el-form-item>-->
                <!-- <el-form-item label="描述:">
                    <span>{{ formData.descr }}</span>
                </el-form-item>-->
                <!-- <el-form-item label="赏金:">
                    <span>{{ formData.reward | pricePipe(0, '￥', true) }}</span>
                </el-form-item>-->
                <el-form-item label="启用状态:" min-width="110px;">
                    <el-switch
                        v-model="formData.statuz"
                        active-text="是"
                        inactive-text="否"
                        :active-value="1"
                        :inactive-value="0"
                        disabled
                    ></el-switch>
                </el-form-item>
                <el-form-item label="审核状态:">
                    <div>
                        <span class="warn" v-show="formData.statuz == 1">未结束</span>
                        <span class="danger" v-show="formData.statuz == 2">驳回</span>
                        <span class="success" v-show="formData.statuz === 3">已结束</span>
                        <span class="warn" v-show="formData.statuz == 4">已退款</span>
                    </div>
                </el-form-item>
                <el-form-item label="诊断类型:">
                    <div>
                        <span v-show="formData.dataTable == 1">问诊</span>
                        <span v-show="formData.dataTable == 2">出诊</span>
                    </div>
                </el-form-item>
                <el-form-item label="问题描述:">
                    <span>{{ formData.expression }}</span>
                </el-form-item>
                <el-form-item label="维修前视频:">
                    <a
                    :href="formData.beforeRepair"
                    v-if="formData.beforeRepair"
                    target="_blank" 
                    >点击查看</a>
                </el-form-item>
                <el-form-item label="维修后视频:">
                    <a
                    :href="formData.afterRepair"
                    v-if="formData.afterRepair"
                    target="_blank"
                    >点击查看</a>
                </el-form-item>
                <el-form-item label="申述图片:">
                    <span @click="imgOpen(formData.imgs)">
                        <el-image
                        v-for="(item, i) in formData.imgs"
                        :key="i"
                        :src="item | pathPipe"
                        style="width:50px;height:50px; margin:5px;cursor:pointer;"
                        class="images"
                        ></el-image>
                    </span>
                </el-form-item>
                <el-form-item label="驳回原因:" v-show="formData.statuz === 2">
                    <span>{{ formData.cancelSeason }}</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button @click="close()">取 消</el-button>
                <el-button
                    type="primary"
                    @click="submitForm('formData')"
                    :disabled="submitBtndisabled"
                >确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: '详情',
            submitBtndisabled: false,
            rules: {},
            formData: { url: '' },
            visible: false,
        };
    },
    methods: {
        open(data) {
            console.log(data, 'data');
            this.formData = { ...data };
            this.formData.imgs = this.formData.imgs;
            // this.formData.url = this.formData.url.split('/').pop();
            this.visible = true;
        },
        close() {
            // this.$refs['formData'].resetFields();
            this.formData = {};
            this.visible = false;
        },
        submitForm() {
            this.close();
        },
        imgOpen(imgs) {
            window.open(imgs);
        },
    },
};
</script>
<style lang="stylus" scoped>
.add-edit-dialog-container {
    ::v-deep .el-form-item {
        margin-bottom: 0;
    }
}
</style>
