<template>
  <div v-loading="loading">
    <el-form
      label-width="100px"
      class="dialog-info"
      inline>
      <p class="block-title">
        会员信息
      </p>
      <el-form-item label="会员类型">
        <span>{{ info.memberType.name }}</span>
      </el-form-item>
      <el-form-item label="编号">
        <span>{{ info.id }}</span>
      </el-form-item>
      <el-form-item label="姓名">
        <span>{{ info.name }}</span>
      </el-form-item>
      <el-form-item
        v-if="((scenicName !== '狼山景区' && scenicName !== 'demo') || checkPermission('member:member_info_update'))"
        label="手机号码">
        <span>{{ info.phone }}</span>
      </el-form-item>
      <el-form-item label="住址">
        <span>{{ info.address }}</span>
      </el-form-item>
      <el-form-item label="证件类型">
        <span>{{ info.papers_type | paperType }}</span>
      </el-form-item>
      <!-- 狼山定制的，详情页非管理员看不到证件号码和手机号；其他项目还是都展示 -->
      <!-- 要在methods里加入checkPermission（从'@/utils/checkPermission'导过来）；不然默认会是main.js里同名的checkPermission，而后者不认冒号 -->
      <!-- 狼山管理员：checkPermission('member:member_info_update') -->
      <!-- 其他景区：scenicName !== '狼山景区' -->
      <el-form-item
        v-if="((scenicName !== '狼山景区' && scenicName !== 'demo') || checkPermission('member:member_info_update'))"
        label="证件号码">
        <!--
        <span>{{ info.papers_id }} </span>
         -->
        <span>
          {{ isPapersIdDesensitize ? $options.filters.formatIDCard(info.papers_id,'暂无') : (info.papers_id || '暂无') }}
        </span>
      </el-form-item>
      <el-form-item label="生效时间">
        <span>{{ info.starttime | formatDate }}</span>
      </el-form-item>
      <el-form-item label="截止时间">
        <span>{{ info.endtime | formatDate }}</span>
      </el-form-item>
      <el-form-item label="备注">
        <span>{{ info.remark || '无' }}</span>
      </el-form-item>
      <template v-if="projectName === 'shqzly'">
        <el-form-item label="总检票次数">
          <span>{{ info.sum_checkNums===-1?'无限制':info.sum_checkNums }}</span>
        </el-form-item>
        <el-form-item label="剩余检票次数">
          <span>{{ info.left_checkNums===-1?'无限制':info.left_checkNums }}</span>
        </el-form-item>
        <el-form-item label="儿童姓名">
          <span>{{ info.child_name }}</span>
        </el-form-item>
        <el-form-item label="出生日期">
          <span v-if="info.birthday">{{ info.birthday| formatDate }}</span>
        </el-form-item>
        <el-form-item label="售票员">
          <span>{{ info.sale_name }}</span>
        </el-form-item>
      </template>
      <p class="block-title">
        通关方式
      </p>
      <el-form-item
        class="narrow-form-item"
        v-if="info.memberType.category === 2"
        label="姓名">
        <div>
          {{ info.name }}
        </div>
      </el-form-item>
      <el-form-item
        label="IC卡号"
        v-if="info.memberType.iccard_check">
        <span>{{ info.iccard.cardNo }}</span>
      </el-form-item>
      <el-form-item
        label="身份证号"
        v-if="info.memberType.idcard_check">
        <!--
        <span>{{ info.idcard && info.idcard.idcardNo }}</span>
         -->
        <span v-if="info.idcard && info.idcard.idcardNo">
          {{ isPapersIdDesensitize ? $options.filters.formatIDCard(info.idcard.idcardNo,'暂无') : (info.idcard.idcardNo || '暂无') }}
        </span>
      </el-form-item>
      <br>
      <el-form-item
        class="narrow-form-item"
        label="指纹"
        v-if="info.memberType.fingerprint_check">
        <div
          class="portrait"
          :style="{'background-image': `url(data:image/png;base64,${form.finger})`}">
        </div>
      </el-form-item>
      <el-form-item
        class="narrow-form-item"
        label="照片"
        v-if="info.memberType.face_check && form.face">
        <!-- <div
          class="portrait"
          :style="{'background-image': getUrl(form.face)}">
        </div> -->
        <div class="face-wrap">
          <div class="img">
            <img
              :src="`data:image/png;base64,${form.face.replace(/[\r\n]/g, '')}`"
              width="120px">
            <div
              class="info"
              :class="form.facereg_id>-1?'success':'failed'">
              {{ form.facereg_id>-1?'后台已认证':'后台未认证' }}
            </div>
          </div>
          <div
            class="img"
            v-if="form.face_chip_img">
            <img
              :src="`data:image/png;base64,${form.face_chip_img.replace(/[\r\n]/g, '')}`"
              width="120px">
            <div class="info normal">
              已识别的人脸
            </div>
          </div>
        </div>
      </el-form-item>
      <p
        class="block-title"
        v-if="info.memberType.category ===5">
        储值卡信息
      </p>
      <el-form-item
        v-if="info.memberType.category ===5"
        label="证件号">
        <div>
          {{ info.papers_id }}
        </div>
      </el-form-item>
      <el-form-item
        v-if="info.memberType.category ===5"
        label="会员卡号">
        <div>
          {{ info.iccard && info.iccard.cardNo }}
        </div>
      </el-form-item>
      <el-form-item
        v-if="info.memberType.category ===5"
        label="折扣">
        <div>
          {{ info.discount/10+'折' }}
        </div>
      </el-form-item>
      <el-form-item
        v-if="info.memberType.category ===5"
        label="账户余额">
        <div>
          ￥{{ info.total_balance }}
        </div>
      </el-form-item>
      <div
        v-if="info.childList && info.childList.length"
        style="width: 100%">
        <div class="block-title">
          子卡信息
        </div>
        <div
          class="child-item"
          v-for="(child, index) in info.childList"
          :key="index"
        >
          <el-form-item
            class="narrow-form-item"
            label="姓名">
            <div>
              {{ child.name }}
            </div>
          </el-form-item>
          <el-form-item
            v-if="child.idcard"
            label="身份证">
            <div>
              {{ child.idcard && child.idcard.idcardNo }}
            </div>
          </el-form-item>
          <el-form-item
            class="narrow-form-item"
            label="指纹"
            v-if="info.memberType.fingerprint_check">
            <div
              class="portrait"
              :style="{'background-image': child.finger ? `url(data:image/png;base64,${child.finger.finger_pic})` : ''}">
            </div>
          </el-form-item>
          <el-form-item
            class="narrow-form-item"
            label="照片"
            v-if="info.memberType.face_check && child.face">
            <div class="face-wrap">
              <div
                class="img"
                v-if="child.face.face_img">
                <img

                  :src="`data:image/png;base64,${child.face.face_img.replace(/[\r\n]/g, '')}`"
                  width="120px">
                <div
                  class="info"
                  :class="child.face.facereg_id>-1?'success':'failed'">
                  {{ child.face.facereg_id>-1?'后台已认证':'后台未认证' }}
                </div>
              </div>
              <div
                class="img"
                v-if="child.face.face_chip_img">
                <img
                  :src="`data:image/png;base64,${child.face.face_chip_img.replace(/[\r\n]/g, '')}`"
                  width="120px">
                <div class="info normal">
                  已识别的人脸
                </div>
              </div>
            </div>
            <!-- <div
              class="portrait"
              :style="{'background-image': child.face ? getUrl(child.face.face_img):''}">
            </div> -->
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getSingleMember } from '@/api/member'
import checkPermission from '@/utils/checkPermission'
// import store from '@/store'
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    isPapersIdDesensitize () {
      const value = this.$store.state.app.systemConfig.find(i => i.configKey === 'papers_id_desensitize')?.configValue
      return value === '1'
    },
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    }
  },
  // mounted () {
  //   console.log('权限列表：', store.state.user.permissionList)
  //   console.log('有没有狼山新加的会员编辑权限？', store.state.user.permissionList.indexOf('member:member_info_update'))
  // },
  data () {
    return {
      projectName: process.env.VUE_APP_PROJECT,
      loading: false,
      visible: false,
      form: {
        finger: '',
        face: '',
        idcard: '',
        iccard: ''
      }
    }
  },
  watch: {
    visible (val) {
      if (val && this.info.id) {
        if (this.info.memberType.iccard_check) {
          this.form.iccard = this.info.iccard ? this.info.iccard.cardNo : ''
        }
        if (this.info.memberType.idcard_check) {
          this.form.idcard = this.info.idcard ? this.info.idcard.idcardNo : ''
        }
        // let needFace = this.info.memberType.face_check
        // let needFinger = this.info.memberType.fingerprint_check
        // if (needFace || needFinger) {
        this.resetPics()
        this.loading = true
        getSingleMember(this.info.id).then(res => {
          console.log(res)
          this.form.finger = res.finger ? res.finger.finger_pic : ''
          this.form.face = res.face ? res.face.face_img : ''
          this.form.face_chip_img = res.face ? res.face.face_chip_img : ''
          this.form.facereg_id = res.face ? res.face.facereg_id : -1
          this.info.childList = res.childList
          this.info.sum_checkNums = res.sum_checkNums
          this.info.left_checkNums = res.left_checkNums
        }).finally(() => {
          this.loading = false
        })
        // }
      }
    }
  },
  methods: {
    checkPermission,
    resetPics () {
      this.form.finger = ''
      this.form.face = ''
      this.info.childList = []
    },
    getUrl (str) {
      // 移除换行符
      return `url(data:image/png;base64,${str.replace(/[\r\n]/g, '')})`
    }
  }
}
</script>
<style lang="scss" scoped>
.child-item {
  display: flex;  width: 100%;  padding-top: 18px;  border-bottom: 1px dashed $blue;
}

.face-wrap {
  img {
    display: block;
  }
  .img + .img {
    margin-top: 5px;
  }
  .info {
    color: #fff;  text-align: center;
  }
  .info.success {
    text-align: center; background: rgb(12, 143, 0);
  }
  .info.failed {
    text-align: center; background: rgb(192, 23, 46);
  }
  .info.normal {
    text-align: center; background: #2d62a8;
  }
}

</style>
