<template>
  <div>
    <div style="height: 44px;">
      <mt-search
        v-model="value"
        cancel-text="取消"
        placeholder="搜索">
      </mt-search>
    </div>

    <group title="" label-width="5em">
    <popup-picker :title="title1" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
      <popup-picker :title="title2" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
    </group>
    <ul class="serviceDetailWrap">
      <li>
        <div class="serviceDetailTop serviceDetailTop1">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">一川汽车服务运营中心</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：08:00-18:00</span>
          </p>
          <p>
            <span>联系人：余红艳</span>
          </p>
          <p>

            <span>联系电话：13971750760</span>

          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置: 黄石港区杭州路19号儿童公园加油站旁</span>
          <span @click="toLinkApp('115.086987','30.217836','一川汽车服务运营中心')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
        </p>

        <p>
          <span class="fontSize12">服务范围：洗车，美容，音响改装</span>
        </p>
        <!--<p>-->
          <!--<span></span>-->
        <!--</p>-->
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar fontSize12">专业贴膜</span>
          <span @click="callPhone('13971750760')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
        </p>
      </li>


      <li>
        <div class="serviceDetailTop serviceDetailTop2">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：08:00-21:00</span>
          </p>
          <p>
            <span>联系人：梁浩</span>
          </p>
          <p>

            <span>联系电话：13339906728</span>

          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置: 黄石西塞山区磁湖东路26号途虎养车</span>
          <span @click="toLinkApp('115.089421','30.211496','途虎养车磁湖东路店')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
        </p>

        <p>
          <span class="fontSize12">服务范围：轮胎更换，美容洗车，车品安装</span>
        </p>
        <!--<p>-->
        <!--<span></span>-->
        <!--</p>-->
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar fontSize12">维修、保养、美容</span>
          <span @click="callPhone('13339906728')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
        </p>
      </li>


      <li>
        <div class="serviceDetailTop serviceDetailTop3">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">壹路美汽车服务中心</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：08:00-19:00</span>
          </p>
          <p>
            <span>联系人：石先生</span>
          </p>
          <p>

            <span>联系电话：18162919877</span>

          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置: 黄石市下陆区明盛·湖景花园(广州路5号) </span>
          <span @click="toLinkApp('115.040454','30.189769','壹路美汽车服务中心')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
        </p>

        <p>
          <span class="fontSize12">服务范围：钣金维修  汽车美容 保险</span>
        </p>
        <!--<p>-->
        <!--<span></span>-->
        <!--</p>-->
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar fontSize12">8公里免费救援  维修保养打折   免费赠送玻璃水</span>
          <span @click="callPhone('18162919877')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
        </p>
      </li>

      <li>
      <div class="serviceDetailTop serviceDetailTop5">
        <p>
          <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">天猫养车顺佳四季花城店</span>
        </p>
        <p>
          <span style="color: #ff4949">营业时间：08:00-20:00</span>
        </p>
        <p>
          <span>联系人：彭庆安</span>
        </p>
        <p>

          <span>联系电话：18086300986</span>

        </p>
      </div>
      <p style="display: flex;justify-content: space-between;">
        <span class="fontSize12">位置:黄石港公园路顺佳四季花城 </span>
        <span @click="toLinkApp('115.062207','30.241861','天猫养车顺佳四季花城店')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
      </p>

      <p>
        <span class="fontSize12">服务范围：美容保养 维修改装 </span>
      </p>
      <!--<p>-->
      <!--<span></span>-->
      <!--</p>-->
      <p style="display: flex;justify-content: space-between;padding-top: 5px;">
        <span class="serviceStar fontSize12">客户服务第一位！</span>
        <span @click="callPhone('18086300986')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
      </p>
    </li>

      <li>
        <div class="serviceDetailTop serviceDetailTop4">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">三江共和城途虎养车</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：08:00-21:00</span>
          </p>
          <p>
            <span>联系人：高祥</span>
          </p>
          <p>

            <span>联系电话：18972750792</span>

          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置:黄石市三江共和城14号商铺绿城斜对面 </span>
          <span @click="toLinkApp('115.042084','30.245914','共和城途虎养车')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
        </p>

        <p>
          <span class="fontSize12">服务范围：轮胎保养，车品美容，保险、年审</span>
        </p>
        <!--<p>-->
        <!--<span></span>-->
        <!--</p>-->
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar fontSize12">认真负责、宗旨是客户第一、服务到位！</span>
          <span @click="callPhone('18972750792')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
        </p>
      </li>


      <li>
        <div class="serviceDetailTop serviceDetailTop6">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">奥众汽车服务有限公司</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：08:00-17:30</span>
          </p>
          <p>
            <span>联系人：张松</span>
          </p>
          <p>

            <span>联系电话：18171669994</span>

          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置:黄石市下陆区广州路99号 </span>
          <span @click="toLinkApp('115.024625','30.192622','奥众汽车服务有限公司')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
        </p>

        <p>
          <span class="fontSize12">服务范围：汽车保养、汽车零配饰、诊断维修</span>
        </p>
        <!--<p>-->
        <!--<span></span>-->
        <!--</p>-->
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar fontSize12">底盘胶套原厂品质市场价5折，保险价优</span>
          <span @click="callPhone('18171669994')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
        </p>
      </li>




      <li>
        <div class="serviceDetailTop serviceDetailTop7">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">米其林驰加安运店</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：08:00-18:00</span>
          </p>
          <p>
            <span>联系人：卫冬英</span>
          </p>
          <p>

            <span>联系电话：18971759220</span>

          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span class="fontSize12">位置:黄石港区湖滨西路1899号 </span>
          <span @click="toLinkApp('115.058572','30.246576','米其林驰加安运店')">
             <img src="../../assets/images/service/serviceNav.png" height="18" width="18"/>
          </span>
        </p>

        <p>
          <span class="fontSize12">服务范围：轮胎批发，维修保养，洗美装饰轮毂</span>
        </p>
        <!--<p>-->
        <!--<span></span>-->
        <!--</p>-->
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar fontSize12">轮胎批发，维修保养，洗美装饰轮毂</span>
          <span @click="callPhone('18971759220')">
            <img src="../../assets/images/service/serviceIphone.png" height="18" width="18"/>
          </span>
        </p>
      </li>







    </ul>
  </div>
