<template>
    <view class="page-css"
        :style="{ 'padding-bottom': (detailForm.status == 5 && dataTypes == 1) ? '180rpx' : '20rpx' }"
        ref="contentToExport">
        <view class="">
            <view class="repair_detail">
                <view class="repair_title">{{ dataTypes == 1 ? '故障信息' : '故障详情' }}</view>
                <view class="detail_item">
                    <text class="item_left_txt">故障描述：</text>
                    <text class="item_right_txt reason">{{ detailForm.faultDescribe }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">故障位置：</text>
                    <text class="item_right_txt">{{ detailForm.faultLocation }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">设备名称：</text>
                    <text class="item_right_txt">{{ detailForm.deviceName }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">故障类别：</text>
                    <text class="item_right_txt">{{ detailForm.faultType }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">故障视频：</text>
                    <view class="item_right_txt video">
                        <video v-show="videoUrl != ''" :src="videoUrl" style="width: 450rpx; height: 320rpx"
                            controls></video>
                        <video v-if="detailForm.videoAttaches && detailForm.videoAttaches.length > 0"
                            :src="detailForm.videoAttaches[0].link" style="width: 148px; height: 148px"
                            controls></video>
                    </view>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">故障图片：</text>
                    <view class="item_right_txt video">
                        <image style="width: 130rpx;height: 140rpx;margin-bottom: 10rpx;"
                            v-for="item in detailForm.picAttaches" :key="item.id" :src="item.link" alt="" />
                    </view>
                </view>
            </view>
            <!-- 维修详情 -->
            <view class="repair_detail"
                v-if="(dataTypes == 1 || dataTypes == 2) && (detailForm.status == 5 || detailForm.status == 6 || detailForm.status == 7 || detailForm.status == 8 || detailForm.status == 9) || (dataTypes == 4 && !(detailForm.status == 0 || detailForm.status == 1 || detailForm.status == 2)) || (dataTypes == 3) && (detailForm.closeReason == '')">
                <view class="repair_title">维修详情</view>
                <view class="detail_item">
                    <text class="item_left_txt">维修人：</text>
                    <text class="item_right_txt">{{ detailForm.repairPersonName }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">设备名称：</text>
                    <text class="item_right_txt">{{ detailForm.deviceName }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">故障原因：</text>
                    <text class="item_right_txt reason">{{ detailForm.faultCause }}</text>
                </view>
                <view class="detail_item" style="margin-top: 10rpx;">
                    <text class="item_left_txt">处理方法：</text>
                    <text class="item_right_txt reason">{{ detailForm.processMethod }}</text>
                </view>
                <view class="detail_item" v-show="detailForm.materials && detailForm.materials.length != 0">
                    <text class="item_left_txt">维修材料：</text>
                    <view class="item_right_table">
                        <view class="table_box">
                            <view class="table_txt left">物料名称</view>
                            <view class="table_txt right">金额</view>
                        </view>
                        <view class="table_box table_item" v-for="item in detailForm.materials" :key="item.id">
                            <view class="table_txt left">{{ item.materialName }}</view>
                            <view class="table_txt right">{{ item.materialPrice }}</view>
                        </view>
                        <view class="table_box table_sub">
                            <view class="table_txt left">合计</view>
                            <view class="table_txt right">{{ totalPrice }}</view>
                        </view>
                        <view class="table_box table_sub">
                            <view class="table_txt left">折扣</view>
                            <view class="table_txt right">{{ discount }}<text v-show="discount != ''">折</text></view>
                        </view>
                        <view class="table_box table_sub">
                            <view class="table_txt left">折后价格</view>
                            <view class="table_txt right">{{ discountPrice }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 客服查看派单详情 -->
            <view class="repair_detail"
                v-if="((detailForm.status != 0) && dataTypes == 2) || (dataTypes == 1 && !(detailForm.status == 0 || detailForm.status == -1)) || dataTypes == 4">
                <view class="repair_title">处理情况</view>
                <view class="detail_item">
                    <text class="item_left_txt">接单时间：</text>
                    <text class="item_right_txt reason">{{ detailForm.dispatchTime }}</text>
                </view>
                <view class="detail_item" v-if="dataTypes != 1">
                    <text class="item_left_txt">计划完成时间：</text>
                    <text class="item_right_txt reason">{{ detailForm.planCompleteTime }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">客服意见：</text>
                    <text class="item_right_txt reason">{{ detailForm.customerOpinion }}</text>
                </view>
            </view>
            <!-- 关闭详情 -->
            <view class="repair_detail" v-if="detailForm.closeReason != ''">
                <view class="repair_title">关闭详情</view>
                <view class="detail_item">
                    <text class="item_left_txt">关闭原因：</text>
                    <text class="item_right_txt">{{ detailForm.closeReason }}</text>
                </view>
            </view>
            <!-- 驳回 -->
            <view class="repair_detail" v-if="detailForm.repaiRejectReason != ''">
                <view class="repair_title">驳回详情</view>
                <view class="detail_item">
                    <text class="item_left_txt">驳回原因：</text>
                    <text class="item_right_txt">{{ detailForm.repaiRejectReason }}</text>
                </view>
            </view>

            <view class="repair_detail" v-if="detailForm.status != -1">
                <view class="repair_title">其他信息</view>
                <view class="detail_item">
                    <text class="item_left_txt">提报人：</text>
                    <text class="item_right_txt">{{ detailForm.informantName }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">提报人电话：</text>
                    <text class="item_right_txt">{{ detailForm.informantPhone }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">提报单号：</text>
                    <text class="item_right_txt">{{ detailForm.requirementCode }}</text>
                </view>
                <view class="detail_item">
                    <text class="item_left_txt">提报时间：</text>
                    <text class="item_right_txt">{{ detailForm.createTime }}</text>
                </view>

            </view>

        </view>


    </view>
</template>
<script>
export default {
    props:{
        data:{
            type:Object,
            default:{}
        },
        detailId:{
            type:String,
            default:''
        }
    },
    computed: {
        dataTypes() {
            return this.$store.state.dataType
        },
    },
    data() {
        return {
            totalPrice: '1084.00',
            discount: '9',
            discountPrice: '975.60',
            detailForm: {},
            videoUrl: '',
            userInfo: {},
            repairDetails: {
                reportPeople: '',//填报人
                deviceName: '',//设备名称
                faultReason: '',//故障原因
                dealMethods: '',//处理方法
                isMaterial: null,//是否申领物料
                materialTable: [],//物料数据
            },
            imageSrc: '',//图片路径
        }
    },

    mounted() {
        // 获取用户信息
        this.userInfo = uni.getStorageSync("userinfo");
        this.getDetail()
        // 动态详情查看
    },
    methods: {
        getDetail() {
            let query_ = {
                id: this.detailId
            }
            this.$u.api.getBreakdownInfo(query_).then(res => {
                if (res.code == 200) {
                    this.detailForm = res.data
                    this.videoUrl = res.data.videoAttaches && res.data.videoAttaches.length > 0 ? res.data.videoAttaches[0].link : ''
                    this.totalPrice = res.data.totalPrice == -1 ? res.data.materials.reduce((sum, item) => sum + item.materialPrice, 0) : res.data.totalPrice
                    this.discount = res.data.discount == -1 ? '' : res.data.discount
                    this.discountPrice = res.data.discountPrice == -1 ? '' : res.data.discountPrice

                    this.repairDetails.reportPeople = this.detailForm.repairPersonName  //填报人
                    this.repairDetails.deviceName = this.detailForm.deviceName  //填报人
                }
            })
        }

    }
}

</script>
<style lang="scss" scoped>
.page-css {

    width: 100%;
    padding: 0;
    padding-top: 26rpx;
    padding-bottom: 180rpx;

    .status_box {
        margin: 0 24rpx 20rpx;
        height: 180rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 36rpx;
        text-align: left;
        font-family: -bold;

        .status_top {
            width: 100%;
            padding: 40rpx 20rpx 30rpx 30rpx;
            // background-color: red;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .status_txt {
                color: rgba(0, 0, 0, 1);
                font-size: 36rpx;
                text-align: left;
                font-family: SourceHanSansSC-bold;
                font-weight: bold;
            }

            .load_more {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: SourceHanSansSC-regular;
                display: flex;
                align-items: center;
            }
        }

        .status_bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: rgba(190, 190, 190, 1);
            font-size: 28rpx;
            text-align: left;
            font-family: SourceHanSansSC-regular;

            .status_date {
                margin-right: 22rpx;
            }
        }
    }

    .fault_detail {
        margin: 0 24rpx 20rpx;
        height: 180rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
    }

    .repair_detail {
        margin: 0 24rpx 20rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        padding: 6rpx 0 34rpx;

        .repair_title {
            line-height: 60rpx;
            color: rgba(0, 0, 0, 1);
            font-size: 32rpx;
            text-align: left;
            font-family: SourceHanSansSC-bold;
            margin: 18rpx 0 0rpx 20rpx;
            font-weight: bold;
        }

        .detail_item {
            padding: 4rpx 20rpx 0;

            display: flex;
            align-items: center;
            justify-content: space-between;

            .item_left_txt {
                color: rgba(108, 108, 108, 1);
                font-size: 28rpx;
                text-align: left;
                font-family: SourceHanSansSC-regular;
                width: 210rpx;
                margin-right: 20rpx;
                line-height: 60rpx;
            }

            .item_right_txt {
                max-width: calc(100% - 220rpx);
                color: rgba(0, 0, 0, 1);
                font-size: 28rpx;
                // text-align: left;
                text-align: justify;
                font-family: SourceHanSansSC-regular;
            }

            .item_right_table {
                width: calc(100% - 220rpx);
                margin-top: 10rpx;

                .table_box {
                    width: 100%;
                    height: 60rpx;
                    background-color: #e8e8e8;
                    border: 1px solid #bbbbbb;
                    font-size: 14px;
                    color: #101010;
                    line-height: 60rpx;
                    display: flex;

                    .left {
                        width: 72%;
                        height: 100%;
                        text-align: center;
                        border-right: 2rpx solid #bbbbbb;
                    }

                    .right {
                        width: 28%;
                        height: 100%;
                        text-align: center;
                    }
                }

                .table_item {
                    background-color: #fff;
                    border-top: none;
                }

                .table_sub {
                    border-top: none;
                    background-color: #fff;
                }
            }

            .reason {
                word-wrap: warp;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                /* 定义显示的行数 */
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .video {
                margin-top: 10rpx;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
            }
        }
    }

    .evaluate_box {
        width: 100%;
        height: 154rpx;
        bottom: 0;
        position: fixed;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .evaluate_btn {
            width: 160rpx;
            height: 60rpx;
            border-radius: 8rpx;
            background-color: rgba(255, 255, 255, 1);
            color: rgba(58, 98, 215, 1);
            font-size: 24rpx;
            text-align: center;
            font-family: PingFangSC-regular;
            border: 2rpx solid rgba(58, 98, 215, 1);
            margin-right: 26rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .repair_form {
        padding: 0 32rpx;
    }

    .repair-btn {
        width: 100%;
        display: flex;
        justify-content: space-around;
        /* 水平均匀分布 */
        margin-top: 32rpx;
        padding: 0 32rpx;

        /deep/.u-btn {
            width: 100%;
        }
    }

    /deep/.popup-content {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .select-box {
        width: 100%;

        .select-box-item {
            width: 100%;
            border-radius: 20rpx;
            background-color: rgba(249, 249, 249, 1);
            margin-bottom: 32rpx;
            line-height: 60rpx;
            color: rgba(108, 108, 108, 1);
            font-size: 28rpx;
            padding: 24rpx;
        }
    }

    .material-box {
        flex: 1;
        background: #fff;
        margin: 0;
        overflow: auto;
        // padding-bottom: 32rpx;

        .material-item {
            height: 300rpx;
            border-radius: 20rpx;
            background-color: rgba(249, 249, 249, 1);
            margin: 32rpx 0 0;
            padding: 32rpx;
            display: flex;
            flex-direction: row;

            .title-wrapper {}

            .item-right {
                flex: 1;

                .material-title {
                    display: flex;
                    flex-direction: row;
                    color: rgba(108, 108, 108, 1);
                    font-size: 28rpx;
                    line-height: 60rpx;

                    .material-title-name {
                        color: rgba(51, 51, 51, 1);
                        font-size: 36rpx;
                        font-weight: 550;
                        padding-right: 16rpx;
                    }

                    .material-title-code {
                        flex: 1;
                    }
                }

                .material-text {
                    line-height: 60rpx;
                    color: rgba(108, 108, 108, 1);
                    font-size: 28rpx;
                }

                .material-num {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                }
            }

        }


    }

    .material-btn {
        width: 100%;
        display: flex;
        justify-content: space-between;
        /* 水平均匀分布 */
        margin-top: 32rpx;
        padding: 0 32rpx;

        /deep/.u-btn {
            width: 48%;
        }
    }

    .selectForm {
        width: 100%;
        padding: 26rpx;

        .form-item {
            float: left;
            width: calc(100% - 26rpx - 26rpx - 140rpx);

            .material-text {
                width: 50%;
                float: left;
            }
        }

        .form-label {
            width: 140rpx;
            text-align: center;
        }
    }
}
</style>