<template>
  <a-drawer width="85%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="所属消防站" prop="deptId">
            <a-tree-select
              v-model="form.deptId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="deptOptions"
              placeholder="请选择"
              :replaceFields="{ children: 'children', title: 'label', key: 'id', value: 'id' }"
              tree-default-expand-all
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车牌号" prop="plateNumber">
            <a-input v-model="form.plateNumber" placeholder="请输入车牌号" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="负责人" prop="userId">
            <a-select placeholder="请选择负责人" v-model="form.userId">
              <a-select-option v-for="(d, index) in userList" :key="index" :value="d.userId">{{
                d.nickName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车辆类型" prop="categoryId">
            <a-tree-select
              v-model="form.categoryId"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="carTypeList"
              placeholder="请选择"
              :replaceFields="{ children: 'children', title: 'categoryName', key: 'categoryId', value: 'categoryId' }"
              tree-default-expand-all
              show-search
              tree-node-filter-prop="title"
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="是否物联：" prop="iot">
            <a-select placeholder="请选择是否物联" v-model="form.iot">
              <a-select-option v-for="(d, index) in iotOptions" :key="index" :value="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车辆来源" prop="source">
            <a-select placeholder="请选择车辆来源" v-model="form.source">
              <a-select-option v-for="(d, index) in sourceOptions" :key="index" :value="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="国产/进口" prop="domesticImport">
            <a-select placeholder="请选择国产/进口" v-model="form.domesticImport">
              <a-select-option v-for="(d, index) in domesticImportOptions" :key="index" :value="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="制造国" prop="manufactureCountry">
            <a-input v-model="form.manufactureCountry" placeholder="请输入制造国" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="制造企业" prop="manufactureCompany">
            <a-input v-model="form.manufactureCompany" placeholder="请输入制造企业" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车辆品牌" prop="brand">
            <a-input v-model="form.brand" placeholder="请输入车辆品牌" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="车辆型号" prop="model">
            <a-input v-model="form.model" placeholder="请输入车辆型号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车辆识别代码" prop="identificationCode">
            <a-input v-model="form.identificationCode" placeholder="请输入车辆识别代码" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="车辆颜色" prop="color">
            <a-input v-model="form.color" placeholder="请输入车辆颜色" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="燃油种类" prop="fuelType">
            <a-input v-model="form.fuelType" placeholder="请输入燃油种类" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="发动机号" prop="engineNumber">
            <a-input v-model="form.engineNumber" placeholder="请输入发动机号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车辆排量" prop="emissions">
            <a-input v-model="form.emissions" placeholder="请输入车辆排量" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="发动机功率" prop="power">
            <a-input v-model="form.power" placeholder="请输入发动机功率" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="长度" prop="length">
            <a-input v-model="form.length" placeholder="请输入长度" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="宽度" prop="width">
            <a-input v-model="form.width" placeholder="请输入宽度" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="高度" prop="height">
            <a-input v-model="form.height" placeholder="请输入高度" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="油箱容积/L" prop="fuelCapacity">
            <a-input v-model="form.fuelCapacity" placeholder="请输入油箱容积/L" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="座位数量" prop="seatNumber">
            <a-input v-model="form.seatNumber" placeholder="请输入座位数量" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="气缸数量" prop="cylinderNumber">
            <a-input v-model="form.cylinderNumber" placeholder="请输入气缸数量" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="出厂日期" prop="manufactureDate">
            <a-date-picker
              style="width: 100%"
              v-model="form.manufactureDate"
              format="YYYY-MM-DD HH:mm:ss"
              allow-clear
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <!-- <a-col :span="10">
          <a-form-model-item label="sim卡号" prop="simNumber">
            <a-input v-model="form.simNumber" placeholder="请输入sim卡号" />
          </a-form-model-item>
        </a-col> -->

        <a-col :span="10">
          <a-form-model-item label="照片" prop="photo">
            <file-upload v-model="photoUrl" type="image" module="car" @UpdateImg="UpdateImgs"></file-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="10">
          <a-form-model-item label="联系电话" prop="phone">
            <a-input v-model="form.phone" placeholder="请输入联系电话" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车主姓名" prop="owner">
            <a-input v-model="form.owner" placeholder="请输入车主姓名" />
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <!-- <a-row>
        <a-col :span="10">
          <a-form-model-item label="第三方车辆ID" prop="thirdVehicledId">
        <a-input v-model="form.thirdVehicledId" placeholder="请输入第三方车辆ID" />
      </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="液位展示JSON串" prop="liquidConfig">
        <a-input v-model="form.liquidConfig" placeholder="请输入液位展示JSON串" />
      </a-form-model-item>
        </a-col>
      </a-row> -->
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="装备日期" prop="allocateDate">
            <a-date-picker style="width: 100%" v-model="form.allocateDate" format="YYYY-MM-DD HH:mm:ss" allow-clear />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="车速限制" prop="speedLimit">
            <a-input v-model="form.speedLimit" placeholder="请输入车速限制" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="文档" prop="document">
            <file-upload
              v-model="documentUrl"
              type="file"
              module="car_document"
              @UpdateImg="UpdateDociment"
              :title="title"
            ></file-upload>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="10">
          <a-form-model-item label="车辆类型" prop="type">
            <a-select
              placeholder="请选择车辆类型"
              v-model="form.type"
              show-search
              :filter-option="searchBrand"
              :autoClearSearchValue="false"
              @change="handleChange"
            >
              <a-select-option v-for="(d, index) in typeOptions" :key="index" :value="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col> -->
      </a-row>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="状态" prop="status">
            <a-select placeholder="请选择" v-model="form.status">
              <a-select-option v-for="(d, index) in statusOptions" :key="index" :value="d.value">{{
                d.label
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="百公里油耗" prop="fuelConsumption">
            <a-input v-model="form.fuelConsumption" placeholder="请输入百公里油耗" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- <a-row>
      <a-col :span=10>
        <a-form-model-item label="重庆车辆ID" prop="cqVehicleId">
        <a-input v-model="form.cqVehicleId" placeholder="请输入重庆车辆ID" />
      </a-form-model-item>
      </a-col>
      <a-col :span=10>
        <a-form-model-item label="定位数据" prop="location">
        <a-input v-model="form.location" placeholder="请输入定位数据" />
      </a-form-model-item>
      </a-col>
     </a-row> -->
      <a-row>
        <!-- <a-col :span="10">
        <a-form-model-item label="电子围栏ID" prop="electricFenceId">
        <a-input v-model="form.electricFenceId" placeholder="请输入电子围栏ID" />
      </a-form-model-item>
      </a-col> -->
        <a-col :span="10">
          <a-form-model-item label="价格" prop="bidPrice">
            <a-input v-model="form.bidPrice" placeholder="请输入价格" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="离线时间" prop="offineTime">
            <a-input v-model="form.offineTime" placeholder="请输入离线时间" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="10">
          <a-form-model-item label="离线时间" prop="offineTime">
            <a-input v-model="form.offineTime" placeholder="请输入离线时间" />
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <a-form-model-item label="备注" prop="remark">
        <a-input v-model="form.remark" placeholder="请输入内容" type="textarea" allow-clear />
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="submitForm"> 保存 </a-button>
          <a-button type="dashed" @click="cancel"> 取消 </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getCar, addCar, updateCar, getUserList } from '@/api/clw/car'

export default {
  name: 'CreateForm',
  props: {
    sourceOptions: {
      type: Array,
      required: true,
    },
    domesticImportOptions: {
      type: Array,
      required: true,
    },
    typeOptions: {
      type: Array,
      required: true,
    },
    statusOptions: {
      type: Array,
      required: true,
    },
    iotOptions: {
      type: Array,
      required: true,
    },
    deptOptions: {
      type: Array,
      required: true,
    },
    carTypeList: {
      type: Array,
      required: true,
    },
  },
  components: {},
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        deptId: null,

        plateNumber: null,

        userId: null,

        categoryId: null,

        terminalBind: null,

        source: null,

        domesticImport: null,

        manufactureCountry: null,

        manufactureCompany: null,

        brand: null,

        model: null,

        identificationCode: null,

        color: null,

        fuelType: null,

        engineNumber: null,

        emissions: null,

        power: null,

        length: null,

        width: null,

        height: null,

        fuelCapacity: null,

        seatNumber: null,

        cylinderNumber: null,

        manufactureDate: null,

        simNumber: null,

        type: null,

        phone: null,

        owner: null,

        thirdVehicledId: null,

        liquidConfig: null,

        allocateDate: null,

        remark: null,

        document: null,

        photo: null,

        status: null,

        fuelConsumption: null,

        cqVehicleId: null,

        location: null,

        electricFenceId: null,

        bidPrice: null,

        iot: null,

        offineTime: null,

        speedLimit: null,
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        deptId: [{ required: true, message: '所属消防站不能为空', trigger: 'change' }],

        plateNumber: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],

        userId: [{ required: true, message: '负责人不能为空', trigger: 'change' }],

        categoryId: [{ required: true, message: '车辆类型不能为空', trigger: 'change' }],

        iot: [{ required: true, message: '请选择是否接入物联网', trigger: 'change' }],

        source: [{ required: true, message: '车辆来源不能为空', trigger: 'change' }],

        domesticImport: [{ required: true, message: '国产/进口不能为空', trigger: 'change' }],

        // manufactureCountry: [{ required: true, message: '制造国不能为空', trigger: 'blur' }],

        // manufactureCompany: [{ required: true, message: '制造企业不能为空', trigger: 'blur' }],

        // brand: [{ required: true, message: '车辆品牌不能为空', trigger: 'blur' }],

        // model: [{ required: true, message: '车辆型号不能为空', trigger: 'blur' }],

        // identificationCode: [{ required: true, message: '车辆识别代码不能为空', trigger: 'blur' }],

        // color: [{ required: true, message: '车辆颜色不能为空', trigger: 'blur' }],

        // fuelType: [{ required: true, message: '燃油种类不能为空', trigger: 'blur' }],

        // engineNumber: [{ required: true, message: '发动机号不能为空', trigger: 'blur' }],

        // emissions: [{ required: true, message: '车辆排量不能为空', trigger: 'blur' }],

        // power: [{ required: true, message: '发动机功率不能为空', trigger: 'blur' }],

        // length: [{ required: true, message: '长度不能为空', trigger: 'blur' }],

        // width: [{ required: true, message: '宽度不能为空', trigger: 'blur' }],

        // height: [{ required: true, message: '高度不能为空', trigger: 'blur' }],

        // fuelCapacity: [{ required: true, message: '油箱容积/L不能为空', trigger: 'blur' }],

        // seatNumber: [{ required: true, message: '座位数量不能为空', trigger: 'blur' }],

        // cylinderNumber: [{ required: true, message: '气缸数量不能为空', trigger: 'blur' }],
      },
      userList: [],
      title: '',
      photoUrl:'',
      documentUrl:''
    }
  },
  filters: {},
  created() {
    this.funUserList()
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    onClose() {
      this.open = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.formType = 1
      this.form = {
        deptId: null,

        plateNumber: null,

        userId: null,

        categoryId: null,

        terminalBind: null,

        source: null,

        domesticImport: null,

        manufactureCountry: null,

        manufactureCompany: null,

        brand: null,

        model: null,

        identificationCode: null,

        color: null,

        fuelType: null,

        engineNumber: null,

        emissions: null,

        power: null,

        length: null,

        width: null,

        height: null,

        fuelCapacity: null,

        seatNumber: null,

        cylinderNumber: null,

        manufactureDate: null,

        simNumber: null,

        type: null,

        phone: null,

        owner: null,

        thirdVehicledId: null,

        liquidConfig: null,

        allocateDate: null,

        remark: null,

        document: null,

        photo: null,

        status: null,

        fuelConsumption: null,

        cqVehicleId: null,

        location: null,

        electricFenceId: null,

        bidPrice: null,

        iot: null,

        offineTime: null,

        speedLimit: null,
      }
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.formType = 1
      this.open = true
      this.formTitle = '添加车辆'
    },
    /** 修改按钮操作 */
    handleUpdate(row, ids) {
      this.reset()
      this.formType = 2
      const id = row ? row.id : ids
      getCar(id).then((response) => {
        this.form = response.data
        // console.log('-----初始化',response.data);
        if (response.data.photoFile) {
          this.photoUrl = '/api'+response.data.photoFile.fileUrl
        }
        if (response.data.documentFile) {
          this.documentUrl = '/api'+response.data.documentFile.fileUrl
          this.title = response.data.documentFile.fileName
        }
        this.open = true
        this.formTitle = '修改'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id !== undefined && this.form.id !== null) {
            updateCar(this.form)
              .then((response) => {
                this.$message.success('修改成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          } else {
            addCar(this.form)
              .then((response) => {
                this.$message.success('新增成功', 3)
                this.open = false
                this.$emit('ok')
              })
              .finally(() => {
                this.submitLoading = false
              })
          }
        } else {
          return false
        }
      })
    },
    funUserList() {
      const params = {
        pageSize: 100,
        pageNum: 1,
      }
      getUserList(params).then((res) => {
        this.userList = res.rows
      })
    },
    UpdateImgs(val) {
      console.log('--------图片', val)
      this.form.photo = val.response.id
      this.photoUrl = val.response.url
    },
    UpdateDociment(val) {
      console.log('---------上传', val)
      this.form.document = val.response.id
      this.documentUrl = val.response.url
      this.title = val.response.originalFilename
    },
    searchBrand(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    handleBlur() {
      console.log('blur')
    },
    handleFocus() {
      console.log('focus')
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-col-10 {
  margin-right: 30px;
}
</style>
