<template>
  <div>
    <el-row :gutter="formConf.gutter">
      <el-form
        ref="formObj"
        :model="formObj"
        :label-width="formConf.labelWidth+'px'"
        :label-position="formConf.labelPosition"
        size="small"
        class="form-view-el-form"
      >
        <el-col
          v-for="(item,index) in formList"
          :key="index"
          :span="item.span"
          :class="{'form-border':formConf.formBorder,'form-border-top':formConf.formBorder&&formConf.labelPosition === 'top'}"
        >
          <!--label-width 首先取组件的宽度，如果组件没有宽度，则取form的宽度-->
          <el-form-item
            :label="item.showLabel === false ? '' :item.label"
            :prop="item.vModel"
            :label-width="item.showLabel === false ? '0':(item.labelWidth?item.labelWidth+'px':formConf.labelWidth+'px')"
            :class="{'form-p-text':item.tagIcon === 'p-text'}"
            :rules="{ required: item.required?item.required:false, message: item.label+'不能为空', trigger: ['blur', 'change'] }"
          >
            <!--1)单行文本,多行文本，密码-->
            <el-input
              v-if="item.tagIcon === 'input' ||
                item.tagIcon === 'textarea' ||
                item.tagIcon === 'password'"
              v-model="formObj[item.vModel]"
              :type="item.type"
              :placeholder="item.placeholder"
              :style="item.style"
              :autosize="item.autosize"
              :maxlength="item.maxlength"
              :show-word-limit="item['show-word-limit']"
              :show-password="item['show-password']"
              :readonly="item.readonly"
              :disabled="disabled"
            >
              <el-button slot="append" v-if="item.append">
                {{ item.append }}
              </el-button>
            </el-input>
            <!--2)数字框-->
            <el-input-number
              v-else-if="item.tagIcon === 'number'"
              v-model="formObj[item.vModel]"
              :placeholder="item.placeholder"
              :style="item.style"
              :min="item.min"
              :max="item.max"
              :step="item.step"
              :step-strictly="item['step-strictly']"
              :precision="item.precision"
              :disabled="disabled"
              controls-position="right"
            />
            <!--3)下拉选择-->
            <el-select
              v-else-if="item.tagIcon === 'select'"
              v-model="formObj[item.vModel]"
              :placeholder="item.placeholder"
              :style="item.style"
              :clearable="item.clearable"
              :filterable="item.filterable"
              :multiple="item.multiple"
              :allow-create="item['allow-create']"
              :disabled="disabled"
              default-first-option
            >
              <el-option
                v-for="(itemChild,childIndex) in item.options"
                :key="childIndex"
                :label="itemChild.label"
                :value="itemChild.value"
              />
            </el-select>
            <!--4）单选框组-->
            <el-radio-group
              v-else-if="item.tagIcon === 'radio'"
              v-model="formObj[item.vModel]"
              :placeholder="item.placeholder"
              :style="item.style"
              :class="{'form-radio-group':item.arrangement === '2'}"
              :disabled="disabled"
            >
              <el-radio
                v-for="(itemChild,childIndex) in item.options"
                :key="childIndex"
                :label="itemChild.value"
              >
                {{ itemChild.label }}
              </el-radio>
            </el-radio-group>
            <!--5)多选框组 绑定的是数组,默认横向：1,纵向2的时候会添加一个class样式；{@input@} {$remark$}-->
            <el-checkbox-group
              v-else-if="item.tagIcon === 'checkbox'"
              v-model="formObj[item.vModel]"
              :placeholder="item.placeholder"
              :style="item.style"
              :min="item.min"
              :max="item.max"
              :class="{'form-checkbox-group':item.arrangement === '2'}"
              :disabled="disabled"
            >
              <el-checkbox
                v-for="(itemChild,childIndex) in item.options"
                :key="childIndex"
                :label="itemChild.value"
              >
                {{ itemChild.label }}
              </el-checkbox>
            </el-checkbox-group>
            <!--6)时间选择-->
            <el-time-picker
              v-else-if="item.tagIcon === 'time'"
              v-model="formObj[item.vModel]"
              :placeholder="item.placeholder"
              :style="item.style"
              :clearable="item.clearable"
              :readonly="item.readonly"
              :picker-options="item['picker-options']"
              :format="item.format"
              :value-format="item['value-format']"
              :disabled="disabled"
            />
            <!--7)日期选择-->
            <el-date-picker
              v-else-if="item.tagIcon === 'date'"
              v-model="formObj[item.vModel]"
              :placeholder="item.placeholder"
              :style="item.style"
              :clearable="item.clearable"
              :readonly="item.readonly"
              :format="item.format"
              :value-format="item['value-format']"
              :disabled="disabled"
              :type="item.type"
            />
            <!--8)文字-->
            <div
              v-else-if="item.tagIcon === 'p-text'"
              :style="{'text-align':item['content-position'],'font-weight':item.fontWeight?'bold':'normal','font-size':item.fontSize}"
              style="font-size: 14px"
            >
              {{ formObj[item.vModel] }}
            </div>
            <!--9)分隔线-->
            <el-divider
              v-else-if="item.tagIcon === 'p-divider'"
              :content-position="item['content-position']"
            >
              {{ formObj[item.vModel] }}
            </el-divider>
            <!--10)超链接-->
            <el-link
              v-else-if="item.tagIcon === 'p-link'"
              :underline="item.underline"
              @click.stop="_goto(item)"
            >
              {{ formObj[item.vModel] }}
            </el-link>
            <!--11)级联选择-->
            <el-cascader
              v-else-if="item.tagIcon === 'cascader'"
              v-model="formObj[item.vModel]"
              :style="item.style"
              :clearable="item.clearable"
              :filterable="item.filterable"
              :props="item.props"
              :options="item.options"
              :disabled="disabled"
            />
            <!--12)开关-->
            <el-switch
              v-else-if="item.tagIcon === 'switch'"
              v-model="formObj[item.vModel]"
              :style="item.style"
              :active-value="item['active-value']"
              :inactive-value="item['inactive-value']"
              :disabled="disabled"
            />
            <!--13)上传-->
            <div v-else-if="item.tagIcon === 'upload'">
              <UploadIndex :obj="item" :disabled="disabled" :reEdit="reEdit" :processId="processId"/>
            </div>
            <!--16)滑块-->
            <el-slider
              v-else-if="item.tagIcon === 'p-slider'"
              v-model="formObj[item.vModel]"
              :show-stops="item['show-stops']"
              :step="item.step"
              :disabled="disabled"
            />
            <!--17)评分-->
            <el-rate
              v-else-if="item.tagIcon === 'rate'"
              v-model="formObj[item.vModel]"
              :show-text="item['show-text']"
              :show-score="item['show-score']"
              :disabled="disabled"
            />
            <!--18)警告-->
            <el-alert
              v-else-if="item.tagIcon === 'p-alert'"
              :type="item.theme"
              :center="item.center"
              :title="formObj[item.vModel]"
              :description="item.description"
              :show-icon="item['show-icon']"
              :closable="false"
            />
            <!--19)按钮组 为空的，不需要渲染组件-->
            <div v-else-if="item.tagIcon === 'p-button-list'"></div>
            <!--其他-->
            <div v-else style="color:#999">
              组件未渲染，请联系管理员
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
/**
 * 表单设计预览公共组件（一个系统只维护一个即可）
 * 普通表单设计+流程表单设计 公用一个预览界面
 */
