<template>
  <list-item :item-height="44">
    <div>
      <div slot="name" class="section-title" style="">车辆行驶证</div>
      <Collapse v-model="activeNames_c">
        <CollapseItem v-for="(item,index) of car" :key="'c'+index" :name="'c'+index" :title="'车辆行驶证'+(index+1)">
          <item v-for="(ele, i) of driving_permit" :key="ele.title">
            <div slot="name" class="font-color">{{ ele.title }}</div>
            <span v-if="ele.type === 'date'" slot="content">{{ item[ele.prop] | dateFormat }}</span>
            <span v-else-if="ele.type === 'currency'" slot="content">{{ item[ele.prop] | currency }}</span>
            <span v-else-if="ele.type === 'bool'" slot="content">{{ item[ele.prop] === 'Y' ? '是' : '否' }}</span>
            <span v-else slot="content">{{ item[ele.prop] }}</span>
          </item>
        </CollapseItem>
      </Collapse>

    </div>

    <div>
      <div slot="name" class="section-title" style="">房产证</div>
      <Collapse v-model="activeNames_h">
        <CollapseItem v-for="(item,index) of house" :key="'h'+index" :name="'h'+index" :title="'房产证'+(index+1)">
          <item v-for="(ele, i) of house_card" :key="ele.title">
            <div slot="name" class="font-color">{{ ele.title }}</div>
            <span v-if="ele.type === 'date'" slot="content">{{ item[ele.prop] | dateFormat }}</span>
            <span v-else-if="ele.type === 'currency'" slot="content">{{ item[ele.prop] | currency }}</span>
            <span v-else-if="ele.type === 'bool'" slot="content">{{ item[ele.prop] === 'Y' ? '是' : '否' }}</span>
            <span v-else slot="content">{{ item[ele.prop] }}</span>
          </item>
        </CollapseItem>
      </Collapse>
    </div>

    <div>
      <div slot="name" class="section-title" style="">不动产权证</div>
      <Collapse v-model="activeNames_p">
        <CollapseItem v-for="(item,index) of real" :key="'p'+index" :name="'p'+index" :title="'不动产权证'+(index+1)">
          <item v-for="(ele, i) of real_est" :key="ele.title">
            <div slot="name" class="font-color">{{ ele.title }}</div>
            <span v-if="ele.type === 'date'" slot="content">{{ real[ele.prop] | dateFormat }}</span>
            <span v-else-if="ele.type === 'currency'" slot="content">{{ item[ele.prop] | currency }}</span>
            <span v-else-if="ele.type === 'bool'" slot="content">{{ item[ele.prop] === 'Y' ? '是' : '否' }}</span>
            <span v-else slot="content">{{ item[ele.prop] }}</span>
          </item>
        </CollapseItem>
      </Collapse>

    </div>
  </list-item>
</template>

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

export default {
  components: {
    Collapse, CollapseItem},
  props: ['car', 'house', 'real'],
  data () {
    return {
      activeNames_h: [0], // 折叠面板 房产证
      activeNames_p: [0], // 折叠面板 不动产权
      activeNames_c: [0], // 折叠面板 车辆行驶证
    }
  },
  computed: {
    driving_permit () {
      return this.createForm()
    },
    house_card () {
      return this.createFormHouse()
    },
    real_est () {
      return this.createFormReal()
    },
  },
  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 driving_permit = [
        // 车辆行驶证
        ['车辆识别代号', 'vehicle_identify_num', 'text'],
        ['住址', 'address', 'text'],
        ['品牌型号', 'brand_model_number', 'text'],
        ['发证日期', 'start_date', 'date'],
        ['车辆类型', 'vehicle_type', 'text'],
        ['所有人', 'owner', 'text'],
        ['发动机号码', 'engine_number', 'text'],
        ['号牌号码', 'plate_number', 'text'],
        ['注册日期', 'regist_date', 'date'],
        ['数量', 'words_result_num', 'text'],
        // ['驾照类型', 'driving_license_type_n', 'text'],
      ]
      return this.factory(driving_permit)
    },
    createFormHouse () {
      let arr = [
        // 房产证
        ['房屋所有人', 'house_owner', 'text'],
        ['共有情况', 'public_situation', 'text'],
        ['房屋坐落', 'house_location', 'text'],
        ['登记时间', 'regist_date', 'date'],
        ['房屋性质', 'house_property', 'text'],
        ['规划用途', 'plan_purpose', 'text'],
        ['总层数', 'house_layers', 'text'],
        ['建筑面积', 'built_area', 'text'],
        ['套内建筑面积', 'built_in_area', 'text'],
        ['其他', 'others', 'text'],
        ['地号', 'land_number', 'text'],
        ['土地使用权取得方式', 'land_get_method', 'text'],
        ['土地使用年限', 'land_use_limit', 'text'],
      ]
      return this.factory(arr)
    },
    createFormReal () {
      let arr = [
        // 不动产权证
        ['权利人', 'right_person', 'text'],
        ['共有情况', 'public_situation', 'text'],
        ['坐落', 'house_location', 'text'],
        ['不动产单元号', 'real_unit_number', 'text'],
        ['权利类型', 'right_type', 'text'],
        ['权利性质', 'right_property', 'text'],
        ['用途', 'house_purpose', 'text'],
        ['面积', 'house_area', 'text'],
        ['使用期限', 'land_use_limit', 'text'],
        ['权利其他情况', 'right_others', 'text'],
      ]
      return this.factory(arr)
    },
  },
}
</script>

<style lang="less" scoped>
  .section-title{
    padding: 0 0 0 0.3rem;
    font-size: 0.3rem;
    color: #385880;
    line-height: 0.5rem;
    margin-top: 12px;
  }
</style>
