<template>
    <div class="main_box">
        <div class="header">
        </div>
        <div class="header_box">
            <div class="box_content">
                <p>老人姓名: {{visitInfo.oldInfo}}</p>
                <p style="margin-top: 3%;">身份证号: <span style="color: rgba(133, 194, 90, 1)">{{'('+visitInfo.oldIdNumber+')'}}</span></p>
            </div>
        </div>
        <div class="box_one">
            <div class="box_one_main box_one_border">
                <div class="box_one_position">
                    <i class="el-icon-date icon_style" ></i>
                    <span>巡访日期:</span>
                    <span class="box_span">{{visitInfo.visitTime}}</span>
                </div>
            </div>
            <div class="box_one_main box_one_border">
                <div class="box_one_position">
                    <i class="el-icon-location-outline icon_style"></i>
                    <span>巡访位置:</span>
                    <span class="box_span">{{visitInfo.visitLocation}}</span>
                </div>
            </div>
            <div class="box_one_main box_one_border">
                <div class="box_one_position">
                    <i class="el-icon-position icon_style"></i>
                    <span>经度:</span> {{visitInfo.lng}}
                </div>
            </div>
            <div class="box_one_main ">
                <div class="box_one_position">
                    <i class="el-icon-position icon_style"></i>
                    <span>纬度:</span> {{visitInfo.lat}}
                </div>
            </div>
        </div>
        <div class="strip">

        </div>
        <div class="box_title">
            <div class="box_block">
            </div>
            <div style="position: relative;top: 12%;transform: translateY(-50%);display: inline-block;margin-left: 2%">
                <span>巡访情况</span>
            </div>
        </div>
        <div class="box_two">
            <div class="box_main_box" v-for="(item,index) in visitInfo.visitList" :key="index">
                <div class="box_main_position" >
                    <div class="box_left">{{item.label}}:</div><div class="box_right" :style="'color:'+ isColor(item.value)">{{item.value}}</div>
                </div>
            </div>
        </div>
        <div class="strip">
        </div>
        <div class="box_title">
            <div class="box_block">
            </div>
            <div style="position: relative;top: 12%;transform: translateY(-50%);display: inline-block;margin-left: 2%">
                <span>老人需求说明</span>
            </div>
        </div>
        <div class="text_style">
            {{visitInfo.demand}}
        </div>
        <div class="strip">
        </div>
        <div class="box_title">
            <div class="box_block">
            </div>
            <div style="position: relative;top: 12%;transform: translateY(-50%);display: inline-block;margin-left: 2%">
                <span>巡访备注说明</span>
            </div>
        </div>
        <div class="text_style">
            {{visitInfo.visitMessage}}
        </div>
        <div class="strip">

        </div>
        <div class="box_title">
            <div class="box_block">
            </div>
            <div style="position: relative;top: 12%;transform: translateY(-50%);display: inline-block;margin-left: 2%">
                <span>现场含面部照片</span>
            </div>
        </div>
        <el-image v-for="url in urls" :key="url" :src="url" class="img_size" fit="contain">
            <div slot="placeholder" class="image-slot">
                <i class="el-icon-picture-outline">加载中...</i>
            </div>
        </el-image>
        <el-button class="lzm_bottom_button" type="primary" size="medium" @click="handleLast">返回</el-button>
    </div>
</template>

