<template>
  <h-view id="home" class="public-style" title="车租易">
    <h-content :cal-content="false" class="content scroll-content">
      <div class="top-box">
        <swipe :interval="5000" :showIndicators="false" class="swipe">
          <swipe-item v-for="img in imgList" :key="img.pictureUrl">
            <img :src="img.pictureUrl">
          </swipe-item>
        </swipe>
        <div class="function">
          <function-item
            v-for="item in moduleSeparateList.slice(0,4)" :key="item.moduleId" :functionIcon="item.moduleIcon"
            :functionName="item.moduleName"
            :data="item"/>
        </div>
      </div>
      <div class="middle-box">
        <header>常用应用</header>
        <div class="function">
          <function-item
            v-for="(item,index) in functionList" :key="index" :functionIcon="item.functionIcon"
            :functionName="item.functionName"
            :data="item" class="function-item vue-1px" @clickFunction="goFunctionHome"/>
        </div>
      </div>
      <div class="important-message">
        <div class="important-message-title">重要消息</div>
        <div class="important-message-title-icon">
          <img src="../assets/image/home/messageIcon@2x.png">
        </div>
        <div id="scroll">
          <ul id="p1">
            <li v-for="item in messageList">{{ item.msg_body }}</li>
          </ul>
          <ul id="p2"/>
        </div>
      </div>
      <div class="bank" style="height: 60px;width: 100%"/>
    </h-content>
  </h-view>
</template>

<script>
import functionState from './functionState'

export default {
  data () {
    return {
      imgList: [],
      moduleSeparateList: [],
      functionList: [
        {
          functionIcon: require('@/assets/userBind/np.png'),
          functionName: '用户绑定',
          functionState: 'UserBind',
        },
      ], // 全部应用
      messageList: [
        {
          msg_body: '庆祝建国70周年',
        },
        {
          msg_body: '祖国万岁',
        },
      ],
      area: {},
      box1: {},
      box2: {},
      searchInput: '',
    }
  },
  beforeCreate: function () {
  },
  created: function () {
    this.imgList = [...functionState.bannerList]
    this.moduleSeparateList = [...functionState.moduleSeparateList]
  },
  updated: function () {
  },
  methods: {
    goModuleFunction (data) {
      this.$router.push({
        name: 'ModuleFunction',
        params: {
          moduleFunctionList: data,
        },
      })
    },
    goFunctionHome (data) {
      this.$router.push({
        name: data.functionState,
      })
    },
  },
}
</script>
<style lang="less" scoped type="text/less">
  @import "../styles/vue-1px";

  #home {
    .content{
      margin-bottom: 40px;
    }
    .top-box {
      height: 264px;
      width: 100%;
      overflow: hidden;
      position: relative;

      .header {
        width: 100%;
        height: 40px;
        position: absolute;
        top: 0;
        z-index: 100;

        input {
          width: calc(~"100% - 53px");
          height: 26px;
          margin: 10px 0 0 10px;
          background: white;
          // border: 1px solid white;
          border-radius: 15px;
          text-align: center;
          color: #B6B6B6;
          font-size: 12px;
        }

        img {
          width: 21px;
          height: 21px;
          position: absolute;
          top: 12px;
          right: 10px;
        }
      }

      .hls-swipe {
        height: 175px;
        width: 100%;
        overflow: hidden;
      }

      .function {
        height: 117px;
        width: 100%;
        position: absolute;
        bottom: 0;
        background: url("../assets/image/home/moduleBg@2x.png");
        Background-size: 100%;
        padding-top: 43px;
        display: flex;
        justify-content: space-between;

        &:before {
          content: ''
        }

        &:after {
          content: ''
        }

        .function-item {
          text-align: center;
        }

      }
    }

    .middle-box {
      margin-top: 8px;
      background: white;

      header {
        height: 33px;
        display: flex;
        align-items: center;
        line-height: 100%;
        color: #5D98F6;
        position: relative;

        &:before {
          content: '';
          width: 4px;
          height: 15px;
          margin-right: 9px;
          margin-left: 10px;
          background-image: linear-gradient(-180deg, #5D98F6 0%, #76BCEE 100%);
          border-radius: 2px;
        }

        &:after {
          .setBottomLine()
        }

        span {
          font-size: 12px;
          color: #878A8D;
          position: absolute;
          right: 15px;
        }
      }
      .function{
        display: flex;
        flex-wrap: wrap;

        .function-item {
          width: 25%;
          height: 89px;
          font-size: 12px;
          // border: 1px solid rgba(169,169,169,0.1); /*no*/
          /deep/ img {
            height: 30px;
            width: 30px;
            margin: 23px 28px 9px 33px;
          }

          &:before {
            .setBottomLine();
          }

          &:after {
            .setRightLine();
          }
        }
      }
    }

    .important-message {
      width: 100%;
      height: 42px;
      margin-top: 8px;
      background-color: #FFFFFF;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .important-message-title {
        -webkit-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
        color: #E84A55;
        font-size: 14px;
        //margin-left: 3.2%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .important-message-title-icon {
        height: 100%;
        margin-left: 1%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 13px;
          height: 12px;
        }
      }

      #scroll {
        height: 42px;
        overflow: hidden;
        margin-left: 5%;
      }

      #scroll li {
        height: 42px;
        color: #565656;
        font-size: 13px;
        line-height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*word-wrap: break-word;
        word-break: break-all;
        white-space: normal;*/
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }

  }
  .platform-ios{
    #home{
      .header{
        top:20px
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios{
      #home{
        .content{
          margin-bottom: 74px;
        }
        .header{
          top:40px
        }
      }
    }
  }
  @media (device-width: 414px) and (device-height: 896px){
    .platform-ios{
      #home{
        .content{
          margin-bottom: 74px;
        }
        .header{
          top:40px
        }
      }
    }
  }
</style>
