<template>
  <div class="app-container">
    <!-- Start 列表页面 -->
    <div v-show="viewState === 1">
      <button-bar view-title="车型管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
      <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="100px" class="tab-header">
              <el-form-item label="品牌">
                <el-select v-model="listQuery.params.carBrand" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in carBrand_list" :key="item.sid" :label="item.brandName" :value="item.sid"/>
                </el-select>
              </el-form-item>
              <el-form-item label="功能">
                <el-select v-model="listQuery.params.vehicleType" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in vehicleFunction_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.productLine" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in productLine_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.driveForm" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in driveForm_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.power" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in power_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.vehicleVersion" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in vehicleVersion_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.fuelType" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in fuelType_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.gearboxType" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in gearboxType_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.emissionStandard" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in emissionStandard_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.engineType" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in engineType_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.marketSegments" placeholder="请选择" filterable clearable class="addinputw">
                  <el-option v-for="item in marketSegments_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.vehicleTypeCode" maxlength="125" placeholder="请输入车型编码"
                          class="addinputw" clearable/>
              </el-form-item>
              <el-form-item label="规格型号">
                <el-input v-model="listQuery.params.specifications" maxlength="125" placeholder="请输入规格型号"
                          class="addinputw" clearable/>
              </el-form-item>
              <!--            <div class="btn" style="text-align: center;">-->
              <!--              <el-button type="primary" @click="handleFilter">查询</el-button>-->
              <!--              <el-button type="primary" @click="handleReset">重置</el-button>-->
              <!--            </div>-->
            </el-form>
            <div class="btn" style="text-align: center;">
              <el-button type="primary" @click="handleFilter">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</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" label="序号" type="index" :index="indexMethod" align="center"/>
            <el-table-column label="操作" align="center" width="140px" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="handlePeizhi(row)">车型配置</el-button>
              </template>
            </el-table-column>
            <el-table-column label="品牌" width="120px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车型" width="320px" align="center">
              <template slot-scope="scope">
                <span class="bluezi" @click="handleCheck(scope.row)">{{ scope.row.vehicleAlias }}</span>
              </template>
            </el-table-column>
            <el-table-column label="版本" width="140px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.vehicleVersion }}</span>
              </template>
            </el-table-column>
            <el-table-column label="燃料" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fuelTypeValue }}</span>
              </template>
            </el-table-column>
            <el-table-column label="变速箱" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.gearboxTypeValue }}</span>
              </template>
            </el-table-column>
            <el-table-column label="排放标准" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.emissionStandardValue }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车型照片" align="center" width="180px" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="handleGetCheck(scope.row)">查看</el-button>
                <!--              <div class="upload_img">-->
                <!--                <upload ref="uploadMoreImg" v-model="imgList" :limit="1" bucket="map" @eett="getList" :upload-data="{type:'0001',modelSid: scope.row.sid}"></upload>-->
                <!--              </div>-->
              </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"/> <!--vehicleModelUrls-->
        </div>
      </div>
    </div>
    <!-- End 列表页面 -->
    <!-- 照片弹窗 -->
    <el-dialog title="查看" :visible.sync="dialogImgVisible">
      <el-image v-for="item in srcList" style="width: 100px; height: 100px" :src="item" :preview-src-list="srcList"/>
    </el-dialog>
    <!-- Start 车型配置页面 -->
    <chexingpeizhi v-show="viewState == 5" ref="divGuanLianPeiZhi" @doback="resetState"></chexingpeizhi>
    <!-- End 车型配置页面 -->
    <!-- Start 新增以及修改部分 -->
    <chexing-add v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState" @reloadlist="getList"></chexing-add>
    <!-- End 新增以及修改部分 -->
    <!-- Start 详情部分 -->
    <chexinglook v-show="viewState == 4" ref="divinfo" @doback="resetState"></chexinglook>
    <!-- End 详情部分 -->
  </div>
</template>

<script>
import {
  basefinbankExportExcel,
  brandDown,
  deleteBySids,
  getPathSidByUserSid,
  pagerList,
  pullDown
} from '@/api/cheliang/basevehiclemodel'
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import chexingAdd from './chexingAdd'
import chexinglook from './chexinglook'
import chexingpeizhi from './relation/chexingguanlianchangyong'
import upload from '../../../components/uploadFile/upload_chexing'

