<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>车型详情</div>
      <div>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
    </div>
    <div class="listadd">
      <el-form ref="dataForm" :model="temp" label-position="right" class="formadd">
        <div class="title">车型详情</div>
        <el-row>
          <el-col :span="4">
            <span>品牌</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.brandName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>车型编码</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.vehicleTypeCode }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <span>功能</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.vehicleTypeValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>系列</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.productLineValue }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <span>驱动</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.driveFormValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>马力</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.powerValue }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <span>版本</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.vehicleVersionValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>燃料</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.fuelTypeValue }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <span>变速箱</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.gearboxTypeValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>排放标准</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.emissionStandardValue }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <span>发动机型号</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.engineTypeValue }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>细分市场</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.marketSegments }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <span>规格型号</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.specifications }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <span>系别</span>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <span>{{ temp.departmentValue }}</span>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row>-->
<!--          <el-col :span="4">-->
<!--            <span>内部编码</span>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <el-form-item >-->
<!--              <span>{{ temp.insideCode }}</span>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="4">-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--          </el-col>-->
<!--        </el-row>-->
        <div class="addtable">
          <div class="tabletitle">
            <div class="titlename">
              常用配置列表
            </div>
          </div>
          <template class="tablelist">
            <el-table :data="temp.baseModelConfigVo" :index="index" border style="width: 100%">
              <el-table-column align="center" label="序号" type="index" width="50"/>
              <el-table-column prop="mNum" width="150" label="指导价（万元）" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.guidedPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="mName" width="150" label="颜色" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.carColor }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="model" width="150" label="缓速器" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.slowMachine }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="year" width="95" label="后视镜" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.rearViewMirror }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="logisticsCustomer" width="95" label="轮胎" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.tireSize }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="company" width="150" label="驾驶室" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.specification }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="netReceiptsNum" width="150" label="后桥速比" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.rearAxleRatio }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="receivingWarehouse" width="150" label="空调" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.airConditioner }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="position" width="150" label="轮毂材质" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.hubMaterial }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="batchNum" width="150" label="导流罩" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.baffleModel }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="cargoOwner" width="120" label="悬架" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.suspension }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="座椅" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.seat }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="护轮罩" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.tireCover }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="鞍座" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.saddle }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="轴距" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.wheelbase }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="保险杠" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.bumper }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="配置包" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.configuringBao }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="独立热源" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.independentSources }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="燃料箱" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.fuelTank }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="多媒体" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.multimedia }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" width="150" label="货箱" align="center">
                <template slot-scope="props">
                  <span>{{ props.row.packingCase }}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { details } from '@/api/cheliang/basevehiclemodel'

export default {
  name: 'changyongpeizhiInfo',
  data() {
    return {
      // --按钮菜单-------
      index: 0,
      FormLoading: false,
      listLoading: false,
      temp: {} // 添加和修改
    }
  },
  methods: {
    // ----------------------------------方法--------------------
    // 返回
    handleReturn() {
      this.temp = {}
      this.$emit('doback')
    },
    // 查看
    showInfo(sid, row) {
      this.FormLoading = true
      details(sid).then((response) => {
        this.FormLoading = false
        if (response.code === '200') {
          this.temp = response.data
        } else {
          this.$notify({
            title: '失败',
            message: '查询失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-col-4 {
  text-align: right;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px !important;
  font-weight: 600;
}

.addinputw {
  width: 100% !important;
}
</style>
