<template>
  <view class="choosebaoyangTop">
    <picker @change="bindPickerChange" :value="index" :range="carname">
      <text>{{carname[index]}}</text>
      <img src="../../static/img/arrowdown.png" alt class="arrow" />
    </picker>
    <view class="line"></view>
    <view class="right">
      <text>当前里程：</text>
      <input type="text" @change="input" class="licheng" placeholder="请输入" />
      <text>KM</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "choosebaoyangTop",
  props: {
    carlist: {
      type: Array
    }
  },
  data() {
    return {
      index: 0,
      carname:[]
    };
  },
  watch: {
    carlist() {
      for (let i = 0; i < this.carlist.length; i++) {
        this.$set(this.carname,i,this.carlist[i].car_name)

      }
    }
  },
  methods: {
    bindPickerChange(e) {
      console.log(e);
      this.index = e.target.value;
      this.$emit("cheming", this.carlist[e.target.value].car_id);
    },
    input(a) {
      this.$emit("input", a.detail.value);
    }
  }
};
</script>

<style lang="scss">
.choosebaoyangTop {
  height: 63upx;
  background-color: white;
  display: flex;
  justify-content: center;
  font-size: 21upx;
  color: #222222;
  line-height: 63upx;
  .line {
    width: 2upx;
    height: 42upx;
    background-color: #d9d9d9;
    margin: auto 0;
    margin-left: 61upx;
    margin-right: 76upx;
  }
  .arrow {
    width: 21upx;
    height: 12upx;
    margin-left: 40upx;
  }
  .right {
    display: flex;
    .licheng {
      width: 79upx;
      font-size: 22upx;
      margin-top: 6upx;
    }
  }
}
</style>