<template>
  <el-form
    ref="form"
    :key="formKey"
    class="ng-form"
    :model="model"
    :label-suffix="config.labelSuffix"
    size="mini"
    label-position="right"
    :label-width="(config.labelWidth || 80) + 'px'"
    @submit.native.prevent
  >
    <template v-for="(column, idx) in columns">
      <el-divider
        v-if="
          column.type == 'divider' &&
            (column.show == undefined ||
              column.show == true ||
              columnVisible(column.show))
        "
        :key="'divider' + idx"
        content-position="center"
        class="ng-form-divider"
      >{{ formLabel(column.label) }}</el-divider>
      <el-form-item
        v-else-if="
          column.show == undefined ||
            column.show == true ||
            columnVisible(column.show)
        "
        :key="'formitem' + idx"
        :prop="column.prop"
        :label="formLabel(column.label)"
        :rules="column.rules"
        :title="column.tip"
        :label-width="
          column.labelWidth != null ? column.labelWidth + 'px' : null
        "
      >
        <template v-if="column.labelScript" slot="label">
          {{ getScriptValue(column.labelScript, column.label) }}
        </template>

        <!--  <slot :value="column.prop" :column="column" :name="column.prop">  -->

        <!-- 输入类型判断 -->
        <el-input
          v-if="!column.type || column.type == 'input'"
          v-model="model[column.prop]"
          :placeholder="formLabel(column.placeholder)"
        />
        <el-input
          v-else-if="column.type == 'textarea'"
          v-model="model[column.prop]"
          type="textarea"
          :placeholder="formLabel(column.placeholder)"
        />
        <el-input-number
          v-else-if="column.type == 'number'"
          v-model="model[column.prop]"
          style="width: 100%"
          controls-position="right"
          :min="column.min || undefined"
          :max="column.max || undefined"
          :precision="column.precision"
          :step="column.step"
        />
        <template v-else-if="column.type == 'numbers'">
          <div v-for="(item, index) in model[column.prop]" :key="index">
            <el-row :span="24">
              <el-col :span="22">
                <!--   -->
                <el-input-number
                  v-model="model[column.prop][index]"
                  controls-position="right"
                  :min="column.min || undefined"
                  :max="column.max || undefined"
                  :precision="column.precision"
                  :step="column.step"
                />
              </el-col>
              <el-col :span="2" style="padding-left: 5px">
                <el-button
                  type="text"
                  icon="el-icon-close"
                  @click="removeData(model, column.prop, index)"
                />
              </el-col>
            </el-row>
          </div>
          <el-button
            type="text"
            icon="el-icon-plus"
            @click="addData(model, column.prop, column.type)"
          />
        </template>
        <el-radio-group
          v-else-if="column.type == 'radio'"
          v-model="model[column.prop]"
        >
          <el-radio
            v-for="(rv, index) in column.dicData"
            :key="'radio' + index"
            :label="rv.value"
          >{{ formLabel(rv.label) }}</el-radio>
        </el-radio-group>
        <el-radio-group
          v-else-if="column.type == 'radioButton'"
          v-model="model[column.prop]"
        >
          <el-radio-button
            v-for="(rv, index) in column.dicData"
            :key="'radioB' + index"
            :label="rv.value"
          >{{ formLabel(rv.label) }}</el-radio-button>
        </el-radio-group>
        <!--  <el-switch v-else-if="column.type == 'switch'" v-model="model[column.prop]"></el-switch> -->
        <el-switch
          v-else-if="column.type == 'switch'"
          v-model="model[column.prop]"
        />
        <el-date-picker
          v-else-if="column.type == 'date'"
          v-model="model[column.prop]"
          align="right"
          type="date"
          clearable
          :placeholder="formLabel(column.placeholder)"
          :format="column.format"
          :value-format="column.format"
        />
        <el-checkbox-group
          v-else-if="column.type == 'checkbox'"
          v-model="model[column.prop]"
        >
          <el-checkbox
            v-for="rv in column.dicData"
            :key="rv.value"
            :label="rv.value"
          >{{ formLabel(rv.label) }}
          </el-checkbox>
        </el-checkbox-group>
        <el-select
          v-else-if="column.type == 'select'"
          v-model="model[column.prop]"
          :clearable="
            column.clearable == null || column.clearable == undefined
              ? true
              : column.clearable
          "
          :placeholder="formLabel(column.placeholder)"
          style="width: 100%"
        >
          <el-option
            v-for="rv in column.dicData"
            :key="rv.value"
            :label="formLabel(rv.label)"
            :value="rv.value"
          />
        </el-select>
        <el-row
          v-else-if="column.type === 'slider' || column.type === 'spanGroup'"
          :gutter="20"
        >
          <el-col :span="20">
            <el-slider
              v-if="column.type === 'slider'"
              v-model="model[column.prop]"
              :show-input="column.showInput"
              :min="column.min || 0"
              :max="column.max"
              :stops="column.stops"
              :show-stops="column.showStops"
              :range="column.range"
            />
            <el-radio-group v-else v-model="model[column.prop]">
              <el-radio-button :label="6">25%</el-radio-button>
              <el-radio-button :label="12">50%</el-radio-button>
              <el-radio-button :label="18">75%</el-radio-button>
              <el-radio-button :label="24">100%</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="2" />
          <el-col :span="2">
            <i
              class="el-icon-sort"
              style="cursor: pointer"
              @click="handleChangeSpanType(column)"
            />
          </el-col>
        </el-row>
        <el-row v-else-if="column.type == 'doubleNumber'">
          <el-col :span="12">
            <el-input-number
              v-model="model[column.prop][0]"
              controls-position="right"
              :min="column.min || undefined"
              :max="column.max || undefined"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="12">
            <el-input-number
              v-model="model[column.prop][1]"
              controls-position="right"
              :min="column.min || undefined"
              :max="column.max || undefined"
              style="width: 100%"
            />
          </el-col>
        </el-row>
        <template v-else-if="column.type == 'colors'">
          <div v-for="(item, index) in model[column.prop]" :key="index">
            <el-row :span="24">
              <el-col :span="22">
                <!--   -->
                <el-color-picker
                  v-model="model[column.prop][index]"
                  show-alpha
                  :placeholder="formLabel(column.placeholder)"
                />
              </el-col>
              <el-col :span="2" style="padding-left: 5px">
                <el-button
                  type="text"
                  icon="el-icon-close"
                  @click="removeData(model, column.prop, index)"
                />
              </el-col>
            </el-row>
          </div>
          <el-button
            type="text"
            icon="el-icon-plus"
            @click="addData(model, column.prop, column.type)"
          />
        </template>
        <el-color-picker
          v-else-if="column.type == 'color'"
          v-model="model[column.prop]"
          show-alpha
          :placeholder="formLabel(column.placeholder)"
        />

        <KvList
          v-else-if="column.type == 'kv'"
          v-model="model[column.prop]"
          :key-number="column.keyNumber"
        />
        <template v-else-if="column.type == 'rules'">
          <Rules v-model="model[column.prop]" />
        </template>
        <template v-else-if="column.type == 'image'">
          <ImageUpload v-model="model[column.prop]" />
        </template>
        <template v-else-if="column.type == 'button'">
          <el-button
            :type="column.buttonType || 'text'"
            @click="btnClick(column.event)"
          >
            {{ formLabel(column.label) }}
          </el-button>
        </template>
        <!--  </slot> -->
        <!-- 插槽 -->
        <!-- <slot :name="column.prop"></slot> -->
      </el-form-item>
    </template>
  </el-form>
