<template>
  <section class="info">
    <div class="card">
      <div class="baseInfo">
        <u-image border-radius="4" :src="top.detail.avatar" width="118" height="118" />
        <div class="fill">
          <b>{{ top.detail.name }}</b>
          <div v-if="top.detail.type == 1" class="wx">@微信</div>
          <div v-if="top.detail.type == 2">@企业微信</div>
        </div>
        <div class="certBtn" @tap="handleCert">{{ !isCert ? '实名认证' : '解绑' }}</div>
      </div>
      <u-row>
        <AiCell class="half" top-label label="来源">{{ $dict.getLabel('wxCustomerAddWay', top.detail.addWay) }}</AiCell>
        <AiCell class="half" top-label label="添加时间">{{ top.detail.createTime }}</AiCell>
        <AiCell class="half" top-label label="真实姓名">{{ top.detail.realName }}</AiCell>
        <AiCell class="half" top-label label="手机号码">{{ resident.phone || '-' }}</AiCell>
        <AiCell class="half" top-label label="家庭积分">{{ resident.familyIntegral }}</AiCell>
        <AiCell class="half" top-label label="个人积分">{{ resident.personalIntegral }}</AiCell>
      </u-row>
    </div>
    <div class="card">
      <AiCell title label="公共标签">
        <u-icon label="添加" size="38" name="iconAdd" custom-prefix="iconfont" color="#1365DD" label-color="#1365DD" @tap="top.showTagManage = true" />
      </AiCell>
      <AiCell top-label v-for="(op, name) in tagsList" :label="name" :key="name">
        <u-row>
          <div class="tag" v-for="(tag, j) in op" :key="j">{{ tag }}</div>
        </u-row>
      </AiCell>
    </div>
    <div class="card">
      <AiCell title label="动态" />
      <AiCell top-label>
        <div class="logItem" v-for="item in customLogs" :key="item.id">
          <div flex class="column" shrink>
            <div class="dot" />
            <div class="line fill" />
          </div>
          <div flex class="start column">
            <b>{{ $dict.getLabel('wxCustomerLogType', item.type) }}</b>
            <span>{{ item.createTime }}</span>
            <div v-html="item.content" />
          </div>
        </div>
      </AiCell>
    </div>
    <u-mask :show="dialog" @tap="dialog = false">
      <div class="bindCert" @tap.stop>
        <b class="title">实名认证</b>
        <u-input class="searchInput" v-model="search" clearable placeholder="请输入姓名或身份证号" @input="handleSearch" />
        <div class="residents">
          <div flex class="spb" v-for="(op, i) in result" :key="i" @tap="bindCert(op.id)">
            <div v-html="op.name" class="user-name" />
            <div class="area-name">{{ op.currentAddressCountry }}</div>
            <div v-html="op.idNumber" />
          </div>
        </div>
      </div>
    </u-mask>
    <div bottom>
      <u-button type="primary" @tap="handleWechat">微信联系</u-button>
      <u-button v-if="isMobile" :disabled="!resident.phone" @tap="handleTel">电话联系</u-button>
    </div>
  </section>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'info',
  inject: ['top'],
  computed: {
    resident() {
      return this.top.detail?.residentInfo?.resident || {}
    },
    tagsList() {
      let obj = {}
      this.top.detail?.tags?.map((e) => {
        if (e.type == 1 && e?.groupName) {
          if (obj?.[e.groupName]) {
            obj[e.groupName].push(e.tagName)
          } else {
            obj[e.groupName] = [e.tagName]
          }
        }
      })
      return obj
    },
    isCert() {
      return !!this.top?.detail?.residentInfo
    },
    isMobile() {
      return ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'].some((e) => navigator.userAgent.indexOf(e) > -1)
    },
  },
  data() {
    return {
      dialog: false,
      search: '',
      result: [],
      customLogs: [],
    }
  },
  methods: {
    ...mapActions(['injectJWeixin', 'wxInvoke']),
    searchResident() {
      this.$http
        .post('/app/appresident/check-name', null, {
          params: { name: this.search },
        })
        .then((res) => {
          if (res?.data) {
            let reg = new RegExp(this.search, 'g')
            this.result = res.data?.map((e) => ({
              ...e,
              name: e.name.replace(reg, `<b>${this.search}</b>`),
              idNumber: e.idNumber.replace(/^(\w{14})\w{4}(.*)$/, '$1****$2').replace(reg, `<b>${this.search}</b>`),
            }))
          }
        })
    },
    handleSearch() {
      if (this.search?.length >= 2) {
        this.searchResident()
      } else {
        this.result = []
      }
    },
    handleCert() {
      if (this.isCert) {
        this.$confirm('是否要解绑当前实名认证?').then(() => {
          this.$http
            .post('/app/wxcp/wxcustomer/unBindCustomer2Resident', null, {
              params: { residentId: this.resident.id, customerId: this.top.custom },
            })
            .then((res) => {
              if (res?.code == 0) {
                this.$u.toast('解除绑定成功!')
                this.top.getContact()
              }
            })
        })
      } else this.dialog = true
    },
    bindCert(residentId) {
      this.dialog = false
      this.$confirm('是否要绑定该居民?')
        .then(() => {
          this.$http
            .post('/app/wxcp/wxcustomer/bindCustomer2Resident', null, {
              params: { residentId, customerId: this.top.custom },
            })
            .then((res) => {
              if (res?.code == 0) {
                this.$u.toast('绑定成功!')
                this.top.getContact()
              }
            })
            .catch((err) => {
              this.$u.toast(err)
              setTimeout(() => (this.dialog = true), 1000)
            })
        })
        .catch(() => (this.dialog = true))
    },
    getCustomLog(customerId) {
      customerId &&
        this.$http
          .post('/app/wxcp/wxcustomerlog/listAll', null, {
            params: { customerId },
          })
          .then((res) => {
            if (res?.data) {
              this.customLogs = res.data
            }
          })
    },
    handleTel() {
      location.href = 'tel:' + this.resident.phone
    },
    handleWechat() {
      this.wxInvoke([
        'openUserProfile',
        {
          type: 2,
          userid: this.top.custom,
        },
        () => 0,
      ])
    },
  },
  created() {
    this.$dict.load('wxCustomerAddWay', 'wxCustomerLogType')
    this.getCustomLog(this.top.custom)
    this.injectJWeixin('openUserProfile')
  },
  onShow() {
    document.title =  '居民详情'
  }
}
</script>

