<template>
  <list-item :item-height="44">
    <div>
      <!-- <div slot="name" class="section-title" style="">银行信息</div> -->
      <item v-for="(ele, i) of formdata" :key="ele.title">
        <div slot="name" class="font-color">{{ ele.title }}</div>
        <span v-if="ele.type === 'date'" slot="content">{{ bankInfo[ele.prop] | dateFormat }}</span>
        <span v-else-if="ele.type === 'currency'" slot="content">{{ bankInfo[ele.prop] | currency }}</span>
        <span v-else-if="ele.type === 'bool'" slot="content">{{ bankInfo[ele.prop] === 'Y' ? '是' : '否' }}</span>
        <Checkbox v-else-if="ele.type === 'checkbox'" :value="bankInfo[ele.prop]==='Y'" shape="square"/>
        <span v-else slot="content">{{ bankInfo[ele.prop] }}</span>
      </item>
    </div>
  </list-item>
</template>

<script>
import { Checkbox } from 'vant'
import 'vant/lib/checkbox/style'

export default {
  props: ['bankInfo'],
  components: {
    Checkbox
  },
  data() {
    return {
      activeNames: [0],
      // formdata: [],
    }
  },
  computed: {
    formdata () {
      return this.createForm()
    },
  },
  methods: {
    factory (arr) {
      let outArr = []
      if (arr.length) {
        arr.forEach(ele => {
          let [title, prop, type] = ele
          outArr.push({
            title: title || '',
            prop: prop || 'fdf',
            type: type || 'text',
          })
        })
      }
      return outArr
    },
    createForm() {
      let formArr = [
        ['账号名称', 'bank_account_name', 'text'],
        ['银行账号', 'bank_account_num', 'text'],
        ['支行名称', 'bank_branch_name', 'text'],
        ['银行名称', 'bank_full_name', 'text'],
        ['启用', 'enabled_flag', 'checkbox'],
      ]
      return this.factory(formArr)
    }
  }
}
</script>

<style lang="less" scoped></style>