/* eslint-disable vue/require-valid-default-prop */
/* eslint-disable vue/require-valid-default-prop */
<template>
  <div>
    <Modal class="tableModal"
           :title="title"
           :footer-hide="true"
           :closable="false"
           :mask-closable="false"
           :value="value"
           v-show="sync_value"
           label-position="right"
           :width="dragWidth"
           @on-visible-change="visible">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="labelWidth"
            label-position="right">
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='input'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <Input v-model="formValidate[item.key]"
                 :placeholder="`请输入${item.title}`"
                 :clearable="true"
                 :type="item.inputType" />
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='radio'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <RadioGroup v-model="formValidate[item.key]">
            <Radio v-for="radio in radioArr"
                   :key="radio.label"
                   :label="radio.label"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='check'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <CheckboxGroup v-model="formValidate[item.key]"
                         @on-change="handleCheckChange($event,item.key)">
            <Checkbox v-for="check in checkBoxArr"
                      :key="check.label"
                      :label="check.label"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='select'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <Select v-model="formValidate[item.key]"
                  :placeholder="`请输入${item.title}`"
                  :clearable="true"
                  :filterable="true"
                  @on-change="handleSelectChange($event,item.key)">
            <Option v-for="select in selectArr"
                    :value="select.value"
                    :key="select.value">{{select.label}}</Option>
          </Select>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='selectMultify'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <Select v-model="formValidate[item.key]"
                  :placeholder="`请输入${item.title}`"
                  :filterable="true"
                  :multiple="true"
                  @on-change="handleSelMultipyChange($event,item.key)">
            <Option v-for="select in selectArr"
                    :value="select.value"
                    :key="select.value">{{select.label}}</Option>
          </Select>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='date'||item.type=='datetime'&&item.isShow!=false"
                  format="yyyy-MM-dd"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <DatePicker v-model="formValidate[item.key]"
                      :type="item.type"
                      :transfer="true"
                      :placeholder="`请输入${item.title}`"
                      style="width: 260px"></DatePicker>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='daterange'||item.type=='datetimerange'&&item.isShow!=false"
                  format="yyyy-MM-dd HH:mm:ss"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <DatePicker v-model="formValidate[item.key]"
                      :type="item.type"
                      :transfer="true"
                      :placeholder="`请输入${item.title}`"
                      style="width: 260px"></DatePicker>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='switch'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <i-switch v-model="formValidate[item.key]">
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
        </FormItem>
        <FormItem v-for="item in column"
                  v-show="item.key&&item.key !== 'handle'&&item.type=='upload'&&item.isShow!=false"
                  :key="item.key"
                  :label="`${item.title}`"
                  :prop="item.key">
          <Upload type="drag"
                  name="formFile"
                  :headers="headers"
                  :action="baseApi"
                  :format="['jpg','jpeg','png']"
                  :show-upload-list="false"
                  :on-success="handleImageSuccess"
                  v-model="formValidate[item.key]">
            <img v-if="imageUrl||formValidate[item.key]"
                 :src="imageUrl||formValidate[item.key]"
                 class="avatar">
            <div v-else
                 style="padding: 20px 0">
              <Icon type="ios-cloud-upload"
                    size="52"
                    style="color: #3399ff"></Icon>
              <p>点击上传</p>
            </div>
          </Upload>
        </FormItem>
      </Form>
      <div class="formModalFooter">
        <Button @click="handleReset">取消</Button>
        <Button type="primary"
                @click="handleSubmit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
