<template>
  <div class="h5-wrap">
    <div class="header-box"><!--<i class="go-back el-icon-arrow-left"></i>-->{{ billJson.billDesc }}</div>
    <el-form label-position="top" class="form-box" ref="editForm" :model="formData">
      <div class="tab-box" style="height: 0px;">
        <div>
          <template v-for="(tab,index) in billJson.tabList">
            <div :key="index" v-if="tab.enabled" class="item" :class="{'on' : activeName == index}"
                 @click="activeName = index">{{ tab.name }}
            </div>
          </template>
        </div>
      </div>

      <template v-if="showContent">
        <template v-for="(tab,index) in billJson.tabList">
          <div class="c" v-if="activeName == index" :key="index">
            <template v-for="(item,index2) in tab.itemDTOs">
              <template v-if="getIsShowItem(item)">
                <div class="c-item" v-if="item.type==1" :key="index2">
                  <div class="tit"><b>{{ item.itemDesc }}</b></div>
                  <table class="form-table">
                    <tr v-for="(fieldGroup,index3) in getFieldDTOsGroups(item.fieldDTOs)" :key="index3">
                      <template v-for="(fieldDTO,index4) in fieldGroup">
                        <th :key="'0-'+index4" :class="getFormItemClass(fieldDTO)">{{ fieldDTO.fieldDesc }}</th>
                        <td :key="'1-'+index4" :colspan="fieldDTO.fieldSize=='small'?'1':'3'"
                            :class="getFormItemClass(fieldDTO)">
                          <el-form-item :prop="fieldDTO.fieldName"
                                        :rules="[{ required: fieldDTO.required, trigger: ['blur', 'change'] }]"
                          >
                            <compareView :isCompare="isCompare" :oldVal="formDataH[fieldDTO.fieldName]"
                                         :newVal="formData[fieldDTO.fieldName]"
                                         :oldLabel="getCellValue(formDataH, fieldDTO)">
                              <template v-if="fieldDTO.fieldStyle==9">
                                <a href="javascript:void(0);" class="a-link underLine" style="color: #2a6494;"
                                   @click="openDetailDialog(item,fieldDTO)">{{ getCellValue(formData, fieldDTO) }}</a>
                              </template>
                              <template v-else-if="!billJson.showSaveButton">
                                {{ getCellValue(formData, fieldDTO) }}
                              </template>
                              <template v-else-if="fieldDTO.fieldStyle==1">
                                <el-input size="small" v-model="formData[fieldDTO.fieldName]"
                                          maxlength="255" autocomplete="off" clearable v-bind="fieldDTO.option"/>
                              </template>
                              <template v-else-if="fieldDTO.fieldStyle==2">
                                <el-date-picker
                                  size="small"
                                  v-model="formData[fieldDTO.fieldName]"
                                  type="date"
                                  placeholder="选择日期"
                                  value-format="yyyy-MM-dd"
                                  clearable
                                  v-bind="fieldDTO.option"
                                />
                              </template>
                              <template v-else-if="fieldDTO.fieldStyle==3">
                                <el-radio-group v-model="formData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                                  <el-radio v-for="(fieldStyleValue,index4) in fieldDTO.fieldStyleValue" :key="index4"
                                            :label="fieldStyleValue.value">
                                    {{ fieldStyleValue.label }}
                                  </el-radio>
                                </el-radio-group>
                              </template>
                              <template v-else-if="fieldDTO.fieldStyle==4">
                                <el-checkbox-group v-model="formData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                                  <el-checkbox v-for="(fieldStyleValue,index4) in fieldDTO.fieldStyleValue"
                                               :key="index4"
                                               :label="fieldStyleValue.value">{{ fieldStyleValue.label }}
                                  </el-checkbox>
                                </el-checkbox-group>
                              </template>
                              <template v-else-if="[5,7,8].includes(fieldDTO.fieldStyle)">
                                {{ getCellValue(formData, fieldDTO) }}
                              </template>
                              <template v-else-if="fieldDTO.fieldStyle==6">
                                <el-select v-model="formData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                                  <el-option
                                    v-for="(fieldStyleValue,index4) in fieldDTO.fieldStyleValue"
                                    :key="index4"
                                    :value="fieldStyleValue.value"
                                  >
                                    {{ fieldStyleValue.label }}
                                  </el-option>
                                </el-select>
                              </template>
                            </compareView>
                          </el-form-item>
                        </td>
                      </template>
                    </tr>
                  </table>
                </div>
                <div class="c-item" v-if="item.type==2" :key="index2">
                  <div class="tit">
                    <b>{{ item.itemDesc }}</b>
                    <!--                  <div class="fr">
                                        <el-link @click="addItem(item)"><i class="el-icon-search"></i><span>选择</span></el-link>
                                      </div>-->
                  </div>
                  <div class="pro-list">
                    <div class="pro-item" v-for="(itemData,index3) in formData[item.fieldName]" :key="index3"
                         @click="openItemViewDialog(item,itemData)">
                      <!--                    <el-button type="danger" icon="el-icon-close" circle class="close"
                                                     @click="removeItem(formData[item.fieldName],index3)"></el-button>-->
                      <div class="t">
                        <span>{{
                            itemData[item.mainFieldName]
                          }}<i class="el-icon-warning" v-if="isItemChange(itemData,item)"></i></span>
                      </div>
                      <div class="info">
                        <table class="form-list-table">
                          <tr v-for="(fieldGroup,index03) in getFieldDTOsGroups(item.fieldDTOs,1)" :key="index03">
                            <template v-for="(fieldDTO,index4) in fieldGroup">
                              <th :key="'0-'+index4" :class="getFormItemClass(fieldDTO)">{{ fieldDTO.fieldDesc }}</th>
                              <td :key="'1-'+index4" :colspan="fieldDTO.fieldSize=='small'?'1':'3'"
                                  :class="getFormItemClass(fieldDTO)">
                                <el-form-item :prop="getPropIndex(item,fieldDTO,index3)"
                                              :rules="[{ required: fieldDTO.required, trigger: ['blur', 'change'] }]"
                                >
                                  <compareView :isCompare="isCompare && getIsItemCompareEnabled(item)"
                                               :oldVal="getHValue(itemData, item,fieldDTO)"
                                               :newVal="itemData[fieldDTO.fieldName]"
                                               :oldLabel="getCellValue(itemData.hData, fieldDTO)">
                                    <template v-if="fieldDTO.fieldStyle==9">
                                      <a href="javascript:void(0);" class="a-link underLine" style="color: #2a6494;"
                                         @click.stop="openItemDetailDialog(item,fieldDTO,itemData)">{{
                                          getCellValue(itemData, fieldDTO)
                                        }}</a>
                                    </template>
                                    <template v-else-if="!billJson.showSaveButton">
                                      {{ getCellValue(itemData, fieldDTO) }}
                                    </template>
                                    <template v-else-if="fieldDTO.fieldStyle==1">
                                      <el-input size="small" v-model="itemData[fieldDTO.fieldName]"
                                                maxlength="255" autocomplete="off" clearable v-bind="fieldDTO.option"/>
                                    </template>
                                    <template v-else-if="fieldDTO.fieldStyle==2">
                                      <el-date-picker
                                        size="small"
                                        v-model="itemData[fieldDTO.fieldName]"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd"
                                        clearable
                                        v-bind="fieldDTO.option"
                                      />
                                    </template>
                                    <template v-else-if="fieldDTO.fieldStyle==3">
                                      <el-radio-group v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                                        <el-radio v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
                                                  :key="index5"
                                                  :label="fieldStyleValue.value">
                                          {{ fieldStyleValue.label }}
                                        </el-radio>
                                      </el-radio-group>
                                    </template>
                                    <template v-else-if="fieldDTO.fieldStyle==4">
                                      <el-checkbox-group v-model="itemData[fieldDTO.fieldName]"
                                                         v-bind="fieldDTO.option">
                                        <el-checkbox v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
                                                     :key="index5"
                                                     :label="fieldStyleValue.value">{{ fieldStyleValue.label }}
                                        </el-checkbox>
                                      </el-checkbox-group>
                                    </template>
                                    <template v-else-if="[5,7,8].includes(fieldDTO.fieldStyle)">
                                      {{ getCellValue(itemData, fieldDTO) }}
                                    </template>
                                    <template v-else-if="fieldDTO.fieldStyle==6">
                                      <el-select v-model="itemData[fieldDTO.fieldName]" v-bind="fieldDTO.option">
                                        <el-option
                                          v-for="(fieldStyleValue,index5) in fieldDTO.fieldStyleValue"
                                          :key="index5"
                                          :value="fieldStyleValue.value"
                                        >
                                          {{ fieldStyleValue.label }}
                                        </el-option>
                                      </el-select>
                                    </template>
                                  </compareView>


                                </el-form-item>
                              </td>
                            </template>
                          </tr>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="c-item" v-if="item.type==3" :key="index2">
                  <div class="tit"><b>{{ item.itemDesc }}</b></div>
                  <div class="uploadlist-box">
                    <div class="item" v-for="(attachment,index3) in formData[item.fieldName]" :key="index3"
                         :title="getAttachmentName(attachment)">
                      <el-image
                        :src="getShowUrl(attachment)" @click="$baseFilePreview(formData[item.fieldName],index3)">
                      </el-image>
                      <div class="txt" v-if="item.hideInfo!==true">{{ getAttachmentName(attachment) }}</div>
                      <el-button type="danger" icon="el-icon-close" circle class="close" v-if="isPreview || wfModify"
                                 @click="removeFile(item,formData[item.fieldName],index3)"></el-button>
                    </div>
                  </div>
                  <el-upload
                    v-if="isPreview || wfModify"
                    :ref="'upload'+index2"
                    :key="'upload'+index2"
                    action=""
                    :http-request="(param)=>{
                                    uploadSectionFile(param,'upload'+index2);
                                  }"
                    list-type="picture-card"
                    :auto-upload="true"
                    :show-file-list="true"
                    :accept="item.fileConfig && item.fileConfig.accept?item.fileConfig.accept:'file'"
                    :before-upload="handleBeforeUpload"
                    :on-remove="handleRemove"
                    :on-success="(response, file, fileList)=>{
                                      handleSuccess({
                                      response,
                                      file,
                                      fileList,
                                      uploadRef:'upload'+index2,
                                      item:item
                                      })
                                  }"
                  >
                    <i slot="default" class="el-icon-camera"></i>
                    <div slot="file" slot-scope="{file}">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="getShowUrl(file)" alt=""
                      >
                      <span class="btn-close"><i class="el-icon-close"></i></span>
                    </div>
                  </el-upload>
                </div>
                <div class="c-item" v-if="item.type==4" :key="index2">
                  <div class="tit"><b>{{ item.itemDesc }}</b></div>
                  <div class="uploadlist-box">
                    <template v-if="!!formData[item.fieldName]">
                      <div class="item" v-for="(attachment,index3) in [formData[item.fieldName]]" :key="index3"
                           :title="getAttachmentName(attachment)">
                        <el-image
                          :src="getShowUrl(attachment)" @click="$baseFilePreview(attachment,index3)">
                        </el-image>
                        <div class="txt">{{ getAttachmentName(attachment) }}</div>
                        <el-button type="danger" icon="el-icon-close" circle class="close" v-if="isPreview || wfModify"
                                   @click="removeFile(item,formData[item.fieldName],index3)"></el-button>
                      </div>
                    </template>
                  </div>
                  <el-upload
                    v-show="!formData[item.fieldName]"
                    v-if="isPreview || wfModify"
                    :ref="'upload'+index2"
                    :key="'upload'+index2"
                    action=""
                    :http-request="(param)=>{
                                    uploadSectionFile(param,'upload'+index2);
                                  }"
                    list-type="picture-card"
                    :auto-upload="true"
                    :show-file-list="true"
                    :accept="item.fileConfig && item.fileConfig.accept?item.fileConfig.accept:'file'"
                    :before-upload="handleBeforeUpload"
                    :on-remove="handleRemove"
                    :on-success="(response, file, fileList)=>{
                                      handleSuccess({
                                      response,
                                      file,
                                      fileList,
                                      uploadRef:'upload'+index2,
                                      item:item
                                      })
                                  }"
                  >
                    <i slot="default" class="el-icon-camera"></i>
                    <div slot="file" slot-scope="{file}">
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="getShowUrl(file)" alt=""
                      >
                      <span class="btn-close"><i class="el-icon-close"></i></span>
                    </div>
                  </el-upload>
                </div>
              </template>
            </template>
          </div>
        </template>
      </template>
      <div class="fix-bottom-btns" v-if="true || billJson.showSaveButton || !!taskParam.appBillCode">
        <!--begin-->
        <el-button class="btn" type="success" @click="openAgreeDialog" v-if="wfEnabled && wfInfo.toSubmit"
                   icon="iconfont icon-tongguo">{{ $t1('通过') }}
        </el-button>
        <el-button class="btn" type="danger" @click="rejectWfTask" v-if="wfEnabled && wfInfo.toReject"
                   icon="iconfont icon-a-bohui1">{{ $t1('驳回') }}
        </el-button>
        <el-button class="btn" type="primary" @click="openChangeWfForm"
                   v-if="wfEnabled && ((wfInfo.toTransfer===null || wfInfo.toTransfer===undefined) ? wfInfo.toSubmit: wfInfo.toTransfer)"
                   icon="iconfont icon-zhuanban">{{ $t1('转办') }}
        </el-button>
        <!--end-->

        <el-button class="btn" type="primary" icon="el-icon-edit" @click="openModifyDialog"
                   v-if="wfEnabled && !!taskParam.appBillCode">{{ $t1('修改单据') }}
        </el-button>
        <el-button class="btn" type="primary" icon="el-icon-check" v-if="billJson.showSaveButton" @click="saveData">
          {{ $t1('保存') }}
        </el-button>
        <el-button class="btn" type="primary" icon="el-icon-check" @click="compare" v-if="getIsCompareEnabled()">
          {{ $t1('对比') }}
        </el-button>
        <!--        <el-dropdown>
                  <el-button class="btn more-btn" type="warning" plain icon="iconfont icon-guidang">
                    更多
                  </el-button>
                  <el-dropdown-menu slot="dropdown" class="mobileApp_dropdown">
                    <el-dropdown-item>
                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <el-button class="btn" type="primary" icon="el-icon-school">按钮一</el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>-->

      </div>
      <el-dialog
        v-if="rejectDialogVisible"
        :visible.sync="rejectDialogVisible"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :modal="false"
        custom-class="dialog-style wf-dialog"
        v-el-drag-dialog
        v-el-dialog-center
      >
        <template #title>
          <span class="el-dialog__title">{{ $t1('流程驳回') }}<span style="margin-left: 10px;margin-right: 10px;">—</span><b
            class="f-red" style="font-size: 12px;">{{ $t1('节点') }}：{{
              wfInfo.taskName
            }}</b></span>
        </template>
        <el-form :model="rejectForm">
          <div id="containt">
            <table class="table-detail">
              <tbody>
              <tr>
                <th>
                    <span class="t">
                      {{ $t1('驳回节点') }}
                    </span>
                </th>
                <td>
                  <el-form-item label="" field="nodeId">
                    <el-select v-model="rejectForm.nodeId" :placeholder="$t1('请选择驳回节点')">
                      <el-option v-for="(rejectNode,index) in rejectNodes" :label="rejectNode.nodeName"
                                 :value="rejectNode.nodeId" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th>
                    <span class="t">
                      {{ $t1('驳回意见') }}

                    </span>
                </th>
                <td>
                  <el-form-item label="" field="opinion">
                    <el-input type="textarea" :rows="8" :placeholder="$t1('请输入内容')"
                              v-model="rejectForm.opinion"></el-input>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" plain class="button-sty" @click="rejectDialogVisible = false">
            <i class="el-icon-close el-icon"></i>
            {{ $t1('取 消') }}
          </el-button>
          <el-button type="primary" @click="subRejectForm" class="button-sty">
            <i class="el-icon-check el-icon"></i>
            {{ $t1('确 定') }}
          </el-button>
        </span>
      </el-dialog>
      <el-dialog
        v-if="agreeDialogVisible"
        :visible.sync="agreeDialogVisible"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :modal="false"
        custom-class="dialog-style wf-dialog"
        v-el-drag-dialog
        v-el-dialog-center
      >
        <template #title>
          <span class="el-dialog__title">{{ $t1('流程通过') }}<span style="margin-left: 10px;margin-right: 10px;">—</span><b
            class="f-red" style="font-size: 12px;">{{ $t1('节点') }}：{{
              wfInfo.taskName
            }}</b></span>
        </template>
        <el-form :model="agreeForm">
          <div id="containt">
            <table class="table-detail">
              <tbody>
              <tr v-if="agreeNodes.length>0">
                <th>
                    <span class="t">
                      {{ $t1('通过节点') }}
                    </span>
                </th>
                <td>
                  <el-form-item label="" field="nodeId">
                    <el-select v-model="agreeForm.nodeId" :placeholder="$t1('请选择通过节点')">
                      <el-option v-for="(node,index) in agreeNodes" :label="node.nodeName"
                                 :value="node.nodeId" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th>
                    <span class="t">
                      {{ $t1('通过意见') }}
                    </span>
                </th>
                <td>
                  <el-form-item label="" field="opinion">
                    <el-input type="textarea" :rows="8" placeholder="$t1('请填写您的意见~
         注：
         通过默认意见为“同意”')" v-model="agreeForm.opinion"></el-input>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" plain class="button-sty" @click="agreeDialogVisible = false">
            <i class="el-icon-close el-icon"></i>
            {{ $t1('取 消') }}
          </el-button>
          <el-button type="primary" @click="subAgreeForm" class="button-sty">
            <i class="el-icon-check el-icon"></i>
            {{ $t1('确 定') }}
          </el-button>
        </span>
      </el-dialog>
      <el-dialog
        v-if="changeWfDialogVisible"
        :visible.sync="changeWfDialogVisible"
        :modal-append-to-body="false"
        :close-on-click-modal="false"
        :modal="false"
        custom-class="dialog-style wf-dialog"
        v-el-drag-dialog
        v-el-dialog-center
      >
        <template #title>
          <span class="el-dialog__title">{{ $t1('流程转办') }}<span style="margin-left: 10px;margin-right: 10px;">—</span><b
            class="f-red" style="font-size: 12px;">{{ $t1('节点') }}：{{
              wfInfo.taskName
            }}</b></span>
        </template>
        <el-form :model="changeWfForm">
          <div id="containt">
            <table class="table-detail">
              <tbody>
              <tr>
                <th>
                    <span class="t">
                      {{ $t1('转办人') }}
                    </span>
                </th>
                <td>
                  <el-form-item label="" field="nodeId">
                    <el-input
                      class="search-input"
                      max="200"
                      v-model="changeWfForm.userNickNames"
                      @clear="
                          changeWfForm.userIds = '';
                          changeUserRows = [];
                          $forceUpdate();
                        "
                      :placeholder="$t1('请选择转办人')"
                      v-el-readonly
                      clearable
                    >
                      <i slot="suffix" class="el-input__icon el-icon-search" @click="showUserDialog = true"></i>
                    </el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <th>
                    <span class="t">
                      {{ $t1('转办意见') }}
                    </span>
                </th>
                <td>
                  <el-form-item label="" field="opinion">
                    <el-input type="textarea" :rows="8" :placeholder="$t1('请输入内容')"
                              v-model="changeWfForm.opinion"></el-input>
                  </el-form-item>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" plain class="button-sty" @click="changeWfDialogVisible = false">
            <i class="el-icon-close el-icon"></i>
            {{ $t1('取 消') }}
          </el-button>
          <el-button type="primary" @click="subChangeWfForm" class="button-sty">
            <i class="el-icon-check el-icon"></i>
            {{ $t1('确认转办') }}
          </el-button>
        </span>
      </el-dialog>
      <user-dialog v-if="showUserDialog" :visiable.sync="showUserDialog" @close="showUserDialog = false"
                   @confirm="userConfirm" multi="true" :param.sync="wfUserParamForTransfer"
                   :rows="changeUserRows"></user-dialog>
      <itemViewDialog v-if="showItemViewDialog" :visiable.sync="showItemViewDialog" :billJson="billJson"
                      :item="checkItem" :itemData="checkItemData" :itemDataH="itemDataH"
                      :isCompare="isCompare" @openItemDetailDialog="openItemDetailDialog"></itemViewDialog>
    </el-form>
    <!--    <div class="fix-bottom-btns" v-if="showContent">
          <el-button class="btn" type="primary">{{$t1('保存')}}</el-button>
          <el-button class="btn" type="success">提交</el-button>
        </div>-->

    <queryDialog v-if="showQueryDialog" :visiable.sync="showQueryDialog" :option="queryDialogOption"
                 @confirm="confirmQueryDialog"></queryDialog>

    <modifyDialog v-if="showModifyDialog" :visiable.sync="showModifyDialog" :option="modifyDialogOption"
                  @reload="$emit('reload')"></modifyDialog>

    <detailDialog v-if="showDetailDialog" :visiable.sync="showDetailDialog" :option="detailDialogOption"
                  @reload="$emit('reload')"></detailDialog>

  </div>
