<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">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：早8店晚21点</span>
          </p>
          <p>
            <span>店长：梁浩</span>
          </p>
          <p>
            <span>联系电话：13333333333</span>
          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
          <span>
             <img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>
          </span>
        </p>
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar">八公里内道路援助</span>
          <span>
            <img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>
          </span>
        </p>
      </li>

      <li>
        <div class="serviceDetailTop">
          <p>
            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
          </p>
          <p>
            <span style="color: #ff4949">营业时间：早8店晚21点</span>
          </p>
          <p>
            <span>店长：梁浩</span>
          </p>
          <p>
            <span>联系电话：13333333333</span>
          </p>
        </div>
        <p style="display: flex;justify-content: space-between;">
          <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
          <span>
             <img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>
          </span>
        </p>
        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
          <span class="serviceStar">八公里内道路援助</span>
          <span>
            <img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>
          </span>
        </p>
      </li>

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

<script>
export default {
  name: "serviceDetail",
  data () {
    return {
      value:'',
      title1: '全部服务',
      value1: ['全部'],
      list1: [['全部', '汽车', '美容']],
      title2: '附近',
      value2: ['3KM'],
      list2: [['3KM', '10KM', '20KM']],
    }
  },
  methods: {
    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: 140px;
      margin-bottom: 10px;
      border-bottom: 1px solid #eee;
      /*display: flex;*/
    }
  }

  .serviceDetailTop {
    padding-left: 130px;
    background-image: url("../../assets/images/service/service.jpg");
    background-repeat: no-repeat;
    background-size: 120px 100px;
    margin-bottom: 5px;
  }

  .serviceStar{
    padding-left: 20px;
    background: url("../../assets/images/service/serviceSrar.png") no-repeat 0 center;
    color: #ff4949;
  }
</style>
