<template>
  <div class="app-container">
    <!--Start 列表页面-->
    <div v-show="pageState === 3">
      <div class="tab-header webtop">
        <div>常用配置管理</div>
        <div>
          <el-button type="primary" size="small" @click="handleCreate()">新增配置</el-button>
          <el-button type="primary" size="small" @click="handleConfirm()">确认</el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="main-content">
        <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="110px" class="tab-header">
              <el-form-item label="车身颜色">
                <el-select v-model="listQuery.params.carColorKey" placeholder="请选择" clearable class="addinputw">
                  <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="缓速器">
                <el-select v-model="listQuery.params.slowMachineKey" placeholder="请选择" clearable class="addinputw">
                  <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="后视镜">
                <el-select v-model="listQuery.params.rearViewMirrorKey" placeholder="请选择" clearable class="addinputw">
                  <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="轮胎规格">
                <el-select v-model="listQuery.params.tireSizeKey" placeholder="请选择" clearable class="addinputw">
                  <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="驾驶室">
                <el-select v-model="listQuery.params.specificationKey" placeholder="请选择" clearable class="addinputw">
                  <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="后桥速比">
                <el-select v-model="listQuery.params.rearAxleRatioKey" placeholder="请选择" clearable class="addinputw">
                  <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="空调">
                <el-select v-model="listQuery.params.airConditionerKey" placeholder="请选择" clearable class="addinputw">
                  <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="轮毂材质">
                <el-select v-model="listQuery.params.hubMaterialKey" placeholder="请选择" clearable class="addinputw">
                  <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="导流罩">
                <el-select v-model="listQuery.params.baffleModelKey" placeholder="请选择" clearable class="addinputw">
                  <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="悬架">
                <el-select v-model="listQuery.params.suspensionKey" placeholder="请选择" clearable class="addinputw">
                  <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="座椅">
                <el-select v-model="listQuery.params.seatKey" placeholder="请选择" clearable class="addinputw">
                  <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="护轮罩">
                <el-select v-model="listQuery.params.tireCoverKey" placeholder="请选择" clearable class="addinputw">
                  <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="鞍座">
                <el-select v-model="listQuery.params.saddleKey" placeholder="请选择" clearable class="addinputw">
                  <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="轴距">
                <el-select v-model="listQuery.params.wheelbaseKey" placeholder="请选择" clearable class="addinputw">
                  <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="保险杠">
                <el-select v-model="listQuery.params.bumperKey" placeholder="请选择" clearable class="addinputw">
                  <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="配置包">
                <el-select v-model="listQuery.params.configuringBaoKey" placeholder="请选择" clearable class="addinputw">
                  <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="独立热源">
                <el-select v-model="listQuery.params.independentSourcesKey" placeholder="请选择" clearable class="addinputw">
                  <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="油箱/气罐">
                <el-select v-model="listQuery.params.fuelTankKey" placeholder="请选择" clearable class="addinputw">
                  <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="多媒体">
                <el-select v-model="listQuery.params.multimediaKey" placeholder="请选择" clearable class="addinputw">
                  <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="常用配置名称">
                <el-input v-model="listQuery.params.configName" maxlength="125" placeholder="请输入常用配置名称"
                          class="addinputw" clearable/>
              </el-form-item>
            </el-form>
            <div class="btn" style="text-align: center;">
              <el-button type="primary" icon="el-icon-search" size="small"  @click="handleFilter">查询</el-button>
              <el-button type="primary" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </div>
          </div>
        </div>
        <div class="listtop">
          <div class="tit">常用配置列表</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 :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column width="50px" type="selection" align="center"/>
            <el-table-column width="80px" fixed label="序号" type="index" :index="indexMethod" align="center"/>
            <el-table-column fixed label="操作" align="center" width="80px" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="handleCheck(row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column label="配置归属" width="190px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.createOrg }}</span>
              </template>
            </el-table-column>
            <el-table-column width="110px" label="颜色" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.carColor }}</span>
              </template>
            </el-table-column>
            <el-table-column label="缓速器" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.slowMachine }}</span>
              </template>
            </el-table-column>
            <el-table-column label="后视镜" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.rearViewMirror }}</span>
              </template>
            </el-table-column>
            <el-table-column width="120px" label="轮胎" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.tireSize }}</span>
              </template>
            </el-table-column>
            <el-table-column width="110px" label="驾驶室" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.specification }}</span>
              </template>
            </el-table-column>
            <el-table-column width="110px" label="后桥速比" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.rearAxleRatio }}</span>
              </template>
            </el-table-column>
            <el-table-column label="空调" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.airConditioner }}</span>
              </template>
            </el-table-column>
            <el-table-column width="110px" label="轮毂材质" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.hubMaterial }}</span>
              </template>
            </el-table-column>
            <el-table-column label="导流罩" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.baffleModel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="悬架" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.suspension }}</span>
              </template>
            </el-table-column>
            <el-table-column width="135px" label="座椅" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.seat }}</span>
              </template>
            </el-table-column>
            <el-table-column label="护轮罩" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.tireCover }}</span>
              </template>
            </el-table-column>
            <el-table-column label="鞍座" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.saddle }}</span>
              </template>
            </el-table-column>
            <el-table-column width="118px" label="轴距" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.wheelbase }}</span>
              </template>
            </el-table-column>
            <el-table-column label="保险杠" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.bumper }}</span>
              </template>
            </el-table-column>
            <el-table-column label="配置包" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.configuringBao }}</span>
              </template>
            </el-table-column>
            <el-table-column width="130px" label="独立热源" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.independentSources }}</span>
              </template>
            </el-table-column>
            <el-table-column label="燃料箱" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fuelTank }}</span>
              </template>
            </el-table-column>
            <el-table-column label="多媒体" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.multimedia }}</span>
              </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>
    <!--End 列表页面-->
    <changyongpeizhi-add v-show="pageState == 4" ref="divadd" @doback="resetState" @reloadlist="getList"/>
    <changyongpeizhi-info v-show="pageState == 5" ref="divinfo" @doback="resetState"></changyongpeizhi-info>
  </div>
