/**
* @Author Sean
* @Date 2019/4/28
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <list-item>
            <item class="lose-item" :proportion="[4,0]">
              <div slot="name">登记信息</div>
            </item>
            <item :proportion="[2,2]" :hasBorder="false" class="indusItem">
              <div slot="name">
                <div class="cont-name" style=" color: #5D98F6;">登记编号</div>
                <div class="cont-type fontColor">21023120160019</div>
              </div>
              <div slot="content">
                <div class="cont-name" style=" color: #5D98F6;">登记日期</div>
                <div class="cont-type fontColor">2016-05-17</div>
              </div>
            </item>
            <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
              <div slot="name">
                <div class="cont-name" style=" color: #5D98F6;">登记机关</div>
                <div class="cont-type fontColor">大连高新技术产业园区市场监督管理局</div>
              </div>
            </item>
            <item :proportion="[2,2]" :hasBorder="false" class="indusItem">
              <div slot="name">
                <div class="cont-name" style=" color: #5D98F6;">被担保债权种类</div>
                <div class="cont-type fontColor">-</div>
              </div>
              <div slot="content">
                <div class="cont-name" style=" color: #5D98F6;">被担保债权数额</div>
                <div class="cont-type fontColor">500</div>
              </div>
            </item>
            <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
              <div slot="name">
                <div class="cont-name" style=" color: #5D98F6;">债权人履行债务的期限</div>
                <div class="cont-type fontColor">-</div>
              </div>
            </item>
            <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
              <div slot="name">
                <div class="cont-name" style=" color: #5D98F6;">担保范围</div>
                <div class="cont-type fontColor">-</div>
              </div>
            </item>
            <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
              <div slot="name">
                <div class="cont-name" style=" color: #5D98F6;">备注</div>
                <div class="cont-type fontColor">-</div>
              </div>
            </item>
          </list-item>

          <list-item>
            <item :proportion="[4,2]" @click.native="showClose(0)">
              <div slot="name">抵押权人概况</div>
              <div slot="content">
                <img v-show="tab_hides[0].flag" slot="right-icon" src="../../../../../assets/image/show@2x.png" class="right-icon">
                <img v-show="!tab_hides[0].flag" slot="right-icon" src="../../../../../assets/image/close@2x.png" class="right-icon">
              </div>
            </item>
            <list-item v-show="!tab_hides[0].flag">
              <item :proportion="[2,4]">
                <div slot="name">抵押权人名称:</div>
                <div slot="content" class="fontColor">沈阳农村商业银行股份有限公司</div>
              </item>
              <item :proportion="[2,2]">
                <div slot="name">抵押权人证照/证件类型:</div>
                <div slot="content" class="fontColor">营业执照</div>
              </item>
              <item :proportion="[2,2]">
                <div slot="name">证照/证件号码:</div>
                <div slot="content" class="fontColor">210100100006558</div>
              </item>
            </list-item>
          </list-item>
          <list-item>
            <item :proportion="[4,2]" @click.native="showClose(1)">
              <div slot="name">被担保债权概况</div>
              <div slot="content">
                <img v-show="tab_hides[1].flag" slot="right-icon" src="../../../../../assets/image/show@2x.png" class="right-icon">
                <img v-show="!tab_hides[1].flag" slot="right-icon" src="../../../../../assets/image/close@2x.png" class="right-icon">
              </div>
            </item>
            <list-item v-show="!tab_hides[1].flag">
              <item :proportion="[2,2]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">种类</div>
                  <div class="cont-type fontColor">借贷合同</div>
                </div>
                <div slot="content">
                  <div class="cont-name" style=" color: #5D98F6;">数额</div>
                  <div class="cont-type fontColor">500万元</div>
                </div>
              </item>
              <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">债务人履行债务的期限</div>
                  <div class="cont-type fontColor">自2016年05月10日至2018年05月09日</div>
                </div>
              </item>
              <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">担保范围</div>
                  <div class="cont-type fontColor">详见DB2016TXLDAC10035抵押合同第一条</div>
                </div>
              </item>
              <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">备注</div>
                  <div class="cont-type fontColor">-</div>
                </div>
              </item>
            </list-item>
          </list-item>
          <list-item>
            <item :proportion="[4,2]" @click.native="showClose(2)">
              <div slot="name">抵押物状况</div>
              <div slot="content">
                <img v-show="tab_hides[2].flag" slot="right-icon" src="../../../../../assets/image/show@2x.png" class="right-icon">
                <img v-show="!tab_hides[2].flag" slot="right-icon" src="../../../../../assets/image/close@2x.png" class="right-icon">
              </div>
            </item>
            <list-item v-show="!tab_hides[2].flag">
              <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">所有权归属</div>
                  <div class="cont-type fontColor">-</div>
                </div>
              </item>
              <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">数量丶质量丶状况丶所在地等情况</div>
                  <div class="cont-type fontColor">-</div>
                </div>
              </item>
              <item :proportion="[4,0]" :hasBorder="false" class="indusItem">
                <div slot="name">
                  <div class="cont-name" style=" color: #5D98F6;">备注</div>
                  <div class="cont-type fontColor">-</div>
                </div>
              </item>
            </list-item>
          </list-item>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
              tab_hides : [
                {flag:true},
                {flag:true},
                {flag:true},
              ]
            }
        },
        created: function () {
        },
        mounted: function () {
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          showClose(index){
            this.tab_hides[index].flag = !this.tab_hides[index].flag
          },
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
        .content {
          .lose-item {
            background-color: #fafafa;
          }
          .fontColor{
            color: #9D9D9D;
          }
          .indusItem {
            margin-bottom: 20px;

          }
        }
    }
</style>
