<template>
  <div class="orderManageEdit"
       :class="flodClickClass"
       :ref="formConfig.flodClick" data-key="@burgeon/business-components">

    <div class="imgRight"
         v-if="formConfig.img &&  formConfig.img.type === 'imgRight'">
      <img :width="formConfig.img.width"
           :height="formConfig.img.height"
           :src="formConfig.img.url"
           alt="">
    </div>

    <Form class="businessForm_a"
          :label-width="120"
          style="width:100%;display:flex;justify-content: space-between;"
          :model="formConfig.formValue"
          :rules="formConfig.ruleValidate"
          onsubmit="return false;">

      <Row style="flex:1">
        <Col v-for="(item , index) in formConfig.formData"
             :key=index
             :span='item.width || formConfig.colSpan || "6"'
             v-if="item.style"
             :data-key="item.value">
        <template v-if="item.style !== ''">
          <!-- 注释 -->
          <Tooltip
            max-width="200"
            :content="item.comment"
            placement="bottom"
            transfer
            v-if="item.comment"
            :style="`position: absolute;top:50%; transform: translateY(-50%);left: ${item.left || 0}px;`"
          >
            <img
              style="width: 16px;"
              src="../../assets/icon/help.png"
              >
          </Tooltip>


          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'input'"
                    :required = 'item.required'
                    :prop="item.value">
            <!-- 输入框 -->
            <Input :autocomplete='item.autocomplete ? item.autocomplete : "new-password"'
                   :disabled='item.disabled||item.readonly'
                   :type="item.type"
                   @on-click="runMethods(item.iconclick)"
                   @on-enter="runMethods(item.inputenter)"
                   :icon="item.disabled?'':item.icon"
                   v-model.trim="formConfig.formValue[`${item.value}`]"
                   :placeholder="item.placeholder ? item.placeholder : ''"
                   :element-id='item.id'
                   :regx="item.regx"
                   :maxlength="item.maxlength"
                   :ref="item.ref"
                   @on-blur="($event)=> runKeyup($event, item.inputblur)"
                   @on-change="runMethods(item.inputChange ? item.inputChange() : '')"
                   @click.native="runMethods(item.search ? item.onNativeClick($event): '')"
                   @on-keyup="($event)=> runKeyup($event, item.keyUp)"
                   :suffix="item.search ? 'ios-search':''"></Input>
            <!-- 输入框图标 -->
            <!-- <Icon v-if="item.icon" :type="item.icon" /> -->
          </FormItem>
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'inputNew'"
                    :prop="item.value">
            <!-- 输入框 -->
            <Input
                  v-model="formConfig.formValue[`${item.value}`]"
                  :ref="item.ref"
                  :regx="item.regx"
                  :maxlength="item.maxlength"
                  :class="item.errorInput?'errorInput':''"
                  @on-click="runMethods(item.search ? item.onNativeClick($event): '')"
                  @on-enter="runMethods(item.onInputenter($event))"
                  @on-blur="runMethods(item.onInputblur($event))"
                  icon="ios-search" placeholder="输入后请按enter"/>
            <!-- 输入框图标 -->
            <!-- <Icon v-if="item.icon" :type="item.icon" /> -->
          </FormItem>

          <!-- 文本框 -->
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'textarea'"
                    :prop="item.value">
            <Input v-model="formConfig.formValue[`${item.value}`]"
                   :disabled='item.disabled'
                   :type="item.style"
                   :class="item.className"
                   :autosize="item.autosize ? item.autosize : {minRows: 2,maxRows: 5}"
                   :placeholder="item.placeholder ? item.placeholder : ''" />
          </FormItem>
          <!-- 勾选框 -->
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'checkbox'"
                    :prop="item.value">
            <CheckboxGroup>
              <input :checked="item.checked"
                     @click="runMethods(item.checkboxChange ? item.checkboxChange(formConfig.formValue[`${item.value}`]) : '' , true)"
                     v-model="formConfig.formValue[`${item.value}`]"
                     type="checkbox"
                     :disabled='item.disabled'>
            </CheckboxGroup>
          </FormItem>
          <!-- 下拉框 -->
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'select'"
                    class="popSelect"
                    :prop="item.value">
            <Selects @on-change="runMethods(item.selectChange)"
                    v-model="formConfig.formValue[`${item.value}`]"
                    :multiple="item.multiple?item.multiple:false"
                    :filterable="item.filterable?item.filterable:false"
                    :disabled='item.disabled'
                    :transfer='item.transfer?item.transfer:true'
                    :placeholder="item.placeholder ? item.placeholder : ''"
                    :clearable="item.clearable"
                    @on-clear="runMethods(item.clearSelect(item.value) , true)">
              <Option v-for="(option , index) in item.options"
                      :key="index"
                      :value="option.value"
                      :disabled="option.disabled">{{option.label}}</Option>
            </Selects>
          </FormItem>

          <!-- 下拉框 -->
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'selectnew'"
                    class="popSelect"
                    :prop="item.value">
            <Selects @on-change="item.selectChange"
                    v-model="formConfig.formValue[`${item.value}`]"
                    :multiple="item.multiple?item.multiple:false"
                    :filterable="item.filterable?item.filterable:false"
                    :disabled='item.disabled'
                    :transfer='item.transfer?item.transfer:true'
                    :placeholder="item.placeholder ? item.placeholder : ''"
                    :clearable="item.clearable"
                    :chooseAll="item.chooseAll?item.chooseAll:false"
                    @on-clear="item.clearSelect(item.value)">
              <Option v-for="(option , index) in item.options"
                      :key="index"
                      :value="option.value"
                      :disabled="option.disabled">{{option.label}}</Option>
            </Selects>
          </FormItem>

          <!-- 时间组件 -->
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'date'"
                    :prop="item.value">
            <DatePicker :disabled='item.disabled'
                        :type="item.type?item.type:'date'"
                        split-panels
                        :placeholder="item.placeholder"
                        :transfer="item.transfer ? item.transfer : true"
                        v-model="formConfig.formValue[`${item.value}`]"
                        :format="item.format"
                        :clearable="item.clearable"
                        :options="item.options"
                        :vModelFormat="item.vModelFormat"
                        @on-change="runMethods(item.onChange)"></DatePicker>
          </FormItem>

          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style === 'datenew'" :id="item.id">
                    <DatePicker
                      type="datetimerange"
                      :options="item.options"
                      :commentsValue="true"
                      placeholder="请选择日期范围"
                      @on-change="item.onChange"
                    ></DatePicker>
          </FormItem>

          <!-- 输入框弹框单多选 -->
          <FormItem v-if="item.style === 'popInput'"
                    class="popInput"
                    :prop="item.value">
            <my-input :version='item.version'
                      :isActive='true'
                      :isdisabled='item.disabled'
                      :inputList="item.inputList?item.inputList:[]"
                      :objList="item.objList?item.objList:[]"
                      :itemdata="item.itemdata"
                      :filterDropField="item.filterDropField"
                      @getFkChooseItem="typeof item.oneObj =='undefined'?oneObj:oneObj(item.oneObj(item.itemdata, $event))"
                      @itemInputEnter="runMethods(item.InputEnter)">
            </my-input>
          </FormItem>

          <!-- 为多选+导入弹框专属引入 -->
          <!-- 输入框弹框单多选 -->
          <FormItem v-if="item.style === 'popInput_ld'"
                    class="popInput">
            <my-input-ld :isActive='true'
                         :isDisabled='false'
                         :inputList="item.inputList?item.inputList:[]"
                         :objList="item.objList?item.objList:[]"
                         :itemdata="item.itemdata"
                         @getFkChooseItem="runMethods(item.oneObj)">
            </my-input-ld>
          </FormItem>

          <!-- radio 单选 -->
          <FormItem :label="`${item.label}`+ ':'"
                    v-if="item.style==='radio'"
                    :prop="item.value">
            <RadioGroup v-model="formConfig.formValue[`${item.value}`]"
                        @on-change="runMethods(item.radioChange)">
              <Radio v-for="(option , index) in item.options"
                     :key="index"
                     :label="option.value"
                     :disabled="option.disabled">{{option.label}}</Radio>
            </RadioGroup>
          </FormItem>
          <!-- 模糊查询组件 -->

          <FormItem :label="`${item.label}`+':'"
                    v-if="item.style==='dimSearch'"
                    :prop="item.value">
                    <div style="display:flex;align-items: center;">
                      <AttachFilter v-model="formConfig.formValue[`${item.value}`]"
                          :columnsKey="item.columns"
                          :placeholder="item.placeholder"
                          :AuotData="item.AuotData"
                          :filter-method="item.filterMethod"
                          :disabled="item.disabled"
                          @on-change="item.dimChange"
                          @on-enter="item.dimEnter"
                          @on-select="item.dimSelect"
                          @on-clear="runMethods(item.dimClear)"
                          @on-blur="runMethods(item.dimblur)"></AttachFilter>
                      <img
                            v-if="item.canSearch"
                            style="width:18px;margin-left:8px;margin-top:3px"
                            src="../../assets/icon/search.png"
                            @click="runMethods(item.searchGoods)"
                            >
                    </div>

          </FormItem>
          <!-- 数字框 -->
          <FormItem :label="`${item.label}`+':'"
                    v-if="item.style==='inputNumber'"
                    :prop="item.value">
            <InputNumber v-model.trim="formConfig.formValue[`${item.value}`]"
                         :max="item.max"
                         :min="item.min"
                         :step="item.step"
                         :formatter="item.formatter"
                         :parser="item.parser"></InputNumber>
          </FormItem>

          <!-- 双数字框 -->
          <FormItem :label="`${item.label}`+':'"
                    v-if="item.style==='bothNumber'">
            <!-- <both-num-input :bothNumInput="item.bothNumInput" :allValue="formConfig.formValue[`${item.value}`]"></both-num-input> -->
            <div class="bothNumInput">
              <div class="bothNumLeft">
                <InputNumber :max="item.max"
                             :min="item.min"
                             v-model.trim="formConfig.formValue[`${item.value}`].value1"
                             :step="item.step"
                             :formatter="item.formatter"
                             :parser="item.parser"></InputNumber>
              </div>
              <div class="bothNumLine">
                一
              </div>
              <div class="bothNumRight">
                <InputNumber :max="item.max"
                             :min="item.min"
                             v-model.trim="formConfig.formValue[`${item.value}`].value2"
                             :step="item.step"
                             :formatter="item.formatter"
                             :parser="item.parser"></InputNumber>
              </div>
            </div>
          </FormItem>
          <!-- 双input框 -->
          <FormItem :label="`${item.label}`+':'"
                    v-if="item.style==='bothInput'">
            <div class="bothNumInput">
              <div class="bothNumLeft">
                <Input :disabled="item.disabled"
                       :type="item.type"
                       @on-click="runMethods(item.iconclick)"
                       @on-enter="runMethods(item.inputenter)"
                       :icon="item.icon"
                       v-model.trim="formConfig.formValue[`${item.value}`].value1"
                       :placeholder="item.placeholder ? item.placeholder : ''"
                       :element-id="item.id"
                       :regx="item.regx"></Input>
              </div>
              <div class="bothNumLine">一</div>
              <div class="bothNumRight">
                <Input :disabled="item.disabled"
                       :type="item.type"
                       @on-click="runMethods(item.iconclick)"
                       @on-enter="runMethods(item.inputenter)"
                       :icon="item.icon"
                       v-model="formConfig.formValue[`${item.value}`].value2"
                       :placeholder="item.placeholder ? item.placeholder : ''"
                       :element-id="item.id"
                       :regx="item.regx"></Input>
              </div>
            </div>
          </FormItem>
          <FormItem :label="`${item.label}`+':'"
                    v-else-if="item.style === 'formCompile'">
            <slot :rowData="{ item, value: formConfig.formValue }"
                  :rowIndex="index"
                  :name="item.slotName" />
          </FormItem>
          <!-- 内容全自定义脱离form时使用 -->
          <template v-else-if="item.style === 'compile'">
            <slot :rowData="{ item, value: formConfig.formValue }"
                  :rowIndex="index"
                  :name="item.slotName" />
          </template>
        </template>
        </Col>
      </Row>
      <!-- 订单新增页添加按钮 -->
      <div v-for="(item , index) in formConfig.formData" :key="index" v-if="item.style==='addBtn'">
        <Button type="primary" icon="md-return-left" @click="runMethods(item.addData)">添加</Button>
      </div>
    </Form>

    <div class="imgLeft"
         v-if="formConfig.img && formConfig.img.type === 'imgLeft'">
      <img :width="formConfig.img.width"
           :height="formConfig.img.height"
           :src="formConfig.img.url"
           alt="">
    </div>

    <!-- 右上角小箭头 -->
    <i class="flodBtn"
       v-if="formConfig.flodClick"
       :class="flodData"
       @click="flodClick(formConfig.flodClick ? formConfig.flodClick : '')"></i>

  </div>
</template>

<script>
import businessForm from './js/businessForm.js';
export default businessForm;
</script>

<style lang='less'>
@import "css/businessForm.less";
</style>

<style lang='less'>
.orderManageEdit .businessForm_a {
  .ark-input-innerWrap {
    top: -3px;
  }
}
</style>


