<!-- 商业伙伴 -->
<template>
  <Collapse v-if="roleInfo.length" v-model="activeNames">
    <CollapseItem v-for="(p, pi) of roleInfo" :title="p.bp_name" :key="p.bp_id" :name="pi">
      <list-item :item-height="44">
        <item v-for="(ele, i) of formdata" :key="ele.title">
          <div slot="name" class="font-color">{{ ele.title }}</div>
          <Checkbox v-if="ele.type === 'checkbox'" shape="square" :value="roleInfo[pi][ele.prop]==='Y'"/>
          <span v-else slot="content">{{ roleInfo[pi][ele.prop] }}</span>
        </item>
      </list-item>
    </CollapseItem>
  </Collapse>
</template>

<script>
import { Collapse, CollapseItem, Checkbox } from 'vant'
import 'vant/lib/collapse/style'
import 'vant/lib/collapse-item/style'
import 'vant/lib/checkbox/style'

export default {
  components: {
    Collapse, CollapseItem, Checkbox,
  },
  props: ['roleInfo'],
  data () {
    return {
      activeNames: [0],
      formdata: [],
    }
  },
  created() {
    this.createForm()
  },
  methods: {
    factory (arr) {
      // 接收二维数组,产生 formdata
      if (arr.length) {
        arr.forEach(ele => {
          let [title, prop, type] = ele
          this.formdata.push({
            title: title || '',
            prop: prop || '',
            type: type || 'text',
          })
        })
      }
    },
    createForm () {
      let formArr = [
        ['商业伙伴类型', 'bp_type_n', 'text'],
        ['主角色标志', 'primary_flag', 'checkbox'],
        ['启用', 'enabled_flag', 'checkbox'],
      ]
      this.factory(formArr)
    },
  },
}
</script>

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