<template>
  <el-form-item
    :label="!hiddenLabel && item.label ? item.label : ''"
    :prop="item.prop"
    :rules="item.rules"
    :label-width="item.labelWidth ? `${item.labelWidth}px` : ''"
    :style="item.style || {}"
  >
    <vw-switch-bgc
      v-if="item.type === 'switch-bgc'"
      v-model="form[item.prop]"
    ></vw-switch-bgc>

    <!-- 输入框 -->
    <el-input
      v-if="item.type === 'input'"
      v-model="form[item.prop]"
      :readonly="item.readonly"
      :disabled="item.disabled"
      :placeholder="
        item.placeholder || ` ${item.label ? '请输入' + item.label : ''}`
      "
      @focus="item.focus ? item.focus($event) : {}"
      @change="item.change ? item.change($event) : {}"
      @blur="item.blur ? item.blur($event) : {}"
      :clearable="item.notClearable ? false : true"
      :maxlength="item.maxlength || item.fieldLength"
    >
      <template slot="append" v-if="item.append">{{ item.append }}</template>
      <template slot="prepend" v-if="item.preappend">{{
        item.preappend
      }}</template>
    </el-input>

    <!-- 密码框 -->

    <el-input
      v-if="item.type === 'password'"
      v-model="form[item.prop]"
      type="password"
      :placeholder="item.placeholder || `请输入 ${item.label || ''}`"
      :readonly="item.readonly"
      :disabled="item.disabled"
      @focus="item.focus ? item.focus($event) : {}"
      @change="item.change ? item.change($event) : {}"
      @blur="item.blur ? item.blur($event) : {}"
      :show-password="item.showPassword"
      clearable
      :maxlength="item.maxlength || item.fieldLength"
    >
      <template slot="append" v-if="item.append">{{ item.append }}</template>
      <template slot="prepend" v-if="item.preappend">{{
        item.preappend
      }}</template>
    </el-input>

    <!-- 文本域 -->
    <template v-if="item.type === 'textarea'">
      <el-input
        type="textarea"
        :placeholder="item.placeholder || `请输入 ${item.label || ''}`"
        :autosize="{ minRows: item.minRows, maxRows: item.maxRows }"
        v-model="form[item.prop]"
        :minlength="item.minlength"
        :disabled="item.disabled"
        :maxlength="item.maxlength || item.fieldLength"
        :show-word-limit="item.showWordLimit"
      ></el-input>
    </template>

    <!-- 计数器 -->
    <div v-if="item.type === 'number'" style="display: inline-table">
      <el-input-number
        v-model="form[item.prop]"
        :readonly="item.readonly"
        :disabled="item.disabled"
        :controls="item.controls ? true : false"
        :controls-position="item.controlsPosition"
        :placeholder="item.placeholder"
        :step="item.step"
        @blur="item.blur ? item.blur($event) : {}"
        :precision="item.precision"
        :min="item.minRows"
        :max="item.maxRows"
        style="display: table-cell"
      >
      </el-input-number>
      <span
        v-if="item.append"
        class="el-input-group__append"
        style="line-height: 28px"
        >{{ item.append }}</span
      >
    </div>

    <!-- 单选框 -->
    <el-radio-group
      v-if="item.type === 'radio'"
      v-model="form[item.prop]"
      :disabled="item.disabled"
    >
      <el-radio
        v-for="(opt, optIndex) in item.dicData"
        :key="optIndex"
        :label="opt.value"
        >{{ opt.label }}
      </el-radio>
    </el-radio-group>

    <!-- 多选框 -->
    <template v-if="item.type === 'checkbox'">
      <el-checkbox-group
        v-model="form[item.prop]"
        :disabled="item.disabled"
        @change="checkboxRepel($event)"
      >
        <el-checkbox
          v-for="(opt, optIndex) in item.dicData"
          :key="optIndex"
          :label="opt.value"
          >{{ opt.label }}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <!-- 下拉框 -->
    <template v-if="item.type === 'select'">
      <el-select
        :clearable="item.clearable"
        :filterable="item.filterable"
        :disabled="item.disabled"
        v-model="form[item.prop]"
        :placeholder="
          item.placeholder ? item.placeholder : `请选择 ${item.label || ''}`
        "
        default-first-option
        :multiple="item.multiple"
        :multiple-limit="item.limit"
      >
        <el-option
          v-for="(opt, optIndex) in item.dicData"
          :key="optIndex"
          :label="opt.label"
          :value="opt.value"
        >
        </el-option>
      </el-select>
    </template>
    <!-- 级联 -->
    <el-cascader
      v-else-if="item.type === 'cascader'"
      v-model="form[item.prop]"
      :disabled="item.disabled"
      clearable
      :filterable="item.filterable"
      :props="{ multiple: item.multiple }"
      :options="item.dicData"
      :show-all-levels="item.showAllLevels"
      :separator="item.separator"
      style="width: 100%"
    ></el-cascader>

    <!-- 时间 -->
    <el-time-picker
      v-else-if="item.type === 'time'"
      v-model="form[item.prop]"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      :value-format="item.valueFormat"
      :format="item.format"
      :disabled="item.disabled"
      style="width: 100%"
      clearable
    >
    </el-time-picker>
    <!-- 时间范围 -->
    <el-time-picker
      v-else-if="item.type === 'timerange'"
      is-range
      v-model="form[item.prop]"
      range-separator="至"
      :start-placeholder="item.startPlaceholder"
      :end-placeholder="item.endPlaceholder"
      :unlink-panels="item.unlinkPanels"
      :value-format="item.valueFormat"
      :format="item.format"
      :disabled="item.disabled"
      clearable
    >
    </el-time-picker>
    <!-- 日期 -->
    <el-date-picker
      v-else-if="item.type === 'date'"
      v-model="form[item.prop]"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      :value-format="item.valueFormat"
      :format="item.format"
      :disabled="item.disabled"
      clearable
    >
    </el-date-picker>
    <!-- 年 -->
    <el-date-picker
      v-else-if="item.type === 'year'"
      type="year"
      v-model="form[item.prop]"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      :value-format="item.valueFormat"
      :format="item.format"
      :disabled="item.disabled"
      clearable
    >
    </el-date-picker>
    <!-- 月 -->

    <el-date-picker
      type="month"
      v-else-if="item.type === 'month'"
      v-model="form[item.prop]"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      :value-format="item.valueFormat"
      :format="item.format"
      :disabled="item.disabled"
      clearable
    >
    </el-date-picker>
    <!-- 周 -->

    <el-date-picker
      type="week"
      v-else-if="item.type === 'week'"
      v-model="form[item.prop]"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      :value-format="item.valueFormat || 'yyyy-ww'"
      :format="item.format || 'yyyy 第 WW 周'"
      :disabled="item.disabled"
      clearable
    >
    </el-date-picker>
    <!-- 日期范围 -->

    <el-date-picker
      v-else-if="item.type === 'daterange'"
      type="daterange"
      range-separator="至"
      :start-placeholder="item.startPlaceholder"
      :end-placeholder="item.endPlaceholder"
      :unlink-panels="item.unlinkPanels"
      v-model="form[item.prop]"
      :value-format="item.valueFormat"
      :format="item.format"
      :disabled="item.disabled"
      clearable
    >
    </el-date-picker>

    <!-- 日期时间 -->
    <el-date-picker
      v-model="form[item.prop]"
      v-else-if="item.type === 'datetime'"
      type="datetime"
      :placeholder="item.placeholder ? item.placeholder : '请选择'"
      clearable
      :disabled="item.disabled"
      :picker-options="datetimeOptions"
      :value-format="item.valueFormat"
      :format="item.format"
    >
    </el-date-picker>

    <!-- 日期时间范围 -->
    <el-date-picker
      v-else-if="item.type === 'datetimerange'"
      v-model="form[item.prop]"
      type="datetimerange"
      :picker-options="datetimerangeOptions"
      range-separator="至"
      clearable
      :disabled="item.disabled"
      :start-placeholder="item.startPlaceholder"
      :end-placeholder="item.endPlaceholder"
      :value-format="item.valueFormat"
      :format="item.format"
      align="right"
    >
    </el-date-picker>
  </el-form-item>
