<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="4">变量标题</el-col>
      <el-col :span="10">变量值</el-col>
      <el-col :span="4" >变量名</el-col>
      <el-col :span="2">是否前端配置</el-col>
      <el-col :span="3" :offset="1">操作</el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="240px" label-position="left" style="margin-top: 20px">
      <el-form-item :label="item.title" :prop="['array'].indexOf(item.form_item_type_label) >-1?'':item.key"
                    :key="index" :rules="item.rule || []"
                    v-for="(item,index) in formList"

      >
        <template slot="label">
          <el-input v-if="item.edit" v-model="item.title" style="display: inline-block;width: 200px;" placeholder="请输入标题"></el-input>
          <span v-else>{{item.title}}</span>
        </template>
        <el-col :span="11" >
          <!--    文本      -->
          <el-input :key="index" v-if="['text','textarea'].indexOf(item.form_item_type_label) >-1"
                    :type="item.form_item_type_label"
                    v-model="form[item.key]" :placeholder="item.placeholder" clearable></el-input>

          <el-input-number :key="index" v-else-if="item.form_item_type_label === 'number'" v-model="form[item.key]"
                           :min="0"></el-input-number>
          <!--     datetime、date、time     -->
          <el-date-picker
            v-else-if="['datetime','date','time'].indexOf(item.form_item_type_label) >-1"
            v-model="form[item.key]"
            :key="index"
            :type="item.form_item_type_label"
            :placeholder="item.placeholder">
          </el-date-picker>
          <!--    select      -->
          <el-select
            :key="index"
            v-else-if="item.form_item_type_label === 'select'"
            v-model="form[item.key]"
            :placeholder="item.placeholder"
            clearable
          >
            <el-option
              v-for="item in dictionary(item.setting)  || []"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--    checkbox      -->
          <el-checkbox-group
            :key="index"
            v-else-if="item.form_item_type_label === 'checkbox'"
            v-model="form[item.key]"
            :placeholder="item.placeholder"
          >
            <el-checkbox
              v-for="item in dictionary(item.setting)  || []"
              :key="item.value"
              :label="item.value"
              :value="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
          <!--    radio      -->
          <el-radio-group
            :key="index"
            v-else-if="item.form_item_type_label === 'radio'"
            v-model="form[item.key]"
            :placeholder="item.placeholder"
            clearable
          >
            <el-radio
              v-for="item in dictionary(item.setting)  || []"
              :key="item.value"
              :label="item.value"
              :value="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
          <!--    switch      -->
          <el-switch
            :key="index"
            v-else-if="item.form_item_type_label === 'switch'"
            v-model="form[item.key]"
            :inactive-value="false"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
          <!--     图片     -->
          <div v-else-if="['img','imgs'].indexOf(item.form_item_type_label) >-1" :key="index">
            <el-upload
              :action="uploadUrl"
              :headers="uploadHeaders"
              name="file"
              :accept="'image/*'"
              :on-preview="handlePictureCardPreview"
              :on-success="(response, file, fileList)=>{handleUploadSuccess(response, file, fileList,item.key)}"
              :on-error="handleError"
              :on-exceed="handleExceed"
              :before-remove="(file, fileList)=>{beforeRemove(file, fileList, item.key)}"
              :multiple="item.form_item_type_label!=='img'"
              :limit="item.form_item_type_label==='img'?1:5"
              :ref="'imgUpload_'+item.key"
              :data-keyname="item.key"
              :file-list="item.value?item.value:[]"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">选取图片后,需手动上传到服务器,并且只能上传jpg/png文件</div>
            </el-upload>
            <el-dialog :visible.sync="dialogImgVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
          <!--     文件     -->
          <div v-else-if="['file'].indexOf(item.form_item_type_label) >-1" :key="index">
            <el-upload
              :action="uploadUrl"
              :headers="uploadHeaders"
              name="file"
              :on-preview="handlePictureCardPreview"
              :on-success="(response, file, fileList)=>{handleUploadSuccess(response, file, fileList,item.key)}"
              :on-error="handleError"
              :on-exceed="handleExceed"
              :before-remove="(file, fileList)=>{beforeRemove(file, fileList, item.key)}"
              :limit="5"
              :ref="'fileUpload_'+item.key"
              :data-keyname="item.key"
              :file-list="item.value"
              list-type="picture-card"
            >
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">选取图片后,需手动上传到服务器,并且只能上传jpg/png文件</div>
            </el-upload>
            <el-dialog :visible.sync="dialogImgVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
          <!--    关联表      -->
          <div v-else-if="['foreignkey','manytomany'].indexOf(item.form_item_type_label) >-1" :key="index">
            <table-selector
              v-model="form[item.key]"
              :el-props='{
              pagination: true,
              columns: item.setting.searchField}'
            :dict="{
              url:'/api/system/system_config/get_table_data/'+item.id+'/',
               value: item.setting.primarykey,
                label: item.setting.field,
            }"
            :pagination="true"
              :multiple="item.form_item_type_label ==='manytomany'"
            ></table-selector>
          </div>
          <!--   数组       -->
          <div v-else-if="item.form_item_type_label==='array'" :key="index">
            <vxe-table
              border
              resizable
              auto-resize
              show-overflow
              keep-source
              :ref="'xTable_'+item.key"
              height="200"
              :edit-rules="validRules"
              :edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
              <vxe-column field="title" title="标题" :edit-render="{autofocus: '.vxe-input--inner'}">
                <template #edit="{ row }">
                  <vxe-input v-model="row.title" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="key" title="键名" :edit-render="{autofocus: '.vxe-input--inner'}">
                <template #edit="{ row }">
                  <vxe-input v-model="row.key" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column field="value" title="键值" :edit-render="{}">
                <template #edit="{ row }">
                  <vxe-input v-model="row.value" type="text"></vxe-input>
                </template>
              </vxe-column>
              <vxe-column title="操作" width="100" show-overflow>
                <template #default="{ row,index }">
                  <el-popconfirm
                    title="删除后无法恢复,确定删除吗？"
                    @confirm="onRemoveChild(row,index,item.key)"
                  >
                    <el-button slot="reference" type="text" >删除</el-button>
                  </el-popconfirm>
                </template>
              </vxe-column>
            </vxe-table>
            <div>
              <el-button size="mini" @click="onAppend('xTable_'+item.key)">追加</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input v-if="item.edit" v-model="item.new_key" style="width: 200px;" placeholder="请输入变量key">
            <template slot="prepend">
              <span style="padding: 0px 5px">{{ editableTabsItem.key }}</span>
              </template>
          </el-input>
          <span v-else>{{ editableTabsItem.key }}.{{ item.key }}</span>
          </el-col>
        <el-col :span="3" :offset="1">
          <el-switch
          v-model="item.status"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        </el-col>
        <el-col :span="2">
          <el-button v-if="item.edit" size="mini" type="primary"  icon="el-icon-success" @click="onEditSave(item)"></el-button>
          <el-button v-else size="mini" type="primary"  icon="el-icon-edit" @click="onEdit(index)"></el-button>
           <el-popconfirm
              title="确定删除该条数据吗？"
              @confirm="onDelRow(item)"
            >
              <el-button size="mini" type="danger" icon="el-icon-delete" slot="reference"></el-button>
            </el-popconfirm>

        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as api from '../api'
