<template>
      <el-dialog
          :visible.sync="dialogVisible"
          width="80%"
          title='字段设置'
          :append-to-body='true'
          class="innerDialogBox"
          @open='openDialog'
          :close-on-click-modal='false'>
          <div class="toopBox1">
            <el-button-group >
              <el-button  @click="addPropViSayncTop()" size='mini' type="primary" icon="el-icon-plus"></el-button>
              <el-button @click='deleteAll' size='mini' type="primary" icon="el-icon-delete"></el-button>
              <el-button @click='upStupe' size='mini' type="primary" icon="el-icon-arrow-left">上移</el-button>
              <el-button @click='downStupe' size='mini' type="primary">下移<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </div>
            <el-table
              border
              height='520px'
              :data='asyncFormColumns'
              ref='multipleTableColumn'
              >
              <el-table-column  type="selection" width="55" fixed="left"></el-table-column>
              <el-table-column type="index" fixed="left"></el-table-column>
              <el-table-column prop="label" label="标题" width="150" fixed="left">
                <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.label" size='mini'></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="字段" width="150" fixed="left">
                <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.prop" size='mini'></el-input>
                </template>
              </el-table-column>
              <el-table-column  prop="type"  label="类型" width="140">
                <template slot-scope="scope">
                <el-select v-model="scope.row.type" size='mini' clearable>
                  <el-option v-for="(option,index) in typeOptions"
                      :key="index"
                      :value='option.value'
                      :label='option.label'
                    >
                  </el-option>
                </el-select>
                </template>
              </el-table-column>
              <el-table-column prop='lineNumber' label='行号' width='80' v-if='controlType!=="queryArea"'>
                  <template slot-scope="scope">
                    <el-input clearable  v-model="scope.row.lineNumber" size='mini'></el-input>
                  </template>
              </el-table-column>
              <el-table-column prop='lineSerialNumber' label='列号' width='80' v-if='controlType!=="queryArea"'>
                  <template slot-scope="scope">
                    <el-input clearable v-model="scope.row.lineSerialNumber" size='mini'></el-input>
                  </template>
              </el-table-column>
              <el-table-column prop="columnWidth" label="列宽"  width='120' v-if='controlType!=="queryArea"'>
                <template slot-scope="scope">
                  <el-input clearable  v-model="scope.row.columnWidth" size='mini'></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="labelWidth" label="label宽"  width='120'>
                <template slot-scope="scope">
                  <el-input clearable  v-model="scope.row.labelWidth" size='mini' placeholder="120"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="width" label="控件宽" width='120'>
                <template slot-scope="scope">
                  <el-input clearable v-model="scope.row.width" size='mini' placeholder="173"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="rowspan" label="跨行" v-if='controlType!=="queryArea"' width='80'>
                <template slot-scope="scope">
                  <el-input clearable  v-model="scope.row.rowspan" size='mini'></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="colspan" label="跨列" v-if='controlType!=="queryArea"' width='80'>
                <template slot-scope="scope">
                  <el-input clearable  v-model="scope.row.colspan" size='mini'></el-input>
                </template>
              </el-table-column>
               <el-table-column prop="height" label="控件高度" width='100' v-if="false">
                <template slot-scope="scope">
                  <el-input  clearable v-model="scope.row.height" size='mini'></el-input>
                </template>
              </el-table-column>
               <el-table-column prop='labelTextOverflow' label='labelOverflow' width='120' v-if="false">
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.labelTextOverflow">
                  </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop='isHide' label='隐藏控件' width='100'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isHide">
                  </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop='isHide' label='隐藏label' width='100'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isHideLabel">
                  </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop='isRequired' label='必填' width='70'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isRequired">
                  </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop='isDisabled' label='只读' width='70'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isDisabled">
                  </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop='isMoreSearch' label='更多搜索' width='100' v-if='controlType=="queryArea"'>
                  <template slot-scope="scope">
                    <el-switch v-model="scope.row.isMoreSearch">
                  </el-switch>
                  </template>
              </el-table-column>
              <el-table-column prop="spanRatio" label="SPAN比例" v-if='false' width='100'>
                <template slot-scope="scope">
                  <el-input clearable  v-model="scope.row.spanRatio" size='mini'></el-input>
                </template>
              </el-table-column>
              <el-table-column  label="操作" width='300' fixed="right">
                <template slot-scope="scope">
                  <el-button size='mini'  @click='addAsyncColumn(scope.$index)'>新增</el-button>
                  <el-button size='mini'  @click="deletAsyncProp(scope.$index)">删除</el-button>
                  <el-button size='mini' @click="upGoAsync(scope.$index)">上移</el-button>
                  <el-button size='mini' @click="downGoAsync(scope.$index)">下移</el-button>
                </template>
              </el-table-column>
            </el-table>
           <div slot="footer" class="dialog-footer">
               <el-button size='medium' type="primary" @click="asyncFormColumnSubmit">确 定</el-button>
              <el-button size='mini'  type="info" @click="dialogVisible = false">取 消</el-button>
              <el-button size='mini'  type="danger" @click="cleanAll">清空所有</el-button>
               <el-button size='mini'  type="primary" @click="addEmptyOne">添加空白行</el-button>
                <el-button size='mini'  type="danger" @click="privewCom">预览</el-button>
            </div>
            <div v-if="privewComVi" class="asyncBox">
              <hsDyncForm
                :type='controlType'
                :formColumns='formColumns_'
                :formParms='formParms'
                :config='asyncFormItemComponentTableConfig'
              ></hsDyncForm>
            </div>
      </el-dialog>

