<template>
  <div v-loading="listLoading">
    <div class="header_main">
    <span>共 <span style="color: rgba(32, 135, 247, 1);font-weight: bold;margin: 0 2%">{{records.length}}</span> 条记录</span>
    </div>
    <div class="box">

      <div class="box_main" v-for="(item,index) in records" :key="index">
        <div style="height: 100%;width: 94%;margin-left: 3%;margin-right: 3%">
          <div class="box_main_top">
            <div style="position: relative;top:50%;transform: translateY(-50%)">
             <span style="margin-left: 2%;font-size: 16px">{{item.oldInfo}} <span v-if="item.oldIdNumber" style="color: rgba(112, 197, 70, 1)">（{{item.oldIdNumber}}）</span></span>
              <span class="symbol" @click="mouseClick(item)">></span>
            </div>
          </div>
          <div class="box_main_center"></div>
          <div class="box_main_footer">
                <span style="margin-left: 2%;">巡防时间：{{dateFormat1(item.visitTime)}}</span>
          </div>
        </div>
      </div>

    </div>
    <div class="returnBefore">
      <el-button style="width: 70%" type="primary" @click="goHome">回到上一页</el-button>
    </div>

  </div>

</template>

<script>
  import {visitList} from '../../api'
  import {decryptListData_ECB} from "@/api/tool/sm4";

  export default {
    name: 'visitRecord',
    data() {
      return {
        listLoading: false,
        records: [],
        visitDialogVisible: false,
        visitInfo: {},
        url: '',
        urls: [],
        maxHeight:0,
        type1: [
          {
            value: "0",
            label: "无变化",
          },
          {
            value: "1",
            label: "较好",
          },
          {
            value: "2",
            label: "较差",
          },
        ],
        type2: [ // 健康3的type
          {
            value: "0",
            label: "无变化",
          },
          {
            value: "1",
            label: "转好",
          },
          {
            value: "2",
            label: "严重",
          },
        ],
        type3: [ // 安全情况
          {
            value: "0",
            label: "安全",
          },
          {
            value: "1",
            label: "较安全",
          },
          {
            value: "2",
            label: "不安全",
          },
        ],
      }
    },
    methods: {
      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;
        }
      },
      goHome() {
        this.$router.replace("/main")
      },
      mouseClick(row) {
        this.urls=[];
        let a = this.dateFormat1(row.visitTime);
        this.visitInfo = {
          visitTime: a,
          visitLocation: row.visitLocation,
          lng: row.lng,
          lat: row.lat,
          oldIdNumber: row.oldIdNumber,
          visitMessage: row.visitMessage,
          oldMessage: row.oldMessage,
          oldInfo: row.oldInfo,
          demand: row.demand,
          visitList:[
            {label:'健康情况',value:row.health},
            {label:'精神状态',value:row.mind},
            {label:'安全情况',value:row.security},
            {label:'卫生环境',value:row.hygiene},
            {label:'居住环境',value:row.live},
          ]
        };
        if(row.visitType === 1 ){
          this.visitInfo.visitList=[
            {label:'表达能力',value:row.health1===this.type1[row.health1].value?this.type1[row.health1].label:'暂无'},
            {label:'行动能力',value:row.health2===this.type1[row.health2].value?this.type1[row.health2].label:'暂无'},
            {label:'疾病情况',value:row.health3===this.type2[row.health3].value?this.type2[row.health3].label:'暂无'},
            {label:'情绪状态',value:row.qxzt===this.type1[row.qxzt].value?this.type1[row.qxzt].label:'暂无'},
            {label:'燃气安全',value:row.security1===this.type3[row.security1].value?this.type3[row.security1].label:'暂无'},
            {label:'水暖安全',value:row.security2===this.type3[row.security2].value?this.type3[row.security2].label:'暂无'},
            {label:'用电安全',value:row.security3===this.type3[row.security3].value?this.type3[row.security3].label:'暂无'},
            {label:'个人卫生',value:row.hygiene1===this.type1[row.hygiene1].value?this.type1[row.hygiene1].label:'暂无'},
            {label:'家庭卫生',value:row.hygiene2===this.type1[row.hygiene2].value?this.type1[row.hygiene2].label:'暂无'},
            {label:'室内环境',value:row.live1===this.type1[row.live1].value?this.type1[row.live1].label:'暂无'},
          ]

          const arr = [];
          if( row.fwxq_jtcw === '1' ) arr.push('家庭养老床位服务');
          if( row.fwxq_zcfw === '1' ) arr.push('上门助餐服务');
          if( row.fwxq_zjfw === '1' ) arr.push('上门助洁服务');
          if( row.fwxq_zxfw === '1' ) arr.push('上门助行服务');
          if( row.fwxq_xzfw === '1' ) arr.push('上门助浴服务');
          if( row.fwxq_kffw === '1' ) arr.push('上门康复服务');
          if( row.fwxq_zyfw === '1' ) arr.push('上门助医服务');
          if( row.fwxq_rzylyxq === '1' ) arr.push('入住养老院需求');
          if( row.fwxq_rzsqyljgxq === '1' ) arr.push('入住社区养老院机构需求');
          if( row.fwxq_jkjcxq ==='1' ) arr.push('健康检查需求');
          if( row.fwxq_qtfwxq === '1' ) arr.push('其他服务需求：'+row.fwxq_qtfwxqms);
          this.visitInfo.demand=arr.join(', ');
        }
        if(row.urgency)
        {
          this.visitInfo.visitList.push( {label:'需求紧急程度',value:row.urgency})
        }
        //照片可能会是多张的时候
        row.visitPhoto.split(",").forEach(item => {
          this.urls.push(this.serverUrl + item);
        });
        this.visitDialogVisible = true;
        this.$emit('getData',this.visitInfo,this.urls);
      },
      async loadList() {
        this.listLoading = true;
        let result = await visitList();
        decryptListData_ECB(result.data,["oldInfo","oldIdNumber"])
        this.listLoading = false;
        if (result.code === 0) {
          this.maxHeight = window.screen.availHeight - 230;
          this.records = result.data;
        }
      },
      // jump(id) {
      //   location.href = 'http://info.windd.cn/collection/public/infoDetail.html?id=' + id;
      // },
    },
    mounted() {
      this.loadList();
      this.url = this.servelUrl;
    }
  }