export default {
  name: 'Pinpaiguanli',
  components: {
    Pagination,
    pageye,
    chexingAdd,
    chexinglook,
    chexingpeizhi,
    upload,
    ButtonBar,
  },
  data() {
    return {
      btndisabled: false,
      btnList: [
        {
          type: 'primary',
          size: 'small',
          icon: 'plus',
          btnKey: 'toAdd',
          btnLabel: '新增'
        },
        {
          type: 'primary',
          size: 'small',
          icon: 'edit',
          btnKey: 'toEdit',
          btnLabel: '编辑'
        },
        {
          type: 'danger',
          size: 'small',
          icon: 'del',
          btnKey: 'doDel',
          btnLabel: '删除'
        },
        {
          type: 'success',
          size: 'small',
          icon: 'Import',
          btnKey: 'doImport',
          btnLabel: '导入'
        },
        {
          type: 'success',
          size: 'small',
          icon: 'export',
          btnKey: 'build',
          btnLabel: '导出'
        },
        {
          type: 'info',
          size: 'small',
          icon: 'cross',
          btnKey: 'doClose',
          btnLabel: '关闭'
        }
      ],
      isSearchShow: false,
      viewState: 1,
      searchxianshitit: '显示查询条件',
      dialogImgVisible: false,
      // 查询条件 -----------
      tableKey: 0,
      list: [],
      srcList: [],
      carBrand_list: [], // 品牌
      vehicleFunction_list: [], // 功能
      productLine_list: [], // 系列
      driveForm_list: [], // 驱动
      power_list: [], // 马力
      vehicleVersion_list: [], // 版本
      fuelType_list: [], // 燃料
      gearboxType_list: [], // 变速箱
      emissionStandard_list: [], // 排放标准
      engineType_list: [], // 发动机型号
      marketSegments_list: [], // 细分市场
      FormLoading: false,
      listLoading: false,
      listQuery: {
        params: {
          carBrand: '',
          vehicleType: '',
          productLine: '',
          driveForm: '',
          power: '',
          vehicleVersion: '',
          fuelType: '',
          vehicleTypeCode: '',
          gearboxType: '',
          emissionStandard: '',
          engineType: '',
          marketSegments: '',
          specifications: '',
        },
        current: 1,
        size: 10,
        total: 0
      },
      sids: [],
      typeOptions: [],
      imgList: [],
      tureArrys: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      rules: {}
      // ------------------------------------
    }
  },
    mounted() {
      this.$refs["btnbar"].setButtonList(this.btnList)
    },
  created() {
    // 初始化变量
    this.init()
    // 加载列表
    this.getPathSid()
  },
  methods: {
    // 搜索条件效果
    clicksearchShow() {
      this.isSearchShow = !this.isSearchShow
      if (this.isSearchShow) {
        this.searchxianshitit = '隐藏查询条件'
      } else {
        this.searchxianshitit = '显示查询条件'
      }
    },
    btnHandle(btnKey) {
      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
      switch (btnKey) {
        case 'toAdd':
          this.toAdd()
          break
        case 'toEdit':
          this.toEdit()
          break
        case 'doDel':
          this.doDel()
          break
        case 'doImport':
          this.doImport()
          break
        case 'doExport':
          this.doExport()
          break
        case 'doClose':
          this.doClose()
          break
        default:
          break
      }
    },
    // 孟哲接口
    getPathSid() {
      const userSid = window.sessionStorage.getItem('userSid')
      getPathSidByUserSid({userSid:userSid}).then((res) => {
        if (res.code === '200') {
          this.listQuery.params.createOrgSId = res.data
          this.useOrg = res.data
          this.getList()
          this.getBrand(res.data)
        }
      })
    },
    getBrand(useOrg){
      // 下拉框-品牌
      brandDown({ useOrg:useOrg }).then((res) => {
        if (res.code === '200') {
          this.carBrand_list = res.data
          console.log('下拉框请求品牌', res.data)
        }
      })
    },
    init() {
      // 下拉框-功能
      pullDown({
        type: 'vehicleFunction'
      }).then((res) => {
        if (res.code === '200') {
          this.vehicleFunction_list = res.data
          console.log('下拉框请求功能', res.data)
        }
      })
      // 下拉框-系列
      // pullDown({
      //   type: 'vehicleFunction'
      // }).then((res) => {
      //   if (res.code === '200') {
      //     this.vehicleFunction_list = res.data
      //     console.log('下拉框请求111', res.data)
      //   }
      // })
      // 下拉框-驱动
      pullDown({
        type: 'driver'
      }).then((res) => {
        if (res.code === '200') {
          this.driveForm_list = res.data
          console.log('下拉框请求驱动', res.data)
        }
      })
      // 下拉款-系列
      pullDown({
        type: 'productLine'
      }).then((res) => {
        if (res.code === '200') {
          this.productLine_list = res.data
          console.log('下拉框请求系列', res.data)
        }
      })
      // 下拉框-马力
      pullDown({
        type: 'horsepower'
      }).then((res) => {
        if (res.code === '200') {
          this.power_list = res.data
          console.log('下拉框请求马力', res.data)
        }
      })
      // 下拉框-版本
      pullDown({
        type: 'vehicleVersion'
      }).then((res) => {
        if (res.code === '200') {
          this.vehicleVersion_list = res.data
          console.log('下拉框请求版本', res.data)
        }
      })
      // 下拉框-燃料
      pullDown({
        type: 'fuelType'
      }).then((res) => {
        if (res.code === '200') {
          this.fuelType_list = res.data
          console.log('下拉框请求燃料', res.data)
        }
      })
      // 下拉框-变速箱
      pullDown({
        type: 'gearbox'
      }).then((res) => {
        if (res.code === '200') {
          this.gearboxType_list = res.data
          console.log('下拉框请求变速箱', res.data)
        }
      })
      // 下拉框-排放标准
      pullDown({
        type: 'emissionStandard'
      }).then((res) => {
        if (res.code === '200') {
          this.emissionStandard_list = res.data
          console.log('下拉框请求排放标准', res.data)
        }
      })
      // 下拉框-发动机型号
      pullDown({
        type: 'engineType'
      }).then((res) => {
        if (res.code === '200') {
          this.engineType_list = res.data
          console.log('下拉框请求发动机型号', res.data)
        }
      })
      // 下拉框-细分市场
      pullDown({
        type: 'marketSegments'
      }).then((res) => {
        if (res.code === '200') {
          this.marketSegments_list = res.data
          console.log('下拉框请求细分市场', res.data)
        }
      })
    },
    // 序号
    indexMethod(index) {
      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
      var pageindex = index + 1 + pagestart
      return pageindex
    },
    resetState() {
      this.viewState = 1
    },
    // 查询列表信息
    getList() {
      this.listLoading = true
      pagerList(this.listQuery).then((response) => {
        console.log('列表查询结果：', 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
        }
      })
    },
    // 查询按钮
    handleFilter() {
      this.listQuery.current = 1
      this.getPathSid()
    },
    handleReset() {
      this.listQuery = {
        params: {
          carBrand: '',
          vehicleType: '',
          productLine: '',
          driveForm: '',
          power: '',
          vehicleVersion: '',
          fuelType: '',
          vehicleTypeCode: '',
          gearboxType: '',
          emissionStandard: '',
          engineType: '',
          marketSegments: '',
          specifications: '',
        },
        current: 1,
        size: 10,
        total: 0
      }
      this.getPathSid()
    },
    handlePeizhi(row) {
      this.viewState = 5
      this.$refs['divGuanLianPeiZhi'].showGuanlian(row)
    },
    handleSelectionChange(row) {
      const aa = []
      row.forEach((element) => {
        aa.push(element.sid)
      })
      this.sids = aa
      console.log('sids', this.sids)
    },
    // 打开添加
    toAdd() {
      this.viewState = 2
      this.$refs['divadd'].showAdd()
    },
    // 打开配置
    cheLiangXiangXiPeiZhi(row) {
      this.viewState = 0
      const modelSid = row.sid
      this.$refs['divpeizhi'].showPei(modelSid)
    },
    // 打开修改
    toEdit() {
      if (this.sids.length === 1) {
        this.viewState = 3
        const sid = this.sids[0]
        const row = this.row
        this.$refs['divadd'].showEdit(sid, row)
      } else if (this.sids.length > 1) {
        this.$notify({
          title: '提示',
          message: '不能选中多个车型修改!!',
          type: 'info',
          duration: 2000
        })
      } else {
        this.$notify({
          title: '提示',
          message: '没有选择车型!!',
          type: 'error',
          duration: 2000
        })
        return
      }
    },
    handleGetCheck(row) {
      this.dialogImgVisible = true
      console.log('图片列表', row.vehicleModelUrls)
      this.srcList = row.vehicleModelUrls
    },
    handleUpload(row) {
      const sid = row.sid
      // this.$refs.uploadMoreImg.uploadData.modelSid = 123456
      // this.$refs['uploadMoreImg'].showImg(sid)
    },

    // 打开查看
    handleCheck(row) {
      this.viewState = 4
      const sid = row.sid
      console.log('详情sid', sid,'useOrg:',this.useOrg)
      this.$refs['divinfo'].showInfo(sid, row, this.useOrg)
    },
    // 根据本行ID删除数据
    doDel() {
      if (this.sids.length > 0) {
        const _this = this
        const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
        this.$confirm(tip, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            const loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            var sids = this.sids.join(',')
            console.log('删除的数据', sids)
            const params = {
              sids:sids,
              userSid:window.sessionStorage.getItem('userSid')
            }
            deleteBySids(params)
              .then(resp => {
                if (resp.success && resp.code == '200'){
                  loading.close()
                  _this.$message({ type: 'success', message: resp.msg, showClose: true })
                  _this.getPathSid()
                }else {
                  loading.close()
                  // _this.$message({ type: 'error', message: resp.msg, showClose: true })
                }
              })
              .catch(e => {
                loading.close()
              })
          })
          .catch(() => {
          })
      } else {
        this.$notify({
          title: '提示',
          message: '没有选择车型!!',
          type: 'error',
          duration: 2000
        })
        return
      }
    },
    // 导出
    doImport() {

    },
    // 导出
    doExport() {
      basefinbankExportExcel(this.sids).then((res) => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const objectUrl = URL.createObjectURL(blob)
        window.location.href = objectUrl
        this.$notify({
          title: '提示',
          message: '导出成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    doClose(){
      this.$store.dispatch('tagsView/delView', this.$route);
      this.$router.go(-1)
    }
  }
}
</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;
}

.upload_img {
  display: inline-block;
  padding-left: 10px;
}

.btn {
  padding: 15px 0 15px 0;
  border: 1px solid #e0e3eb;
}

.tab-header {
  background-color: #edf1f7;
  padding: 8px 20px;
  margin-bottom: 0 !important;
}

.tab-header /deep/ .el-form-item {
  margin-bottom: 10px;
}
</style>