</template>

<script>
export default {
  name: "serviceDetail",
  data () {
    return {
      value:'',
      title1: '全部服务',
      value1: ['全部'],
      list1: [['全部', '汽车', '美容']],
      title2: '附近',
      value2: ['3KM'],
      list2: [['3KM', '10KM', '20KM']],
    }
  },
  mounted() {
    window.toLinkApp = this.toLinkApp;
  },
  methods: {
    callPhone(telNum) {
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroid) {
        // alert("我是安卓");
        window.JSInterface.callAppPhone(telNum);
      }
      if (isIOS) {
        // alert("我是苹果");
        window.webkit.messageHandlers.callAppPhone.postMessage({ "phoneNumber": telNum})
      }
    },
    toLinkApp(lon,lat,name){
      var u = navigator.userAgent,
        app = navigator.appVersion;
      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isAndroid) {
        // alert("我是安卓");
        window.JSInterface.toApp(lon,lat,name);
      }
      if (isIOS) {
        // alert("我是苹果");
        window.webkit.messageHandlers.toApp.postMessage({ "lon": lon, "lat": lat, "name":name})
      }

    },
    onChange (val) {
      console.log('val change', val)
    },
    changeList10 () {
      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
    },
    changeList11 () {
      this.list1[0].push('我是push条目')
    },
    changeList20 () {

    },

    onShow () {
      console.log('on show')
    },
    onHide (type) {
      console.log('on hide', type)
    }
  },
}
</script>

<style scoped lang="scss">
  .serviceDetailWrap {
    padding: 10px 10px;
    > li {
      /*height: 160px;*/
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid #eee;
      /*display: flex;*/
    }
  }

  .serviceDetailTop {
    padding-left: 130px;

    margin-bottom: 5px;
  }
  .serviceDetailTop1{
    background-image: url("../../assets/images/service/serviceDetailTop1.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceDetailTop2{
    background-image: url("../../assets/images/service/serviceDetailTop2.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceDetailTop3{
    background-image: url("../../assets/images/service/serviceDetailTop3.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceDetailTop4{
    background-image: url("../../assets/images/service/serviceDetailTop4.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceDetailTop5{
    background-image: url("../../assets/images/service/serviceDetailTop5.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceDetailTop6{
    background-image: url("../../assets/images/service/serviceDetailTop6.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceDetailTop7{
    background-image: url("../../assets/images/service/serviceDetailTop7.jpeg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
  }
  .serviceStar{
    padding-left: 20px;
    background: url("../../assets/images/service/serviceStar.png") no-repeat 0 center;
    background-size: 16px 16px;
    color: #ff4949;
  }
  .fontSize12{
    font-size: 13px;
  }
</style>