</template>

<script>
import axios from 'axios';
import queryDialog from "./queryDialog";
import wfMixin from "./mixins/wf";
import userDialog from "./userDialog.vue";
import compareView from "./compareView.vue";


// import modifyDialog from "./h5_ModifyDialog";


export default {
  name: "render",
  components: {
    queryDialog,
    userDialog,
    itemViewDialog: () => import("./itemViewDialog"),
    modifyDialog: () => import("./h5_ModifyDialog"),
    detailDialog: () => import("./h5_detailDialog"),
    compareView
  },
  props: {
    wfModify: {
      type: Boolean,
      default: () => false
    },
    isPreview: {
      type: Boolean,
      default: () => false
    },
  },
  mixins: [wfMixin],
  data() {
    return {
      activeName: 0,
      billJson: {tabList: []},
      template: {},
      formData: {},
      isEdit: false,
      dataId: null,
      uploadUrl: null,
      disabled: true,
      billSetting: {},
      option: {},
      showContent: false,
      showQueryDialog: false,
      queryDialogOption: {},

      showItemViewDialog: false,
      checkItem: null,
      checkItemData: null,
      wfEnabled: false,

      formDataH: {},
      isCompare: false,
      itemDataH: {},

      showModifyDialog: false,
      showDetailDialog: false,
      detailDialogOption: {},
      formData2: {}

    };
  },
  provide() {
    return {
      getBillJson: () => this.billJson
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    getFieldDTOsGroups(fieldDTOs, flag) {
      let list = [];
      let items = fieldDTOs.filter(fieldDTO => {
        return fieldDTO.enabled && (flag !== 1 || fieldDTO.showForRow == true)
      });
      let span = 2;
      items.forEach(item => {
        if (item.fieldSize == 'small') {
          if (span == 1) {
            list[list.length - 1].push(item)
            span = 2;
          } else {
            list.push([item]);
            span = 1;
          }
        } else {
          list.push([item]);
          span = 2;
        }
      })
      return list;
    },
    getFormItemClass(fieldDTO) {
      let classList = [];
      if (fieldDTO.bold === true) {
        classList.push('bold');
      }
      if (fieldDTO.colorClass) {
        classList.push(fieldDTO.colorClass);
      }
      return classList.join(' ');
    },
    getData2(billJson, reqParam, rowData, callback) {
      let dataId = this.dataId;
      let isEdit = this.isEdit;
      let defaultFormData = {};
      let pFormData = this.formData;
      billJson.tabList.forEach(tab => {
        if (tab.enabled) {
          tab.itemDTOs.forEach(item => {
            if (item.enabled) {
              let type = item.type;
              if (type == 1) {
                item.fieldDTOs.forEach(fieldDTO => {
                  if (isEdit) {
                    defaultFormData[fieldDTO.fieldName] = null;
                  } else {
                    defaultFormData[fieldDTO.fieldName] = fieldDTO.defaultValue ?? null
                  }
                  if ([4, 8].includes(fieldDTO.fieldStyle) && defaultFormData[fieldDTO.fieldName] == null) {
                    defaultFormData[fieldDTO.fieldName] = [];
                  }
                })
              } else if (type == 2) {
                if (isEdit) {
                  defaultFormData[item.fieldName] = [];
                } else {
                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
                }
              } else if (type == 3) {
                if (isEdit) {
                  defaultFormData[item.fieldName] = [];
                } else {
                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
                }
              }
            }
          })
        }
      })
      let url = billJson.getUrl;
      let newBillJson = {...billJson};
      if (reqParam) {
        newBillJson.reqParam = reqParam;
      }
      let reqData0 = this.getReqParam(newBillJson, dataId, pFormData, rowData);
      this.$commonHttp({
        url: url,
        method: `post`,
        data: reqData0,
        isLoading: true,
        modalStrictly: true,
        success: res => {
          let formData = res.objx || {};
          const requests = [];
          billJson.tabList.forEach(tab => {
            if (tab.enabled) {
              tab.itemDTOs.forEach(item => {
                if (item.enabled) {
                  let type = item.type;
                  if (type == 2 || type == 3) {
                    let reqData = this.getReqParam(item, formData.id, formData);
                    requests.push(this.$http({
                      url: item.getUrl,
                      method: `post`,
                      data: reqData,
                      isLoading: true,
                      modalStrictly: true,
                      success: res1 => {
                        formData[item.fieldName] = res1.objx || [];
                      }
                    }))
                  }
                }
              })
            }
          })
          if (requests.length) {
            Promise.all(requests)
              .then(responses => {
                // 所有请求都成功了
                // 处理你的数据
                /*responses.forEach(response => {
                  console.log(response.data);
                });*/
                formData = Object.assign({}, defaultFormData, formData);
                this.formData2 = formData;
                callback && callback(formData)
              })
              .catch(error => {
                // 至少一个请求失败了
                console.error('An error occurred:', error);
              });
          } else {
            formData = Object.assign({}, defaultFormData, formData);
            this.formData2 = formData;
            callback && callback(formData)
          }
        }
      });

    },
    openDetailDialog(itemDTO, fieldDTO) {
      if (!fieldDTO.detailDialog || !fieldDTO.detailCode) {
        return;
      }
      let detailReqParam = fieldDTO.detailReqParam;
      this.getBillSetting(fieldDTO.detailCode, {
        success: res => {
          let billSetting = res.objx || {};
          let jsonStr = billSetting.data;
          let detailJson = JSON.parse(jsonStr);
          this.getData2(detailJson, detailReqParam, null, (formData2) => {
            this.detailDialogOption = {
              formData: formData2,
              billJson: detailJson
            };
            this.showDetailDialog = true;
          })
        }
      });

    },
    init2(option) {
      this.formData = option.formData;
      this.billJson = option.billJson;
      this.billSetting = option.billSetting
      this.option = option;
      this.showContent = true;
    },
    async init(option, isPreview) {
      this.showContent = false;
      this.formData = {};
      this.billJson = {tabList: []};
      this.dataId = option.dataId || null;
      this.isEdit = !!option.dataId;
      this.option = option;

      this.wfEnabled = option.wfEnabled === true || option.wfEnabled === "true" || this.$route.query.wfEnabled === "true";
      await this.initTemplate(option, isPreview);
      this.getData();
    },
    initTemplate(option, isPreview) {
      let code = option.code;
      let billSetting = option.billSetting
      if (isPreview) {
        this.billSetting = billSetting;
        let jsonStr = this.billSetting.data;
        if (jsonStr) {
          this.billJson = JSON.parse(jsonStr)
        }
        return
      }

      return this.getBillSetting(code, {
        success: res => {
          this.billSetting = res.objx || {};
          let jsonStr = this.billSetting.data;
          if (jsonStr) {
            this.billJson = JSON.parse(jsonStr)
          }
        }
      });
    },
    getBillSetting(code, option) {
      return this.$http({
        url: USER_PREFIX + `/bill_setting/getByCode`,
        method: `post`,
        data: {
          stringOne: code
        },
        isLoading: true,
        modalStrictly: true,
        ...option
      });
    },
    getData() {
      let dataId = this.dataId;
      let isEdit = this.isEdit;
      let billJson = this.billJson;
      let defaultFormData = {};
      billJson.tabList.forEach(tab => {
        if (tab.enabled) {
          tab.itemDTOs.forEach(item => {
            if (item.enabled) {
              let type = item.type;
              if (type == 1) {
                item.fieldDTOs.forEach(fieldDTO => {
                  if (isEdit) {
                    defaultFormData[fieldDTO.fieldName] = null;
                  } else {
                    defaultFormData[fieldDTO.fieldName] = fieldDTO.defaultValue ?? null
                  }
                  if ([4, 8].includes(fieldDTO.fieldStyle) && defaultFormData[fieldDTO.fieldName] == null) {
                    defaultFormData[fieldDTO.fieldName] = [];
                  }
                })
              } else if (type == 2) {
                if (isEdit) {
                  defaultFormData[item.fieldName] = [];
                } else {
                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
                }
              } else if (type == 3) {
                if (isEdit) {
                  defaultFormData[item.fieldName] = [];
                } else {
                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
                }
              }
            }
          })
        }
      })
      if (dataId && !isNaN(dataId)) {
        let url = billJson.getUrl;
        let reqData0 = this.getReqParam(billJson, dataId, {id: dataId})
        this.$commonHttp({
          url: url,
          method: `post`,
          data: reqData0,
          isLoading: true,
          modalStrictly: true,
          success: res => {
            let formData = res.objx || {};
            const requests = [];
            billJson.tabList.forEach(tab => {
              if (tab.enabled) {
                tab.itemDTOs.forEach(item => {
                  if (item.enabled) {
                    let type = item.type;
                    if (type == 2 || type == 3) {
                      let reqData = this.getReqParam(item, dataId, formData);
                      requests.push(this.$http({
                        url: item.getUrl,
                        method: `post`,
                        data: reqData,
                        isLoading: true,
                        modalStrictly: true,
                        success: res1 => {
                          formData[item.fieldName] = res1.objx || [];
                        }
                      }))
                    }
                  }
                })
              }
            })
            if (requests.length) {
              Promise.all(requests)
                .then(responses => {
                  // 所有请求都成功了
                  // 处理你的数据
                  /*responses.forEach(response => {
                    console.log(response.data);
                  });*/
                  formData = Object.assign({}, defaultFormData, formData);
                  this.formData = formData;
                  this.showContent = true;
                  this.createWfContent();
                })
                .catch(error => {
                  // 至少一个请求失败了
                  console.error('An error occurred:', error);
                });
            } else {
              formData = Object.assign({}, defaultFormData, formData)
              this.formData = formData;
              this.showContent = true;
              this.createWfContent();
            }
          }
        });
      } else {
        this.formData = defaultFormData;
        this.showContent = true;
      }
    },
    createWfContent() {
      let billJson = this.billJson;
      let objId = this.dataId;
      let wfCode = billJson.wfCode;
      if (objId && billJson.wfEnabled && wfCode) {
        let wfConfig = {objId: objId, wfCode: wfCode}
        let urlArr = billJson.getUrl.split('/');
        let opt2 = Object.assign({}, wfConfig, {
          serviceId: urlArr[1]
        });
        this.initWf(opt2)
      }
    },
    saveData() {
      if (this.isPreview === true) {
        return
      }
      this.$refs.editForm.$baseValidate(valid => {
        if (valid) {
          this.$baseConfirm(this.$t1('您确定要保存吗？')).then(() => {
            var url = this.billJson.saveUrl;
            this.$http({
              url: url,
              method: `post`,
              data: this.formData,
              isLoading: true,
              success: res => {
                this.$message({
                  message: res.content,
                  type: 'success',
                  duration: 500,
                  onClose: t => {
                    if (this.wfModify) {
                      this.$emit('modifyCallback');
                    } else {
                      this.$emit('reload');
                    }
                  }
                });
              }
            });
          });
        }
      });
    },
    async handleBeforeUpload(file, uploadRef) {
      /*let target = this.$refs[uploadRef][0];
      let nFile = target.getFile(file);
      if (!nFile) {
        return false;
      }*/
      var mineUploadUrl = window.BASE_FILEURL;
      await this.$http({
        url: mineUploadUrl,
        method: 'post',
        data: {
          isAuth: false
        },
        success: res => {
          this.uploadUrl = res.objx;
        }
      });
    },
    //明细begin
    getCellValue(row, fieldDTO) {
      if (!row) return null;
      let rowValue = row[fieldDTO.fieldName];
      if ([1, 2, 5, 9].includes(fieldDTO.fieldStyle)) {
        return rowValue;
      } else if ([3, 6, 7].includes(fieldDTO.fieldStyle)) {
        let item = fieldDTO.fieldStyleValue.find(item => rowValue === item.value)
        return item ? item.label : null;
      } else if ([4, 8].includes(fieldDTO.fieldStyle)) {
        rowValue = rowValue || [];
        let label = fieldDTO.fieldStyleValue.filter(item => rowValue.includes(item.value)).map(item => item.label).join(",");
        return label;
      }
    },
    removeItem(items, index) {
      items.splice(index, 1);
    },
    openQueryDialog(itemDTO) {
      this.queryDialogOption = {
        itemDTO: itemDTO
      };
      this.showQueryDialog = true;
    },
    confirmQueryDialog(rows) {
      let itemDTO = this.queryDialogOption.itemDTO;
      this.addTableData(itemDTO, rows);
    },
    addItem(itemDTO) {
      if (itemDTO.queryDialog) {
        this.openQueryDialog(itemDTO);
      } else {
        this.addTableData(itemDTO);
      }
    },
    addTableData(itemDTO, rows, field) {
      let addConfig = itemDTO.addConfig;
      field = field || addConfig.uniqueKey || null;
      let insertDefaultJson = addConfig.insertDefaultJson || {};
      let insertDefaultData = addConfig.insertDefaultData || {};
      let fullData = this.formData[itemDTO.fieldName] || [];
      let items;
      if (field) {
        let keys = fullData.map(item => {
          return item[field] + "";
        });
        let fields = Object.keys(insertDefaultJson);
        items = rows.map(row => {
          let item = {};
          fields.forEach(field => {
            let field2 = insertDefaultJson[field];
            if (field2 === "" || field2 === null) {
              item[field] = field2;
            } else {
              item[field] = row[field2] ?? null
            }
          })
          item = Object.assign({}, insertDefaultData, item)
          return item;
        }).filter(item => {
          let value = item[field] + ""
          return !keys.includes(value);
        });
      } else {
        items = rows || [insertDefaultData];
      }
      fullData.push(...items);
    },
    openItemViewDialog(item, itemData) {
      if (item.detailDialog == true && item.detailCode) {
        this.openItemDetailDialog(item, null, itemData)
        return
      }
      this.checkItem = item;
      this.checkItemData = itemData;
      this.itemDataH = itemData.hData || {};
      this.showItemViewDialog = true;
    },
    openItemDetailDialog(itemDTO, fieldDTO, itemData) {
      let detailCode;
      let detailReqParam;
      if (fieldDTO) {
        if (!fieldDTO.detailDialog || !fieldDTO.detailCode) {
          return;
        }
        detailCode = fieldDTO.detailCode;
        detailReqParam = fieldDTO.detailReqParam;
      } else {
        if (!itemDTO.detailDialog || !itemDTO.detailCode) {
          return;
        }
        detailCode = itemDTO.detailCode;
        detailReqParam = itemDTO.detailReqParam;
      }

      this.getBillSetting(detailCode, {
        success: res => {
          let billSetting = res.objx || {};
          let jsonStr = billSetting.data;
          let detailJson = JSON.parse(jsonStr);
          this.getData2(detailJson, detailReqParam, itemData, (formData2) => {
            this.detailDialogOption = {
              formData: formData2,
              billJson: detailJson,
              parentRowData: itemData
            };
            this.showDetailDialog = true;
          })
        }
      });

    },
    getPropIndex(item, fieldDTO, index) {
      return item.fieldName + "." + index + "." + fieldDTO.fieldName
    },
    //明细end
    //附件begin
    getReqParam(item, dataId, billData, rowData) {
      let param = {};
      if (item.reqParam) {
        if (typeof item.reqParam === "string") {
          let n = new Function('billData', "rowData", item.reqParam);
          param = n.call(this, billData, rowData);
        } else {
          param = item.reqParam
        }
      } else {
        param = {id: dataId}
      }
      return param;
    },
    uploadSectionFile(param, uploadRef) {
      let that = this;
      var fileObj = param.file;

      let source;
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      var uploadUrl = this.uploadUrl;
      if (uploadUrl) {
        var abort;
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          cancelToken: new axios.CancelToken(function executor(c) {
            let target = that.$refs[uploadRef][0];
            let file = target.getFile(fileObj);
            abort = c;
            file.abort = c;
          }),
          onUploadProgress: progressEvent => {
            let target = that.$refs[uploadRef][0];
            let file = target.getFile(fileObj);

            if (file) {
              // progressEvent.loaded:已上传文件大小
              // progressEvent.total:被上传文件的总大小
              progressEvent.percent = Math.floor((progressEvent.loaded * 100) / progressEvent
                .total);
              param.onProgress(progressEvent, fileObj);
            }
          }
        }; //添加请求头

        let req = this.$http.post(uploadUrl, form, config).then(res1 => {
          if (res1.type == "success") {
            param.onSuccess(res1, fileObj);
          } else {
            param.onError(new Error(res1.content || this.$t1('上传异常')));
          }
        }).catch(({
                    err
                  }) => {
          try {
            param.onError(err, fileObj);
          } catch (tt) {
          }
        });
        req.abort = () => {
          abort(this.$t1('取消上传'));
        }
        //return req;
      }

    },
    handlePictureCardPreview() {
    },
    handleDownload() {
    },
    handleRemove() {
    },
    handleSuccess(param) {
      let {response, file, fileList, uploadRef, item} = param
      let target = this.$refs[uploadRef][0];
      let fileInfo = response.objx
      fileInfo.name = file.name;
      target.uploadFiles.splice((target.uploadFiles.length - 1), 1);
      if (item.type == 3) {
        this.formData[item.fieldName].push(fileInfo)
      } else if (item.type == 4) {
        // this.formData[item.fieldName] = fileInfo.domain + fileInfo[item.fileConfig.dataType];
        this.$set(this.formData, item.fieldName, (fileInfo.domain + fileInfo[item.fileConfig.dataType]));
      }
    },
    getShowUrl(attachment, field) {
      let showUrl = null;
      let typeStr = Object.prototype.toString.call(attachment);
      if (typeStr == '[object Object]') {
        let showField = field ? field : 'medium';
        let fullUrl = attachment.domain + (attachment[showField] ? attachment[showField] : attachment.url);
        showUrl = this.$commonFileUtil.getShowUrl(fullUrl)
      } else {
        showUrl = this.$commonFileUtil.getShowUrl(attachment)
      }
      return showUrl;
    },
    removeFile(itemDTO, items, index) {
      if (itemDTO.type == 3) {
        items.splice(index, 1);
      } else if (itemDTO.type == 4) {
        this.formData[itemDTO.fieldName] = null;
      }
    },
    getIsShowItem(item) {
      let billData = this.formData
      let result = true;
      let show = item.show;
      if (show !== null && show !== undefined) {
        if (show == "true") {
          result = true;
        } else if (show == "false") {
          result = false;
        } else if (typeof show === "string") {
          let n = new Function('billData', show);
          result = n.call(this, billData);
        } else {
          result = show
        }
      }
      return result;
    },
    getAttachmentName(attachment) {
      let name = null;
      let typeStr = Object.prototype.toString.call(attachment);
      if (typeStr == '[object Object]') {
        name = attachment.name;
      } else {
        let url = attachment;
        if (url) {
          var i = url.lastIndexOf("/");
          if (i >= 0) {
            name = url.substring(i + 1, url.length);
          }
        }
      }
      return name;
    },
    //附件end
    //对比 begin
    compare() {
      this.getDataH(() => {
        this.isCompare = true;
      })
    },
    getDataH(callback) {
      let dataId = this.dataId;
      let isEdit = this.isEdit;
      let billJson = this.billJson;
      let defaultFormData = {};
      billJson.tabList.forEach(tab => {
        if (tab.enabled) {
          tab.itemDTOs.forEach(item => {
            if (item.enabled) {
              let type = item.type;
              if (type == 1) {
                item.fieldDTOs.forEach(fieldDTO => {
                  if (isEdit) {
                    defaultFormData[fieldDTO.fieldName] = null;
                  } else {
                    defaultFormData[fieldDTO.fieldName] = fieldDTO.defaultValue ?? null
                  }
                  if ([4, 8].includes(fieldDTO.fieldStyle) && defaultFormData[fieldDTO.fieldName] == null) {
                    defaultFormData[fieldDTO.fieldName] = [];
                  }
                })
              } else if (type == 2) {
                if (isEdit) {
                  defaultFormData[item.fieldName] = [];
                } else {
                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
                }
              } else if (type == 3) {
                if (isEdit) {
                  defaultFormData[item.fieldName] = [];
                } else {
                  defaultFormData[item.fieldName] = item.defaultValue ?? [];
                }
              }
            }
          })
        }
      })
      if (dataId && !isNaN(dataId)) {
        let url = billJson.getUrlH || billJson.getUrl;
        // let url = billJson.getUrlH;
        let reqData0 = this.getReqParamH(billJson, dataId, {id: null})
        this.$commonHttp({
          url: url,
          method: `post`,
          data: reqData0,
          isLoading: true,
          modalStrictly: true,
          success: res => {
            let formDataH = res.objx || {};
            const requests = [];
            billJson.tabList.forEach(tab => {
              if (tab.enabled) {
                tab.itemDTOs.forEach(item => {
                  if (item.enabled) {
                    let type = item.type;
                    if (type == 2 || type == 3) {
                      let reqData = this.getReqParamH(item, dataId, formDataH);
                      requests.push(this.$http({
                        url: item.getUrl,
                        method: `post`,
                        data: reqData,
                        isLoading: true,
                        modalStrictly: true,
                        success: res1 => {
                          let rows = res1.objx || [];
                          let fieldNameH = item.fieldNameH || item.fieldName;
                          formDataH[fieldNameH] = rows;
                          let uniKeyName = item.uniKeyName;
                          let uniKeyNameH = item.uniKeyNameH;
                          this.formData[item.fieldName].forEach(item => {
                            let row = rows.find(rowH => rowH[uniKeyNameH] == item[uniKeyName]);
                            item.hData = row ? this.$baseLodash.cloneDeep(row) : {};
                          })
                        }
                      }))
                    }
                  }
                })
              }
            })
            if (requests.length) {
              Promise.all(requests)
                .then(responses => {
                  // 所有请求都成功了
                  // 处理你的数据
                  /*responses.forEach(response => {
                    console.log(response.data);
                  });*/
                  formDataH = Object.assign({}, defaultFormData, formDataH);
                  this.formDataH = formDataH;
                  callback && callback();
                })
                .catch(error => {
                  // 至少一个请求失败了
                  console.error('An error occurred:', error);
                });
            } else {
              formDataH = Object.assign({}, defaultFormData, formDataH)
              this.formDataH = formDataH;
              callback && callback();
            }
          }
        });
      } else {
        this.formDataH = defaultFormData;
        callback && callback();
      }
    },
    getReqParamH(item, dataId, billDataH) {
      let param = {};
      let billData = this.formData;
      let reqParamH = item.reqParamH;
      if (reqParamH) {
        if (typeof reqParamH === "string") {
          let n = new Function('billData', 'billDataH', reqParamH);
          param = n.call(this, billData, billDataH);
        } else {
          param = reqParamH
        }
      } else {
        param = {id: dataId}
      }
      return param;
    },
    getHValue(row, itemDTO, fieldDTO) {
      let rowH = row.hData;
      if (rowH) {
        return rowH[fieldDTO.fieldName];
      } else {
        return null;
      }
    },
    isItemChange(row, itemDTO) {
      let isChange = false;
      let hData = row.hData;
      if (hData && this.isCompare) {
        isChange = itemDTO.fieldDTOs.find(fieldDTO => {
          if (fieldDTO.enabled) {
            return row[fieldDTO.fieldName] !== hData[fieldDTO.fieldName]
          } else {
            return false
          }
        }) != null;
      }
      return isChange
    },
    getIsCompareEnabled() {
      let billJson = this.billJson;
      let billData = this.formData
      let result = false;
      let show = billJson?.compareEnabled;
      if (show !== null && show !== undefined) {
        if (show == "true") {
          result = true;
        } else if (show == "false") {
          result = false;
        } else if (typeof show === "string") {
          let n = new Function('billData', show);
          result = n.call(this, billData);
        } else {
          result = show
        }
      }
      return result;
    },
    getIsItemCompareEnabled(itemJson) {
      let billData = this.formData
      let result = false;
      let show = itemJson?.compareEnabled;
      if (show !== null && show !== undefined) {
        if (show == "true") {
          result = true;
        } else if (show == "false") {
          result = false;
        } else if (typeof show === "string") {
          let n = new Function('billData', show);
          result = n.call(this, billData);
        } else {
          result = show
        }
      }
      result = this.getIsCompareEnabled() && result
      return result;
    },
    //对比 end
  }
};
</script>
<style scoped lang="scss">
.h5-wrap {
  max-width: 640px;
  margin: auto;
  background: #F1F5FB;

  .header-box {
    background-color: #FFF;
    text-align: center;
    line-height: 46px;
    height: 46px;
    font-size: 16px;
    color: #212121;
    position: relative;

    .go-back {
      position: absolute;
      left: 14px;
      top: 0;
      line-height: 46px;
      font-size: 20px;
    }
  }

  .form-box {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);

    .c {
      padding: 12px 16px 0;
      overflow: auto;
      flex: 1;

      .c-item {
        background: #FFF;
        border-radius: 12px;
        padding: 0 16px 6px;
        margin-bottom: 12px;
        overflow: hidden;

        .tit {
          margin: 0 -16px;
          padding: 16px 16px 4px;
          position: relative;

          b {
            font-size: 14px;
            font-weight: 600;
            color: #323232;

            &:before {
              content: "";
              width: 4px;
              height: 13px;
              top: 18px;
              background-color: #2A6494;
              left: 0;
              position: absolute;
              border-radius: 4px;
            }
          }

          .el-link {
            font-size: 13px;
            margin-left: 12px;
            color: #2A6494;

            .el-link--inner span {
              position: relative;

              &:before {
                content: "";
                position: absolute;
                height: 1px;
                left: 0;
                right: 0;
                bottom: -2px;
                background: #2A6494;
              }
            }

            &:hover:after {
              display: none
            }
          }
        }
      }
    }
  }

  .tab-box {
    border-bottom: solid 1px #EEEFF1;
    overflow: hidden;
    height: 36px;
    line-height: 30px;
    font-size: 13px;
    background: #FFF;
    box-shadow: 0 3px 4px rgb(0 0 0 / 2%);

    > div {
      overflow: auto;
      height: 44px;
      white-space: nowrap;

      .item {
        display: inline-block;
        margin: 0 20px 0 18px;
        color: #808080;
        position: relative;

        &.on {
          color: #323232;

          &:after {
            content: "";
            height: 4px;
            width: 20px;
            left: 50%;
            margin-left: -10px;
            background-color: #2A6494;
            position: absolute;
            bottom: 0;
            border-radius: 4px;
          }
        }

      }
    }

  }
}