</template>

<script>
import { getList, pullDown, setRel } from '@/api/cheliang/basemodelconfig'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import changyongpeizhiAdd from '../../chexingpeizhi/changyongpeizhiAdd'
import ChangyongpeizhiInfo from '@/views/cheliang/chexingpeizhi/changyongpeizhiInfo'

export default {
  name: 'changyongpeizhiguanlian',
  components: {
    ChangyongpeizhiInfo,
    Pagination,
    pageye,
    changyongpeizhiAdd
  },
  data() {
    return {
      pageState: 3,
      isSearchShow: false,
      searchxianshitit: '显示查询条件',
      // 查询 -----------
      tableKey: 0,
      list: [],
      FormLoading: false,
      listLoading: false,
      listQuery: {
        params: {
          configSid:'',
          airConditionerKey: '', // 空调key
          baffleModelKey: '', // 导流罩key
          bumperKey: '',
          carColorKey: '',
          configName: '',
          configuringBaoKey: '',
          fuelTankKey: '',
          hubMaterialKey: '',
          independentSourcesKey: '',
          modelSid: '',
          multimediaKey: '',
          rearAxleRatioKey: '',
          rearViewMirrorKey: '',
          saddleKey: '',
          seatKey: '',
          slowMachineKey: '',
          specificationKey: '',
          suspensionKey: '',
          tireCoverKey: '',
          tireSizeKey: '',
          useOrgSid: '',
          wheelbaseKey: ''
        },
        current: 1,
        size: 10,
        total: 0
      },
      multipleSelection:[],
      modelSid:'',// 选择的车型sid
      rel_list: [],
      modelSids: [],
      configurationItemsSids: [],
      sids: [],
      chesid: '',
      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: [], // 多媒体
      rules: {}
    }
  },
  created() {
    this.getList() // 加载列表

  },
  methods: {
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    getType() {
      // 下拉框-车身颜色
      pullDown({
        type: 'bodyColor'
      }).then((res) => {
        if (res.code === '200') {
          this.carColor_list = res.data
          console.log('下拉框请求111', res.data)
        }
      })
      // 缓速器
      pullDown({
        type: 'slowMachine '
      }).then((res) => {
        if (res.code === '200') {
          this.slowMachine_list = res.data
          console.log('下拉框请求缓速器', res.data)
        }
      })
      // 后视镜
      pullDown({
        type: 'rearviewMirror '
      }).then((res) => {
        if (res.code === '200') {
          this.rearViewMirror_list = res.data
          console.log('下拉框请求后视镜', res.data)
        }
      })
      // 轮胎规格
      pullDown({
        type: 'tiresize '
      }).then((res) => {
        if (res.code === '200') {
          this.tireSize_list = res.data
          console.log('下拉框请求轮胎规格', res.data)
        }
      })
      // 驾驶室
      pullDown({
        type: 'specification '
      }).then((res) => {
        if (res.code === '200') {
          this.specification_list = res.data
          console.log('下拉框请求驾驶室', res.data)
        }
      })
      // 后桥速比
      pullDown({
        type: 'rearAxleRatio'
      }).then((res) => {
        if (res.code === '200') {
          this.rearAxleRatio_list = res.data
          console.log('下拉框请求后桥速比', res.data)
        }
      })

      // 空调 导流罩 护轮罩 独立热源 多媒体
      pullDown({
        type: 'airConditioner'
      }).then((res) => {
        if (res.code === '200') {
          this.airConditioner_list = res.data
          console.log('下拉框请求空调', res.data)
          // this.baffleModel_list = res.data
          // console.log('下拉框请求导流罩', res.data)
          // this.tireCover_list = res.data
          // console.log('下拉框请求护轮罩', res.data)
          // this.independentSources_list = res.data
          // console.log('下拉框请求护独立热源', res.data)
          // this.multimedia_list = res.data
          // console.log('下拉框请求多媒体', res.data)
        }
      })
      // 轮毂材质
      pullDown({
        type: 'hubMaterial'
      }).then((res) => {
        if (res.code === '200') {
          this.hubMaterial_list = res.data
          console.log('下拉框请求轮毂材质', res.data)
        }
      })
      // 导流罩
      pullDown({
        type: 'baffleModel'
      }).then((res) => {
        if (res.code === '200') {
          this.baffleModel_list = res.data
          console.log('下拉框请求导流罩', res.data)
        }
      })
      // 悬架
      pullDown({
        type: 'suspension'
      }).then((res) => {
        if (res.code === '200') {
          this.suspension_list = res.data
          console.log('下拉框请求悬架', res.data)
        }
      })
      // 座椅
      pullDown({
        type: 'seat'
      }).then((res) => {
        if (res.code === '200') {
          this.seat_list = res.data
          console.log('下拉框请求座椅', res.data)
        }
      })
      // 护轮罩
      pullDown({
        type: 'tireCover'
      }).then((res) => {
        if (res.code === '200') {
          this.tireCover_list = res.data
          console.log('下拉框请求护轮罩', res.data)
        }
      })
      // 鞍座
      pullDown({
        type: 'saddle'
      }).then((res) => {
        if (res.code === '200') {
          this.saddle_list = res.data
          console.log('下拉框请求护鞍座', res.data)
        }
      })
      // 轴距
      pullDown({
        type: 'wheelbase'
      }).then((res) => {
        if (res.code === '200') {
          this.wheelbase_list = res.data
          console.log('下拉框请求护轴距', res.data)
        }
      })
      // 保险杠
      pullDown({
        type: 'bumper'
      }).then((res) => {
        if (res.code === '200') {
          this.bumper_list = res.data
          console.log('下拉框请求护保险杠', res.data)
        }
      })
      // 配置包
      pullDown({
        type: 'configuringBao'
      }).then((res) => {
        if (res.code === '200') {
          this.configuringBao_list = res.data
          console.log('下拉框请求护配置包', res.data)
        }
      })
      // 独立热源
      pullDown({
        type: 'independentSources'
      }).then((res) => {
        if (res.code === '200') {
          this.independentSources_list = res.data
          console.log('下拉框请求护独立热源', res.data)
        }
      })
      // 下拉框-油箱
      pullDown({
        type: 'fuelTank'
      }).then((res) => {
        if (res.code === '200') {
          this.fuelTank_list = res.data
          console.log('下拉框请求111', res.data)
        }
      })
      // 多媒体
      pullDown({
        type: 'multimedia'
      }).then((res) => {
        if (res.code === '200') {
          this.multimedia_list = res.data
          console.log('下拉框请求多媒体', res.data)
        }
      })
    },
    showSetRel(modelSid,configSid) {
      this.modelSid = modelSid
      // this.rel_list.modelSid = modelSid
      this.listQuery.params.configSid = configSid
      console.log('已关联sids',this.listQuery.params.configSid)
      this.getList()
    },
    // 返回
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.$emit('doback')
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    resetState() {
      this.pageState = 3
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
      console.log('11row', row)
      const aa = []
      const bb = []
      const cc = []
      row.forEach((element) => {
        aa.push(element.sid)
        bb.push(element.modelSid)
        cc.push(element.configurationItemsSid)
      })
      this.sids = aa
      this.modelSids = bb
      this.configurationItemsSids = cc
      console.log('选择的数据', this.sids)
      console.log('选择的数据', this.modelSids)
      console.log('选择的数据', this.configurationItemsSids)
    },
    // 查询列表信息
    getList() {
      this.listLoading = true
      getList(this.listQuery).then((response) => {
        this.listLoading = false
        if (
          response.code === '200' &&
          response.data &&
          response.data.total > 0
        ) {
          this.list = response.data.records
          this.listQuery.total = response.data.total
        } else {
          this.list = []
          this.listQuery.total = 0
        }
      })
      this.getType()
    },
    // 查询按钮
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    // 重置
    resetQuery() {
      this.listQuery = {
        params: {
          airConditionerKey: '', // 空调key
          baffleModelKey: '', // 导流罩key
          bumperKey: '',
          carColorKey: '',
          configName: '',
          configuringBaoKey: '',
          fuelTankKey: '',
          hubMaterialKey: '',
          independentSourcesKey: '',
          modelSid: '',
          multimediaKey: '',
          rearAxleRatioKey: '',
          rearViewMirrorKey: '',
          saddleKey: '',
          seatKey: '',
          slowMachineKey: '',
          specificationKey: '',
          suspensionKey: '',
          tireCoverKey: '',
          tireSizeKey: '',
          useOrgSid: '',
          wheelbaseKey: ''
        },
        current: 1,
        size: 10,
        total: 0
      }
      this.getList()
    },
    // 打开查看
    handleCheck(row) {
      console.log('111', row)
      this.pageState = 5
      const sid = row.sid
      this.$refs['divinfo'].showInfo(sid, row)
    },
    // 打开添加
    handleCreate() {
      this.pageState = 4
      this.$refs['divadd'].showAdd()
    },
    // this.handleReturn('true')
    handleConfirm() {
      if (this.sids.length === 0) {
        this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行关联' })
        return
      }
      const rel_list = []
      for (var i = 0; i < this.sids.length; i++) {
        rel_list.push({
          configurationItemsSid: this.sids[i]
        })
      }
      console.log('已选择的常用配置', rel_list)
      rel_list.forEach((element) => {
        element.modelSid = this.modelSid
        element.staffSid = window.sessionStorage.getItem('staffSid')
        element.userSid = window.sessionStorage.getItem('userSid')
      })
      console.log('关联数据', 211154)
      setRel(rel_list).then(response => {
        this.FormLoading = false
        if (response.success) {
          this.handleReturn('true')
        } else {

        }
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-collapse {
  border-top: 0px solid #e6ebf5;
  border-bottom: 0px solid #e6ebf5;
}

/deep/ .el-collapse-item__content {
  margin: 0;
  padding: 0;
}

/deep/ .el-collapse-item__wrap {
  border-bottom: 0px solid #ebeef5;
}

/deep/ .el-collapse-item__header {
  border-bottom: 0px solid #e6ebf5;
}

.searchli {
  padding: 5px 100px;
}
</style>
