<template>
<el-dialog
  class="creator"
  width="80%"
  :visible="showCreator"
  @close="close"
>
  <el-form
    inline
    ref="form"
    label-position="top"
    :model="formData"
    :rules="rules"
  >
    <el-form-item label="车牌号" prop="vehicleNo">
      <el-input v-model="formData.vehicleNo" :disabled="mode === 'edit'"></el-input>
    </el-form-item>
    <!--筛选框-->
    <el-form-item label="车辆类型" prop="businessType">
      <el-select v-model="formData.businessType">
        <el-option
          v-for="item in $keys.warehouseBasic.vehicle.businessType"
          :key="item.id"
          :label="item.name"
          :value="item.key"
        ></el-option>
      </el-select>
    </el-form-item>

    <!--输入框-->
    <template v-for="item in inputs">
      <el-form-item
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
      >
        <el-input v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
      </el-form-item>
    </template>

  </el-form>

  <div class="operation-info" v-if="mode === 'detail'">
    <el-col :span="6">创建人登录名:{{detailData.createLoginName}}</el-col>
    <el-col :span="6">创建时间: {{detailData.createTime}}</el-col>
    <el-col :span="6">修改人登录名: {{detailData.modifyLoginName}}</el-col>
    <el-col :span="6">修改时间: {{detailData.modifyTime}}</el-col>
  </div>
  <div class="dialog__foot">
    <template v-if="mode !== 'detail'">
      <el-button type="primary" @click="confirm">确认</el-button>
      <el-button type="primary" @click="close">取消</el-button>
    </template>
  </div>
</el-dialog>
</template>

<script>

const ruleObj = { required: true, message: '必填', trigger: 'change' }
export default {
  props: {
    detailData: {
      type: Object,
      default: () => { return {} },
    },
    mode: {
      type: String,
      default: 'create',
    },
    showCreator: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { ...val }
      }
    },
  },
  created () {
  },
  mounted () {
  },

  data () {
    const checkWordLength = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (value.length > 15) {
        callback(new Error('最多可填15个字'))
      } else {
        callback()
      }
    }
    return {
      formData: {},
      baseUrl: '/bd_web/bdweb', // 多条件基础URL
      rules: {
        vehicleNo: [ruleObj],
        businessType: [ruleObj],
        driver: [ruleObj],
        remark: [{ validator: checkWordLength, trigger: 'change' }]
      },
      inputs: [
        { label: '驾驶员', prop: 'driver' },
        { label: '车型', prop: 'vehicleType' },
        { label: '身份证号', prop: 'driverIdentity' },
        { label: '联系电话', prop: 'driverTel' },
        { label: '备注', prop: 'remark', placeholder: '最多可填15个字' },
      ],
    }
  },
  methods: {
    // 关闭
    close () {
      this.$refs.form.resetFields()
      this.$emit('close')
    },
    // 确认按钮
    confirm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const api = this.mode === 'create' ? 'create' : 'update'
          const url = this.$API.warehouseBasic.vehicle[api]
          const param = { ...this.formData }
          this.$https.post(url, param)
            .then(data => {
              if (data.succeed) {
                this.close()
                this.$emit('createDone') // 通知父组件新增完毕
              } else {
                this.$message.error(data.errorMsg)
              }
            })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/
.el-dialog__body {
  margin-top: 20px;
  overflow: auto;
  border-bottom: 1px solid #ddd;
}
.el-collapse-item {
  margin-bottom: 20px;
}
.creator {
  &__info {
    margin-bottom: 20px;
  }
  &__info--base {
    display: flex;
    justify-content: space-between;
    > .el-collapse {
      width: 50%;
      &:first-child {
        margin-right: 20px;
      }
    }
  }
}
</style>
