<template>
  <div class="app-container">
    <div>
      <div class="tab-header webtop">
        <div>车型库配置列表</div>
        <div>
          <el-button type="primary" size="small" @click="handleConfirm()">确认</el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="webcon">
        <div class="searchcon">
          <el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
          <div v-show="isSearchShow" class="search">
            <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
                <el-form-item label="颜色:" class="searchlist">
                  <el-select v-model="listQuery.params.carColor" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in carColor_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="缓速器:" class="searchlist">
                  <el-select v-model="listQuery.params.slowMachine" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in slowMachine_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="后视镜:" class="searchlist">
                  <el-select v-model="listQuery.params.rearViewMirrorKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in rearViewMirror_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="轮胎:" class="searchlist">
                  <el-select v-model="listQuery.params.tireSizeKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in tireSize_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="驾驶室:" class="searchlist">
                  <el-select v-model="listQuery.params.specification" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in specification_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="后桥速比:" class="searchlist">
                  <el-select v-model="listQuery.params.rearAxleRatio" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in rearAxleRatio_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="空调:" class="searchlist">
                  <el-select v-model="listQuery.params.airConditionerKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in airConditioner_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="轮毂材质:" class="searchlist">
                  <el-select v-model="listQuery.params.hubMaterialKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in hubMaterial_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="导流罩:" class="searchlist">
                  <el-select v-model="listQuery.params.baffleModelKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in baffleModel_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="悬架:" class="searchlist">
                  <el-select v-model="listQuery.params.suspensionKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in suspension_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="座椅:" class="searchlist">
                  <el-select v-model="listQuery.params.seatKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in seat_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="护轮罩:" class="searchlist">
                  <el-select v-model="listQuery.params.tireCoverKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in tireCover_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="鞍座:" class="searchlist">
                  <el-select v-model="listQuery.params.saddleKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in saddle_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="轴距:" class="searchlist">
                  <el-select v-model="listQuery.params.wheelbaseKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in wheelbase_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="保险杠:" class="searchlist">
                  <el-select v-model="listQuery.params.bumperKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in bumper_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="配置包:" class="searchlist">
                  <el-select v-model="listQuery.params.configuringBaoKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in configuringBao_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="独立热源:" class="searchlist">
                  <el-select v-model="listQuery.params.independentSourcesKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in independentSources_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="燃料箱:" class="searchlist">
                  <el-select v-model="listQuery.params.fuelTank" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in fuelTank_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="多媒体:" class="searchlist">
                  <el-select v-model="listQuery.params.multimediaKey" placeholder="请选择" filterable clearable>
                    <el-option v-for="item in multimedia_list" :key="item.dictKey" :label="item.dictValue"
                               :value="item.dictKey"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="快捷检索:" class="searchlist">
                  <el-input v-model="listQuery.params.configName" placeholder="" clearable style="width: 150px"/>
                </el-form-item>
            </el-form>
            <div class="btn">
              <el-button type="primary" @click="handleFilter">查询</el-button>
              <el-button type="primary" @click="handReset">重置</el-button>
            </div>
          </div>
        </div>
        <div class="listtop">
          <div class="tit">【{{ modelName }}】车型常用配置列表</div>
          <pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current"
                  :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
        </div>
        <div class="">
          <el-table ref="multipleTable" :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="50"/>
            <el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/>
            <el-table-column label="常用配置" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.configName }}</span>
                <!--                <span class="bluezi" @click="handlink(scope.row)">{{}}</span>-->
              </template>
            </el-table-column>
            <el-table-column label="颜色" align="center" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.carColor }}</span>
              </template>
            </el-table-column>
            <el-table-column label="现车（台）" align="center" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.nowCarNum }}</span>
                <!--                <span class="bluezi" @click="handvehicle(scope.row)"></span>-->
              </template>
            </el-table-column>
            <el-table-column label="排产（台）" align="center" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.productionCarNum }}</span>
                <!--                <span class="bluezi" @click="handproduction(scope.row)"></span>-->
              </template>
            </el-table-column>
            <el-table-column label="销售指导价（万元）" align="center" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row.guidedPrice }}</span>
              </template>
            </el-table-column>
            <!--            <el-table-column label="价格有效期" align="center" width="110">-->
            <!--              <template slot-scope="scope">-->
            <!--                <span>{{ scope.row.priceValidity }}</span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="其他更多" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handlook(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <!-- 翻页 -->
          <pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current"
                      :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="50%">
      <el-table :key="tableKey" :data="datalist" border style="width: 100%">
        <el-table-column width="80px" label="序号" type="index" :index="indexMethod" align="center"/>
        <el-table-column label="分公司名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="现车" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.nowCarNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排产车" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.produceCarNum }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 车型配置标准页面 -->
    <!--    <modelstandardconfiguration v-show="viewState == 2" ref="divInfo" @doback="resetState"/>-->
    <!-- 现车车辆列表 -->
    <!--    <vehiclecar v-show="viewState == 3" ref="divVehiclecar" @doback="resetState"/>-->
    <!-- 排产订单列表 -->
    <!--    <productionschedulingorder v-show="viewState == 4" ref="divProduction" @doback="resetState"/>-->
  </div>