<style lang="scss" scoped>
.info {
  padding-bottom: 130px;

  .certBtn {
    cursor: pointer;
    background: $uni-color-primary;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
  }

  .baseInfo {
    height: 186px;
    width: 100%;
    display: flex;
    align-items: center;

    .fill {
      color: #3c7fc8;
      margin-left: 24px;
      font-size: 28px;
      line-height: 40px;

      b {
        font-size: 36px;
        color: #333;
        margin-bottom: 8px;
        line-height: 50px;
      }

      .wx {
        color: #2ea222;
      }
    }
  }

  ::v-deep .AiCell {
    &.half {
      width: 50%;
    }
  }

  ::v-deep .u-form-item {
    width: 50%;
    min-height: 124px;

    .u-form-item--left {
      color: #999;
      min-height: 40px;
    }

    .u-form-item--right {
      min-height: 0;
      margin-top: 16px;
    }
  }

  ::v-deep .u-mask {
    display: flex;
    align-items: center;
    justify-content: center;

    .bindCert {
      width: 600px;
      padding: 32px;
      min-height: 400px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      color: #333;
    }

    .residents {
      max-height: 780px;
      overflow-y: auto;
      .user-name{
        width: 100px;
      }
      .area-name{
        width: 140px;
        word-break: break-all;
      }
    }

    .title {
      text-align: center;
      font-size: 36px;
    }

    .searchInput {
      margin: 16px 0;
      border: 1px solid #d0d4dc;
      border-radius: 8px;
      padding: 0 16px !important;
      flex: 0;
    }

    .spb {
      cursor: pointer;
      padding: 0 16px;

      b {
        font-size: 32px;
      }

      &:nth-of-type(2n) {
        background: #eee;
      }
    }
  }

  ::v-deep .logItem {
    display: flex;
    min-height: 220px;

    &:last-of-type {
      .line {
        display: none;
      }
    }

    & > .column + .column {
      margin-left: 16px;
    }

    .dot {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      background: $uni-color-primary;
      border: 8px solid #ffffff;
      border-radius: 50%;
      margin: 8px 0;
    }

    .line {
      width: 4px;
      background: #eee;
    }

    .start {
      font-size: 26px;
      font-weight: 400;
      color: #666;

      b {
        color: #333;
      }

      i {
        color: $uni-color-primary;
        font-style: normal;
      }

      & > b {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 8px;
      }

      & > span {
        color: #999;
      }

      & > div {
        margin-top: 16px;
      }
    }
  }
}
</style>
