<template>
    <view>
        <u-collapse :accordion="false">
            <u-collapse-item v-for="(item, index) in itemList" :key="index">
                <view slot="title">
                    <text class="collapse-title">实验室楼层：{{ item.floorName }}</text>
                </view>
                <view v-for="(v, vindex) in item.details" :key="vindex" class="collapse-room">
                    <view>房间名称：{{ v.deptName }}</view>
                    <view v-for="(s, sindex) in v.details" :key="sindex" class="collapse-major">
                        <view>专业分类：{{ s.xitong }}</view>
                        <!-- <view v-for="(n, nindex) in s.details" :key="nindex" class="n-box"> -->
                            <u-tag :text="nindex + 1" type="info" class="left-tag" />
                            <u-tag text="已检" type="success" class="right-tag" />
                            <view class="n-box-title"> {{ n.checkContent }}</view>
                            <view class="n-box-info"> {{ n.craft }}</view>
                            <view class="info_item">
                                <text class="item_left_txt">状态：</text>
                                <text class="item_right_txt">
                                    <u-radio-group v-model="n.radioValue">
                                        <u-radio name="1">正常</u-radio>
                                        <u-radio name="0">异常</u-radio>
                                    </u-radio-group>

                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">现场照片：</text>
                                <text class="item_right_txt">
                                    <view class="btn">上传照片</view>
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">使用人签字：</text>
                                <text class="item_right_txt">
                                    <image v-if="n.qianzi" :src="n.qianzi" style="width: 144px;height: 77rpx;"
                                        mode="widthFix" @click="toPop1(index, vindex, sindex, nindex)"></image>
                                    <view v-else class="btn" @click="toPop1(index, vindex, sindex, nindex)">签字</view>
                                </text>
                            </view>
                            <view class="info_item">
                                <text class="item_left_txt">备注：</text>
                                <text class="item_right_txt">
                                    <betone-new-input type="textarea" :placeholder="'请输入'"></betone-new-input>
                                </text>
                            </view>
                        <!-- </view> -->
                    </view>
                </view>
            </u-collapse-item>
        </u-collapse>
        <!-- 提交按钮 -->
        
        <jp-signature-popup ref="signature1" popup v-model="image2" @change="signChange" />
    </view>
    
</template>
<script>
export default {
    props:{
        type:{
            type:String,
            default:''
        },
        collapseData:{
            type:Array,
            default:null
        }
    },
    computed: {
        disabled() {
            return this.type=='view'
        },
    },
    mounted(){
        console.log(2222222,this.collapseData)
        this.itemList = this.collapseData
    },
    data() {
        return {
            image2: '',//签字路径
            signIndex: [],
            satisfactionList: [
                {
                    text: '正常',
                    value: 1
                },
                {
                    text: '异常',
                    value: 0
                }
            ],
            itemList: [
            //     {
            //         title: '三层',
            //         fangjian: [
            //             {
            //                 fangjianmingcheng: '房间一',
            //                 neirong: [{
            //                     xitong: '水系统',
            //                     detection: [
            //                         {
            //                             title1: '水量水压满足用水要求1',
            //                             radioValue: null,
            //                             qianzi: '',//签字图片
            //                         },
            //                         {
            //                             title1: '水量水压满足用水要求2',
            //                             radioValue: null,
            //                             qianzi: '',//签字图片
            //                         }
            //                     ]
            //                 }]
            //             },
            //             {
            //                 fangjianmingcheng: '房间二',
            //                 neirong: [{
            //                     xitong: '水系统',
            //                     detection: [
            //                         {
            //                             title1: '水量水压满足用水要求1',
            //                             radioValue: 0
            //                         },
            //                         {
            //                             title1: '水量水压满足用水要求2',
            //                             radioValue: 1
            //                         }
            //                     ]
            //                 }, {
            //                     xitong: '水系统2',
            //                     detection: [
            //                         {
            //                             title1: '水量水压满足用水要求1',
            //                             radioValue: 0
            //                         },
            //                         {
            //                             title1: '水量水压满足用水要求2',
            //                             radioValue: 1
            //                         }
            //                     ]
            //                 }]
            //             }
            //         ]
            //     },
            //     {
            //         title: '四层',
            //         fangjian: [
            //             {
            //                 fangjianmingcheng: '房间一',
            //                 neirong: [{
            //                     xitong: '水系统'
            //                 }]
            //             }
            //         ]
            //     }
            ],

        }
    },
    methods: {
        toPop1(index, vindex, sindex, nindex) {

            this.signIndex = [index, vindex, sindex, nindex]
            this.$refs.signature1.toPop()

        },
        signChange(e) {
            this.itemList[this.signIndex[0]].fangjian[this.signIndex[1]].neirong[this.signIndex[2]].detection[this.signIndex[3]].qianzi = e
        }
    }
}
</script>
<style lang="scss" scoped>
.collapse-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;
}

.collapse-room {
    margin: 0 32rpx 20rpx;
    color: rgba(0, 0, 0, 1);
}

.collapse-major {
    margin: 0 32rpx 20rpx;
    color: rgba(0, 0, 0, 1);
    margin: 12rpx 24rpx 12rpx;

    .n-box {
        border: 1px solid rgba(239, 239, 239, 1);
        padding: 32rpx 54rpx 0;
        margin-top: 24rpx;
        margin-bottom: 24rpx;
        position: relative;

        .right-tag {
            position: absolute;
            right: 0;
            top: 0;
        }

        .left-tag {
            position: absolute;
            left: 0;
            top: 0;
            padding-left: 10rpx;
            padding-right: 10rpx;
        }

        .n-box-title {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            text-align: left;
        }

        .n-box-info {
            line-height: 32rpx;
            color: rgba(154, 154, 154, 1);
            font-size: 24rpx;
            padding-top: 12rpx;
            padding-bottom: 12rpx;
        }

        .info_item {
            width: 100%;
            display: flex;
            flex-direction: row;
            margin: 24rpx 0 24rpx;

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

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

                /deep/.u-radio-group {
                    flex-wrap: nowrap;
                    padding-right: 48rpx;
                }

                .btn {
                    width: 260rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    border-radius: 8rpx;
                    background-color: rgba(255, 255, 255, 1);
                    color: rgba(58, 98, 215, 1);
                    font-size: 28rpx;
                    text-align: center;
                    border: 2rpx dashed rgba(58, 98, 215, 1);
                }
            }
        }
    }
}


</style>