.pro-list {
  .pro-item {
    position: relative;
    border: solid 1px #E9E9E9;
    padding: 12px;
    border-radius: 12px;
    margin: 8px 8px 14px;

    .close {
      position: absolute;
      right: -10px;
      top: -10px;
      border: solid 4px #FFF;
      background: #F56C6C;
      opacity: 1;
      padding: 3px;
    }

    .t {
      font-size: 14px;
      color: #323232;
      margin-bottom: 5px;
      padding-right: 28px;

      span {
        vertical-align: middle;
      }

      i.el-icon-warning {
        float: right;
        margin-top: 2px;
        color: #ff731c;
      }

      &:before {
        content: "";
        width: 5px;
        height: 5px;
        background: #2A6494;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 4px;
        display: inline-block;
        margin-top: -1px;
      }

      &:after {
        content: "\e6e0";
        font-family: element-icons !important;
        background: #2a64941f;
        border-radius: 50%;
        position: absolute;
        right: 12px;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        top: 10px;
      }
    }

    .info {
      font-size: 10px;
      color: #999;

      p {
        min-width: 49%;
        display: inline-block;
        margin-bottom: 3px;
        padding-right: 20px;
      }

      ::v-deep {
        .el-form-item {
          display: flex;
          border-bottom: none;
          min-width: 49%;
          padding: 0 4px 0 0;
          align-items: start;

          .el-form-item__label {
            display: inline;
            width: auto;
            vertical-align: middle;
          }

          .el-form-item__content {
            display: inline;
            min-height: auto;
            line-height: 16px;
            font-size: 12px;
            flex: 1;
            word-break: break-word;
            text-align: left;
          }

          .el-input {
            //width: 68px !important;

            .el-input__inner {
              border: solid 1px #E9E9E9;
              border-radius: 6px;
              height: 24px !important;
              border-radius: 6px;
            }

            .el-input__suffix {
              top: 0;

              .el-input__suffix-inner .el-input__icon {
                line-height: 24px !important;
              }
            }
          }
        }
      }
    }
  }
}