</template>

<script>
/**
 * @description 自定义单组件
 */
import VwSwitchBgc from "./VwSwitchBgc.vue"
export default {
  name: "FormItemSelf",
  components: { VwSwitchBgc },
  inject: {
    vwForm: {
      default: {},
    },
  },
  props: {
    item: {
      type: Object,
    },
    form: {
      type: Object | Array,
    },
    hiddenLabel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      datetimeOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            },
          },
        ],
      },
      datetimerangeOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", [start, end])
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit("pick", [start, end])
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit("pick", [start, end])
            },
          },
        ],
      },
    }
  },

  methods: {
    // 处理number 默认为0的问题
    numberReset() {
      if (this.item.type === "number") {
        this.$watch(
          `form.${this.item.prop}`,
          (val) => {
            if (!val && val !== 0 && val !== undefined) {
              this.form[this.item.prop] = undefined
            }
          },
          { immediate: true }
        )
      }
    },
  },

  created() {
    this.numberReset()
  },
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-cascader,
.el-date-editor {
  width: 100%;
}
.el-input-number {
  width: 100%;
}

::v-deep .el-input-number .el-input__inner {
  padding: 0 2px !important;
}
::v-deep .el-input .el-input__inner {
  padding: 0 6px !important;
}
.el-radio {
  padding: 2px 0;
}

// 去除禁用样式
::v-deep .is-disabled {
  input {
    background-color: #fff;
    color: #606266;
  }

  .el-textarea__inner,
  .el-input__inner {
    background-color: #fff;
    color: #606266;
  }
  .el-checkbox__inner,
  .el-radio__inner {
    background-color: #fff;
  }
  + span.el-checkbox__label,
  + span.el-radio__label {
    color: #606266;
  }
  &.is-checked {
    .el-radio__inner {
      border-color: #1890ff;
      background: #1890ff;
      &::after {
        background: #fff;
      }
    }
    + .el-radio__label {
      color: #1890ff;
    }

    .el-checkbox__inner {
      background-color: #1890ff;
      border-color: #1890ff;
      &::after {
        border-color: #fff;
      }
    }
  }
}

::v-deep .el-form-item__label {
  font-weight: bolder;
}
</style>
