<template>
  <div >
    <h1 class="bt_h1">事项详情</h1>
    <div class="table-a" style="height:410px;overflow-y: auto;"> 
            <ul class="wtxq-ul" style=" list-style-type: none;">
                            <li>
                                <span>用户名称:</span>
                                <div>
                                    <p v-text="cxxqdata.userName"></p>
                                </div>
                            </li>
                            <li>
                                <span>地址:</span>
                                <div>
                                    <p v-text="cxxqdata.address"></p>
                                </div>
                            </li>
                            <li>
                                <span>事项状态:</span>
                                <div>
                                    <p v-text="cxxqdata.caseStatus"></p>
                                </div>
                            </li>
                            <li>
                                <span>事项类型:</span>
                                <div>
                                    <p v-text="cxxqdata.caseType"></p>
                                </div>
                            </li>
                            <li>
                                <span>处置建议:</span>
                                <div>
                                    <p v-text="cxxqdata.disposeAdvice"></p>
                                </div>
                            </li>
                            <li>
                                <span>经度:</span>
                                <div>
                                    <p v-text="cxxqdata.longitude"></p>
                                </div>
                            </li>
                            <li>
                                <span>纬度:</span>
                                <div>
                                    <p v-text="cxxqdata.latitude"></p>
                                </div>
                            </li>
                            <li>
                                <span>创建时间:</span>
                                <div>
                                    <p v-text="cxxqdata.submitTime"></p>
                                </div>
                            </li>
                            <li>
                                <span>事项描述:</span>
                                <ul style="list-style-type:none;">
                                    <li v-for="(item,index) in cxxqdata.descriptions" style="border-bottom: none;">
                                        <p style="margin-left: 40px;">                                             
                                            <a style="cursor: pointer;color:white;text-decoration: underline" @click="showpicture(item.descriptionId)">
                                                {{item.description}}
                                            </a>
                                        </p>                                           
                                    </li>
                                </ul>
                            </li>
                        </ul>
    </div> 
  </div>
</template>

<script>
    module.exports = {
            data: function() {
                return {
                    cxxqdata:{id:"",address:""}
                }
            }, 
            props:["title"],
            methods:{
                 show:function(item){
                            this.getData(item,res=>{
                                this.cxxqdata=res;
                            });
                            
                 },getData:function(item,callback){
                      if(item.caseStatus=="处理中"){
                                var buffer = incident.CaseIdentifyRequest.encode({
                                    token: uuid(),
                                    request: {
                                        caseId: item.id
                                    }
                                }).finish();
                                $.ajax({
                                    type: "POST",
                                    url: 'https://geothinking.club/community/v2/case/identify',
                                    contentType: "application/json; charset=utf-8",
                                    data: JSON.stringify({
                                        buffer: buffer
                                    }),
                                    dataType: "json",
                                    success: function(res) {
                                        var resultDecoded = incident.CaseIdentifyResponse.decode(res.data);
                                        (resultDecoded.response)&&( this.cxxqdata=resultDecoded.response);
                                        callback(resultDecoded.response);
                                    },
                                    error: function(message) {
                
                                    }
                                });
                            }else{
                                var buffer = incident.DisposeIdentifyRequest.encode({
                                    token: uuid(),
                                    request: {
                                        disposeId:item.id
                                    }
                                }).finish();
                                $.ajax({
                                    type: "POST",
                                    url: 'https://geothinking.club/community/v2/dispose/identify',
                                    contentType: "application/json; charset=utf-8",
                                    data: JSON.stringify({
                                        buffer: buffer
                                    }),
                                    dataType: "json",
                                    success: function(res) {   
                                        var resultDecoded = incident.DisposeIdentifyResponse.decode(res.data);
                                        (resultDecoded.response)&&( this.cxxqdata=resultDecoded.response);
                                        callback(resultDecoded.response);
                                    },
                                    error: function(message) {
                                    
                                    }
                                });
                            }
                 },showpicture:function(descriptionId){
                       var buffer = incident.PhotosQueryRequest.encode({
                             token: uuid(),
                                request: {
                                    descriptionId: descriptionId
                                }
                        }).finish();
                        $.ajax({
                            type: "POST",
                            url: 'https://geothinking.club/community/v2/photos/query',
                            contentType: "application/json; charset=utf-8",
                            data: JSON.stringify({
                                buffer: buffer
                            }),
                            dataType: "json",
                            success: function(res) {
                                var resultDecoded = incident.PhotosQueryResponse.decode(res.data);
                                if(resultDecoded.response.length>0){
                                    var xxx=resultDecoded.response.map(element => {
                                        return {src:element}
                                    });
                                    var json = { title: "照片", data:xxx };
                                    layer.photos({
                                        photos: json,
                                        anim: 5
                                    });
                                }else{
                                    layer.msg("暂无照片");
                                }                       
                            },
                            error: function(message) {
                                
                            }
                        });
                 }
            },
            computed:{

            }
    }

    function setx(){

    }
</script>
<style scoped>
            .bt_h1{
                text-align: center;
                font-size: 20px;
                color: white;
                font-weight: 500;
                margin-top: 8px;
            }
           .wtxq-ul li{
            line-height: 42px;
            float: left;
            border-bottom: 1px solid #ddd;
            margin-left: 20px;
            width: 348px;
        }
        .wtxq-ul li span{
            float: left;
            font-size: 16px;
            color: white;
            width: 118px;
            padding-top: 3px;
        }   
        .wtxq-ul li div{
            margin-left: 20px;
            float: left;
        }
        .wtxq-ul li p{
            float: left;
            font-size: 16px;
            color: white;
            width: 100%;
            word-wrap: break-word;
            height: 40px;
            margin-top: 4px;
        }

</style>