import UploadIndex from '../../../components/base/UploadIndex'

export default {
  name: 'DesignFormView',
  components: { UploadIndex },
  // eslint-disable-next-line vue/require-prop-types
  props: ['disabled', 'reEdit', 'processId', 'showOperateBtn'],
  data() {
    return {
      // 表单配置
      formConf: {},
      // 表单数组
      formList: [],
      // 表单绑定的数据
      formObj: {}
    }
  },
  methods: {
    // 初始化表单
    _open(data, defaultObj) {
      // defaultObj 为填写过的内容
      this._initForm(data, defaultObj)
      // this.$nextTick(() => {
      //   this.$refs.formObj.clearValidate()
      // })
    },
    _initForm(data, defaultObj) {
      this.formConf = JSON.parse(JSON.stringify(data.formConf))
      this.formList = JSON.parse(JSON.stringify(data.list))
      for (let i = 0; i < this.formList.length; i++) {
        const item = this.formList[i]
        // 多选框的默认值是数组类型的、数字类型的没有默认undefined
        if (item.tagIcon === 'checkbox' || item.tagIcon === 'number') {
          this.$set(this.formObj, item.vModel, item.defaultValue)
        } else {
          this.$set(
            this.formObj,
            item.vModel,
            item.defaultValue ? item.defaultValue : ''
          )
        }
        // showBtn:true如果发现有按钮组，那么原来的【通过】、【驳回】按钮就会被禁用
        if (this.showOperateBtn && item.tagIcon === 'p-button-list') {
          this.$emit('find-btn', item)
        }
      }
      // 编辑的时候set上值，回显
      if (defaultObj) {
        this.formObj = defaultObj
      }
    },
    // 界面跳转
    _goto(item) {
      if (item.href) {
        window.open(item.href, '_blank')
      }
    }
  }
}
</script>
<style>
.form-view-el-form .el-form-item--small.el-form-item {
  margin-bottom: 0;
}

.form-view-el-form.el-form--label-top .el-form-item__label {
  padding: 0 !important;
}
</style>
