<template>
  <div>
    <!-- 用户实名信息 -->
    <a-card :bordered="false" style="margin-top: 24px" title="用户基础信息">
      <template #extra>
        <!-- v-if="can.check" -->
        <!-- <a class="active" @click="rejectEdit = !rejectEdit,resetEdit = true" >
          <a-icon :type="rejectEdit ? 'undo' : 'undo'" color="green" />
          {{ rejectEdit ? '驳回信息' : '取消驳回' }}
        </a> -->
        <a @click="resetEdit = !resetEdit, rejectEdit= true" v-if="can.userbase" >
          <a-divider type="vertical" />
          <span style="margin-left:20px;padding-right:20px;"><a-icon :type="resetEdit ? 'edit' : 'edit'"/>
            {{ resetEdit ? '修改信息' : '取消修改' }}</span>
        </a>
      </template>
      <a-descriptions
        layout="horizontal"
        size="middle"
        :bordered="true"
        :column="{ xxl: 4, xl: 4, lg: 4, md: 1, sm: 1, xs: 1 }"
      >
        <a-descriptions-item
          v-for="item in info.value"
          :key="item.key"
          :label="item.title"
          :span="2"
        >
          <!-- 图片展示 -->
          <div class="row jc_sb" v-if="item.key == 'front_card' || item.key == 'back_card'">
            <span href="" @click="seeImg(item.key == 'front_card' ? 'zheng' : 'fan', item.value)">查看</span>
            <ItemPopover
              type="user"
              :item="item"
              :resetEdit="resetEdit"
              :rejectEdit="rejectEdit"
              :id="{'item_id':info.business_order_user_id,'order_id': orderId }" />
          </div>
          <!-- 其他类 -->
          <div v-else class="row jc_sb">
            {{ item.value_text || '--' }}
            <ItemPopover
              type="user"
              :item="item"
              :resetEdit="resetEdit"
              :rejectEdit="rejectEdit"
              :id="{'item_id':info.business_order_user_id,'order_id': orderId }" />
          </div>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <!-- 展示身份证 -->
    <a-modal
      :title="idCardType === 'zheng' ? '身份证正面展示' : '身份证反面展示'"
      @cancel="IdCardVisible = false"
      :visible="IdCardVisible"
      @ok="IdCardVisible = false"
      :maskClosable="true"
    >
      <div v-if="idCardImageValue">
        <img :src="idCardImageValue" style="width: 100%" />
      </div>
    </a-modal>
  </div>
</template>
<script>
import ItemPopover from './modules/ItemPopover.vue'
export default {
  components: {
    ItemPopover
  },
  name: 'OrganizationRealName',
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    },
    orderId: {
      type: String,
      default: ''
    },
    can: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      IdCardVisible: false,
      idCardType: 'zheng',
      idCardImageValue: '',
      rejectEdit: true,
      resetEdit: true
    }
  },
  methods: {
    // 预览图片
    seeImg (type, item) {
      this.IdCardVisible = true
      this.idCardType = type
      this.idCardImageValue = item
    }
  }
}
</script>
<style lang="less" scoped>
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ai_start {
  align-items: flex-start;
}
.jc_start {
  justify-content: flex-start;
}
.jc_sb {
  justify-content: space-between;
}
.js_start {
  justify-content: start;
}
.a-des-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  .pl50 {
    margin-left: 50px;
  }
  .inputT {
    flex: 1;
    margin-left: 50px;
  }
}
</style>