.fix-bottom-btns {
  background: #FFF;
  position: static;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 18px;
  display: block;

  .btn {
    flex: 1;
    border-radius: 30px;
    outline: none;
    width: calc(50% - 10px);
    margin: 6px 5px;

    i {
      margin-right: 4px;

      &.icon-tongguo {
        font-size: 18px;
      }
    }
  }
}

::v-deep .el-form {
  .el-form-item {
    border-bottom: solid 1px #F3F3F3;
    //display: flex;
    padding: 6px 0;
    //align-items: center;
    position: relative;
    width: 100%;

    &.m2 {
      width: 50%;
      float: left;
    }

    .el-form-item__label {
      padding: 0 5px 0 0;
      margin: 0;
      font-size: 1.25rem;
      width: 98px;
      line-height: 1.4;
      height: auto;
      overflow: hidden;

      &:before {
        position: absolute;
        margin-left: -10px;
        margin-top: 2px;
      }
    }

    .el-form-item__content {
      // line-height: 34px;
      // min-height: 34px;
      // text-align: right;
      // flex: 1;

      .el-input, .el-select {
        width: 100% !important;

        .el-input__inner {
          height: 34px !important;
          border: none;
          text-align: right;
        }

        .el-input__suffix, .el-input__prefix {
          .el-input__icon {
            line-height: 34px !important
          }
        }
      }

      .el-textarea .el-textarea__inner {
        border: none;
        text-align: right;
      }

      .el-input-number {
        width: 98px;

        .el-input__inner {
          text-align: center;
        }

        .el-input-number__increase, .el-input-number__decrease {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #EAEAEA;
          margin-top: 4px;
        }
      }

      .el-radio-group .el-radio {
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 8px;

        .el-radio__label {
          padding-left: 4px;
        }
      }

      .el-checkbox-group .el-checkbox {
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 8px;

        .el-checkbox__label {
          padding-left: 4px;
        }
      }

      .status {
        text-align: right;
        color: #2A6494;

        &:before {
          content: "";
          width: 5px;
          height: 5px;
          background-color: #2A6494;
          border-radius: 50%;
          vertical-align: middle;
          display: inline-block;
          margin-right: 4px;
        }
      }
    }

    &:last-child {
      border-bottom: none
    }
  }
}

