<!-- 承租人 -->
<template>
  <list-item :item-height="44">
    <!-- <item v-for="(ele, i) of formdata" :key="ele.title">
      <div slot="name" class="font-color">{{ ele.title }}</div>
      <span slot="content" v-if="ele.type === 'currency'">{{ lesseeData[ele.prop] || currency }}</span>
      <span slot="content" v-else-if="ele.type === 'bool'">{{ lesseeData[ele.prop] === 'Y' ? '是' : '否' }}</span>
      <span slot="content" v-else="ele.type === 'text'">{{ lesseeData[ele.prop] }}</span>
    </item> -->

    <div>
        <!-- <div class="equipment-list-fund">
          <span />
          <p>设备清单</p>
        </div> -->
        <Collapse v-model="equipActive">
          <CollapseItem v-for="(item, index) of equipmentData" :key="index">
            <template #title>
              <div class="equipment">
                <!-- <div class="left">
                  <span>
                    {{index+1}}
                  </span>
                </div> -->
                <div class="center">
                  <span>租赁物信息</span>
                  <p>
                    产品型号
                    <span>{{ item.product_code }}-{{ (index + 1) | lengthCheck }}</span>
                  </p>
                  <p>
                    设备识别号
                    <span>{{ item.contract_number }}</span>
                  </p>
                </div>
              </div>
            </template>
            <list-item :item-height="44" class="second-part">
              <item>
                <div slot="name" class="font-color">车架号</div>
                <input slot="content" v-model="item.frame_number" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">发动机号</div>
                <input slot="content" v-model="item.engine" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">合格证编号</div>
                <input slot="content" v-model="item.certificate_number" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">产品型号</div>
                <input slot="content" v-model="item.product_code" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">发车日期</div>
                <input slot="content" v-model="item.departure_date" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">开票日期</div>
                <input slot="content" v-model="item.invoice_date" readonly>
              </item>
              <!-- <item>
                <div slot="name" class="font-color">设备识别号</div>
                <input slot="content" v-model="item.contract_number" readonly>
              </item> -->
              <item>
                <div slot="name" class="font-color">是否上牌</div>
                <input slot="content" v-model="item.register_flag_n" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">是否挂靠</div>
                <input slot="content" v-model="item.associate_flag_n" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">挂靠单位名称</div>
                <input slot="content" v-model="item.associate_company" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">是否提供挂靠协议</div>
                <input slot="content" v-model="item.associate_agreement_n" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">租赁物是否办理抵押</div>
                <input slot="content" v-model="item.lease_mortgage_n" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">gps是否安装</div>
                <input slot="content" v-model="item.gps_flag_n" readonly>
              </item>
              <item>
                <div slot="name" class="font-color">设备是否办理保险</div>
                <input slot="content" v-model="item.insurance_flag_n" readonly>
              </item>
            </list-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: ["equipmentData"],
  data() {
    return {
      equipActive: ['0']
    }
  },
  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 = [
        ['车架号', 'frame_number', 'text'],
        ['发动机号', 'engine', 'text'],
        ['合格证编码', 'certificate_number', 'text'],
        ['产品型号', 'product_code', 'text'],
        ['发车日期', 'departure_date', 'date'],
        ['开票日期', 'invoice_date', 'date'],
        ['设备识别号', 'contract_number', 'text'],
        ['是否上牌', 'register_flag_n', 'text'],
        ['是否挂靠', 'associate_flag_n', 'text'],
        ['挂靠单位名称', 'associate_company', 'text'],
        ['是否提供挂靠协议', 'associate_agreement_n', 'text'],
        ['租赁物是否办理抵押', 'lease_mortgage_n', 'text'],
        ['gps是否安装', 'gps_flag_n', 'text'],
        ['设备是否办理保险', 'insurance_flag_n', 'text'],
      ]
      let nowForm = formArr

      return this.factory(nowForm)
    }
  }
}
</script>

<style lang="less" scoped>
.equipment-list-fund {
    height: 40px;
    line-height: 40px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    color: #00469c;
    font-size: 15px;
    //margin-left: 16px;
    position: relative;

    //margin-top: -10px;
    span {
      width: 4px;
      height: 20px;
      background: #00469c;
    }

    p {
      padding-left: 10px;
    }
  }
.equipment {
    // width: 359px;
    // height: 72px;
    // background-color: #fff;
    margin: 0 auto;
    display: flex;
    .left {
      flex: 1;
      span {
        display: block;
        width: 30px;
        height: 30px;
        // background-color: #e8e9ed;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-top: 8px;
        img {
          width: 11px;
          height: 14px;
        }
      }
    }
    .center {
      flex: 6;
      span:first-child {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        letter-spacing: 0.43px;
        margin-left: 10px;
        margin-top: 12px;
      }
      .status {
        display: inline-block;
        width: 46px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 0;
        margin-left: 21px;
        margin-top: 12px;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0.4px;
        margin-left: 10px;
        margin-top: 10px;
        span {
          font-family: Helvetica;
          font-size: 13px;
          color: rgba(56, 63, 69, 0.6);
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      align-items: center;
      img {
        width: 13px;
        height: 13px;
      }
    }
  }
</style>