<template>
  <div class="form">
    <el-row>
      <el-form :model="model"
               :rules="rules"
               ref="form"
               enctype="multipart/form-data"
               :inline="inline"
               :style="{margin:'0 auto',width:formWidth,textAlign:formTextAlign}">
        <template v-if="formType === 'auto'">
          <el-form-item v-for="(column,i) in columns"
                        v-show="column.showFlag==='1' ? column.show : true"
                        :label="column.title"
                        :prop="column.key"
                        :label-width="(column.LabelWidth?column.LabelWidth:labelWidth) + 'px'"
                        :style="{display:column.block?'block':'inline-block'}"
                        :key="i">
            <span v-if="column.type === 'span'"
                  :style="{width:column.itemWidth?column.itemWidth:itemWidth}">{{column.format?column.format(model[column.key]):model[column.key]}}</span>
            <el-input v-else-if="column.type === 'input'"
                      v-show="column.showFlag==='1' ? column.show : true"
                      v-model="model[column.key]"
                      :readonly="column.readonly?column.readonly:false"
                      :disabled="column.disabled?column.disabled:false"
                      :placeholder="column.placeholder?column.placeholder:column.title"
                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                      clearable>

            </el-input>

            <!--密码输入框-->
            <el-input v-if="column.type === 'password'"
                      type="password"
                      v-show="column.showFlag==='1' ? column.show : true"
                      v-model="model[column.key]"
                      :readonly="column.readonly?column.readonly:false"
                      :disabled="column.disabled?column.disabled:false"
                      :placeholder="column.placeholder?column.placeholder:column.title"
                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                      clearable>
              <!-- <icon name="bell"
                    scale="20"></icon> -->
            </el-input>

            <!--带选择按钮输入框-->
            <template v-if="column.type === 'inputSelect'"
                      v-show="column.showFlag==='1' ? column.show : true">

              <c-tree-dialog-single :ref="'tree_'+column.key"
                                    :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                                    :inputModel="model[column.key]"
                                    :placeholder="column.placeholder?column.placeholder:column.title"
                                    :type="'primary'"
                                    :title="column.title"
                                    :url="column.url"
                                    :params="column.params?column.params:((!column.params&&column.diyParams)?setDiyParams(column.key,i):{})"
                                    :judgeParams="column.judgeParams?column.judgeParams:'1'"
                                    :freshen='column.freshen'
                                    :defaultExpandKeys="defaultExpandKeys"
                                    :defaultExpandAll="column.defaultExpandAll?column.defaultExpandAll:false"
                                    :defaultOnlyLeaf="column.defaultOnlyLeaf?column.defaultOnlyLeaf:false"
                                    :formKey="column.key"
                                    :defaultNodeKey="defaultNodeKey(column.key,i)"
                                    :defaultExpandOnClickNode="column.defaultExpandOnClickNode?column.defaultExpandOnClickNode:false"
                                    :formIndex="i"
                                    @handleOk="handleOk"
                                    @handleClear="handleClear">
              </c-tree-dialog-single>

            </template>
            <!-- 带选择按钮的多选输入框 -->
            <template v-if="column.type === 'inputSelectMulti'"
                      v-show="column.showFlag==='1' ? column.show : true">
              <c-tree-dialog-check-box :ref="'multitree_'+column.key"
                                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                                       :inputModel="model[column.key]"
                                       :handleId="model[column.keyid]"
                                       :placeholder="column.placeholder?column.placeholder:column.title"
                                       :type="'primary'"
                                       :title="column.title"
                                       :url="column.url"
                                       :params="inputSelectMultiParams?inputSelectMultiParams:(column.params?column.params:((!column.params&&column.diyParams)?setDiyParams(column.key,i):{}))"
                                       :freshen='column.freshen'
                                       :defaultExpandKeys="defaultExpandKeys"
                                       :defaultExpandAll="column.defaultExpandAll?column.defaultExpandAll:false"
                                       :defaultOnlyLeaf="column.defaultOnlyLeaf?column.defaultOnlyLeaf:false"
                                       :formKey="column.key"
                                       :defaultNodeKey="defaultNodeKey(column.key,i)"
                                       :defaultExpandOnClickNode="column.defaultExpandOnClickNode?column.defaultExpandOnClickNode:false"
                                       :formIndex="i"
                                       @handleSure="handleSure"
                                       @handleDel="handleDel"
                                       @handleClear="multihandleClear">
              </c-tree-dialog-check-box>
            </template>
            <!--数字输入框-->
            <el-input v-else-if="column.type === 'inputNum'"
                      v-show="column.showFlag==='1' ? column.show : true"
                      :label="column.title"
                      :disabled="column.disabled?column.disabled:false"
                      :readonly="column.readonly?column.readonly:false"
                      :placeholder="column.placeholder?column.placeholder:column.title"
                      v-model.number="model[column.key]"
                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-input>
            <!--计数器-->
            <el-input-number v-else-if="column.type === 'counter'"
                             v-show="column.showFlag==='1' ? column.show : true"
                             v-model="model[column.key]"
                             :step="column.option&&column.option.step?column.option.step:1"
                             :min="column.option&&column.option.min?column.option.min:0"
                             :max="column.option&&column.option.max?column.option.max:100"
                             :precision="column.option&&column.option.precision?column.option.precision:0"
                             :disabled="column.disabled?column.disabled:false"
                             :readonly="column.readonly?column.readonly:false"
                             :style="{width:column.itemWidth?column.itemWidth:itemWidth}" />
            <!--单选按钮组-->
            <el-radio-group v-else-if="column.type === 'radio'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            :disabled="column.disabled?column.disabled:false"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
              <el-radio v-for="item in optionData[column.key]"
                        :label="item.value"
                        :key="item.value">
                {{item.label}}
              </el-radio>
            </el-radio-group>
            <!--多选按钮组-->
            <el-checkbox-group v-else-if="column.type === 'checkbox'"
                               v-show="column.showFlag==='1' ? column.show : true"
                               v-model="model[column.key]"
                               :min="0"
                               :max="8"
                               :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
              <el-checkbox v-for="item in optionData[column.key]"
                           :label="item.value"
                           :key="item.value"
                           :disabled="item.disabled">{{item.label}}
              </el-checkbox>
            </el-checkbox-group>
            <!--下拉列表-->
            <el-select v-else-if="column.type === 'select'"
                       v-show="column.showFlag==='1' ? column.show : true"
                       v-model="model[column.key]"
                       clearable
                       :disabled="column.disabled?column.disabled:false"
                       :filterable="column.filterable?column.filterable:false"
                       :placeholder="column.placeholder?column.placeholder:column.title"
                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                       @change="handleSelectChange(model[column.key],column.key,i)">
              <el-option v-for="item in optionData[column.key]"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <!-- 终端管理特殊下拉列表 -->
            <el-select v-else-if="column.type === 'select1'"
                       v-show="column.showFlag==='1' ? column.show : true"
                       v-model="model[column.key]"
                       clearable
                       :filterable="column.filterable?column.filterable:false"
                       :placeholder="column.placeholder?column.placeholder:column.title"
                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                       @change="handleSelectChange1(model[column.key],column.key,i)">
              <el-option v-for="item in optionData[column.key]"
                         :key="item.id"
                         :label="item.dicDisp"
                         :value="item.id">
              </el-option>
            </el-select>
            <!--布控级别下拉列表-->
            <!-- <el-select v-else-if="column.type === 'select1'"
                       v-show="column.showFlag==='1' ? column.show : true"
                       v-model="model[column.key]"
                       clearable
                       :filterable="column.filterable?column.filterable:false"
                       :placeholder="column.placeholder?column.placeholder:column.title"
                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                       @change="handleSelectChange(model[column.key],column.key,i)">
              <el-option v-for="item in optionData[column.key]"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                         <span>{{item.label}}</span>
              </el-option>
            </el-select> -->

            <!--多选下拉列表-->
            <el-select v-else-if="column.type === 'multselect'"
                       v-show="column.showFlag==='1' ? column.show : true"
                       v-model="model[column.key]"
                       multiple
                       :placeholder="column.placeholder?column.placeholder:column.title"
                       :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
              <el-option v-for="item in optionData[column.key]"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>

            <!--下拉选择图片-->
            <el-popover v-else-if="column.type === 'selectImg'"
                        v-show="column.showFlag==='1' ? column.show : true"
                        ref="popover"
                        placement="bottom"
                        style="padding:0px"
                        :width="column.itemWidth?column.itemWidth:itemWidth"
                        v-model="imgPopVisible"
                        trigger="click">

              <div v-for="item in optionData[column.key]"
                   :key="item.value"
                   style="margin:10pxvertical-align: middle"
                   @click="handleSelectImg(column.key,item.value,item.label)">
                <svg-icon style="width:25pxheight:25px"
                          :icon-class="item.label"
                          class-name="disabled" />

              </div>
              <div class="selImgDiv"
                   slot="reference">

                <svg-icon style="width:25pxheight:25pxvertical-align: middle "
                          :icon-class="selImg"
                          class-name="disabled" />
                <el-button class="selBtn"
                           type="text"
                           :icon="imgPopVisible?'el-icon-arrow-up':'el-icon-arrow-down'"></el-button>
              </div>
            </el-popover>

            <!--switch开关-->
            <el-switch v-else-if="column.type === 'switch'"
                       v-show="column.showFlag==='1' ? column.show : true"
                       v-model="model[column.key]"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       :disabled="column.disabled?column.disabled:false">
            </el-switch>
            <!--文本域输入框-->
            <el-input v-else-if="column.type === 'textarea'"
                      v-show="column.showFlag==='1' ? column.show : true"
                      type="textarea"
                      :autosize="{ minRows: column.option.minRows ? column.option.minRows : 2, maxRows: column.option.maxRows ? column.option.maxRows : 4}"
                      :rows=" column.option.rows ? column.option.rows : 3"
                      :disabled="column.disabled?column.disabled:false"
                      :readonly="column.readonly?column.readonly:false"
                      resize="none"
                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                      :placeholder="column.placeholder?column.placeholder:column.title"
                      v-model="model[column.key]">
            </el-input>
            <!--日期选择器-->
            <el-date-picker v-else-if="column.type === 'date'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :placeholder="column.placeholder?column.placeholder:column.title"
                            :disabledDate="disabledDate"
                            :default-value="new Date()"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-date-picker>
            <!--月份选择器-->
            <el-date-picker v-else-if="column.type === 'month'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            type="month"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                            :placeholder="column.placeholder?column.placeholder:column.title"
                            :disabledDate="disabledDate"
                            :default-value="new Date()"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-date-picker>
            <!--日期时间选择器-->
            <el-date-picker v-else-if="column.type === 'datetime'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :placeholder="column.placeholder?column.placeholder:column.title"
                            :disabledDate="disabledDate"
                            :default-value="new Date()"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-date-picker>
            <!--时间选择器-->
            <el-time-picker v-else-if="column.type === 'time'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            type="time"
                            format="HH:mm:ss"
                            value-format="HH:mm:ss"
                            :placeholder="column.placeholder?column.placeholder:column.title"
                            :default-value="new Date()"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-time-picker>
            <!--日期区域选择器-->
            <el-date-picker v-else-if="column.type === 'daterange'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :disabledDate="disabledDate"
                            :default-value="new Date()"
                            :value-format="column.pattern?column.pattern:'yyyy-MM-dd'"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-date-picker>
            <!--日期时间区域选择器-->
            <el-date-picker v-else-if="column.type === 'datetimerange'"
                            v-show="column.showFlag==='1' ? column.show : true"
                            v-model="model[column.key]"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :disabledDate="disabledDate"
                            :default-value="new Date()"
                            :value-format="column.pattern?column.pattern:'yyyy-MM-dd HH:mm:ss'"
                            :style="{width:column.itemWidth?column.itemWidth:itemWidth}">
            </el-date-picker>

            <!--文件上传-->
            <template v-else-if="column.type === 'file'"
                      v-show="column.showFlag==='1' ? column.show : true">
              <c-upload :show-file-list="true"></c-upload>
            </template>
            <!--文件上传2-只选择不上传-->
            <template v-else-if="column.type === 'file2'"
                      :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                      :placeholder="column.placeholder?column.placeholder:column.title">
              <input type="file"
                     id="file"
                     @change="getFile($event)" />
              <!-- <el-input type=file
                        :v-model="model[column.key]"></el-input> -->
            </template>
            <!-- 级联选择器-->
            <el-cascader v-else-if="column.type === 'cascader'"
                         clearable
                         filterable
                         size="medium"
                         v-model="model[column.key]"
                         :placeholder="column.placeholder?column.placeholder:column.title"
                         :style="{width:column.itemWidth?column.itemWidth:itemWidth}"
                         :options="optionData[column.key]"
                         :show-all-levels="false">

            </el-cascader>

            <template v-else-if="column.type === 'id'">

            </template>
          </el-form-item>
        </template>
        <!--自定义form-->
        <template v-else-if="formType === 'custom'">
          <slot></slot>
        </template>
      </el-form>
    </el-row>
  </div>
