/**
* @Author Sean
* @Date 2019/4/24
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <div class="info-header">
            <div class="info-item">
              <div class="info-img">
                <img src="../../../../assets/qixinbao/11.png"/>
              </div>
              <div class="info-body">
                <div class="info-title">小米科技有限责任公司</div>
                <div class="info-contents">
                  <div class="info-content">浏览10万+</div>
                  <div class="info-content">有限责任公司（自然人投资或控股）</div>
                </div>
                <div class="info-contents">
                  <div class="info-content">雷军</div>
                  <div class="info-content">185000万人民币</div>
                  <div class="info-content">成立5-10年</div>
                </div>
                <div class="info-contents">
                  <div class="info-content">
                    <div class="info-content1" style="color: #333;">曾用名</div>
                  </div>
                  <div class="info-content">
                    <div class="info-content1" style="color: rgb(44,129,255);">存续（在营丶开业丶在册）</div>
                  </div>
                  <div class="info-content">
                    <div class="info-content1" style="color: orangered;">E轮</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <list-item>
            <item :proportion="[4,2]" @click.native="showClose">
              <div slot="left-icon" class="left-icon"><i class="ion-ios-telephone"></i></div>
              <div slot="name">60606666-10000</div>
              <div slot="content">
                <img v-show="tab_hides" slot="right-icon" src="../../../../assets/image/show@2x.png" class="right-icon">
                <img v-show="!tab_hides" slot="right-icon" src="../../../../assets/image/close@2x.png" class="right-icon">
              </div>
            </item>
          </list-item>
          <list-item v-show="!tab_hides">
            <item :proportion="[4,0]">
              <div slot="left-icon" class="left-icon"><i class="icon ion-email"></i></div>
              <div slot="name">chenchongwei@xiaomi.com</div>
            </item>
            <item :proportion="[4,0]">
              <div slot="left-icon" class="left-icon"><i class="icon ion-location"></i></div>
              <div slot="name">北京市海淀区清河中街68号</div>
            </item>
            <item :showArrow="true" @click.native="showCompanyDetail">
              <div slot="content">查看更多信息</div>
            </item>
          </list-item>
          <div class="info-wrap">
            <div class="info-wrap-content">常用信息</div>
          </div>
          <!--//宫格布局-->
          <div class="table-wrap">
            <div class="table-wrap-view" v-for="(list,index) in commonlyList" :key="index" @click="goNext(list.routerUrl)">
              <img :src="list.imgUrl">
              <div class="table-wrap-title">{{ list.infoTitle }}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="info-wrap-content">风险信息</div>
          </div>
          <!--//宫格布局-->
          <div class="table-wrap">
            <div class="table-wrap-view" v-for="(list,index) in riskList" :key="index" @click="goNext(list.routerUrl)">
              <img :src="list.imgUrl">
              <div class="table-wrap-title">{{ list.infoTitle }}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="info-wrap-content">知识产权</div>
          </div>
          <!--//宫格布局-->
          <div class="table-wrap">
            <div class="table-wrap-view" v-for="(list,index) in knowledgeList" :key="index" @click="goNext(list.routerUrl)">
              <img :src="list.imgUrl">
              <div class="table-wrap-title">{{ list.infoTitle }}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="info-wrap-content">经营信息</div>
          </div>
          <!--//宫格布局-->
          <div class="table-wrap">
            <div class="table-wrap-view" v-for="(list,index) in businessList" :key="index" @click="goNext(list.routerUrl)">
              <img :src="list.imgUrl">
              <div class="table-wrap-title">{{ list.infoTitle }}</div>
            </div>
          </div>
        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {
              tab_hides: true,
              commonlyList: [
                {
                  imgUrl: require('../../../../assets/qixinbao/1.png'),
                  infoTitle:'工商信息',
                  routerUrl:'industrialCommDetail'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/2.png'),
                  infoTitle:'变更记录',
                  routerUrl:'changeRecord'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/3.png'),
                  infoTitle:'投资关系',
                  routerUrl:'investRelatDetail'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/4.png'),
                  infoTitle:'企业年报',
                  routerUrl:'annualReports'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/5.png'),
                  infoTitle:'企业链图',
                  routerUrl:''
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/6.png'),
                  infoTitle:'关联族谱',
                  routerUrl:''
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/7.png'),
                  infoTitle:'股权结构',
                  routerUrl:''
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/8.png'),
                  infoTitle:'找关系',
                  routerUrl:''
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/9.png'),
                  infoTitle:'附近企业',
                  routerUrl:''
                },
              ],
              riskList: [
                {
                  imgUrl: require('../../../../assets/qixinbao/10.png'),
                  infoTitle:'法院判决',
                  routerUrl:'courtDecisionDetail'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/11.png'),
                  infoTitle:'被执行人',
                  routerUrl:'executedPersonDetail'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/23.png'),
                  infoTitle:'开庭公告',
                  routerUrl:'openNoticeDetail'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/13.png'),
                  infoTitle:'法院公告',
                  routerUrl:'courtNoticeDetail'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/14.png'),
                  infoTitle:'失信信息',
                  routerUrl:'loseInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/15.png'),
                  infoTitle:'动产抵押',
                  routerUrl:'chattelMortgage'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/16.png'),
                  infoTitle:'欠税信息',
                  routerUrl:'taxesInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/17.png'),
                  infoTitle:'司法拍卖',
                  routerUrl:'judicialSale'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/26.png'),
                  infoTitle:'股权出质',
                  routerUrl:'equityPledged'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/19.png'),
                  infoTitle:'经营异常',
                  routerUrl:'managementAbnormal'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/20.png'),
                  infoTitle:'行政处罚',
                  routerUrl:'administrativePunish'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/21.png'),
                  infoTitle:'抽查检查',
                  routerUrl:'checkInspect'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/26.png'),
                  infoTitle:'股权冻结',
                  routerUrl:'equityFreeze'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/26.png'),
                  infoTitle:'司法协助',
                  routerUrl:''
                },
              ],
              knowledgeList: [
                {
                  imgUrl: require('../../../../assets/qixinbao/24.png'),
                  infoTitle:'商标信息',
                  routerUrl:'trademarkInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/25.png'),
                  infoTitle:'专利信息',
                  routerUrl:'patentInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/37.png'),
                  infoTitle:'著作权',
                  routerUrl:'copyright'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/27.png'),
                  infoTitle:'资质认证',
                  routerUrl:'certificationInformation'
                },
              ],
              businessList: [
                {
                  imgUrl: require('../../../../assets/qixinbao/28.png'),
                  infoTitle:'融资信息',
                  routerUrl:'financeInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/29.png'),
                  infoTitle:'新闻舆情',
                  routerUrl:'newsSentiment'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/43.png'),
                  infoTitle:'招投标',
                  routerUrl:'bid'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/44.png'),
                  infoTitle:'招聘信息',
                  routerUrl:'recruitInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/32.png'),
                  infoTitle:'域名信息',
                  routerUrl:'internetInformation'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/45.png'),
                  infoTitle:'行政许可',
                  routerUrl:'administrativeLicense'
                },
                {
                  imgUrl: require('../../../../assets/qixinbao/34.png'),
                  infoTitle:'成长历程',
                  routerUrl:'growthProcess'
                },
              ],
            }
        },
        created: function () {
        },
        mounted: function () {
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          showClose(){
            this.tab_hides = !this.tab_hides
          },
          goNext(routerUrl){
            this.$router.push({
              name:routerUrl
            })
          },
          showCompanyDetail(){
            this.$router.push({
              name:'CompanyDetail'
            })
          }
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
        .content {
          .info-header{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            border-bottom: 1px solid @divider-color;
            .info-item {
              width: 100%;
              line-height: 13px;
              padding: 0 5px;
              margin-top: 5px;
              display: -webkit-flex;
              display: flex;
              //text-align: -webkit-center;
              -webkit-align-items: center;
              align-items: center;
              font-size: 14px;
              border-top: 1px solid @divider-color;
              border-right: 1px solid @divider-color;
              .info-img{
                height: 100%;
                display: flex;
                display: -webkit-flex;
                justify-content: center;
                -webkit-justify-content: center;
                align-items: flex-start;
                -webkit-align-items: flex-start;
                //width: 100%;
                //flex:0 10%;
                //-webkit-align-items: center;
                //align-items: center;
                //padding-left: 10px;
                img {
                  //width: 100%;
                  width:50px !important;
                  height: 50px;;
                  padding: 5px;
                }
              }
              .info-body{
                //width: 100%;
                flex:0 90%;
                .info-title {
                  padding: 5px;
                  font-size: 16px;
                  word-break: break-all;
                  word-wrap: break-word;
                  white-space: normal;
                  line-height: 14px;
                  color: #5D98F6;
                  margin-left: 5px;
                  //text-align:center;
                }
                .info-count {
                  color: rgba(0, 0, 0, 0.2);
                }
                .info-contents {
                  display: -webkit-flex;
                  display: flex;
                  -webkit-align-items: center;
                  align-items: center;
                  flex: 1;
                }
                .info-content {
                  padding: 5px;
                  color: rgba(0, 0, 0, 0.4);
                  word-break: break-all;
                  word-wrap: break-word;
                  white-space: normal;
                  font-size: 14px;
                  line-height: 15px;
                  margin-left: 5px;
                  margin-top: 3%;
                  overflow: hidden;
                  .info-content1{
                    width: 100%;
                    font-size:12px;
                    border: 1px solid;
                    text-align: center;
                    padding: 2px;
                  }
                }
              }
              .flex-between {
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                -webkit-justify-content: space-between;
                justify-content: space-between;
              }
            }

          }

          .info-wrap{
            width: 100%;
            height: 30px;
            display: flex;
            display:-webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            .info-wrap-content{
              width: 90%;
              height: 100%;
              color: @headerColor;
              font-weight: bold;
              display: flex;
              display:-webkit-flex;
              justify-content: flex-start;
              -webkit-justify-content: flex-start;
              align-items: center;
              -webkit-align-items: center;
            }
          }

          .table-wrap{
            width: 100%;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            .table-wrap-view{
              width: calc(~"100%/3");
              padding: 11px 15px;
              display: flex;
              display: -webkit-flex;
              flex-direction: column;
              -webkit-flex-direction: column;
              align-items: center;
              -webkit-align-items: center;
              img{
                width: 30px;
              }
              .table-wrap-title{
                margin-top: 15px;
                text-overflow: ellipsis;
                color: #333;
                font-size: 14px;
              }
            }
          }
        }
    }
</style>