<script>
    import { queryOne } from "../../api";
    import { mapState } from "vuex";
    import {decryptData_ECB, decryptListData_ECB} from "@/api/tool/sm4";
    export default {
        name: "Visit",
        data() {
            return {
                visitInfo: {
                    visitLocation: "",
                    lng: "",
                    lat: "",
                    visitMessage: "",
                    oldMessage: "",
                    oldInfo: "",
                    oldIdNumber: "",
                    demand: "",
                    visitTime: "",
                    visitList:[],
                },
                urls: [],
            };
        },
        methods: {
            handleLast() {
                this.$router.replace("/dependant/OldsInfo/" + this.number);
            },
            dateFormat1(daterc) {
                if (daterc != null) {
                    const dateMat = new Date(daterc);
                    const year = dateMat.getFullYear();
                    const month =
                        dateMat.getMonth() + 1 > 9
                            ? dateMat.getMonth() + 1
                            : "0" + (dateMat.getMonth() + 1);
                    const day =
                        dateMat.getDate() > 9 ? dateMat.getDate() : "0" + dateMat.getDate();
                    const hh =
                        dateMat.getHours() > 9
                            ? dateMat.getHours()
                            : "0" + dateMat.getHours();
                    const mm =
                        dateMat.getMinutes() > 9
                            ? dateMat.getMinutes()
                            : "0" + dateMat.getMinutes();
                    const ss =
                        dateMat.getSeconds() > 9
                            ? dateMat.getSeconds()
                            : "0" + dateMat.getSeconds();
                    const timeFormat =
                        year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
                    return timeFormat;
                }
            },
            isColor(label){
                if(label=='较差'||label=='紧急' || label=='不安全' || label=='严重')
                {
                    return 'red'
                }
                else if(label=='一般' || label == '较安全' )
                {
                    return 'rgba(32, 135, 247, 1)'
                }
                else
                {
                    return 'rgba(7, 193, 96, 1)'
                }
            },
            async loadList(id) {
                console.log(id);
                let result = await queryOne({ id: id });
                decryptData_ECB(result, ["oldInfo","oldIdNumber"]);
                if (result.code === 0) {
                    console.log(result.data);
                    let a = this.dateFormat1(result.data.visitTime);
                    this.visitInfo = {
                        visitTime: a,
                        visitLocation: result.data.visitLocation,
                        lng: result.data.lng,
                        lat: result.data.lat,
                        oldIdNumber: result.data.oldIdNumber,
                        visitMessage: result.data.visitMessage,
                        oldMessage: result.data.oldMessage,
                        oldInfo: result.data.oldInfo,
                        demand: result.data.demand, // 老人需求 这个需要改
                        visitList:[
                            {label:'健康情况',value:result.data.health},
                            {label:'精神状态',value:result.data.mind},
                            {label:'安全情况',value:result.data.security},
                            {label:'卫生环境',value:result.data.hygiene},
                            {label:'居住环境',value:result.data.live},
                        ]
                    };
                  if(result.data.visitType === '1' ){
                    this.visitInfo.visitList=[
                      {label:'表达能力',value:result.data.bdnl===this.type1[result.data.bdnl].value?this.type1[result.data.bdnl].label:'暂无'},
                      {label:'行动能力',value:result.data.xdnl===this.type1[result.data.xdnl].value?this.type1[result.data.xdnl].label:'暂无'},
                      {label:'疾病情况',value:result.data.jbqk===this.type2[result.data.jbqk].value?this.type1[result.data.jbqk].label:'暂无'},
                      {label:'情绪状态',value:result.data.qxzt===this.type1[result.data.qxzt].value?this.type1[result.data.qxzt].label:'暂无'},
                      {label:'燃气安全',value:result.data.rqaq===this.type3[result.data.rqaq].value?this.type1[result.data.rqaq].label:'暂无'},
                      {label:'水暖安全',value:result.data.snaq===this.type3[result.data.snaq].value?this.type1[result.data.snaq].label:'暂无'},
                      {label:'用电安全',value:result.data.ydaq===this.type3[result.data.ydaq].value?this.type1[result.data.ydaq].label:'暂无'},
                      {label:'个人卫生',value:result.data.grws===this.type1[result.data.grws].value?this.type1[result.data.grws].label:'暂无'},
                      {label:'家庭卫生',value:result.data.jtws===this.type1[result.data.jtws].value?this.type1[result.data.jtws].label:'暂无'},
                      {label:'室内环境',value:result.data.snhj===this.type1[result.data.snhj].value?this.type1[result.data.snhj].label:'暂无'},
                    ]
                  }

                    if(result.data.urgency)
                    {
                        this.visitInfo.visitList.push( {label:'需求紧急程度',value:result.data.urgency})
                    }
                    result.data.visitPhoto.split(",").forEach(item => {
                        this.urls.push(this.serverUrl + item);
                    });
                    console.log(this.urls, "照片");
                }
            }
        },
        mounted() {
            let param = this.$route.params;
            this.loadList(param.id);
            // this.loadList('5e4925df33e69f7cff616272');
        },
        computed: {
            ...mapState(["number"]),
        }
    };
</script>

<style scoped>
    @import "../../style/Visit.css";
</style>
