<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="addOrEditDialogFlag"
    :title="title"
    :append-to-body="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="cancel"
  >
    <el-form ref="form" :rules="rules" class="el-form-box" :model="form" label-width="120px">
      <headerTitle title="基本信息"></headerTitle>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="车牌号"
            prop="trakNumber"
            >
            <el-input v-model="form.trakNumber" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="车型"
            prop="type"
            >
            <el-input v-model="form.type" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="最大体积"
            prop="maxVolume"
            >
            <el-input v-model="form.maxVolume" clearable>
              <template slot="append">
                m³
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="载重"
            prop="loadWeight"
            >
            <el-input v-model="form.loadWeight" clearable>
              <template slot="append">
                KG
              </template>
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="载人数"
            prop="loadPersonNum"
            >
            <el-input v-model="form.loadPersonNum" clearable></el-input>
            <!--            <regions-select style="width: 100%" v-model="city" placeholder="请选择省市区" />-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="空车重量"
            prop="freeWeight"
            >
            <el-input v-model="form.freeWeight" clearable>
              <template slot="append">
                KG
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="行驶证"
            prop="drivingLicenseFile"
            >
            <fileUpload
              v-model="form.drivingLicenseFile"
              module="main"
              :limit="10"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="运输证"
            prop="transportLicenseFile"
            >
            <fileUpload
              v-model="form.transportLicenseFile"
              module="main"
              :limit="10"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="默认司机"
            prop="defaultDriver"
            >
            <el-input v-model="form.defaultDriver" @click.native="handleDriver" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="联系电话"
            prop="phone"
            >
            <el-input v-model="form.phone" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="所属公司类型"
            prop="phone"
            >
            <el-select v-model="form.belongCompanyType" style="width: 100%" @change="handleBelongCompany">
              <el-option v-for="item in belongCompanyTypeList" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="所属公司"
            prop="defaultDriver"
            >
            <el-input v-if="form.belongCompanyType==1" v-model="form.belongCompanyName"
                      @click.native="handleCompanyName" clearable></el-input>
            <el-input v-else v-model="form.belongCompanyName" clearable></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="驾驶证类型"
            prop="drivingLicenseType"
            >
            <dict-selection dict-name="驾照类型" v-model="form.drivingLicenseType"></dict-selection>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="承保公司"
            prop="insuranceCompany"
            >
            <el-input v-model="form.insuranceCompany" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="12">
          <el-form-item
            label="交强险有效期"
            prop="trafficInsuranceValidityDate"
            >
            <el-date-picker
              style="width: 100%"
              v-model="trafficInsuranceValidityDate"
              @change="(val)=>handleDate(val,'trafficInsuranceValidityStart','trafficInsuranceValidityEnd')"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="商业险有效期"
            prop="businessInsuranceValidityDate"
            >
            <el-date-picker
              style="width: 100%"
              v-model="businessInsuranceValidityDate"
              @change="(val)=>handleDate(val,'businessInsuranceValidityStart','businessInsuranceValidityEnd')"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="运输证有效期"
            prop="transportLicenxeValidityDate"
            >
            <el-date-picker
              style="width: 100%"
              v-model="transportLicenxeValidityDate"
              @change="(val)=>handleDate(val,'transportLicenxeValidityStart','transportLicenxeValidityEnd')"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="保养标准"
            prop="maintenanceStandards"
            >
            <el-input v-model="form.maintenanceStandards" clearable></el-input>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
          <el-form-item
            label="区域"
            prop="QY"
            >
            <el-row>
              <el-col :span="12">
                <regions-select style="width: 100%" v-model="city" @getCheckedNodes="getCheckedNodes"
                                placeholder="请选择省市区"/>
              </el-col>
              <el-col :span="12">
                <el-input v-model="form.addressDetail" clearable></el-input>
              </el-col>
            </el-row>

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="gps"
            prop="gps"
            >
            <el-input v-model="form.gps" clearable></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row >
        <el-col :span="24">
          <el-form-item
            label="备注"
            prop="remark"
            >
            <el-input type="textarea" v-model="form.remark" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer">
      <el-button type="primary" @click="handleSave(0)">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <driver-dialog :driver-dialog-flag.sync="driverDialogFlag" v-if="driverDialogFlag"
                   ref="driverDialogRef" @changeParent="getDriverInfo"></driver-dialog>
    <!--选择供应商-->
    <customer-list-dialog v-if="customerListDialogFlag" :customerListDialogFlag.sync="customerListDialogFlag"
                          ref="customerListDialogRef" @changeParent="getCustomerData"></customer-list-dialog>
  </ele-modal>
</template>
<script>
import {mapGetters} from "vuex";
import fileUpload from "@/components/upload/fileUpload.vue";
import RegionsSelect from "@/components/RegionsSelect/index.vue";
import {emailReg, phoneReg} from "ele-admin";
import {carInfoAPI, carSaveAPI, carUpdateAPI} from "@/api/transportManager/carBook";
import driverDialog from "./driverDialog.vue";
import customerListDialog from "@/views/financialManage/components/customerListDialog.vue";