</template>

<script>
import {configPageList, dataDictionary} from '@/api/chexingchaxun/modelinquire'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
// import modelstandardconfiguration from './modelstandardconfiguration'
// import vehiclecar from './vehiclecar.vue'
// import productionschedulingorder from './productionschedulingorder.vue'

export default {
  name: 'chexingchaxun',
  components: {
    Pagination,
    pageye,
    // modelstandardconfiguration,
    // vehiclecar,
    // productionschedulingorder
  },
  data() {
    return {
      isSearchShow: false,
      dialogVisible: false,
      searchxianshitit: '隐藏查询条件',
      // viewState: 1,
      tableKey: 0,
      list: [],
      datalist: [],
      carColor_list: [],
      slowMachine_list: [],
      rearViewMirror_list: [],
      tireSize_list: [],
      specification_list: [],
      rearAxleRatio_list: [],
      airConditioner_list: [],
      hubMaterial_list: [],
      baffleModel_list: [],
      suspension_list: [],
      seat_list: [],
      tireCover_list: [],
      saddle_list: [],
      wheelbase_list: [],
      bumper_list: [],
      configuringBao_list: [],
      independentSources_list: [],
      fuelTank_list: [],
      multimedia_list: [],
      listLoading: false,
      modelName: '', // 车型名称
      modelSid: '',
      dialogQuery: {
        current: 1,
        size: 10,
        params: {
          modelSid: '',
          modelConfigSid: '',
          userSid: window.sessionStorage.getItem('userSid') // 用户
        }
      },
      listQuery: {
        current: 1,
        size: 10,
        params: {
          carColor: '', // 颜色
          configName: '', // 配置
          fuelTank: '', // 燃料
          rearAxleRatio: '', // 后桥速比
          modelSid: '', // 车型sid
          slowMachine: '', // 缓速器
          specification: '', // 驾驶室
          rearViewMirrorKey: '', // 后视镜
          tireSizeKey: '', // 轮胎
          airConditionerKey: '', // 空调
          hubMaterialKey: '', // 轮毂材质
          baffleModelKey: '', // 导流罩
          suspensionKey: '', // 悬架
          seatKey: '', // 座椅
          tireCoverKey: '', // 护轮罩
          saddleKey: '', // 鞍座
          wheelbaseKey: '', // 轴距
          bumperKey: '', // 保险杠
          configuringBaoKey: '', // 配置包
          independentSourcesKey: '', // 独立热源
          multimediaKey: '', // 多媒体
          userSid: window.sessionStorage.getItem('userSid')
        },
        total: 0
      },
      row: {},// 车型所选数据
      peiZhiList: [] // 配置所选数据
    }
  },
  methods: {
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    // ----------功能打开结束--------
    Dictionary() {
      dataDictionary({type: 'whether'}).then((res) => {
        if (res.code === '200') {
          this.airConditioner_list = res.data
          this.baffleModel_list = res.data
          this.tireCover_list = res.data
          this.independentSources_list = res.data
          this.multimedia_list = res.data
        }
      })
      dataDictionary({type: 'bodyColor'}).then((res) => {
        if (res.code === '200') {
          this.carColor_list = res.data
        }
      })
      dataDictionary({type: 'slowMachine'}).then((res) => {
        if (res.code === '200') {
          this.slowMachine_list = res.data
        }
      })
      dataDictionary({type: 'rearViewMirror'}).then((res) => {
        if (res.code === '200') {
          this.rearViewMirror_list = res.data
        }
      })
      dataDictionary({type: 'tireSize'}).then((res) => {
        if (res.code === '200') {
          this.tireSize_list = res.data
        }
      })
      dataDictionary({type: 'specification'}).then((res) => {
        if (res.code === '200') {
          this.specification_list = res.data
        }
      })
      dataDictionary({type: 'rearAxleRatio'}).then((res) => {
        if (res.code === '200') {
          this.rearAxleRatio_list = res.data
        }
      })
      dataDictionary({type: 'hubMaterial'}).then((res) => {
        if (res.code === '200') {
          this.hubMaterial_list = res.data
        }
      })
      dataDictionary({type: 'suspension'}).then((res) => {
        if (res.code === '200') {
          this.suspension_list = res.data
        }
      })
      dataDictionary({type: 'seat'}).then((res) => {
        if (res.code === '200') {
          this.seat_list = res.data
        }
      })
      dataDictionary({type: 'saddle'}).then((res) => {
        if (res.code === '200') {
          this.saddle_list = res.data
        }
      })
      dataDictionary({type: 'wheelbase'}).then((res) => {
        if (res.code === '200') {
          this.wheelbase_list = res.data
        }
      })
      dataDictionary({type: 'bumper'}).then((res) => {
        if (res.code === '200') {
          this.bumper_list = res.data
        }
      })
      dataDictionary({type: 'configuringBao'}).then((res) => {
        if (res.code === '200') {
          this.configuringBao_list = res.data
        }
      })
      dataDictionary({type: 'fuelType'}).then((res) => {
        if (res.code === '200') {
          this.fuelTank_list = res.data
        }
      })
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    showData(row) {
      console.log('所选车型', row)
      this.row = row
      this.listQuery.params.modelSid = row.sid
      this.modelSid = row.sid
      this.modelName = row.modelName
      this.Dictionary()
      this.getList()
    },
    // 查询列表信息
    getList() {
      this.listLoading = true
      configPageList(this.listQuery).then((response) => {
        this.listLoading = false
        if (response.code === '200') {
          this.listQuery.total = response.data.total
          this.list = response.data.records
        }
      })
    },
    // 查询按钮
    handleFilter() {
      this.getList()
    },
    handReset() {
      this.listQuery = {
        current: 1,
        size: 10,
        params: {
          carColor: '', // 颜色
          configName: '', // 配置
          fuelTank: '', // 燃料
          rearAxleRatio: '', // 后桥速比
          slowMachine: '', // 缓速器
          specification: '', // 驾驶室
          rearViewMirrorKey: '', // 后视镜
          tireSizeKey: '', // 轮胎
          airConditionerKey: '', // 空调
          hubMaterialKey: '', // 轮毂材质
          baffleModelKey: '', // 导流罩
          suspensionKey: '', // 悬架
          seatKey: '', // 座椅
          tireCoverKey: '', // 护轮罩
          saddleKey: '', // 鞍座
          wheelbaseKey: '', // 轴距
          bumperKey: '', // 保险杠
          configuringBaoKey: '', // 配置包
          independentSourcesKey: '', // 独立热源
          multimediaKey: '', // 多媒体
          modelSid: this.modelSid,
          userSid: window.sessionStorage.getItem('userSid')
        },
        total: 0
      }
      this.getList()
    },
    handlook(row) {
      this.dialogVisible = true
      this.datalist = row.moreList
      // this.dialogQuery.params.modelSid = this.listQuery.params.modelSid
      // this.dialogQuery.params.modelConfigSid = row.sid
      // notTheCompanyModelPageList(this.dialogQuery).then((res) => {
      //   if (res.code === '200') {
      //     this.datalist = res.data.records
      //   }
      // })
    },
    handleSelectionChange(row) {
      if (row.length > 1) {
        this.$message({
          showClose: true,
          message: '仅可选择一条配置！',
          type: 'error'
        });
        this.$refs.multipleTable.clearSelection();
        return
      }
      this.peiZhiList = row
      console.log('选择车型配置peiZhiList', this.peiZhiList)
    },
    handleConfirm() {
      if (this.peiZhiList.length > 0) {
        var modelData = new Object()
        this.peiZhiList.forEach((element) => {
          modelData = {
            brandName: this.row.brandName,
            brandSid: this.row.brandSid,
            config: element.configName,  //常用配置
            guildPrice: element.guidedPrice,  //单台指导价
            modelConfig: this.row.modelName,  //车型配置名称
            modelConfigSid: element.sid,  //配置sid
            modelName:this.row.vehicleAlias,  //车型名称
            modelSid: this.row.sid,  //车型sid
            moreConfig: element.otherConfig,  //更多配置
          }
        })
        console.log('车型配置页面确认',modelData)
        this.$emit('handleChexing', modelData)
      } else {
        this.$message({
          showClose: true,
          message: '请选择车型配置！',
          type: 'error'
        });
      }
    },
    handleReturn() {
      this.$emit('doback')
    },
    resetState() {
      this.viewState = 1
      this.handReset()
    },
    // handlink(row) {
    //   this.viewState = 2
    //   this.$refs['divInfo'].showInfo(this.listQuery.params.modelSid, row)
    // },
    // handvehicle(row) {
    //   this.viewState = 3
    //   this.$refs['divVehiclecar'].showInfo(this.listQuery.params.modelSid, row)
    // },
    // handproduction(row) {
    //   this.viewState = 4
    //   this.$refs['divProduction'].showInfo(this.listQuery.params.modelSid, this.modelName, row)
    // },
  }
}
</script>
<style scoped>
.listtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dfe4ed;
  height: 40px;
}

.tit {
  margin-bottom: -10px;
}

.pagination {
  margin-bottom: -10px;
}
.btn {
  padding: 15px 0 15px 0;
  border: 1px solid #e0e3eb;
  text-align: center;
}

.tab-header {
  margin-bottom: 0 !important;
}
</style>
