<template>
  <div class="container">
    <div class="left">
      <div class="top">
        基本信息：
        <div v-for="(item, index) in basic" :key="index" class="item-container">
          <label>
            <input type="checkbox" :value="item" v-model="selectedOptions" disabled>
            {{item.label}}
          </label>
          <div v-if="isSelected(index)">
            <label>Start:<input type="number" v-model="item.start" min="1"  disabled/></label>
            <label>End:<input type="number" v-model="item.end" min="1" disabled/></label>
          </div>
        </div>
      </div>
      <div class="middle">
        车辆详情:
        <div v-for="(item, index) in standard" :key="index">
          <label>
            <input type="checkbox" :value="item" v-model="selectedOptions">
            {{item.label}}
          </label>
          <div v-if="isSelected2(index)">
            <label>Start:<input type="number" v-model="item.start" min="1"/></label>
            <label>End:<input type="number" v-model="item.end" min="1"/></label>
          </div>
        </div>
      </div>
      <div class="boolean">
        故障状态<br>
        <div v-for="(item,index) in breakdown" :key="index">
          <label>
            <input type="checkbox" :value="item" v-model="selectedOptions">
            {{item.label}}
          </label>
          <div v-if="isSelected3(index)">
            <label>Start:<input type="number" v-model="item.start" min="1"/></label>
            <label>End:<input type="number" v-model="item.end" min="1"/></label>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <el-button @click="dian">点击</el-button>
      <br>
      <div v-for="(option, index) in selectedOptions" :key="index">
        {{option}}
      </div>
    </div>
  </div>
</template>

