<template>
  <div class="app-container">
    <div class="tab-header webtop">
      <div>{{ viewTitle }}</div>
      <div>
        <el-button type="primary" size="small" @click="handleCreate()">保存</el-button>
        <el-button type="primary" size="small">下载</el-button>
        <el-button type="info" size="small" @click="handleReturn()">返回</el-button>
      </div>
    </div>
    <div class="listconadd">
      <el-form ref="dataForm" :model="temp" label-position="right" label-width="190px" class="formadd" :rules="rules">
        <div class="title">合格证台账信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">合格证流水号：</span>
              <el-input v-model="temp.certificationSerialNum" maxlength="125" placeholder="合格证流水号" disabled class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="certificationNo">
              <span slot="label">合格证编号：</span>
              <el-input v-model="temp.certificationNo" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="certificateDate">
              <span slot="label">发证日期：</span>
              <el-date-picker v-model="temp.certificateDate" type="date" class="addinputw" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="certificateSituation">
              <span slot="label">合格证情况：</span>
              <el-select v-model="temp.certificateSituation" class="addinputw" placeholder="请选择合格证情况" @change="getHeGeZheng">
                <el-option v-for="item in Situation" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="toCardDate">
              <span slot="label">到证日期：</span>
              <el-date-picker v-model="temp.toCardDate" type="date" class="addinputw" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="receiveDate">
              <span slot="label">领取日期：</span>
              <el-date-picker v-model="temp.receiveDate" type="date" class="addinputw" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="receiver">
              <span slot="label">领取人：</span>
              <el-input v-model="temp.receiver" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12"/>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="remarks">
              <span slot="label">备注：</span>
              <el-input v-model="temp.remarks" type="textarea" :rows="3" maxlength="125" placeholder="" class="addinputwda" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="certificatePhoto">
              <span slot="label">合格证照片：</span>
              <ImageUpload types="0001" style="float:left;" v-model="temp.certificatePhoto"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">合格证详细信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">底盘ID：</span>
              <el-input v-model="temp.chassisId" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">转向类型：</span>
              <el-input v-model="temp.steeringType" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">制造日期：</span>
              <el-date-picker v-model="temp.manufactureDate" type="date" format="yyyy-MM-dd" class="addinputw" value-format="yyyy-MM-dd" placeholder="选择日期时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">排放标准：</span>
              <el-input v-model="temp.emissionStandard" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">轴距：</span>
              <el-input v-model="temp.wheelbase" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">驾驶室准乘人数：</span>
              <el-input v-model="temp.seatingCapacity" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">轴数：</span>
              <el-input v-model="temp.axleNum" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">燃料类型：</span>
              <el-input v-model="temp.fuelType" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">额定载客人数：</span>
              <el-input v-model="temp.limitPassenger" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">车身颜色：</span>
              <el-input v-model="temp.carColor" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">制造厂商：</span>
              <el-autocomplete v-model="temp.manufacturer" :fetch-suggestions="querySearchAsync3" class="addinputw" placeholder="请输入制造厂商" @select="handleSelect3">
                <i slot="suffix" class="el-icon-edit el-input__icon" @click="inputclear3"/>
                <template slot-scope="{ item }">
                  <div style="paddingg:5px;background-color:Azure;">
                    <span>制造厂商：</span>
                    <span style="color:red">{{ item.manufacturerName }}</span><br>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">发动机型号：</span>
              <el-input v-model="temp.engineType" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">整备质量：</span>
              <el-input v-model="temp.saddleMass" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">发动机号：</span>
              <el-input v-model="temp.engineNo" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">最高设计时速：</span>
              <el-input v-model="temp.speedLimit" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">合格印章：</span>
              <el-input v-model="temp.qualifySeal" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">车辆名称：</span>
              <el-input v-model="temp.carName" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">排量：</span>
              <el-input v-model="temp.displacement" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">CGS印章：</span>
              <el-input v-model="temp.cgsseal" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">功率：</span>
              <el-input v-model="temp.power" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">轮胎数：</span>
              <el-input v-model="temp.tyreNum" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">总质量：</span>
              <el-input v-model="temp.totalWeight" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">车辆品牌：</span>
              <el-select v-model="temp.carBrand" class="addinputw" placeholder="请选择车辆型号">
                <el-option v-for="item in carBrandes" :key="item.sid" :label="item.brandName" :value="item.sid"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">车辆型号：</span>
              <el-select v-model="temp.carModel" class="addinputw" placeholder="请选择车辆型号">
                <el-option v-for="item in Model" :key="item.sid" :label="item.carModel" :value="item.carModel"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">车架号：</span>
              <el-autocomplete v-model="temp.vinNo" :fetch-suggestions="querySearchAsync" class="addinputw" placeholder="请输入车架号" @select="handleSelect">
                <i slot="suffix" class="el-icon-edit el-input__icon"/>
                <template slot-scope="{ item }">
                  <div style="paddingg:5px;background-color:Azure;">
                    <span>车架号：</span>
                    <span style="color:red">{{ item.vinNo }}</span><br>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <span slot="label">底盘型号：</span>
              <el-input v-model="temp.chassisModel" maxlength="125" placeholder="" class="addinputw" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  SaveList,
  Update,
  details
} from '@/api/cheliang/basevehiclecertificate'
import {
  selectDownPlus
} from '@/api/cheliang/basevehiclemodel'
import {
  namesDownBySid
} from '@/api/cheliang/basevehiclemodel'
import {
  namesDown
} from '@/api/cheliang/basevehicle'
import {
  getNamesDownes
} from '@/api/cheliang/basemanufacturer'
import { getChe } from '@/utils/baocun'
import { typeValues } from '@/api/cheliang/dictcommons'
import ImageUpload from '@/components/uploadFile/ManyImageUpload' // 上传文件
export default {
  name: 'hegezhengAdd',
  components: { ImageUpload },
  data() {
    return {
      viewTitle: '',
      // --按钮菜单-------
      menuState: {
        add: false, // 添加
        edit: false, // 编辑
        delete: false, // 删除
        view: false, // 查看
        audit: false, // 审核
        input: false, // 导入
        output: false, // 导出
        upload: false, // 同步
        release: false // 下发
      },
      FormLoading: false,
      listLoading: false,
      temp: {
        certificateSituation: '',
        certificateSituationValue: '',
        certificatePhoto: []
      }, // 添加和修改
      templook: {}, // 查看实体
      textMap: {
        update: '修改',
        create: '创建'
      },
      certificateSituation: 'certificateSituation',
      Situation: [],
      stateId: 0,
      dialogFormVisible: false, // 添加修改对话框状态
      dialogFormShowVisible: false, // 查看对话框默认关闭状态
      dialogStatus: '', // 对话框状态
      fenzuOptions: [],
      attachTypeYingyezhizhao: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      },
      carBrandes: [],
      ChangShangsid: '',
      CJsid: '',
      vinNosse: [],
      Model: [],
      vSid: null,
      rules: {
        certificationNo: [
          { required: true, message: '请填写合格证编号', trigger: 'blur' }
        ],
        certificateDate: [
          { required: true, message: '请选择发证日期', trigger: 'blur' }
        ],
        certificateSituation: [
          { required: true, message: '请选择合格证情况', trigger: 'blur' }
        ],
        toCardDate: [
          { required: true, message: '请选择到证日期', trigger: 'blur' }
        ],
        receiveDate: [
          { required: true, message: '请选择领取日期', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '请填写领取人', trigger: 'blur' }
        ],
        remarks: [{ required: true, message: '请填写备注', trigger: 'blur' }]
        // certificatePhoto: [
        //   { required: true, message: '请选择合格证照片', trigger: 'blur' },
        // ],
      }
      // ------------------------------------
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'roles',
      'rolesIds',
      'departmentId',
      'departmentCode'
    ])
  },
  created() {
    this.setDate()
    this.getXChangshang()
    // this.getCheXingHao()
    this.getCheJia()
    this.vSid = getChe()
    console.log('999999999999999999999', this.vSid)
    // 初始化变量
    // this.init()
    // 加载列表
    // this.getList()
  },
  methods: {
    init() {
      this.stateId = this.$route.params.id
      if (this.stateId !== '0') {
        details(this.stateId).then((response) => {
          if (response.code === '200') {
            this.temp = response.data
            this.getPinPainting(response.data.manufacturer)
            console.log(this.temp.carBrand, 1111)
          }
        })
      }
      this.setDate()
      this.getXChangshang()
      // this.getCheXingHao()
      this.getCheJia()
    },
    showAdd() {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.dialogStatus = 'add'
      this.viewTitle = '新增合格证台账信息'
    },

    showEdit(sid, row) {
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.viewTitle = '修改车型详细信息'
      this.dialogStatus = 'update'
      this.temp.sid = sid
      details(sid).then(resp => {
        const data = resp.data
        this.temp = data
      }).catch(e => {
        this.temp = row
      })
    },

    getCheXingHao(sid) {
      var sid = {
        sid: sid
      }
      console.log('wowopwpwp', sid)
      selectDownPlus(sid).then((res) => {
        console.log(res)
        if (res.code === '200') {
          this.Model = res.data
        }
      })
    },
    // 车架号
    getCheJia() {
      namesDown({ vinNo: this.temp.vinNo }).then((response) => {
        if (response.code === '200') {
          this.vinNosse = response.data
        }
      })
    },
    // 选择数据
    handleSelect(e) {
      this.temp.vinNo = e.vinNo
      this.CJsid = e.sid
      this.temp.vehicleSid = this.CJsid
    },
    // 文本模糊查询
    querySearchAsync(queryString, cb) {
      console.log('查询条件：', queryString)
      if (
        queryString !== null &&
        queryString !== undefined &&
        queryString !== ''
      ) {
        namesDown({
          name: queryString
        }).then((response) => {
          if (response.code === '200') {
            console.log('1111111111111', response)
            this.datas = response.data
            cb(response.data)
          }
        })
      } else {
        cb(this.vinNosse)
      }
    },
    // 厂商
    getXChangshang() {
      getNamesDownes({ name: this.temp.manufacturer }).then((res) => {
        if (res.code === '200') {
          console.log('777777777777', res)
          this.facturer = res.data
        }
      })
    },
    handleSelect3(e) {
      console.log('46588888888888', e)
      this.temp.manufacturer = e.manufacturerName
      this.ChangShangsid = e.sid
      this.getPinPainting(this.ChangShangsid)
    },
    // 清空信息
    inputclear3() {
      this.manufacturerName = ''
      this.brandCode = ''
    },
    // 文本模糊查询
    querySearchAsync3(queryString, cb) {
      console.log('查询条件：', queryString)

      if (queryString !== null && queryString !== undefined && queryString !== '') {
        getNamesDownes({
          name: queryString
        }).then((response) => {
          if (response.code === '200') {
            console.log('1111111111111', response)
            this.datas = response.data
            cb(response.data)
          }
        })
      } else {
        cb(this.facturer)
      }
    },
    // 品牌
    getPinPainting(sid) {
      var manufacturerSid = {
        manufacturerSid: sid
      }
      namesDownBySid(manufacturerSid).then((res) => {
        if (res.code === '200') {
          console.log('品牌数据', res)
          this.carBrandes = res.data
          this.carBrandes.forEach((e) => {
            this.getCheXingHao(e.sid)
          })
        }
      })
    },
    //
    getHeGeZheng(value) {
      let bb = null
      this.Situation.forEach(e => {
        if (e.dictKey === value) {
          bb = {
            type: 'certificateSituation',
            name: e.dictValue,
            vaule: e.dictKey
          }
        }
      })
      this.temp.certificateSituationValue = bb.name
      console.log('value值', this.temp.certificateSituationValue)
    },
    setDate() {
      typeValues({ type: this.certificateSituation }).then((res) => {
        console.log(res)
        if (res.code === '200') {
          this.Situation = res.data
        }
      })
    },
    // ----------------------------------方法--------------------
    // 返回
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.$emit('doback')
    },
    // 提交添加数据
    handleCreate() {
      //   console.log('提交：' + JSON.stringify(this.temp))
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.FormLoading = true
          if (this.dialogStatus === 'add') {
            console.log('3333333333333', this.temp)
            // this.temp.certificatePhoto = this.attachTypeYingyezhizhao
            SaveList(this.temp).then((response) => {
              console.log('数据聚聚聚' + JSON.stringify(response))
              this.FormLoading = false
              if (response.code === '200') {
                this.dialogFormVisible = false
                this.$notify({
                  title: '提示',
                  message: '添加成功',
                  type: 'success',
                  duration: 2000
                })
                this.handleReturn('true')
              } else {
                this.$notify({
                  title: '提示',
                  message: '添加失败',
                  type: 'error',
                  duration: 2000
                })
              }
            })
          } else {
            // this.temp.certificatePhoto = this.attachTypeYingyezhizhao
            Update(this.temp).then((response) => {
              this.FormLoading = false
              if (response.code === '200') {
                // this.getList()
                this.dialogFormVisible = false
                this.$notify({
                  title: '提示',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.handleReturn('true')
              } else {
                this.$notify({
                  title: '失败',
                  message: '修改失败',
                  type: 'error'
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.addinputwda {
  width: 600px;
}
</style>