::v-deep .el-upload-list {
  margin: 10px 0;
  display: inline-block;
  vertical-align: middle;

  .el-upload-list__item {
    width: 74px;
    height: 74px;
    padding: 0;
    border: none;
    border-radius: 6px;
    margin-bottom: 0;
    overflow: visible;

    .el-upload-list__item-thumbnail {
      padding: 0;
      width: 74px;
      height: 74px;
      border-radius: 6px;
    }

    .el-icon-close {
      position: absolute;
      right: -10px;
      top: -10px;
      border: solid 2px #FFF;
      background: #F56C6C;
      opacity: 1;
      padding: 2px;
      color: #FFF;
      border-radius: 50%;
      font-size: 14px;
      display: block;
    }

    .txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      text-align: center;
    }
  }
}

::v-deep .el-upload--picture-card {
  width: 74px;
  height: 74px;
  border: none;
  background: #F4F6F8;
  line-height: 85px;
  margin: 10px 0;
  display: inline-block;
  vertical-align: middle;

  i {
    font-size: 22px
  }
}

.uploadlist-box {
  display: inline-block;

  .item {
    width: 74px;
    height: 74px;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    margin: 10px 14px 0 0;

    ::v-deep .el-image {
      border-radius: 6px;
      height: 100%;
    }

    .close {
      position: absolute;
      right: -10px;
      top: -10px;
      border: solid 2px #FFF;
      background: #F56C6C;
      opacity: 1;
      padding: 2px;
    }

    .txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      text-align: center;
    }
  }
}

.pop-addForm {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF;
  z-index: 999;
  display: none;

  .choose-pro-list {
    border-top: solid 8px #f6f6f6;
    padding: 0 16px;

    .item {
      border-bottom: solid 1px #F2F2F2;
      padding: 12px 24px 12px 0;
      background-size: 8px;
      font-size: 12px;
      position: relative;
      overflow: hidden;

      p {
        width: 50%;
        display: block;
        float: left;
        margin-bottom: 2px;
        color: #888;

        &.name {
          color: #323232;
          font-size: 14px;
          width: 100%;
          margin-bottom: 7px;
          font-weight: 600;

          &:before {
            content: "";
            width: 6px;
            height: 6px;
            background: #2A6494;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            border-radius: 2px;
          }

          span {
            vertical-align: middle;
          }
        }
      }

      &:after {
        content: "\e6e0";
        position: absolute;
        right: 0;
        font-family: element-icons !important;
        margin-top: -10px;
        font-size: 17px;
        color: #c2c2c2;
        top: 50%;
      }
    }
  }
}


</style>
