<template>
  <div class="date-picker-form">
    <el-form-item
      :key="item.model"
      :prop="item.model"
      :label="item.label || ''"
      :label-width="item.labelWidth || item['label-width'] || ''"
      :required="item.required || false"
      :rules="item.rules || []"
      :size="item.size"
    >
      <el-date-picker :style="{ width: item.modelWidth || item['model-width'] || '89%' }"
        :type="item.elemType || 'date'"
        v-bind="item.attrs"
        v-on="$listeners"
        v-model="formData[item.model]"
        :disabled="item.disabled || false"
        :placeholder="item.placeholder"
      ></el-date-picker>
      <template v-if="formData[item.model] !== null && formData[item.model] !== '' && formData[item.model] !== undefined">
        <div class="self-icon el-icon-circle-check" style="color: #237f00;"></div>
      </template>
      <div class="self-icon el-icon-circle-close" style="color: #b01c40;"></div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'DatePickerForm',
  componentName: 'DatePickerForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="scss">
  .self-icon {
    display: none !important;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 21px;
    line-height: 22px;
  }
  .is-error .self-icon.el-icon-circle-close { display: inline-block !important; }
  .is-success .self-icon.el-icon-circle-check { display: inline-block !important; }
</style>