</template>

<script>
/* eslint-disable */
import CUpload from './CUpload'
import CDialog from './CDialog'
import CTree from './CTree'
import CTreeDialogSingle from './CTreeDialogSingle'
import CTreeDialogCheckBox from './CTreeDialogCheckBox'

export default {
  components: { CUpload, CDialog, CTree, CTreeDialogSingle, CTreeDialogCheckBox },
  data () {
    return {
      formData: new FormData(),
      model: window.app.service.getModel(this.keyword),
      rules: window.app.service.getRules(this.keyword),
      visible: this.visibleDialog,
      dialog: {
        title: ''
      },
      defaultCheckedKeys: [0],
      defaultExpandKeys: [0],
      imageUrl: '',

      imgPopVisible: false, // 选择图片下拉框的pop是否可见（暂时预设为只可能有一个选择图片下拉框）
      selImg: 'table'// 默认为“table”图标
    }
  },

  props: {
    formWidth: {
      type: String,
      default: '860px'
    },
    formTextAlign: {
      type: String,
      default: 'left'
    },
    keyword: {
      type: String,
      required: true
    },
    method: {
      type: String,
      required: true
    },
    labelWidth: {
      type: Number,
      default () {
        return 100
      }
    },
    formType: {
      type: String,
      default () {
        return 'auto'
      }
    },
    optionData: {
      type: Object,
      default () {
        return {}
      }
    },
    inline: {
      type: Boolean,
      default: true
    },
    itemWidth: {
      type: String,
      default: '300px'
    },
    inputSelectMultiParams: {
      type: Object
    },
    visibleDialog: {
      type: Object
    }
  },
  computed: {
    disabledDate: function(date) {
      return new Date() < date
    },
    columns: function() {
      return window.app.service.getColumns(this.keyword, 'form' + this.method)
    },
    defaultNodeKey () {
      return function(key, index) {
        const keyid = this.columns[index].keyid// 获取显示值对应的存储值key
        // alert(this.model[keyid])
        /*   if (!this.model[keyid]) {
            return 0
          } */
        // return parseInt(this.model[keyid])
        return this.model[keyid]
      }
    }
    // 上传图片的图片部分
    //  imageUrl () {
    //    return function (key) {
    //      const picPath = this.model[key]
    //    }
    //  },
  },
  mounted () {

  },
  methods: {
    getFile (aaa) {
      // const bbb = aaa.target.files[0]
    },
    assign (currentData) {
      if (currentData) {
        //  model赋值
        Object.assign(this.model, currentData)
        //  debugger
        this.columns.forEach((column, index) => {
          if (column.type === 'inputSelect') { // 单独处理选择树，给选择树的输入框赋值
            this.$refs['tree_' + column.key][0].setInputValue(this.model[column.key])
          } else if (column.type === 'selectImg') { // 单独处理图片选择下拉框
            if (this.model[column.key] === '' || this.model[column.key] === null) {
              this.model[column.key] = this.optionData[column.key][0].label
            }
            this.selImg = this.model[column.key]
          } else if (column.type === 'inputSelectMulti') { // 单独处理选择树，给多选树赋值
            this.$nextTick(() => {
              this.$refs['multitree_' + column.key][0].inputValue = this.model[column.key]
              this.$refs['multitree_' + column.key][0].substationId = this.model[column.keyid]
            })
          }
        })
      }
    },
    resetForm () {
      //  重置表单
      this.$refs['form'].resetFields()
      this.columns.forEach((column, index) => {
        if (column.type === 'selectImg') { // 单独处理图片选择下拉框
          this.model[column.key] = this.optionData[column.key][0].label
          this.selImg = this.model[column.key]
        }
        if (column.type === 'inputSelectMulti') {
          this.$refs['multitree_' + column.key][0].handleClear()
          this.model[column.keyid] = ''
          this.model[column.key] = ''
        }
      })
    },
    initForm () { // 初始化表单
      // this.$refs['form'].resetFields()
      // this.model = app.service.getModel(this.keyWord)
    },
    initForm2 () { // 初始化表单
      // this.$refs['form'].resetFields()
      this.model = window.app.service.getModel(this.keyWord)
    },
    validate (callback) {
      this.$refs['form'].validate((valid, messageObj) => {
        if (!valid) {
          let message = ''
          for (var oneObj in messageObj) {

            message = message + (messageObj[oneObj])[0].message + ' \n '
          }

          this.$message.error(message)

        } else {
          if (typeof callback === 'function') callback(valid)
        }
      })
    },
    // 点击选择树的【清空】
    handleClear (data, key, formIndex) {
      const keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
      this.model[keyid] = ''
      this.model[key] = ''

      this.$nextTick(() => {
        const ref = 'tree_' + key
        this.$refs[ref][0].loadData(null, 0, [0], false)
      })
    },
    multihandleClear (data, key, formIndex) {
      const keyid = this.columns[formIndex].keyid// 获/*  */取显示值对应的存储值key
      this.model[keyid] = ''
      this.model[key] = ''
      //  const keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
      //  this.model[keyid] = ''
      //  this.model[key] = ''
    },
    // 点击选择树的【节点】/【确定】
    handleOk (data, key, formIndex) {
      this.model[key] = data.label// 显示值
      const keyid = this.columns[formIndex].keyid// 获取显示值对应的存储值key
      let id = data.id
      const p = /[a-z]/i
      if (p.test(data.id.substring(0, 1))) { // 判断第一位是否是字母，是的话截掉
        id = data.id.substring(1)
      }
      this.model[keyid] = id
    },
    handleSure (data, key, formIndex) {
      let handleName = ''
      let handleNameArr = []
      let handleId = ''
      let handleIdArr = []
      for (let i = 0; i < data.length; i++) {
        handleNameArr.push(data[i].name)
        handleIdArr.push(data[i].id)
      }
      handleName = handleNameArr.join(',')
      handleId = handleIdArr.join(',')
      this.model[key] = handleName
      const keyid = this.columns[formIndex].keyid
      this.model[keyid] = handleId
    },
    handleDel (data, key, formIndex) {
      let handleName = ''
      let handleNameArr = []
      let handleId = ''
      let handleIdArr = []
      for (let i = 0; i < data.length; i++) {
        handleNameArr.push(data[i].name)
        handleIdArr.push(data[i].id)
      }
      handleName = handleNameArr.join(',')
      handleId = handleIdArr.join(',')
      this.model[key] = handleName
      const keyid = this.columns[formIndex].keyid
      this.model[keyid] = handleId
    },
    changePass (value) { // 判断渲染，true:暗文显示，false:明文显示
      this.visible = !(value === 'show')
    },

    // 选择图片下拉框
    handleSelectImg (key, value, label) {
      this.selImg = label
      this.model[key] = label
      this.imgPopVisible = false
      // this.objForm.stateUrl = label
    },

    // 下拉框选择事件：当下拉框数据改变时触发
    handleSelectChange (model, key, index) {
      // debugger
      // js中设置了选择改变
      if (this.columns[index].selectChange) {
        this.$emit('selectChange', model, key, index)
      }
    },
    // 终端通讯类型下拉框选择事件
    handleSelectChange1 (model, key, index) {
      // debugger
      // js中设置了选择改变
      if (this.columns[index].selectChange) {
        this.$emit('selectChange1', model, key, index)
      }
    },
    // 设置某一个属性的值
    setData (key, value) {
      this.model[key] = value
    },

    // 控制界面组件显隐
    changeShow (showKeyArray, showIndexArray, showDefault, hideKeyArray, hideIndexArray) {
      // debugger
      for (let i = 0; i < showIndexArray.length; i++) {
        // this.columns[showIndexArray[i]].showFlag = '1'
        this.columns[showIndexArray[i]].show = true
        if (this.columns[showIndexArray[i]].required) { // 显示的时候为必填
          this.columns[showIndexArray[i]].rule[0].required = true
        }
        this.model[showKeyArray[i]] = showDefault[i]
      }
      for (let j = 0; j < hideIndexArray.length; j++) {
        // this.columns[showIndexArray[j]].showFlag = '1'
        this.columns[hideIndexArray[j]].show = false
        if (this.columns[hideIndexArray[j]].required) { // 隐藏的时候为非必填
          this.columns[hideIndexArray[j]].rule[0].required = false
        }
        this.model[hideKeyArray[j]] = ''
      }
    },

    // 控制界面必填项
    changeRequired (requireKeyArray, requireIndexArray, norequireKeyArray, norequireIndexArray) {
      for (let i = 0; i < requireIndexArray.length; i++) {
        this.columns[requireIndexArray[i]].rule[0].required = true
      }
      for (let j = 0; j < norequireIndexArray.length; j++) {
        this.columns[norequireIndexArray[j]].rule[0].required = false
      }
    },
    // 单选树自定义参数赋值
    setDiyParams (key, index) {
      const diyName = this.columns[index].diyParams.name
      const diyValue = this.model[this.columns[index].diyParams.value]
      if (diyValue === '' || diyValue === null) {
        return {}
      }
      const paramsStr = '{"' + diyName + '":"' + diyValue + '"}'
      const params = JSON.parse(paramsStr)
      // alert(JSON.stringify(params))
      return params
    }

  }
}
</script>
<style scoped>
.submitForm {
  text-align: right;
  margin-right: 42px;
}

.selImgDiv {
  width: 285px;
  color: #bbb8b8;
  border-radius: 4px;
  border: 0.5px solid #dfdbdb;
  padding-left: 16px;
}

.selBtn {
  float: right;
  margin-right: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 4px;
}
</style>
