<template>
  <!-- 用户实名信息 -->
  <a-card :title="`机构信息 (${institution.business} ${institution.business_type})`" style="margin-top:24px;">
    <a-card-meta style="padding-bottom: 20px;">
      <template slot="title">
        <div class="flex-sb">
          <div v-if="institution.institution_name">机构名称2：<span style="font-size:16px;color:#1890ff;">{{ `${institution.institution_name}` }}</span></div>
          <div>机构名称：{{ `${institution.institution}` }}</div>
        </div>
      </template>
    </a-card-meta>
    <template #extra>
      <a class="active" v-if="can.institution_name" style="margin-left:10px;padding-right:10px;" @click="visible = true; changeOrgName = institution.institution_name || ''">
        <span style="margin-left:20px;"><a-icon :type="resetEdit ? 'edit' : 'edit'" />变更机构</span>
      </a>
      <a-divider type="vertical" v-if="can.institution_name" />
      <a @click="resetEdit = !resetEdit, rejectEdit = true" v-if="can.institution" >
        <span style="margin-left: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 institution.bank"
        :key="item.key"
        :label="item.title"
        :span="2">
        <!-- 其他类 -->
        <div class="row jc_sb">
          {{ item.value_text || '--' }}
          <ItemPopover
            :rejectEdit="rejectEdit"
            :resetEdit="resetEdit"
            type="bank"
            :id="{ 'item_id': itemId, 'order_id': orderId }"
            :item="item" />
        </div>
      </a-descriptions-item>
    </a-descriptions>
    <a-modal
      v-model="visible"
      title="变更结构名称"
      @ok="handleOk"
    >
      <a-textarea placeholder="修改机构名称" :rows="4" v-model="changeOrgName" />
    </a-modal>
  </a-card>
</template>
<script>
import ItemPopover from './modules/ItemPopover.vue'
import { institutionEdit } from '@/api/order'
export default {
  components: {
    ItemPopover
  },
  name: 'OrganizationBankInfo',
  props: {
    institution: {
      type: Object,
      default: () => {
        return {}
      }
    },
    orderId: {
      type: String,
      default: ''
    },
    itemId: {
      type: String,
      default: ''
    },
    can: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      IdCardVisible: false,
      idCardType: 'zheng',
      idCardImageValue: '',
      loaded: {},
      rejectEdit: true,
      resetEdit: true,
      info: {
        value: {}
      },
      canSend: false,
      visible: false, // 展示弹窗修改机构名称
      changeOrgName: ''// (更改后机构名称)
    }
  },
  methods: {
    // 修改机构名称
    handleOk () {
      institutionEdit(this.itemId, { institution_name: this.changeOrgName }).then(res => {
        this.visible = false
        this.eventBus.$emit('updateOrderInfo', { data: true })
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</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;
  }
}
.flex-sb{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  font-size: 14px;
  color:#666;
}
</style>