// import propsync from 'vue-propsync'
// import {tel,name,select,selectMultipy,radio,checkbox,dateTime,dateTimeRange,text,number} from '@/components/form/Format.js'
export default {
  name: 'TableModal',
  // mixins: [propsync],
  props: {
    column: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => []
    },
    value: {
      type: Boolean,
      default: false,
      isSync: true // 需要开启双向绑定的一定要写这句话，默认不会将所有的 prop 开启双向绑定
    },
    dragWidth: {
      type: [Number, String],
      default: '30'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    radioArr: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => []
    },
    checkBoxArr: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => []
    },
    selectArr: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => []
    },
    curColumn: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => {}
    },
    title: {
      type: String,
      default: '新增列表'
    }
  },
  watch: {
    curColumn (newCurCol) {
      // eslint-disable-next-line eqeqeq
      if (this.$attrs.action == 'edit') {
        for (var index in this.curColumn) {
          this.column.forEach(item => {
            // eslint-disable-next-line eqeqeq
            if (item.key == index) {
              this.formValidate[item.key] = this.curColumn[index]
            }
          })
        }
      }
    }
  },
  data () {
    return {
      sync_value: true,
      baseApi: this.prefix + 'Appliaction/AppImg',
      imageUrl: '', // 图片地址
      formValidate: this.$attrs.formValidate,
      ruleValidate: this.$attrs.ruleValidate,
      labelWidth: this.$attrs.labelWidth,
      headers: {
        token: localStorage.token
      }
    }
  },
  mounted () {
    // this.validate()
  },
  created () {

  },
  updated () {
  },
  methods: {
    // 应用图标上传成功
    handleImageSuccess (res, file) {
      // eslint-disable-next-line eqeqeq
      if (res.code == 0) {
        this.formValidate.imgUrl = res.data
      }
      // this.imageUrl = window.URL.createObjectURL(new Blob(file.raw));
      this.imageUrl = this.prefixImg + res.data
    },
    validate () {
      this.column.forEach((item, index) => {
        // eslint-disable-next-line eqeqeq
        if (item.key && item.key !== 'handle' && item.type == 'input' && item.inputType == 'text') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = text()
          // eslint-disable-next-line eqeqeq
        } if (item.key && item.key !== 'handle' && item.type == 'input' && item.inputType == 'number') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = number()
          // eslint-disable-next-line eqeqeq
        } else if (item.key && item.key !== 'handle' && item.type == 'check') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = checkbox()
          // eslint-disable-next-line eqeqeq
        } else if (item.key && item.key !== 'handle' && item.type == 'radio') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = radio()
          // eslint-disable-next-line eqeqeq
        } else if (item.key && item.key !== 'handle' && item.type == 'select') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = select()
          // eslint-disable-next-line eqeqeq
        } else if (item.key && item.key !== 'handle' && item.type == 'selectMultify') {
          this.ruleValidate[item.key] = [{ required: true, type: 'array', min: 1, message: '请至少选择一个', trigger: 'change' }]
          // eslint-disable-next-line no-mixed-operators
        } else if (item.key && item.key !== 'handle' && item.type === 'date' || item.type === 'datetime') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = dateTime()
          // eslint-disable-next-line no-mixed-operators
        } else if (item.key && item.key !== 'handle' && item.type === 'daterange' || item.type === 'datetimerange') {
          // eslint-disable-next-line no-undef
          this.ruleValidate[item.key] = dateTimeRange()
        }
      })
    },
    handleCheckChange (data, key) {
      // eslint-disable-next-line eqeqeq
      if (data.length == 0) {
        this.formValidate[key] = []
      } else {
        this.formValidate[key] = data
      }
    },
    handleSelectChange (data, key) {
      // eslint-disable-next-line eqeqeq
      if (data == undefined) {
        this.formValidate[key] = ''
      } else {
        this.formValidate[key] = data
      }
    },
    handleSelMultipyChange (data, key) {
      // eslint-disable-next-line eqeqeq
      if (data.length == 0) {
        this.formValidate[key] = []
      } else {
        this.formValidate[key] = data
      }
    },
    handleSubmit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          // eslint-disable-next-line eqeqeq
          if (this.title == '新增列表') {
            this.$emit('addNewCols', this.formValidate)
            // eslint-disable-next-line eqeqeq
          } else if (this.title == '编辑列表') {
            this.$emit('editCurCloumn', this.formValidate)
          }
          this.resetForm()
        } else {

        }
      })
    },
    resetForm () {
      this.$refs['formValidate'].resetFields()
      this.sync_value = false
    },
    handleReset () {
      this.sync_value = false
      this.$refs['formValidate'].resetFields()
    },
    visible (visible) {
      // eslint-disable-next-line eqeqeq
      if (visible == false) {
        this.resetForm()
      }
    }
  }
}
</script>

<style lang="less">
.tableModal {
  .ivu-modal {
    width: 550px;
  }
  .ivu-form .ivu-form-item-label {
    text-align: left;
  }
  .ivu-upload {
    width: 150px;
    height: 150px;
  }
  .avatar {
    width: 100%;
    height: 100%;
  }
  .ivu-upload {
    height: 150px;
  }
}
</style>