<template>
  <div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
    <div class="tab" v-if="!isFrom">
      <span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
      <span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">帮扶日志</span>
    </div>
    <div class="tab-content">
      <div class="tab-content__item" v-show="currIndex === 0">
        <div class="item-wrapper">
          <div class="item-header item-avatar">
            <div class="left">
               <image :src="$cdn + 'avatar.png'"/>
              <div class="left-right">
                <h2>{{ info.name }}</h2>
                <p>{{ info.phone }}</p>
              </div>
            </div>
            <span @click="linkTo('./MonitorAdd?id=' + info.id)">编辑</span>
          </div>
          <div class="item-info">
            <label>行政区划</label>
            <span>{{ info.addressArea }}</span>
          </div>
          <div class="item-info">
            <label>家庭地址</label>
            <span>{{ info.address }}</span>
          </div>
          <div class="item-info">
            <label>是否扶贫搬迁</label>
            <span>{{ $dict.getLabel('fpYesOrNo', info.move) }}</span>
          </div>
          <div class="item-info" v-if="info.move === '01'">
            <label>安置地区</label>
            <span>{{ info.placeArea }}</span>
          </div>
          <div class="item-info" v-if="info.move === '01'">
            <label>安置详细地址</label>
            <span>{{ info.place }}</span>
          </div>
          <div class="item-info">
            <label>纳入监测时间</label>
            <span>{{ info.createTime }}</span>
          </div>
          <div class="item-info">
            <label>监测员</label>
            <span>{{ info.monitoringContact || '-' }}</span>
          </div>
          <div class="item-info">
            <label>监测员电话</label>
            <span style="color: #3D94FB;"
                  @click="call(info.monitoringContactPhone)">{{ info.monitoringContactPhone || '-' }}</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>家庭成员</h2>
              <i :style="{color: info.familyList.length ? '#2EA222' : '#FF4466'}">({{
                  info.familyList.length ? '已填写' : '未填写'
                }})</i>
            </div>
            <span @click="linkTo('./MonitorFamilyMember?id=' + info.id)">编辑</span>
          </div>
          <div class="item-info">
            <label>未参加医疗参保</label>
            <span>{{ info.ylbxCount }}人</span>
          </div>
          <div class="item-info">
            <label>未参加养老保险</label>
            <span>{{ info.ylCount }}人</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>家庭情况</h2>
              <i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{
                  isFamilySituation ? '已填写' : '未填写'
                }})</i>
            </div>
            <span @click="linkTo('./MonitorFamilySituation?id=' + info.id)">编辑</span>
          </div>
          <div class="item-info">
            <label>是否危房</label>
            <span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHouse) || '-' }}</span>
          </div>
          <div class="item-info">
            <label>饮用水安全问题</label>
            <span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>收支情况</h2>
              <i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
            </div>
            <span @click="linkTo('./MonitorIncome?id=' + info.id)">编辑</span>
          </div>
          <div class="item-info">
            <label>家庭纯收入</label>
            <span>{{ info.income6 }}元</span>
          </div>
          <div class="item-info">
            <label>家庭人均纯收入</label>
            <span>{{ info.income7 }}元</span>
          </div>
        </div>
        <div class="item-wrapper">
          <div class="item-header">
            <div class="left">
              <h2>风险解除</h2>
              <i :style="{color: isPoorStatus ? '#2EA222' : '#FF4466'}">({{ isPoorStatus ? '已填写' : '未填写' }})</i>
            </div>
            <span @click="linkTo('./MonitorPoorStatus?id=' + info.id)">编辑</span>
          </div>
          <div class="item-info">
            <label>是否消除风险</label>
            <span>{{ info.riskEliminationMethod ? '是' : '-' }}</span>
          </div>
        </div>
      </div>
      <div class="tab-content__item" v-show="currIndex === 1">
        <div class="log-item" v-for="(item, index) in list" :key="index">
          <div class="log-item__wrapper">
            <div class="log-item__user">
              <div class="left">
                <div class="user">
                  <span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
                </div>
                <h2>{{ item.createUserName }}</h2>
              </div>
              <div class="right">
                <span>{{ item.createTime }}</span>
                <image src="/static/images/more.png" @click="edit(item.id)"/>
              </div>
            </div>
            <p>{{ item.detail }}</p>
            <div class="imgs">
              <image :src="img.url" @click="prevImg(item.imgs, img.url)" v-for="(img, index) in item.imgs"
                     :key="index"/>
            </div>
          </div>
        </div>
        <AiEmpty v-if="!list.length" style="padding-bottom: 20px;"></AiEmpty>
      </div>
    </div>
    <AiFixedBtn v-if="currIndex === 1">
      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog"></div>
    </AiFixedBtn>
  </div>
</template>

<script>

