<template>
  <el-form
    :class="{'form-container':labelWidth,'towCol':config.col&&config.col==2,'threeCol':config.col&&config.col==3}"
    class="alFormContainer"
    :style="{'--width':labelWidth}"
    :model="value"
    :rules="rules"
    :label-width="labelWidth">
    <slot v-if="!config.content"></slot>
    <div v-else class="innerContainer">
      <div v-for="(item,index) in config.content" :key="index" style="font-size: 0;" class="alFormItem" :style="{'margin-top':((config.col&&config.col==2&&index<2)||(config.col&&config.col==3&&index<3)||index==0)?'0':''}">
          <al-input
            v-if="item.component=='input'||item.component=='input-selection'||item.component=='input-search'||item.component=='input-required'"
            :required = "item.required"
            :label="item.label"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :showPassword="item.showPassword"
            :labelWidth="item.labelWidth"
            :type="item.type"
            :height="item.height"
            :autocomplete="item.autocomplete"
            :queryData="item.queryData"
            :prefixIcon="item.prefixIcon"
            :suffixIcon="item.suffixIcon"
            :placeholder="item.placeholder"
            :checkLevel="item.checkLevel"
            :width="'100%'"
            :prop="item.prop"
            v-model="value[item.keyWord]">
          </al-input>

        <al-switch
          v-if="item.component=='switch'"
          v-model="value[item.keyWord]"
          :label="item.label"
          :labelWidth="item.labelWidth"
          :width="'100%'"
          :height="item.height"
          :activeText="item.activeText"
          :inactiveText="item.inactiveText"
          :disabled="item.disabled"
          :prop="item.prop">
        </al-switch>

        <al-input-num
          v-if="item.component=='inputNum'"
          v-model="value[item.keyWord]"
          :label="item.label"
          :labelWidth="item.labelWidth"
          :width="'100%'"
          :height="item.height"
          :required = "item.required"
          :disabled="item.disabled"
          :prop="item.prop"
          :step="item.step"
          :max="item.max"
          :min="item.min">
        </al-input-num>

        <al-cascader
          v-if="item.component=='cascader'"
          v-model="value[item.keyWord]"
          :label="item.label"
          :labelWidth="item.labelWidth"
          :width="'100%'"
          :height="item.height"
          :required = "item.required"
          :disabled="item.disabled"
          :prop="item.prop"
          :checkStrictly="item.checkStrictly"
          :multiple="item.multiple"
          :mixed="item.mixed"
          :lazyLoad="item.lazyLoad"
          :trigger="item.trigger"
          :options="item.options"
          :clearable="item.clearable">
        </al-cascader>

        <al-select
          v-if="item.component=='select'"
          v-model="value[item.keyWord]"
          :label="item.label"
          :labelWidth="item.labelWidth"
          :width="'100%'"
          :height="item.height"
          :required = "item.required"
          :disabled="item.disabled"
          :clearable="item.clearable"
          :prop="item.prop"
          :multiple="item.multiple"
          :filterable="item.filterable"
          :loading="item.loading"
          :remote="item.remote"
          :options="item.options"
          :isGroup="item.isGroup"
          :remote-method="item.remoteMethod"
          @change="item.change">
        </al-select>

        <al-radio
          v-if="item.component=='radio'"
          v-model="value[item.keyWord]"
          :label="item.label"
          :labelWidth="item.labelWidth"
          :width="'100%'"
          :height="item.height"
          :required = "item.required"
          :disabled="item.disabled"
          :prop="item.prop"
          :options="item.options"
          :type="item.type"
          :border="item.border">
        </al-radio>

        <al-checkbox
          v-if="item.component=='checkbox'"
          v-model="value[item.keyWord]"
          :label="item.label"
          :labelWidth="item.labelWidth"
          :width="'100%'"
          :height="item.height"
          :required = "item.required"
          :disabled="item.disabled"
          :prop="item.prop"
          :options="item.options"
          :type="item.type"
          :border="item.border"
          :max="item.max"
          :min="item.min"
          :indeterminate="item.indeterminate">
        </al-checkbox>
        <al-button v-if="item.component=='submit'" type="primary" :style="{ marginLeft : index%3==0||!(config.col&&config.col==2||config.col&&config.col==3)?labelWidth:''}" @click="item.onSubmit">{{item.text}}</al-button>
        <al-button v-if="item.component=='cancel'" type="plain" :style="{ marginLeft : index%3==0||!(config.col&&config.col==2||config.col&&config.col==3)?labelWidth:''}">{{item.text}}</al-button>
        <div  v-if="item.component=='submitCancel'" style="margin-left: 100px">
          <al-button type="primary" @click="item.onSubmit">{{item.text1?item.text1:'提交'}}</al-button>
          <al-button type="plain"  @click="item.onCancel">{{item.text2?item.text2:'取消'}}</al-button>
        </div>
        <al-date-picker
          v-if="item.component=='datePicker'"
          :placeholder="item.placeholder"
          :prop="item.prop"
          :label="item.label"
          :required = "item.required"
          :labelWidth="item.labelWidth"
          :type="item.type"
          width="100%"
          v-model="value[item.keyWord]"
          :pickerOptions="item.pickerOptions">
        </al-date-picker>
      </div>
    </div>
  </el-form>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
            }
        },
        props: {
            rules: {
                type: Object,
                default() {
                    return {}
                }
            },
            value: {
                type: Object,
                default() {
                    return {}
                }
            },
            labelWidth: {
                type: String,
                default: '100px'
            },
            config: {
                type: Object,
                default() {
                    return {}
                }
            },
            localStoragePrefix:{
                type:String,
                default:''
            },pageVm:{
                type:Object,
                default() {
                    return null;
                }
            }
        },
        watch: {
            config: {
                deep: true,
                immediate: true,
                handler() {
                    var that = this.pageVm
                    var _this = this
                    if (this.config && this.config.content && this.config.content.length) {
                        for (var i = 0; i < this.config.content.length; i++) {
                            //下拉框
                            if (this.config.content[i].component == 'select' && !this.config.content[i].change) {
                                this.config.content[i].change = () => {

                                }
                            }
                            //提交按钮
                            if (this.config.content[i].component == 'submit') {
                                if(!this.config.content[i].onSubmit){
                                    this.config.content[i].onSubmit = () => {
                                        console.log(1131)

                                    }
                                }
                                if(!this.config.content[i].onCancel){
                                    this.config.content[i].onCancel = () => {
                                    }
                                }
                            }
                            if (this.config.content[i].component == 'input-selection') {
                                this.config.content[i].suffixIcon="el-icon-arrow-down"
                            }
                            if (this.config.content[i].component == 'input-search') {
                                this.config.content[i].suffixIcon='el-icon-search'
                            }
                            if (this.config.content[i].component == 'input-required') {
                                this.config.content[i].required=true
                            }
                        }
                    }
                }
            },
            value: {
                deep: true,
                handler() {
                    if(this.localStoragePrefix){
                        localStorage.setItem("form"+this.localStoragePrefix,JSON.stringify(this.value))
                    }
                    this.$emit('input', this.value);
                }
            }
        },
        methods:{
        },
        mounted(){
            if(this.localStoragePrefix){
                if(JSON.parse(localStorage.getItem("form"+this.localStoragePrefix))){
                    this.$emit('input', JSON.parse(localStorage.getItem("form"+this.localStoragePrefix)));
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .alFormItem {
    margin-top: 20px;
    display: inline-block;
    width: 100%;
    vertical-align: top;
  }

  .towCol {
    .alFormItem {
      width: calc((100% - 20px) / 2);
      margin-right: 20px;
      max-width: auto;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }

    .innerContainer {
      max-width: none;
    }
  }

  .threeCol {
    .alFormItem {
      width: calc((100% - 40px) / 3);
      margin-right: 20px;
      max-width: auto;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    .innerContainer {
      max-width: none;
    }
  }

  .alFormContainer {
    text-align: center;
  }

  .innerContainer {
    /*display: inline-block;*/
    margin: 0 auto;
    text-align: left;
    max-width: 468px;
  }

  .form-container {

    /deep/ {
      .label {
        width: #{'var(--width)'} !important;
      }

      .autoWidth {
        width: calc(100% - #{'var(--width)'}) !important;
      }

      .autoWidthLeft {
        margin-left: #{'var(--width)'} !important;
      }
    }
  }

</style>
