<template>
  <view class="row-list">
    <view v-if="type === 'input'" class="row-input">
      <label class="row-label"> {{ label }}:</label>
      <input :disabled="disabled" class="row-input-item" v-model="localValue" :placeholder="'请填写'+label"  />
    </view>

    <view v-else-if="type === 'picker'" class="row-input">
      <label class="row-label"> {{ label }}</label>
      <view class="row-input-item">
        <jPicker :disabled="disabled" @bindpicker="bindPicker" sureColor="#ff0000" showKey="label" valKey="value" :val="localValue" :options="pickerOptions" />
      </view>
    </view>

    <view v-else>
      <label class="row-label"> {{ label }}</label>
      <label class="row-value"> {{ value }}</label>
    </view>
  </view>
</template>

<script>
import jPicker from "@/components/J-Picker/jPicker.vue";

export default {
  name: 'ljListRow',
  components: {jPicker},
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [Number, String],
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    pickerOptions: {
      type: Array,
      default () {
        return []
      }
    },
  },
  data() {
    return {
      localValue:this.value
    };
  },
  methods:{
    bindPicker(e) {
      this.localValue = e.pickerVal
    }
  },
  watch: {
    localValue(newVal) {
      this.$emit('update:value', newVal);
    },
    value(newVal) {
      this.localValue = newVal;
    }
  }
};
</script>

<style scoped lang="scss">
.row-list {
  font-size: 28rpx !important;
  display: flex;
  flex-direction: row;
  margin-bottom: 7rpx;

  .row-label {
    margin-right: 10rpx;
  }

  .row-input{
    display: flex ;
    width: 100%;
    align-items: center;

    .row-label {
      flex-shrink: 0;
    }

    .row-input-item{
      font-size: 28rpx;
      border: black 1rpx solid;
      border-radius: 8rpx;
      flex-grow: 0;
      flex-shrink: 1;
      width: 100%;
      box-sizing: border-box;
    }
  }



}
</style>