<script>
import { indexDataFormat, selectDataFormatById, deleteDataFormatById } from "@/api/goods/forewarn"
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
// 例如：import 《组件名称》 from '《组件路径》,
export default {
  // import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    // 这里存放数据"
    return {
      vin: this.$route.query.vin,
      // 基本信息
      basic: [
        {dataCode:"vin",label:"车辆标识",start:1,end:17},
        {dataCode:"time",label:"时间",start:18,end:27},
        {dataCode:"longitude",label:"经度",start:31,end:40},
        {dataCode:"latitude",label:"纬度",start:41,end:50},
        {dataCode:"speed",label:"车速",start:52,end:57},
        {dataCode:"totalMileage",label:"总里程",start:58,end:68},
        {dataCode:"gears",label:"档位",start:89,end:89}
      ],
      // 标准信息
      standard: [
        {dataCode:"totalVoltage",label:"总电压",start:69,end:75},
        {dataCode:"totalCurrent",label:"总电流",start:75,end:79},
        {dataCode:"insulationResistance",label:"绝缘电阻",start:80,end:87},
        {dataCode:"acceleratorPedal",label:"加速踏板行程值",start:90,end:91},
        {dataCode:"brakePedal",label:"制动踏板行程值",start:92,end:93},
        {dataCode:"fuelConsumptionRate",label:"燃料消耗率",start:94,end:98},
        {dataCode:"MotorControllerTemperature",label:"电机控制器温度",start:99,end:104},
        {dataCode:"motorSpeed",label:"电机转速",start:104,end:109},
        {dataCode:"motorTorque",label:"电机转矩",start:110,end:113},
        {dataCode:"motorTemperature",label:"电机温度",start:114,end:119},
        {dataCode:"motorVoltage",label:"电机电压",start:120,end:124},
        {dataCode:"motorCurrent",label:"电机电流",start:125,end:132},
        {dataCode:"remainingPower",label:"动力电池剩余电量SOC",start:133,end:138},
        {dataCode:"maximumFeedbackPower",label:"当前状态允许的最大反馈功率",start:139,end:144},
        {dataCode:"maximumDischargePower",label:"当前状态允许最大放电功率",start:145,end:150},
        {dataCode:"selfTestCounter",label:"BMS自检计数器",start:151,end:152},
        {dataCode:"batteryChargeOrDischargeCurrent",label:"动力电池充放电电流",start:153,end:157},
        {dataCode:"totalVoltageV3",label:"动力电池负载端总电压V3",start:158,end:163},
        {dataCode:"maximumVoltage",label:"单次最大电压",start:164,end:167},
        {dataCode:"minimumBatteryVoltage",label:"单体电池最低电压",start:168,end:171},
        {dataCode:"maximumBatteryTemperature",label:"单体电池最高温度",start:172,end:177},
        {dataCode:"minimumBatteryTemperature",label:"单体电池最低温度",start:178,end:183},
        {dataCode:"usableBatteryCapacity",label:"动力电池可用容量",start:184,end:189},
      ],
      // 故障状态
      breakdown: [
        {dataCode:"vehicleStatus",label:"车辆状态",start:190,end:190},
        {dataCode:"chargeStatus",label:"充电状态",start:191,end:191},
        {dataCode:"operationalStatus",label:"运行状态",start:192,end:192},
        {dataCode:"soc",label:"SOC",start:193,end:193},
        {dataCode:"energyStorageDeviceWorkingStatus",label:"可充电储能装置工作状态",start:194,end:194},
        {dataCode:"driveMotorStatus",label:"驱动电机状态",start:195,end:195},
        {dataCode:"positioningIsOrNotEffective",label:"定位是否有效",start:196,end:196},
        {dataCode:"eas",label:"EAS",start:197,end:197},
        {dataCode:"ptc",label:"PTC",start:198,end:198},
        {dataCode:"eps",label:"EPS",start:198,end:198},
        {dataCode:"abs",label:"ABS",start:200,end:200},
        {dataCode:"mcu",label:"mcu",start:201,end:201},
        {dataCode:"batteryHeatingStatus",label:"动力电池加热状态",start:202,end:202},
        {dataCode:"batteryCurrentStatus",label:"动力电池当前状态",start:203,end:203},
        {dataCode:"batteryInsulationStatus",label:"动力电池保温状态",start:204,end:204},
        {dataCode:"dcdc",label:"DCDC",start:205,end:205},
        {dataCode:"chg",label:"CHG",start:206,end:206}
      ],
      //接收
      selectedOptions: [
        {dataCode:"vin",label:"车辆标识",start:1,end:17},
        {dataCode:"time",label:"时间",start:18,end:27},
        {dataCode:"longitude",label:"经度",start:31,end:40},
        {dataCode:"latitude",label:"纬度",start:41,end:50},
        {dataCode:"speed",label:"车速",start:52,end:57},
        {dataCode:"totalMileage",label:"总里程",start:58,end:68},
        {dataCode:"gears",label:"档位",start:89,end:89}
      ],
    }
  },
  // 计算属性 类似于data概念",
  computed: {},
  // 监控data中的数据变化",
  watch: {},
  // 方法集合",
  methods: {
    //起始值和计数值显示
    isSelected(index) {
      return this.selectedOptions.some(item => item.dataCode === this.basic[index].dataCode);
    },
    isSelected2(index) {
      return this.selectedOptions.some(item => item.dataCode === this.standard[index].dataCode);
    },
    isSelected3(index) {
      return this.selectedOptions.some(item => item.dataCode === this.breakdown[index].dataCode);
    },
    //添加内容
    dian() {
      indexDataFormat(this.selectedOptions,this.vin)
      this.getInfo()
    },
    getInfo() {
      selectDataFormatById(this.vin).then(res => {
        if (res.data != null) {
          this.selectedOptions = res.data
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getInfo()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前",
  beforeMount() {
  }, // 生命周期 - 挂载之前",
  beforeUpdate() {
  }, // 生命周期 - 更新之前",
  updated() {
  }, // 生命周期 - 更新之后",
  beforeDestroy() {
  }, // 生命周期 - 销毁之前",
  destroyed() {
  }, // 生命周期 - 销毁完成",
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>
.container {
  display: flex;
}
.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.left > div {
  flex: 0 0 auto;
  border-bottom: 1px solid #eee;
}

.right .bottom {
  border-bottom: none;
}

.right {
  flex: 1;
}
</style>
