<template>
  <div>
    <el-tabs :value="activeName"  :stretch="true" @tab-click="selection" v-show="!visitDialogVisible" >
      <el-tab-pane label="采集记录"></el-tab-pane>
      <el-tab-pane label="巡访记录"></el-tab-pane>
      <router-view @getData="getData"></router-view>
    </el-tabs>
    <div
            v-show="visitDialogVisible"
    >
      <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="visitDialogVisible=!visitDialogVisible">返回</el-button>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'Record',
    data(){
      return {
        activeName : 0,
        index :'',
        visitDialogVisible:false,
        urls:[],
        visitInfo:{}
      }
    },
    methods: {
      selection(tab) {
        if (tab.index === "0") {
          this.$router.replace("/record/InfoList");
        } else {
          this.$router.replace("/record/visitrecord");
        }
      },
      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)'
        }
      },
      getData(data,url){
        this.visitDialogVisible=!this.visitDialogVisible;
        this.visitInfo=data;
        this.urls=url;
      }
    },
    mounted() {
      this.$router.replace("/record/InfoList");
    }
  }

</script>
<style scoped>
  >>> .el-tabs__header
  {
    margin: 0;
  }
  >>> .el-tabs__item.is-active {
    font-weight: 500;
    color: #000000;
  }
  >>> .el-tabs__item{
    font-weight: 400;
    color: #999999;
  }


</style>