export default {
  name: 'detail',

  data() {
    return {
      info: {},
      pageShow: false,
      currIndex: 0,
      list: [],
      isFrom: false
    }
  },


  computed: {
    isIncome() {
      if (!this.info.id) {
        return false
      }

      return this.info.income6 > 0 && this.info.income7 > 0;


    },

    isPoorStatus() {
      if (!this.info.id) {
        return false
      }

      return !!this.info.riskEliminationMethod;


    },

    isFamilySituation() {
      if (!this.info.id) {
        return false
      }

      return !!(this.info.drinkingWaterSafety && this.info.dilapidatedHouse);


    }
  },

  onLoad(query) {
    if (query.isFrom) {
      this.isFrom = true
    }
    uni.showLoading()
    this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo']).then(() => {
      this.getInfo(query.id)
    })

    this.id = query.id
    uni.$on('reload', () => {
      this.getInfo(query.id)
    })
  },
  onShow() {
    document.title = '风险预警详情'
  },

  methods: {
    linkTo(url) {
      uni.navigateTo({url})
    },

    call(phone) {
      if (phone) {
        uni.makePhoneCall({
          phoneNumber: phone
        })
      }
    },

    edit(id) {
      uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: res => {
          if (res.tapIndex === 0) {
            uni.navigateTo({
              url: `./MonitorAddLog?pid=${this.info.id}&id=${id}`
            })
          } else if (res.tapIndex === 1) {
            this.$confirm('确定删除该数据？').then(() => {
              uni.showLoading()
              this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
                if (res.code === 0) {
                  this.$u.toast('删除成功')
                  this.getInfo(this.id)
                }
                uni.hideLoading()
              })
            }).catch(() => {
            })
          }
        }
      })
    },

    prevImg(urls, img) {
      const imgs = urls.map(v => v.url)
      uni.previewImage({
        urls: imgs,
        current: img
      })
    },

    toAddLog() {
      uni.navigateTo({
        url: './MonitorAddLog?pid=' + this.info.id
      })
    },

    changeTab(index) {
      this.currIndex = index
    },

    getInfo(id) {
      this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data

          let ylbxCount = 0
          let ylCount = 0
          res.data.familyList.forEach(item => {
            if (item.medicalInsurance === '02') {
              ylbxCount = ylbxCount + 1
            }
            if (item.endowmentInsurance === '02') {
              ylCount = ylCount + 1
            }
          })
          this.info.ylbxCount = ylbxCount
          this.info.ylCount = ylCount
          this.pageShow = true
        }

        uni.hideLoading()
      })
      this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${id}&size=1000&current=1`).then(res => {
        if (res.code === 0) {
          this.list = res.data.records.map(item => {
            return {
              ...item,
              imgs: JSON.parse(item.picture)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.detail {
  padding-top: 96px;
  padding-bottom: 60px;

  &.active {
    padding-top: 0;
  }

  .addBtn {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: $uni-color-primary;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-size: 48px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .tab {
    display: flex;
    position: fixed;
    align-items: center;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 96px;
    padding: 0 60px;
    background: #FFFFFF;
    border-bottom: 1px solid #D4D4D4;
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }

    span {
      position: relative;
      flex: 1;
      height: 96px;
      line-height: 96px;
      color: #000000;
      text-align: center;
      font-size: 32px;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 192px;
        height: 6px;
        background: transparent;
        transform: translateX(-50%);
        content: ' ';
      }

      &.active {
        color: #1365DD;

        &::after {
          background: #1365DD;
        }
      }
    }
  }

  .item-wrapper {
    background: #fff;
    margin-bottom: 16px;
    padding: 0 32px 16px;

    .item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 96px;

      & > span {
        color: #3975C6;
        font-size: 32px;
      }

      .left {
        display: flex;
        align-items: center;

        h2 {
          color: #333333;
          font-size: 32px;
          font-weight: 500;
        }

        i {
          font-style: normal;
          color: #2EA222;
          font-size: 32px;
        }
      }
    }

    .item-info {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;

      label {
        color: #999999;
        font-size: 32px;
      }

      span {
        max-width: 496px;
        text-align: right;
        color: #333333;
        font-size: 32px;
      }
    }

    .item-avatar {
      height: 192px;

      image {
        width: 112px;
        height: 112px;
        margin-right: 24px;
      }

      .left-right {
        p {
          margin-top: 8px;
          color: #999999;
          font-size: 28px;
        }
      }
    }
  }

  .log-item {
    padding: 0 0 0 32px;
    background: #fff;

    &:first-child {
      margin-top: 16px;
    }

    &:last-child {
      .log-item__wrapper {
        border: none !important;
      }
    }

    .log-item__wrapper {
      padding: 32px 32px 32px 0;
      border-bottom: 1px solid #E4E5E6;

      .log-item__user {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > div {
          display: flex;
          align-items: center;
        }

        .left {
          .user, image {
            width: 80px;
            height: 80px;
            line-height: 80px;
            margin-right: 16px;
            text-align: center;
            border-radius: 50%;
            background: #2266FF;

            span {
              color: #fff;
              font-size: 28px;
            }
          }

          h2 {
            color: #333;
            font-size: 32px;
          }
        }

        .right {
          image {
            width: 32px;
            height: 32px;
          }

          span {
            margin-right: 6px;
            color: #999999;
            font-size: 28px;
          }
        }
      }

      p {
        margin: 4px 0 16px 96px;
        color: #343D65;
        font-size: 28px;
      }

      .imgs {
        margin-left: 96px;

        image {
          width: 136px;
          height: 136px;
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>
