<template>
  <div class="bg" style="min-width: 1800px">
    <div class="top-btn">
      <div class="top-item moren">荆州市红十字会欢迎您！</div>
      <div class="top-item">
        <span class="hand" style="padding-right: 6px" @click="goHome()"
          >返回首页</span
        ><img
          src="../../assets/img/backhome.png"
          alt=""
          class="hand"
          @click="goHome()"
        />
      </div>
    </div>
    <div class="base-bg" style="min-width: 1800px; max-width: 1920px">
      <img
        src="../../assets/img/mourn-bg.png"
        alt=""
        style="min-width: 1800px; max-width: 1920px"
      />
    </div>
    <div class="list-wrap">
      <div class="list">
        <div class="list-tit moren">{{ peo.name }}简介</div>
        <div class="serch-wrapper">
          <div class="search-left">
            <img src="../../assets/img/flower-black.png" alt="" />
            <div class="moren">悼念数： {{mournNum || 0}}</div>
          </div>
        </div>
        <div class="user-info">
          <div class="user-img">
            <img :src="peo.image" alt="" />
          </div>
          <div class="user-base">
            <div class="base-item">
              <div class="base-item-name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
              <div class="base-val">&nbsp;&nbsp;{{peo.name || ''}}</div>
            </div>
            <div class="base-item">
              <div class="base-item-name">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</div>
              <div class="base-val">&nbsp;&nbsp;{{peo.gender}}</div>
            </div>
            <div class="base-item">
              <div class="base-item-name">享&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年</div>
              <div class="base-val">&nbsp;&nbsp;{{peo.age}}</div>
            </div>
            <div class="base-item">
              <div class="base-item-name">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</div>
              <div class="base-val">&nbsp;&nbsp;{{peo.book}}</div>
            </div>
            <div class="base-item">
              <div class="base-item-name">捐献项目</div>
              <div class="base-val">&nbsp;&nbsp;{{peo.project}}</div>
            </div>
            <div class="base-item">
              <div class="base-item-name">捐献日期</div>
              <div class="base-val">&nbsp;&nbsp;{{peo.time_text | showTime}}</div>
            </div>
          </div>
        </div>
        <div class="online">
          <div class="online-tit">
            <img src="../../assets/img/online-tit.png" alt="" />
            <div class="tit-tit moren">在线悼念</div>
          </div>
          <div class="online-tb">
            <div class="tb-item">
              <img
                src="../../assets/img/online00.png"
                alt=""
                class="tb-item-logo"
              />
              <div class="tb-item-tit hand" @click="mournGive(1)">献花：{{ peo.flower }}</div>
            </div>
            <div class="tb-item">
              <img
                src="../../assets/img/online01.png"
                alt=""
                class="tb-item-logo"
              />
              <div class="tb-item-tit hand" @click="mournGive(2)">点烛：{{ peo.candle }}</div>
            </div>
            <div class="tb-item">
              <img
                src="../../assets/img/online02.png"
                alt=""
                class="tb-item-logo"
              />
              <div class="tb-item-tit hand" @click="mournGive(3)">上香：{{ peo.scented }}</div>
            </div>
            <div class="tb-item">
              <img
                src="../../assets/img/online03.png"
                alt=""
                class="tb-item-logo"
              />
              <div class="tb-item-tit hand" @click="mournGive(4)">祈祷：{{ peo.pray }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <page-bottom :backgroundBg="'#fff'" :textcolor="'#031A2A'"></page-bottom>
  </div>
</template>
<script>
import {
	Message
} from 'element-ui'
import PageBottom from "../../components/pageBottom/PageBottom.vue";
import { getMournList, getMournDetail, mournGive, getPeoNum } from "../../request/api.js";
export default {
  data() {
    return {
      list: 10,
      page: 1,
      limit: 20,
      total: 100,
      keyword: "",
      loaded: false,
      peo: {
        name: "",
        hua: 0,
        lazhu: 0,
        xioang: 0,
        qi: 0,
       
      },
       mournNum: '',
    };
  },
  filters: {
    showTime(val) {
      let str = ''
      if(val) {
        str = val.split(' ')[0]
      }
      return str
    }
  },
  components: {
    PageBottom,
  },
  mounted(){
    this.getMournDetail()
    // this.getPeoNum()
  },
  methods: {
    // 获取个人掉念数
    getPeoNum() {
      getPeoNum({
        id: this.$route.query.id
      }).then(res => {
        console.log(res)
        this.mournNum = res.data
      })
    },
    //个人祭拜
    mournGive(id) {
      let obj = this
      if(obj.loaded) {
        return Message.error('请勿频繁操作')
      }
      obj.loaded = true
      mournGive({
        id: this.$route.query.id,
        type: id
      }).then(res => {
        
        if(id == 1) {
          obj.peo.flower++
        }else if(id == 2) {
            obj.peo.candle++
        }else if(id == 3) {
            obj.peo.scented++
        }else if(id == 4) {
            obj.peo.pray++
        }
        obj.mournNum++
         obj.loaded = false
      })
    },
    // 获取个人悼念总数
    getMournDetail() {
      // console.log(this.$route.query.id)
      let obj = this
      getMournDetail({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        obj.peo = res.data.data
        obj.mournNum = res.data.count
      });
    },
    goHome() {
      this.$router.push("/home");
    },
    // 页码改变触发
    currentChange(e) {
      this.page = e;
      // console.log()
      this.list = e;
      this.getList();
    },
    // 获取捐献列表
    getList() {},
    // 在线悼念
    goDaonian() {
      this.$router.push("/mourn/detail?id=10");
    },
  },
  computed: {
    boxHeight() {
      console.log(Math.round(this.list / 4), "Math.round(this.list/4)");
      return Math.round(this.list / 4);
    },
  },
};
</script>
<style scoped lang="scss">
div {
  box-sizing: border-box;
}
.bg {
  background: #dbe2ee;
}
.base-bg {
  width: 100%;
  margin: auto;
  //   padding-top: 66%;
  img {
    // position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }
}
.list-wrap {
  position: relative;

  width: 1082px;
  // min-height: 1845px;
  height: auto;
  background: #ffffff;
  margin: auto;
  margin-top: -508px;
  padding: 18px 13px;
  margin-bottom: 126px;
  .list {
    width: 100%;
    // min-height: 1845px;
    padding-bottom: 100px;
    // height: 100%;
    // min-height: 100%;
    height: 937px;
    border: 8px solid #006061;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    padding-top: 62px;
    .list-tit {
      width: 258px;
      height: 52px;
      line-height: 52px;
      background: #006061;
      text-align: center;
      font-size: 19px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      position: absolute;
      top: -8px;
      left: -8px;
    }
    .list-item {
      text-align: center;
      width: 203px;
      height: 278px;
      //   margin-bottom: 40px;
      margin: 40px 20px;
      .item-logo {
        width: 203px;
        height: 203px;
        position: relative;
        .logo-pepo {
          width: 160px;
          height: 160px;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto;
        }
        .logo-hq {
          width: 203px;
          height: 203px;
          position: absolute;
          top: 0;
          left: 0;
        }
        // background-image: url(../../assets/img/hq.png);
      }
      .item-name {
        padding: 13px 0;
        font-size: 21px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #071b2a;
      }
      .item-btn {
        width: 97px;
        line-height: 29px;
        background: #006061;
        border-radius: 5px;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        margin: auto;
      }
    }
  }
  .user-info {
    padding: 101px 0 96px 205px;
    width: 100%;
    display: flex;

    .user-img {
      width: 163px;
      height: 163px;
      img {
        width: 163px;
        height: 163px;
      }
    }
    .user-base {
      margin-left: 40px;
      width: 546px;
      display: flex;
      //   flex-direction: ;
      flex-wrap: wrap;
      align-content: center;
      .base-item {
        width: 50%;
        flex-shrink: 0;
        // flex-grow: 0;
        border-bottom: 1px dashed rgba(23, 18, 21, 0.21);
        display: flex;
        line-height: 32px;
        height: 32px;
        font-size: 19px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #0b1c29;
        line-height: 31px;
        .base-item-name {
          &::after {
            content: ":";
          }
        }
      }
    }
  }
  .online {
    width: 100%;
    .online-tit {
      position: relative;
      width: 566px;
      height: 70px;
      margin: auto;
      img {
        widows: 566px;
        height: 70px;
      }
      .tit-tit {
        widows: 566px;
        height: 70px;
        line-height: 65px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .online-tb {
      width: 645px;
      height: 180px;
      // margin: auto;
      margin: 47px auto 0;
      display: flex;
      justify-content: space-between;
      .tb-item {
        width: 132px;
        height: 180px;
        position: relative;
        .tb-item-logo {
          width: 132px;
          height: 180px;
        }
        .tb-item-tit {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 27px;
          line-height: 40px;
          position: absolute;
          bottom: 0;
          text-align: center;
          width: 132px;
        }
      }
    }
  }
}
.serch-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  height: 33px;
  position: absolute;
  top: 5px;
  right: 10px;
  .search-left {
    display: flex;
    align-items: center;
    height: 33px;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #031a2a;
    margin-right: 10px;
  }
}
.page-wrap {
  position: absolute;
  bottom: 30px;
  display: flex;
  width: 100%;
  justify-content: center;
}
.top-btn {
  width: 100%;
  min-width: 1800px;
  height: 40px;
  background: rgba($color: #ffff, $alpha: 0.85);
  position: absolute;
  // opacity: 0.85;
  display: flex;
  // justify-content: ;
  align-items: center;
  text-align: center;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #031a2a;
  .top-item {
    width: 50%;
    img {
      width: 15px;
      height: 15px;
      // margin-left: 6px;
    }
  }
}
</style>