</template>
<script>
import _ from 'lodash'
import uuidv1 from 'uuid/v1'
export default {
  name: 'dyncFormPropSet',
  props: {
    value: Boolean,
    asyncFormColumns: {
      default() {
        return []
      }
    },
    controlType: {},
    elInfo: {}
  },
  data() {
    return {
      dialogVisible: false,
      typeOptions: [
        {
          value: 'input',
          label: '1输入框'
        },
        {
          value: 'hsInput',
          label: '1-1配置输入框',
          isRequireControlName: true
        },
        {
          value: 'textarea',
          label: '2多行文本框'
        },
        {
          value: 'hsSelectPlus',
          label: '3下拉框',
          isRequireControlName: true
        },
        {
          value: 'elDatePicker',
          label: '4日期范围'
        },
        {
          value: 'elDatePickerDatetime',
          label: '5日期时间'
        },
        {
          value: 'elDatePickerDate',
          label: '6日期'
        },
        {
          value: 'elSwitch',
          label: '7开关'
        },
        {
          value: 'hsFile',
          label: '8附件',
          isRequireControlName: true
        },
        {
          value: 'hsComputed',
          label: '9计算文本',
          isRequireControlName: true
        }
      ],
      formColumns_: [],
      formParms: {},
      privewComVi: false,
      asyncFormItemComponentTableConfig: {
        isHideBorder: true
      },
      emptyRow: {
        'type': 'input',
        'label': '标题1',
        'prop': 'title1',
        labelWidth: 120,
        width: 170
      },
      asyncFormColumnsCopy: []
    }
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  mounted() {

  },
  methods: {
    openDialog() {
      // this.initConfig(this.asyncFormColumns)
    },
    initConfig(data = []) {
      for (const index in data) {
        const item = this.asyncFormColumns[index]
        if (!item.uuidv1) {
          item.uuidv1 = uuidv1()
        }
      }
      this.asyncFormColumnsCopy = _.cloneDeep(data)
    },
    addPropViSayncTop() {
      const list = [_.cloneDeep(this.emptyRow)]
      this.asyncFormColumns.push(..._.cloneDeep(list))
      this.$nextTick(() => {
        const multipleTableColumn = this.$refs.multipleTableColumn
        multipleTableColumn.bodyWrapper.scrollTop = multipleTableColumn.bodyWrapper.scrollHeight
      })
    },
    cleanAll() {
      this.asyncFormColumns.splice(0, this.asyncFormColumns.length)
    },
    addEmptyOne() {
      this.asyncFormColumns.push(_.cloneDeep(this.emptyRow))
    },
    privewCom() {
      this.privewComVi = true
      const asyncFormColumns = _.cloneDeep(this.asyncFormColumns)
      this.formColumns_ = asyncFormColumns
    },
    addRow() {
      this.asyncFormColumns.push({})
    },
    deleteAll() {
      const selectedProp = this.$refs.multipleTableColumn.selection.map(item => {
        return item.prop
      })
      const list = this.asyncFormColumns.filter(item => !selectedProp.includes(item.prop))
      this.asyncFormColumns.splice(0, this.asyncFormColumns.length)
      this.asyncFormColumns.push(...list)
    },
    upStupe() {
      const selected = this.$refs.multipleTableColumn.selection
      const selectedIndexList = selected.map((item, index) => {
        return item.prop
      })
      const indexList = []
      selectedIndexList.forEach(prop => {
        const index_ = this.asyncFormColumns.findIndex(item => item.prop === prop)
        indexList.push(index_)
      })

      indexList.sort((a, b) => {
        return a - b
      })
      indexList.forEach((k, index) => {
        if (index !== 0 && indexList.includes(0)) {
          this.upSite(this.asyncFormColumns, k - 1)
        } else {
          this.upSite(this.asyncFormColumns, k)
        }
      })
    },
    downStupe() {
      const selected = this.$refs.multipleTableColumn.selection
      const selectedIndexList = selected.map((item, index) => {
        return item.prop
      })
      const indexList = []
      selectedIndexList.forEach(prop => {
        const index_ = this.asyncFormColumns.findIndex(item => item.prop === prop)
        indexList.push(index_)
      })

      indexList.sort((a, b) => {
        return b - a
      })
      indexList.forEach((k, index) => {
        if (index !== 0 && indexList.includes(this.asyncFormColumns.length - 1)) {
          this.downSite(this.asyncFormColumns, k + 1)
        } else {
          this.downSite(this.asyncFormColumns, k)
        }
      })
    },
    addAsyncColumn(index) {
      this.asyncFormColumns.splice(index + 1, 0, _.cloneDeep(this.emptyRow))
    },
    deletAsyncProp(index) {
      this.asyncFormColumns.splice(index, 1)
    },
    upGoAsync(index) {
      this.upSite(this.asyncFormColumns, index)
    },
    downGoAsync(index) {
      this.downSite(this.asyncFormColumns, index)
    },
    asyncFormColumnSubmit() {
      let f = true
      for (const index in this.asyncFormColumns) {
        const item = this.asyncFormColumns[index]
        const index_number = parseInt(index)
        if (!item.width) {
          item.width = 170
        }
        if (!item.labelWidth) {
          item.labelWidth = 120
        }
        const itemOptionType = this.typeOptions.find(xs => {
          return xs.value === item.type
        })
        if (!item.type) {
          item.type = 'text'
        }
        if (itemOptionType && !itemOptionType.isRequireControlName) {
          delete item.elInfo
          delete item.control_name
        }
        if (!item.prop && !item.label && Object.keys(item).length > 1) {
          f = false
          this.$message.error(`请完善第${index_number + 1}行的字段或者标题`)
          break
        }
        if (itemOptionType && itemOptionType.isRequireControlName && !item.prop) {
          f = false
          this.$message.error(`请完善第${index_number + 1}行的字段,以便自动生成控件名~`)
          break
        }
        if (itemOptionType && itemOptionType.isRequireControlName && !item.control_name) {
          item.control_name = uuidv1()
        }
      }

      if (f) {
        this.$emit('submit', this.asyncFormColumns)
      }
    },
    addOldProp() {
      const olist = this.asyncFormColumnsCopy.filter(item => item.type.startsWith('hs'))
      const newlist = this.asyncFormColumns.filter(item => item.uuidv1 && item.type.startsWith('hs'))
      newlist.forEach(item => {
        const otarget = olist.find(oitem => item.uuidv1 === oitem.uuidv1)
        if (otarget && otarget.prop !== item.prop) {
          item.old_control_name = otarget.prop
        } else if (otarget && otarget.prop === item.prop) {
          delete item.old_control_name
        }
      })
    },
    downSite(fieldData, index) {
      if (index !== fieldData.length - 1) {
        fieldData[index] = fieldData.splice(index + 1, 1, fieldData[index])[0]
      } else {
        fieldData.unshift(fieldData.splice(index, 1)[0])
      }
    },
    upSite(fieldData, index) {
      if (index !== 0) {
        fieldData[index] = fieldData.splice(index - 1, 1, fieldData[index])[0]
      } else {
        fieldData.push(fieldData.shift())
      }
    }
  }
}
</script>
<style scoped src='./dialog_table_inner.css'>
</style>
<style scoped>
.toopBox{
    display: flex;
    justify-content: flex-end;
}
.asyncBox{
  width: 100%;
    overflow: scroll;
}
</style>
