<template>
  <div class="bank-item">
    <a-card :title="record.institution + ' ' +record.business +' ' +record.business_type">
      <template #extra>
        <a class="active" @click="rejectEdit = !rejectEdit, resetEdit = true" v-if="can.check">
          <a-icon :type="rejectEdit ? 'undo' : 'undo'" color="green" />
          {{ rejectEdit ? '驳回信息' : '取消驳回' }}
        </a>
        <a @click="resetEdit = !resetEdit, rejectEdit = true" v-if="can.update">
          <a-divider type="vertical" />
          <span style="margin-left:20px;padding-right:20px;"><a-icon :type="resetEdit ? 'edit' : 'edit'"/>
            {{ resetEdit ? '修改信息' : '取消修改' }}</span>
        </a>
      </template>
      <!-- 完善信息之后展示 -->
      <a-descriptions title="机构详细信息" layout="horizontal" bordered :column="{ xxl: 3, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }">
        <a-descriptions-item
          v-for="item in (can.params?record.params:record.bank)"
          :key="item.key"
          :label="item.key =='family_difficulties'?'家庭困难情况' :item.key =='overdue_reasons' ?'逾期原因' :item.title"
        >
          <template v-slot:label>
            <div>{{ item.title }}</div>
          </template>
          <div class="row jc_sb wrodbreak" >
            {{ item.key =='price' || item.key == 'base_price' || item.key =='usable_amount' || item.key == 'now_amount' || item.key == 'card_amount' || item.key == 'debt_amount'?'￥':'' }}
            {{ item.value_text || '--' }}
            {{ item.key == 'overdue_day' && item.value_text>0 ?'天':'' }}
            <ItemPopover :rejectEdit="rejectEdit" :resetEdit="resetEdit" type="bank" :id="{'item_id':record.order_item_id,'order_id':orderId}" :item="item" />
          </div>
        </a-descriptions-item>
      </a-descriptions>
      <br/>
      <a-descriptions title="预估方案" layout="horizontal" bordered :column="{ xxl: 4, xl: 3, lg:2, md: 1, sm: 1, xs: 1 }" v-if="(record.schemes.length>0)">
        <a-descriptions-item
          v-for="item in record.schemes[0].params"
          :key="item.key"
          :label="item.title"
          :span="2"
        >
          {{ item.key =='price' || item.key == 'base_price'?'￥':'' }}
          {{ item.value || '--' }}
          {{ item.key == 'overdue_day' && item.value>0 ?'天':'' }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>
<script>
import ItemPopover from './modules/ItemPopover.vue'

export default {
  name: 'BankItem',
  components: {
    ItemPopover
  },
  props: {
      record: {
        type: Object,
        default: () => {
          return {}
        }
    },
    orderId: {
      type: String,
      default: ''
    },
    can: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      rejectEdit: true,
      resetEdit: true
    }
  },
  methods: {
  }
}
</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;
}
.wrodbreak{
  word-break: break-all;
}
</style>