</script>


<style scoped>
  @import "../../style/Visit.css";
  .returnBefore {
    z-index: 10;
    background: #fff;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
  }

  .visit-top >>> .el-form-item__label {
    font-weight: bold;
  }

  .visit-top >>> .el-form-item__content {
    line-height: 20px;
  }
  .header_main{
    height: 5vh;
    line-height: 5vh;
    margin-top: 2%;
    /*border: red solid 1px;*/
    text-align: center;
    font-size: 16px;
  }
  .box{
    width: 94%;
    margin:2% 3%;
    height: 64vh;
    overflow-y: auto;
    overflow-x: hidden;
    /*border: red solid 1vh;*/
  }
  .box_main{
    width: 99%;
    height: 24%;
    background: #FFFFFF;
    border: 1px solid #E4EFFE;
    box-shadow: 0px 3px 20px 0px rgba(31, 123, 241, 0.08);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    margin-bottom: 3%;
  }
  .box_main_center{
    height: 1%;
    /*width: 100%;*/
    /*margin-left: 5%;*/
    /*margin-right: 5%;*/
    background: #F4F4F4;
  }
  .box_main_top{
    height: 49.5%;
  }
  .box_main_footer{
    height: 49.5%;
    display: flex;
    font-weight: 400;
    color: #999999;
    line-height: 4;
  }
  .symbol{
    position:absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: #9b9b9b;
  }

  .img_size{
    height: 50vh;
    width: 94vw;
    margin-left: 0;
    margin-bottom: 5%;
  }
</style>