</template>
<script>
import { dynamicFun, getUUID, getLabel } from '../utils/index.js'
import { t, currentLang } from '../locale/index.js'
// key-value数组配置
import KvList from './kv-list.vue'
import Rules from './rules.vue'
import ImageUpload from './image.vue'
export default {
  name: 'NgForm',
  components: {
    KvList,
    Rules,
    ImageUpload
  },
  props: {
    // 当前组件整个配置 record
    record: {
      type: Object,
      required: true
    },
    // 当前表单绑定的model
    model: {
      type: Object,
      required: true
    },
    // 表单配置
    config: {
      type: Object,
      required: true
    },
    // 字段列表
    columns: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      formKey: getUUID()
    }
  },
  mounted() {},
  methods: {
    btnClick(eventName) {
      this.$ngform_bus.$emit(eventName)
    },
    // 返回函数值
    getScriptValue(script, currentValue) {
      // script , model ,currentValue , key="$"
      return dynamicFun(
        script,
        this.record,
        currentValue,
        undefined,
        undefined,
        this
      )
    },
    columnVisible(script) {
      if (script == false) return false
      if (typeof script === 'string') {
        return dynamicFun(
          script,
          this.record,
          undefined,
          undefined,
          undefined,
          this
        )
      }
      return true
    },
    // 表单标签
    formLabel(v) {
      return getLabel(v)
    },
    addData(recordProp, columnProp, type) {
      const defaultVal = '#ffffff'
      if (type == 'numbers') {
        type = 0
      }

      if (
        recordProp[columnProp] == undefined ||
        recordProp[columnProp] == null ||
        !(recordProp[columnProp] instanceof Array)
      ) {
        this.$set(recordProp, columnProp, [defaultVal])
      } else {
        recordProp[columnProp].push(defaultVal)
      }
    },
    removeData(model, prop, index) {
      const nlist = model[prop].filter((value, i) => i !== index)
      this.$set(model, prop, nlist)
    },
    handleChangeSpanType(column) {
      if (column.type === 'slider') {
        column.type = 'spanGroup'
      } else {
        column.type = 'slider'
      }
    }
  }
}
</script>
<style>
.hd-form .el-radio {
  margin-right: 10px;
}

.hd-form .el-radio .el-radio__label {
  padding-left: 5px;
}

.hd-form .hd-form-divider {
  font-size: 13px;
}

.hd-form .hd-form-divider .el-divider__text {
  font-size: 13px;
}
</style>
<!--
<style lang="scss">
.hd-form {
  .el-radio {
    margin-right: 10px;

    .el-radio__label {
      padding-left: 5px;
    }
  }

  .hd-form-divider {
    font-size: 13px;

    .el-divider__text {
      font-size: 13px;
    }
  }
}
</style> -->
