<!--  -->
<template>
<div class="price-dd-choose">
  <div id="price-range" class="price-range">
    <div class="price-range-slider">
      <div class="bg-darkgrey"></div>
      <div class="bg-darkgrey-hand"></div>
      <ul class="slider-ul">
        <li class="slider-ul-first"><i class="icon-dian"></i></li>
        <li v-for="(item, i) in 9" :key="i"><i class="icon-dian"></i></li>
      </ul>
    </div>
    <div class="slide-selected"></div>
    <i class="btn-price btn-left"></i>
    <i class="btn-price btn-right"></i>
    <div class="tip">
      <div class="tip-content"></div>
      <span class="tip-top tip-arrow"></span>
    </div>
    <div class="price-range-text">
      <span class="number number-first">2009</span>
      <span class="number">10</span>
      <span class="number">11</span>
      <span class="number">12</span>
      <span class="number">13</span>
      <span class="number">14</span>
      <span class="number">15</span>
      <span class="number">16</span>
      <span class="number">17</span>
      <span class="number">18</span>
    </div>
  </div>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import $ from 'jquery'
import './js/slider.js'
export default {
  props: ['year'],
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init () {
      $(() => {
        var left = 2000
        $('#price-range').slider({
          unit: '年',
          beyondMax: false,
          beyondMin: false,
          firstWidth: 58.3,
          lastWidth: 58.3,
          scale: [ {
            key: 2009,
            value: [1]
          }, {
            key: 2010,
            value: [1]
          }, {
            key: 2011,
            value: [1]
          }, {
            key: 2012,
            value: [1]
          }, {
            key: 2013,
            value: [1]
          }, {
            key: 2014,
            value: [1]
          }, {
            key: 2015,
            value: [1]
          }, {
            key: 2016,
            value: [1]
          }, {
            key: 2017,
            value: [1]
          }, {
            key: 2018,
            value: [1]
          }
          ]
        }).on('changed', (e, args) => {
          // setRange({
          //   leftValue: 0,
          //   rightValue: 1
          // })

          var min = args.value.leftValue
          var max = args.value.rightValue
          if (max !== min) {
            if (left !== args.value.leftX) {
              left = args.value.leftX
              $('#price-range').data('slider').setRange({
                leftValue: min,
                rightValue: min
              })
              this.$emit('selected_obj', min)
            } else {
              $('#price-range').data('slider').setRange({
                leftValue: max,
                rightValue: max
              })
              this.$emit('selected_obj', max)
            }
          }

          // if (min == 0) min = 1;
          // if (6680 > 110) {
          //     if (max == 6680) max = 1;
          // } else {
          //     if (max == 110) max = 1;
          // }
          // if (max == 10000) max = 1;
          // if (min + '_' + max == '2_6680') {
          //     min = 0;
          //     max = 0;
          // }
          // location.href = '/car/' + min + '_' + max + '-0.0_0.0-0-0-0-0-0-0-0-0/';
        })
        $('#price-range').data('slider').setRange({
          leftValue: this.year,
          rightValue: this.year
        })
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.init()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
/* 引入公共css类 */
@import url(./style);
</style>