export default {
  name: "add-or-edit-dialog",
  components: {
    RegionsSelect,
    fileUpload,
    customerListDialog,
    driverDialog
  },
  props: {
    addOrEditDialogFlag: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    ...mapGetters(['user'])
  },
  data() {
    return {
      dialogType: '',
      selectPersonDialogFlag: false,
      driverDialogFlag: false,
      customerListDialogFlag: false,
      title: '',
      form: {
        id: '',
        trakNumber: '',
        type: '',
        maxVolume: '',
        loadWeight: '',
        loadPersonNum: '',
        freeWeight: '',
        drivingLicenseType: '',
        drivingLicenseFile: [],
        transportLicenseFile: [],
        defaultDriver: '',
        belongCompanyName: '',
        belongCompanyId: '',
        belongCompanyType: 1,
        phone: '',
        transportLicenxeValidityEnd: '',
        transportLicenxeValidityStart: '',
        insuranceCompany: '',
        trafficInsuranceValidityEnd: '',
        trafficInsuranceValidityStart: '',
        businessInsuranceValidityEnd: '',
        businessInsuranceValidityStart: '',
        maintenanceStandards: '',
        addressId: '',
        addressName: '',
        gps: '',
        remark: '',
        addressDetail: '',

      },
      city: null,
      belongCompanyTypeList: [
        {
          label: '手输',
          value: 0
        },
        {
          label: '供应商',
          value: 1
        },
        {
          label: '自有',
          value: 2
        },
      ],
      transportLicenxeValidityDate: [],
      trafficInsuranceValidityDate: [],
      businessInsuranceValidityDate: [],
      rules: {
        trakNumber: [{required: true, message: '请输入车牌号', trigger: 'blur'}],
        maxVolume: [{required: true, message: '请输入最大体积', trigger: 'blur'}],
        loadWeight: [{required: true, message: '请输入载重', trigger: 'blur'}],
        freeWeight: [{required: true, message: '请输入空车重量', trigger: 'blur'},],
      }
    }
  },
  created() {

  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = type == 'add' ? '新增' : '修改'
      this.dialogType = type
      if (type == 'add') {

      } else {
        await this.getInfo(row.id)
      }
    },
    //改变所属公司类型
    handleBelongCompany(val) {
      this.form.belongCompanyId = ''
      this.form.belongCompanyName = ''
    },
    handleDate(val, startDate, endDate) {
      if (val.length) {
        this.form[startDate] = val[0];
        this.form[endDate] = val[1];
      } else {
        this.form[startDate] = '';
        this.form[endDate] = '';
      }
    },
    //获取详情
    async getInfo(id) {
      this.form = await carInfoAPI(id)
      this.city = this.form.addressId ? this.form.addressId.split(',') : null;
      this.transportLicenxeValidityDate = this.form.transportLicenxeValidityStart ? [this.form.transportLicenxeValidityStart, this.form.transportLicenxeValidityEnd] : []
      this.trafficInsuranceValidityDate = this.form.trafficInsuranceValidityStart ? [this.form.trafficInsuranceValidityStart, this.form.trafficInsuranceValidityEnd] : []
      this.businessInsuranceValidityDate = this.form.businessInsuranceValidityStart ? [this.form.businessInsuranceValidityStart, this.form.businessInsuranceValidityEnd] : []
    },
    //
    handleSave(flag) {
      this.$refs.form.validate(async valid => {
        if (!valid) return this.$message.warning('有必填项未填，请检查')
        const API = this.dialogType == 'add' ? carSaveAPI : carUpdateAPI
        const id = await API(this.form)
        this.$message.success('操作成功')
        this.done()
        this.cancel()
      })
    },
    getCheckedNodes(arr = []) {
      let list = Array.from(arr);
      if (list.length == 0) {
        this.form.addressId = ''
        this.form.addressName = ''
      } else {
        this.form.addressId = list[0].path.join(',');
        this.form.addressName = list[0].pathLabels.join(',');
      }
    },
    handleDriver(e) {
      if (e.target.nodeName == 'I') {
        this.form = Object.assign({}, this.form, {
          defaultDriver: '',
          defaultDriverId: '',
          phone: '',
        })
        return
      }
      this.driverDialogFlag = true
    },
    getDriverInfo(row) {
      this.form.defaultDriver = row.driverName
      this.form.defaultDriverId = row.driverId
      this.form.phone = row.phone
    },
    handleCompanyName(e) {
      if (e.target.nodeName == 'I') {
        this.form = Object.assign({}, this.form, {
          belongCompanyName: '',
          belongCompanyId: '',
        })
        return
      }
      let params = {
        id: this.form.belongCompanyId,
        assetTreeId: '19',
        classType: '2',
        titleName: '选择供应商',
      }
      this.customerListDialogFlag = true
      this.$nextTick(() => {
        this.$refs.customerListDialogRef.init(params)
      })

    },
    getCustomerData(row) {
      this.form.belongCompanyName = row.name
      this.form.belongCompanyId = row.id
    },
    //刷新主列表数据
    done() {
      this.$emit('reload')
    },
    //关闭弹窗
    cancel() {
      this.$emit('update:addOrEditDialogFlag', false)
    }
  }
}
</script>
<style scoped lang="scss">

</style>
