<template>
  <div>
    <div v-for="(card, index) in bankList" :key="index" class="cardRow bottom-line" @click="cardClicked(card, index)">
        <div class="flex-row align-center justify-between">
            <div class="flex-row align-center"> 
                <image :src="card.icon" class="icon-card"></image>
                <div class="flex-column align-start justify-center ml10">
                    <div class="flex-row align-center">
                        <text class="font-14 m-color-1">{{card.name}}</text>
                        <text class="font-14 m-color-1">{{card.num}}</text>
                        <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAeCAYAAABwmH1PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQTk4QUM5RDA0QzMxMUU4OUQ0MkY3Q0RENUEyNzA5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQTk4QUM5RTA0QzMxMUU4OUQ0MkY3Q0RENUEyNzA5NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFBOThBQzlCMDRDMzExRTg5RDQyRjdDREQ1QTI3MDk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFBOThBQzlDMDRDMzExRTg5RDQyRjdDREQ1QTI3MDk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ROFMIwAACDxJREFUeNrsWGlwVGUWvenOvnX2EBIgYdGQBaEChCJkRJZhmBKZoRRHEcGlHGcctNByG2tKHQtHtFQUC3FGZ0YhgqKio5YiyL5DACEkhCRkJenOQvZ0kk4nc87X/ZqXkHT4G+BWffX6Lf3ed757z7nnPY+enh65nsIg11lcd4A93Z30eHKnHzYJGN5DDBd5asaw9Lw1qzem/jgMoNyswHh3iCd0F8Y8gLYNVtITrgGwjNsw1l1Nht/D5jFt//akCAkP8Br07odKGuV8TZssnTxMDB4eV5zvxrM2ZpuFjwzz95IFyRFi7+6RTSctaquP+9KGibm5U3acv9Tvs2aPC5W4EF+pauqQn/Id19wU6S/TRgXL1jM10txh76VVyHJPvxkGWM70IW0/0Mco7/x+nEyMDbziod5GD3l0eqz8957xass7+noaZBYmw2P8/drtY+Sh9Bj1/0/uTZLJI4LVf99aOFYemBojRoOH+OC6ED9P15gUGyQbliRhocN7HffzMgjX8W+/jpftj06SP+GZpytbXPNZkRknH+MZwb69pKnJyekBRSuK83YB9jbKg5vz5Fx1myRG+bsuSooOkOdmj1KZeu3nUvn2bK0UILuMdlu31LXapLa1UyJRGZ+fapGTFc3q3OOYVHZ5syybEiNPbD0vRbVWeSwjVn47Ptx174RwP7XNSAiRrQ+kuo6zEqaNMqmFYqWs/LpAulAZXAwGF7rkUrvUW7v0eD7SC1d/gDP0OytvHSEPpg+X13eWyt/nj5b1By+qByzHhH/Iq5N8gCSIzNEhMmNttvrPr8aESAGA/GFStMpgZWOHAvHl6RpVqv5eRnlpW7GEYrFigr3ljV1lamixZVmKDA/2kdvWnZAWXWk+jwUmWEZWtkX+tTjRdY5ZZRLykZgFoOBnpyyu2w3Wlpbrdwhk/4UGmYFtbYtNreC4CEcGyNeKhg7xRxXswzWMyEAvGR8VoHjkB2CN7V3ShNHeZVAVYrP3yNGyJux3q+vtIPSxlVPE03CZ80G+RilvaJd9f0lTJTwq1Fftn6lqBWc7pbXTrnjLCnvymwI5gerh4jLDL/5YrAfLOD2g8QB/jdgs0PYJJG1EkByAGGXEm2R3UT0AW2U0skUguwrrZbjJ0aL3FDkAT8d1nOR3ubUyPtpfDpc0SSWEhZNhBjrt3ap8eZ8LdVbZjolzcRiFtW2SgSoZu+qQjMF4ZMs5sYIerKgDxY3y7HeFqApPJWQUQNKB1NBEjGK4B3PURRFGq7sMJ+h3pgCst9Egl9psSqU7u3okPsxPxiLDteAofydHO8Rs6shguRkZnJ8YrrLHEosL8ZEPD1fKLxCWOZjQf45WKcCLJkRiQepcyrwadEnC4ixBuVN5l32aK8/MGqnK19JskyUbzyr+zhwTqoRwZ4ED1Abw+LP7k2XV9hKZOTZUzppblbLr4v2+xqMv4Ll9y7kN5cPS5OQOlDSIDxZgHOQ/Cw9rgDikxARIETJVWt/uEhaOlGEBarH2IzPv33mzNIGLT39bCAUOVIp+K3iuTZz3XgqQbCU8l//8NFX6b+4ul1d+Kna1mFnOLO52ZnEvqmrzyWosVLRKwnv7K/rS8/sBvbTTXf25L+DDpU2qt52uapF/H6mSvGqHEq8/WClbfqmW6CBvxaePj1X1GjWogA5kmuX/G2SdisxK2Quuc7soNbL3St8UprKkRUVju6zdV9Grn87BNZxHTYvN1dcd93Wo8u7C+r74iq5ou5rxAGC2Iqv+pPnlGYozNBG8jGLB3ktuU4g0dSTPOpwipAV7pheuRQXLj+fq5I6PLmvHh3cnKu7pFZg8pQCuhAixZ78wJ17dk/fWwoRnsQ1xHvrw9XLQLmX1EX1L2oNynukOcBo2x6+hF6P7ADjL3dvSoqu5C+2bv7cBvbVTqls6JTUmUMrA30ZnxkeGOjxLmZPTjPgwX5VpH08P5dzK6jtURihAidGXzUyj1S4mP6Nrn6Wq3Yf9mvRpbrertsVgi7I4RYocZu6oJ7oXh/5fD538fWQwsBSrF+bGy/3wyplrTzia3NNTJeX1I9JodgDevDRZKfCrO0p0RiIV4mJRJoZq/wW4vzQrV+YlhsGCJsmaveXOtmRVE2eQDk/NHCnLP82TH0CJw09MVvTZll8neZY28DkUvdsg0989Lg/DGNEUzf/nKe2RXIUqdx8AqBYRg4HNgr+ljSSP2GszR5tUe8q1tPbq2/peSN5RmWnyY00+8vaeclk8MUq1LDqy/cUN8jJcF8dcgCBn+fvVHaVog92Kr/TyNBd0eaF+Xuo8FyItLkg+uCtReeu560/KqYsuX71Je1kYqKQnu/1KABe0AaY8B33OarOrTKRDueMAgC5Me+FKRy9ma6VX1mJafLACwcWgS/sHMk/Tz5EJr/w5sq1WHiu4MCUSBsIu98A1sfSp6KTPnROiFCC+eLBtcbFZuhuOm/GfCJn+Tra+lBkbB/viscQdYFo4WkYPzO3FeQmqb/4Ok+OxHNg9ze3QZZnBq7sxYUZ+dasyC4dK4dQSTMp+ss18cOii8ufh8NIr0FYYqejnrAY6LPJbvcUEekvOM+lK5f8IoPQAVPPFt0TDYHQol/cV/HkfsOJOfDXAMwa6gFxi1thW6GQcbzEm1RP1osTIMbcoG6nt0zqyb9Jg8FiO8/9rUNZau9GqgUXy1P8KXGAZyTAvL227IOsOXHQdI30odBz0CN/DwvYJHmgY8LMV2xJEaxV+//UaaUfPgb+rB/tq+Up/rmQIRi6/Lbj9MKkzHgSfyZY2RMHmYxxEdruvCvCND/E3AN8APCTj/wIMAOLkxcdjcHcSAAAAAElFTkSuQmCC" class="icon-visa ml10" v-if="card.visa"></image>
                    </div>
                    <div class="flex-row align-center mt10">
                        <text v-if="choosenCardIndex === index" class="font-12 m-color-9">可用余额：{{card.balance}}元</text>
                        <text v-if="choosenCardIndex !== index" class="font-12 m-color-9">单笔限额{{card.tradeLimit}}万，单日限额{{card.dayLimit}}万</text>
                        <div class="card-tag ml20" v-if="card.special"> 
                            <text class="font-10 m-color-red">{{card.special}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAeCAYAAABe3VzdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NTA1MjEyODA3RjIxMUU4OTFDQUUyRjFFRTdENjYyQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NTA1MjEyOTA3RjIxMUU4OTFDQUUyRjFFRTdENjYyQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc1MDUyMTI2MDdGMjExRTg5MUNBRTJGMUVFN0Q2NjJBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc1MDUyMTI3MDdGMjExRTg5MUNBRTJGMUVFN0Q2NjJBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ZjeC7AAAAR9JREFUeNrs2D8KwjAUBvC2dnRSr+EkeAGP4KKri+glxAt4AnHoouDs4BUEV3d3cXYQ4xcopcX+Sep75g0GPhIKCT/SNGnrK6U8ySXwhJdQGqi/vDVQrZDzadGJQoG4IzJAHkgUCMW9kJ6YNZiD6+L2XkQAy3DOgVU4p0ATnDOgKc4J0Ab3c6At7qfAOrgMEAOIw+ni67cZDNBE+4rskRk6Kwm49Ay2kRYyRdYY1JeASwP17I3j9oQCSYFLgOioqx0VkgqXeUiokJS4j23mWyQ1LncfrIvkwBVu1LZILlzpSWKK5MRVHnVVSG5ccpIYLH5djZBtfGmDzJEDJ84YWIB8xp+tbDgrYAGSFWf9upVak0Pkzo2znsH/v5mc8hZgAB9i3SnV2NiOAAAAAElFTkSuQmCC" class="icon-check" v-if="choosenCardIndex === index"></image>
        </div>
    </div>
  </div>
</template>

<script>
import Banks from './banks';
export default {
  props: {
    list:{
      type: Array,
      default: []
    }
  },
  data () {
    return {
      bankList:[],
      choosenCardIndex: 0
    }
  },
  methods:{ 
    cardClicked(item, index){
      this.choosenCardIndex = index;
      this.$emit('bankSelected', {item, index})
    }
  },
  created(){
    this.list.forEach((item, index) => {
      if(Banks[item.bank]){
        item.icon = Banks[item.bank]['icon'];
        item.name = Banks[item.bank]['name'];
      }else{
        item.icon = '';
        item.name = ''
      }
      this.bankList.push(item);
    })
  }
};
</script>
<style scoped>
.flex-row{
  flex-direction: row;
}
.align-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.ml10{
  margin-left: 10px;
}
.font-14{
  font-size: 28px;
}
.font-12{
  font-size: 24px;
}
.font-10{
  font-size: 20px;
}
.m-color-1{
  color: #333;
}
.m-color-9{
  color: #808080;
}
.m-color-red {
  color: #f0384f;
}
.icon-card{
    width: 60px;
    height: 60px;
}
.icon-visa{
    width: 68px;
    height: 34px;
}
.cardRow{
    height: 130px;
    flex-direction: column;
    justify-content: center;
    margin-left: 30px;
    margin-right: 30px;
}
.bottom-line{
    border-bottom-width: 1px;
    border-bottom-color: #e8e8e8;
}
.card-tag{
    border-width: 1px;
    border-color: #f0384f;
    padding-left: 4px;
    padding-right: 4px;
}
.icon-check{
    width: 40px;
    height: 28px;
}
</style>