import util from '@/libs/util'
import tableSelector from '@/components/table-selector/table-selector'

export default {
  name: 'formContent',
  inject: ['refreshView'],
  components: {
    tableSelector
  },
  props: {
    options: {
      type: Object
    },
    editableTabsItem: {
      type: Object
    }
  },
  watch: {
    options: {
      handler (nv) {
        if (nv && nv.id) {
          this.getInit()
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      formList: [],
      form: {},
      childTableData: [],
      childRemoveVisible: false,
      validRules: {
        title: [
          {
            required: true,
            message: '必须填写'
          }
        ],
        key: [
          {
            required: true,
            message: '必须填写'
          }
        ],
        value: [
          {
            required: true,
            message: '必须填写'
          }
        ]
      },
      uploadUrl: util.baseURL() + 'api/system/file/',
      uploadHeaders: {
        Authorization: 'JWT ' + util.cookies.get('token')
      },
      dialogImageUrl: '',
      dialogImgVisible: false,
      uploadImgKey: null
    }
  },
  methods: {
    // 获取数据
    getInit () {
      const that = this
      api.GetList({ parent: this.options.id, limit: 999 }).then(res => {
        const { data } = res.data
        this.formList = data
        const form = {}
        for (const item of data) {
          const key = item.key
          if (item.value) {
            form[key] = item.value
          } else {
            if ([5, 12, 14].indexOf(item.form_item_type) !== -1) {
              form[key] = []
            } else {
              form[key] = item.value
            }
          }
          if (item.form_item_type_label === 'array') {
            that.$nextTick(() => {
              const tableName = 'xTable_' + key
              const $table = this.$refs[tableName][0]
              $table.loadData(item.chinldern)
            })
          }
        }
        this.form = Object.assign({}, form)
      })
    },
    // 提交数据
    onSubmit () {
      const that = this
      const form = JSON.parse(JSON.stringify(this.form))
      const keys = Object.keys(form)
      const values = Object.values(form)
      const submitForm = Object.assign([], this.formList)
      for (const index in this.formList) {
        const item = this.formList[index]
        // eslint-disable-next-line camelcase
        const form_item_type_label = item.form_item_type_label

        // eslint-disable-next-line camelcase
        if (form_item_type_label === 'array') {
          const parentId = item.id
          const tableName = 'xTable_' + item.key
          const $table = this.$refs[tableName][0]
          const { tableData } = $table.getTableData()
          for (const child of tableData) {
            if (!child.id && child.key && child.value) {
              child.parent = parentId
              child.id = null
            }
            submitForm.push(child)
          }
          // 必填项的判断
          for (const arr of item.rule) {
            if (arr.required && tableData.length === 0) {
              that.$message.error(item.title + '不能为空')
              return
            }
          }
          item.value = tableData
        }
        // 赋值操作
        keys.map((mapKey, mapIndex) => {
          if (mapKey === item.key) {
            if (item.form_item_type_label !== 'array') {
              item.value = values[mapIndex]
            }
            // 必填项的验证
            if (['img', 'imgs'].indexOf(item.form_item_type_label) > -1) {
              for (const arr of item.rule) {
                if (arr.required && item.value === null) {
                  that.$message.error(item.title + '不能为空')
                  return
                }
              }
            }
          }
        })
      }
      that.$refs.form.clearValidate()
      that.$refs.form.validate((valid) => {
        if (valid) {
          api.saveContent(this.options.id,
            submitForm).then(res => {
            this.$message.success('保存成功')
            this.refreshView()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 追加
    async onAppend (tableName) {
      const $table = this.$refs[tableName][0]
      const { tableData } = $table.getTableData()
      const tableLength = tableData.length
      if (tableLength === 0) {
        $table.insert()
      } else {
        const errMap = await $table.validate().catch(errMap => errMap)
        if (errMap) {
          this.$message.error('校验不通过！')
        } else {
          $table.insert()
        }
      }
    },
    // 子表删除
    onRemoveChild (row, index, refName) {
      if (row.id) {
        api.DelObj(row.id).then(res => {
          this.refreshView()
        })
      } else {
        this.childTableData.splice(index, 1)
        const tableName = 'xTable_' + refName
        this.$refs[tableName][0].remove(row)
      }
    },
    // 图片预览
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogImgVisible = true
    },
    // 判断是否为图片
    // 封装一个判断图片文件后缀名的方法
    isImage (fileName) {
      if (typeof fileName !== 'string') return
      const name = fileName.toLowerCase()
      return name.endsWith('.png') || name.endsWith('.jpeg') || name.endsWith('.jpg') || name.endsWith('.png') || name.endsWith('.bmp')
    },
    // 上传成功
    handleUploadSuccess (response, file, fileList, imgKey) {
      const that = this
      const {
        code,
        msg
      } = response
      if (code === 2000) {
        const { url } = response.data
        const { name } = file
        const type = that.isImage(name)
        if (!type) {
          this.$message.error('只允许上传图片')
        } else {
          const uploadImgKey = that.form[imgKey]
          if (!uploadImgKey || uploadImgKey === '') {
            that.form[imgKey] = []
          }

          const dict = {
            name: name,
            url: util.baseURL() + url
          }
          that.form[imgKey].push(dict)
        }
      } else {
        this.$message.error('上传失败,' + JSON.stringify(msg))
      }
    },
    // 上传失败
    handleError () {
      this.$message.error('上传失败')
    },
    // 上传超出限制
    handleExceed () {
      this.$message.error('超过文件上传数量')
    },
    // 删除时的钩子
    beforeRemove (file, fileList, key) {
      var index = 0
      this.form[key].map((value, inx) => {
        if (value.uid === file.uid) index = inx
      })
      this.form[key].splice(index, 1)
    },
    // 配置的行删除
    onDelRow (obj) {
      api.DelObj(obj.id).then(res => {
        this.refreshView()
      })
    },
    // 行编辑
    onEdit (index) {
      const that = this
      that.$set(that.formList[index], 'new_key', that.formList[index].key)
      that.$set(that.formList[index], 'edit', true)
    },
    // 行编辑保存
    onEditSave (obj) {
      obj.key = JSON.parse(JSON.stringify(obj.new_key))
      api.UpdateObj(obj).then(res => {
        this.refreshView()
      })
    }
  },
  mounted () {
    // this.getInit()
  }
}
</script>

<style scoped>

</style>
