<template>
  <el-dialog :title="title" :visible.sync="oneDialogVisible" @close="closePop" :modal="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="140px" style="margin-top: -30px;">
      <p style="padding: 10px;background: #f5f5f5;">基础信息</p>
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="form.state">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="2">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌号码" prop="numberPlate">
            <el-input v-model="form.numberPlate" placeholder="输入车牌"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆编码">
            <el-input v-model.number="form.code" placeholder="请输入车辆编码" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出行状态" prop="status">
            <el-select
              class="filter-item"
              v-model="form.status"
              placeholder="请选择车辆状态"
              style="width:100%"
            >
              <el-option
                v-for="(val,index) in getAllVehicleStatus() "
                :key="index"
                :label="val.val"
                :value="val.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公里数" prop="mileageLastUpdate">
            <el-input type="number" v-model="form.mileageLastUpdate" placeholder="请输入公里数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="停靠门店" prop="stopName">
            <el-select
              style="width: 100%;"
              class="filter-item"
              v-model="form.stopName"
              placeholder="请选择停靠门店"
            >
              <el-option key="1" label="全新" :value="1"></el-option>
              <el-option key="2" label="9成新" :value="2"></el-option>
              <el-option key="3" label="8成新" :value="3"></el-option>
              <el-option key="4" label="7成新" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="新旧程度" prop="vehicleStatus">
            <el-select
              style="width: 100%;"
              class="filter-item"
              v-model="form.vehicleStatus"
              placeholder="请选择新旧程度"
            >
              <el-option key="1" label="全新" :value="1"></el-option>
              <el-option key="2" label="9成新" :value="2"></el-option>
              <el-option key="3" label="8成新" :value="3"></el-option>
              <el-option key="4" label="7成新" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车身状况" prop="vehicleBodyStatus">
            <el-select
              class="filter-item"
              v-model="form.vehicleBodyStatus"
              placeholder="请选择车身状况"
              style="width:100%"
            >
              <el-option key="1" label="无剐蹭" :value="1"></el-option>
              <el-option key="2" label="微瑕疵" :value="2"></el-option>
              <el-option key="3" label="无瑕疵" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内饰" prop="vehicleInnerStatus">
            <el-select
              class="filter-item"
              v-model="form.vehicleInnerStatus"
              placeholder="请选择内饰"
              style="width:100%"
            >
              <el-option key="1" label="全新" :value="1"></el-option>
              <el-option key="2" label="9成新" :value="2"></el-option>
              <el-option key="3" label="8成新" :value="3"></el-option>
              <el-option key="4" label="7成新" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注信息"></el-input>
      </el-form-item>
      <p style="padding: 10px;background: #f5f5f5;">车辆归属</p>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属门店" prop="vehicleStatus">
            <el-select
              style="width: 100%;"
              class="filter-item"
              v-model="form.belongName"
              placeholder="请选择所属门店"
            >
              <el-option key="1" label="全新" :value="1"></el-option>
              <el-option key="2" label="9成新" :value="2"></el-option>
              <el-option key="3" label="8成新" :value="3"></el-option>
              <el-option key="4" label="7成新" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="托管人">
            <el-input v-model="form.belongToName" placeholder="请输入托管人" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="flex-aic-jcc" style="margin-top: 10px;">
      <el-button plain @click="closePop">取消</el-button>
      <el-button type="primary" class="handle-ok" @click="handleOk('form')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script type="javascript">
  import {mapGetters} from 'vuex';
  import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item.vue'
  import ElRow from 'element-ui/packages/row/src/row'
  import ElCol from 'element-ui/packages/col/src/col'
  import ElRadio from "../../../../node_modules/element-ui/packages/radio/src/radio.vue";
  import ElButton from "../../../../node_modules/element-ui/packages/button/src/button.vue";
  import {getObj} from "../../../api/vehicle/vehicleInfo";
  export default {
    props: ['title', 'oneRow'],
    components: {
      ElButton,
      ElRadio,
      ElFormItem,
      ElCol,
      ElRow
    },
    data() {
      return {
        oneDialogVisible: false,
        form: {
          state: 1, // 1、上架   2、下架
          numberPlate: undefined, // 车牌号码
          code: undefined, // 车辆编号
          status: undefined, // 出行状态
          mileageLastUpdate: undefined, // 公里数
          stopName: undefined, // 停靠门店
          belongName: undefined, // 所属门店
          belongToName: undefined, // 托管人
          vehicleInnerStatus: undefined, // 内饰：1、全新，2、9成新，3、8成新，4、7成新
          vehicleStatus: undefined, // 新旧程度：1、全新，2、9成新，3、8成新，4、7成新
          vehicleBodyStatus: undefined, // 车身状况：1、无剐蹭，2、微瑕疵，3、无瑕疵
          remark: undefined, // 备注
        },
        rules: {
          numberPlate: {
            required: true,
            message: '请输入车牌号',
            trigger: 'blur'
          },
          mileageLastUpdate: [this.integerValidator()],
          status: {
            required: true,
            message: '请选择出行状态',
            trigger: 'change'
          },
          state: {
            required: true,
            message: '请选择上下架状态',
            trigger: 'change'
          },
          stopName: {
            required: true,
            message: '请选择停靠门店',
            trigger: 'change'
          },
          vehicleStatus: {
            required: true,
            message: '请选择新旧程度',
            trigger: 'change'
          },
          vehicleBodyStatus: {
            required: true,
            message: '请选择车身状况',
            trigger: 'change'
          },
          vehicleInnerStatus: {
            required: true,
            message: '请选择内饰',
            trigger: 'change'
          },
          belongName: {
            required: true,
            message: '请选择所属门店',
            trigger: 'change'
          }
        },
      }
    },
    mounted() {
      this.oneDialogVisible = true;
      this.cleanForm() // 清空表单数据
      if(this.title == '编辑车辆'){
        // 编辑
        this.getVehicleDetail() // 获取车辆详情
      }
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 获取车辆详情
       */
      getVehicleDetail(){
        getObj(this.oneRow.id).then(response => {
          this.$utils.objectEach(response.data, (item, key) => {
            this.form[key] = item
          })
        })
      },
      /**
       * 公里数验证
       */
      integerValidator: function() {
        return {
          validator: (rule, value, callback) => {
            if (
              this.$utils.isUndefined(value) ||
              this.$utils.isNull()
            ) {
              return callback()
            }
            if (!this.$utils.isInteger(value)) {
              return callback(new Error('必须为整数'))
            }
            if (value < 1 || value > 9999999999) {
              return callback(
                new Error('编码合法范围：[1 - 9999999999]')
              )
            }
            callback()
          },
          trigger: 'blur'
        }
      },
      /**
       * 清空表单数据
       */
      cleanForm(){
        this.form = {
          state: 1, // 1、上架   2、下架
          numberPlate: undefined, // 车牌号码
          code: undefined, // 车辆编号
          status: undefined, // 出行状态
          mileageLastUpdate: undefined, // 公里数
          stopName: undefined, // 停靠门店
          belongName: undefined, // 所属门店
          belongToName: undefined, // 托管人
          vehicleInnerStatus: undefined, // 内饰：1、全新，2、9成新，3、8成新，4、7成新
          vehicleStatus: undefined, // 新旧程度：1、全新，2、9成新，3、8成新，4、7成新
          vehicleBodyStatus: undefined, // 车身状况：1、无剐蹭，2、微瑕疵，3、无瑕疵
          remark: undefined, // 备注
        }
      },
      /**
       * 关闭弹窗
       */
      closePop(){
        this.oneDialogVisible = false
        this.$emit('oneDialogEvent', false);
      },
      /**
       * 确定
       */
      handleOk(){
        this.$emit('oneDialogEvent', true);
      },
      /**
       * 出行状态
       */
      getAllVehicleStatus: function() {
        return {
          1: {
            code: 1,
            val: '正常运行'
          },
          3: {
            code: 3,
            val: '报废'
          },
          4: {
            code: 4,
            val: '出车'
          },
          6: {
            code: 6,
            val: '维修中'
          },
          7: {
            code: 7,
            val: '保养中'
          },
          8: {
            code: 8,
            val: '上牌中'
          }
        }
      },
    }
  }
</script>
