<!-- 
 /* @name   主从表新增编辑弹窗组件
 * @authors pen (you@example.org)
 * @date    2022-05-20
 * @version 1.0.1
 */
 -->
 <template>
  <div>
    <dialog-view
      ref="dialogView"
      v-bind="$attrs"
      v-on="$listeners"
      :dialogTitle="dialogTitle ? dialogTitle : isEdit ? '编辑' : '新增'"
      :before-close="beforeClose"
      :visible.sync="visible"
      :buttons="buttons"
      dialogDefaultClass
      :width="width"
      @button-click="buttonClickEvent"
    >
      <template #dialogBody>
        <div class="fixed_status" v-if="auditText">
          <svg class="iconpark-icon audit_status">
            <use href="#auditStatus"></use>
          </svg>
          <p class="audit_text">{{ auditText }}</p>
        </div>

        <div class="dialog_view_box">
          <slot name="dialogHeadSlot"></slot>
          <!-- 主表数据 form表单 -->
          <div class="dialog_view_item" v-if="Object.keys(formItems).length">
            <p class="dialog_view_title">{{ formTitle }}</p>
            <div style="padding: 10px 16px 1px 0">
              <form-view
                ref="formView"
                v-bind="$attrs"
                v-on="$listeners"
                :disabled="disabled !== undefined ? disabled : isDisabled"
                :formItems="editFormItem"
                @update-form="dialogUpdateForm"
              >
                <template #columns>
                  <slot name="columns"></slot>
                </template>
                <template
                  v-for="i in editFormItem &&
                  editFormItem.form &&
                  editFormItem.form.find(p => p.type === 'choiceSku') &&
                  editFormItem.form.find(p => p.type === 'choiceSku')
                    .choiceSkuColumns
                    ? editFormItem.form.find(p => p.type === 'choiceSku')
                        .choiceSkuColumns
                    : []"
                  v-slot:[i.customSlot]="slotProps"
                >
                  <slot
                    :name="i.customSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
                <template v-slot:expandSlot="slotProps">
                  <slot
                    name="expandSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
                <template
                  v-for="item in editFormItem && editFormItem.form
                    ? editFormItem.form.filter(p => p.customSlot)
                    : []"
                  v-slot:[item.customSlot]="slotProps"
                >
                  <slot
                    :name="item.customSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
              </form-view>
            </div>
          </div>
          <!-- 从表数据 -->
          <div v-if="masterDetailData.length">
            <div v-for="(item, index) in masterDetailData" :key="index">
              <!-- 当type为table的时候 渲染表格组件 -->
              <div
                class="dialog_view_item vxe_table_box"
                v-if="
                  item.type === 'table' &&
                  (item.visible || item.visible === undefined)
                "
              >
                <div class="dialog_view_vxe_title dialog_view_vxetable">
                  <span>{{ item.title }}</span>
                  <div class="dialog_view_tools_box">
                    <el-input
                      v-if="item.isShowTableSearch"
                      class="search_input"
                      suffix-icon="el-icon-search"
                      size="mini"
                      :placeholder="
                        item.searchConfig && item.searchConfig.placeholder
                          ? item.searchConfig.placeholder
                          : searchPlaceholder
                      "
                      v-model="item.searchConfig.value"
                    >
                    </el-input>
                    <button-view
                      v-if="
                        item.showButton === undefined ? true : item.showButton
                      "
                      :buttons="item.tableButtons || tableButtons"
                      @button-click="arg => buttonClick(arg, item, index)"
                    />
                    <slot name="toolsBoxSlot"></slot>
                  </div>
                </div>
                <vxe-table-view
                  ref="vxeTable"
                  :edit-rules="item.validRules"
                  :vxeHeight="item.vxeHeight"
                  :tooltipConfig="item.tooltipConfig"
                  :data="
                    item.isShowTableSearch &&
                    item.searchConfig &&
                    item.searchConfig.value &&
                    item.data.length
                      ? item.data.filter(
                          p =>
                            !item.searchConfig.value ||
                            p[item.searchConfig.name]
                              .toLowerCase()
                              .includes(item.searchConfig.value.toLowerCase())
                        )
                      : item.data
                  "
                  :vxeColumns="item.columns"
                  @add-row-event="(row, index) => addRowEvent(row, index, item)"
                  @vxetable-selection-change="
                    arr => vxetableSelectionChange(arr, item)
                  "
                  @vxtable-dblclick="
                    (row, rowIndex) => cellDblclick(row, rowIndex, item)
                  "
                  @vxe-change-data="
                    (row, index, column) =>
                      vxeChangeData(row, index, column, item)
                  "
                  @vxe-tool-bar-event="
                    (row, btnItem, index) =>
                      vxeToolBarEvent(row, btnItem, index, item.data, item)
                  "
                  @mix-input-button-event="
                    (row, index, column) =>
                      mixInputButtonEvent(row, index, column, item)
                  "
                >
                  <template
                    v-for="item in item.columns"
                    v-slot:[item.customSlot]="slotProps"
                  >
                    <slot
                      :name="item.customSlot"
                      v-bind:customSlotData="slotProps.customSlotData"
                    ></slot>
                  </template>
                  <template #columns>
                    <slot name="columns"></slot>
                  </template>
                </vxe-table-view>
              </div>
              <!-- 当type为upload的时候 渲染上传组件 -->
              <div
                class="dialog_view_item"
                v-if="
                  item.type === 'upload' &&
                  (item.visible || item.visible === undefined)
                "
              >
                <p class="dialog_view_title">{{ item.title }}</p>
                <div class="dialog_view_upload">
                  <upload-view
                    :limit="item.limit"
                    :uploadItemDraggable="item.uploadItemDraggable"
                    :uploadPramas="item.uploadPramas"
                    :action="item.action"
                    :singleUpload="item.singleUpload"
                    :uploadText="item.uploadText"
                    :accept="item.accept"
                    :disabled="item.uploadDisabled"
                    :hideUploadDelete="item.hideUploadDelete"
                    :formUploadStyle="item.formUploadStyle"
                    :files="item.data"
                    @click-upload-event="clickUploadEvent"
                    @form-before-upload="data => formBeforeUpload(data, item)"
                    @form-upload-event="files => uploadSuccess(files, item)"
                  >
                  </upload-view>
                </div>
              </div>
              <!-- 自定义 -->
              <div
                class="dialog_view_item vxe_table_box"
                v-if="
                  item.customSlot &&
                  (item.visible || item.visible === undefined)
                "
              >
                <div
                  v-if="item.title"
                  class="dialog_view_vxe_title dialog_view_vxetable"
                >
                  <span>{{ item.title }}</span>
                  <slot
                    v-bind:customSlotData="item"
                    :name="item.customHeaderSlot"
                  ></slot>
                </div>
                <!-- <p v-if="item.title" class="dialog_view_title">
                  {{ item.title }}
                </p> -->
                <slot
                  v-bind:customSlotData="item"
                  :name="item.customSlot"
                ></slot>
              </div>
              <!-- 选择表格数据的弹窗 -->
              <choice-dialog-view
                v-if="item.isShowChoiceDialog"
                ref="productDialog"
                v-bind="$attrs"
                v-on="$listeners"
                :showPagination="item.showPagination"
                :choiceDialogWidth="item.choiceDialogWidth || choiceDialogWidth"
                :choiceDialogTitle="item.choiceDialogTitle || choiceDialogTitle"
                :isCustomSave="item.isCustomSave || isCustomSave"
                :extendQuery="item.choiceExtendQuery || choiceExtendQuery"
                :columns="item.choiceColumns || choiceColumns"
                :queryFormItems="
                  item.choiceQueryFormItems || choiceQueryFormItems
                "
                :choiceDialogRequestUrl="
                  item.choiceDialogRequestUrl || choiceDialogRequestUrl
                "
                @submit-event="arr => choiceDialogSubmit(arr, item)"
              >
                <template #columns>
                  <slot name="columns"></slot>
                </template>
                <template
                  v-for="item in item.choiceColumns || choiceColumns"
                  v-slot:[item.customSlot]="slotProps"
                >
                  <slot
                    :name="item.customSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
                <template v-slot:expandSlot="slotProps">
                  <slot
                    name="expandSlot"
                    v-bind:customSlotData="slotProps.customSlotData"
                  ></slot>
                </template>
              </choice-dialog-view>
            </div>
          </div>
          <!-- 审批步骤  先不加审批 后续再加-->
          <!-- <slot name="dialogStepsSlot"></slot> -->
          <!-- <div class="dialog_view_item" v-if="Object.keys(nodeDetails).length ">
                    <p class="dialog_view_title">{{approveTitle}}</p>
                    <div class="details steps_box">
                        <div v-if="nodeDetails && nodeDetails.id == ''">
                            <span>{{stepsTips}}</span>
                        </div>
                        <steps-view v-else-if="isShowSteps" v-bind="$attrs" v-on="$listeners" :nodeDetails="nodeDetails"></steps-view>
                    </div>
                </div> -->
        </div>
      </template>
      <template #dialogFooterSlot>
        <slot name="dialogFooterSlot"></slot>
      </template>
    </dialog-view>
    <import-file-view
      v-if="!!importFileUrl"
      ref="masterDialogImportFile"
      :importFileUrl="importFileUrl"
      v-bind="$attrs"
      v-on="$listeners"
    ></import-file-view>
  </div>
</template>
<script>
import buttonView from './buttons.vue'
import formView from './form.vue'
import vxeTableView from './vxeTable.vue'
import stepsView from './steps.vue'
import uploadView from './formUpload.vue'
import importFileView from './importFile.vue'
import choiceDialogView from './choiceDialog.vue'
import dialogView from './baseView/dialog.vue'
export default {
  name: 'master-dialog-view',
  components: {
    buttonView,
    formView,
    stepsView,
    uploadView,
    vxeTableView,
    importFileView,
    choiceDialogView,
    dialogView
  },
  props: {
    // 审批
    // nodeDetails: {
    //   type: Object,
    //   default: () => ({})
    // },
    // isShowSteps: {
    //   type: Boolean,
    //   default: false
    // },
    // stepsTips: {
    //   type: String,
    //   default: '提示：暂无审批信息，请先配置审批流程！'
    // },
    // approveTitle: {
    //   type: String,
    //   default: '审批流程'
    // },
    dialogTitle: String,
    //弹窗宽度
    width: {
      type: String,
      default: '640px'
    },
    buttons: {
      type: Array,
      default: () => {
        return [
          // {
          //     text: '反审核',
          //     visible: false,
          // },
          // {
          // visible: false,
          // text: '审核',
          // },
          {
            id: 'save',
            text: '保存',
            disabled: false,
            type: 'primary'
          },
          {
            id: 'back',
            text: '返回',
            disabled: false
          }
        ]
      }
    },
    apiName: {
      type: String
    },
    masterDialogGetUrl: {
      type: String
      // require:true
    },
    masterDialogSaveUrl: {
      type: String
      // require:true
    },
    // 拓展的保存参数
    masterSaveExtendPramas: {
      type: Object,
      default: () => ({})
    },
    formTitle: {
      type: String,
      default: '基本信息'
    },
    // 表单是否禁用
    disabled: {
      type: Boolean,
      default: undefined
    },
    // 禁用表单判断数据
    judgeFormDisabled: {
      type: Array,
      default: () => []
    },
    // 是否使用组件内的默认保存方法
    isDefaultSave: {
      type: Boolean,
      default: true
    },
    formItems: {
      type: [Object, Array],
      default: () => ({} || [])
    },

    // 从表配置数据
    detailData: {
      type: Array,
      default: () => []
    },
    // 导入文件url
    importFileUrl: {
      type: String
    },
    // 表头按钮组
    tableButtons: {
      type: Array,
      default: () => {
        return [
          {
            id: 'add',
            text: '添加',
            disabled: false
          }
        ]
      }
    },
    searchPlaceholder: {
      type: String,
      default: '输入关键词进行搜索'
    },

    // 选择弹窗
    // 弹窗宽度
    choiceDialogWidth: {
      type: [String, Number],
      default: '850px'
    },
    // 弹窗标题
    choiceDialogTitle: String,
    // 使用自定义保存方法
    isCustomSave: {
      type: Boolean
    },
    choiceExtendQuery: Object,
    choiceColumns: [Array, Object],
    choiceQueryFormItems: Array,
    choiceDialogRequestUrl: String
  },

  data() {
    return {
      visible: false,
      isDisabled: false,
      editFormItem: {},
      detialPramas: {},
      isEdit: false,
      queryform: {},
      currentData: null,
      masterDetailData: [],
      auditText: '' //右上角审核章的文字
      // extendPramas: {}
    }
  },
  methods: {
    // 打开该组件触发的方法
    open(arg) {
      // this.extendPramas = this.masterSaveExtendPramas
      this.isEdit = arg.type !== 'add'
      this.isDisabled = false
      this.handleDisabled()
      this.$emit('master-dialog-open', this.isEdit, arg)
      this.editFormItem = this.formItems
      this.masterDetailData = this.detailData
      this.visible = true
      if (!this.isEdit) {
        this.$nextTick(() => {
          this.forceUpdateForm()
        })
      }
      this.queryform = {}
      // this.extendPramas = {}
      this.masterDetailData.length &&
        this.masterDetailData.forEach(p => {
          if (Array.isArray(p.data)) p.data = []
          if (typeof p.data === 'string') p.data = ''
          if (p.hasOwnProperty('setOriginalData'))
            p.data = JSON.parse(JSON.stringify(p.setOriginalData))
        })
      console.log(
        'this.isEdit',
        this.isEdit,
        'this.masterSaveExtendPramas',
        this.masterSaveExtendPramas,
        'this.queryform',
        this.queryform,
        this.queryform,
        'this.masterDetailData',
        this.masterDetailData
      )
      if (arg && arg.type !== 'add') {
        this.init(arg.row.id)
      }
    },
    // 点击上传按钮触发的方法
    clickUploadEvent() {
      this.$emit('click-upload-event')
    },
    // 上传组件上传之前的方法
    formBeforeUpload(data, item) {
      this.$emit('form-before-upload', data, item)
    },
    dialogUpdateForm(arg) {
      console.log(arg)
      this.queryform = Object.assign(this.queryform, arg)
    },
    // 双击行事件
    cellDblclick(row, rowIndex, item) {
      console.log(row, rowIndex, item)
      this.$emit('vxtable-dblclick', row, rowIndex, item)
    },
    // 表格多选事件
    vxetableSelectionChange(arr, item) {
      console.log('表格多选事件', arr, item)
      this.$emit('vxetable-selection-change', arr, item)
    },
    //编辑控件框值改变触发的事件
    vxeChangeData(row, index, column, item) {
      this.$emit('vxe-change-data', row, index, column, item)
    },
    mixInputButtonEvent(row, index, column, item) {
      console.log(row, index, column, item)
      this.$emit('mix-input-button-event', row, index, column, item)
    },
    // 表格操作列方法
    vxeToolBarEvent(row, btnItem, index, data, item) {
      console.log(row, btnItem, index, data, item)
      switch (btnItem.id) {
        case 'delete':
          // 判断是否是表格内有添加按钮的表格
          if (item.columns.find(p => p.addBtn) && item.addRowData) {
            this.onRowDelItems(data, index, item.addRowData)
          } else {
            this.delItems(data, index)
          }
          break
        default:
          break
      }
      this.$emit('vxe-tool-bar-event', row, btnItem, index, data, item)
    },
    // 上传成功之后赋值
    uploadSuccess(files, item) {
      this.$set(item, 'data', files)
    },
    // 在表格内添加数据的删除方法
    onRowDelItems(arr, index, row) {
      arr.length === 1
        ? this.$set(arr, 0, JSON.parse(JSON.stringify(row)))
        : arr.splice(index, 1)
    },
    // 表格删除方法
    delItems(arr, index) {
      arr.splice(index, 1)
    },
    // 弹窗按钮
    buttonClickEvent(arg) {
      switch (arg.id) {
        case 'back':
          this.beforeClose()
          break
        case 'save':
          this.save()
          break
        default:
          break
      }
      // this.$emit("button-click",arg)
    },
    save() {
      this.$refs.formView.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.$emit('on-before-save')
          // vxeTable验证
          if (this.$refs.vxeTable && this.$refs.vxeTable.length) {
            for (let i = 0; i < this.$refs.vxeTable.length; i++) {
              let $table = this.$refs.vxeTable[i].$refs.vxeTable
              let errMap = await $table.validate(true)
              if (errMap) return
            }
          }
          // 处理从表的参数
          this.detialPramas = {}
          this.masterDetailData.forEach(p => {
            console.log(p.data)
            this.detialPramas[p.field] = p.data
          })
          // 拼装参数
          let params = this.isEdit
            ? Object.assign(
                {},
                this.currentData,
                this.queryform,
                this.detialPramas
              )
            : Object.assign({}, this.queryform, this.detialPramas)
          // 抛出事件 以便父组件要对保存参数做处理
          this.$emit('handle-master-dialog-pramas', params)
          // 拼装拓展参数
          console.log('拼装拓展参数', this.masterSaveExtendPramas)
          if (Object.keys(this.masterSaveExtendPramas).length) {
            params = Object.assign({}, params, this.masterSaveExtendPramas)
          }
          console.log('params', params)
          this.$emit('custom-master-dialog-save', params)
          // 发起请求
          if (
            (this.masterDialogSaveUrl || this.apiName) &&
            this.isDefaultSave
          ) {
            this.$api
              .post(this.masterDialogSaveUrl || `${this.apiName}/save`, params)
              .then(res => {
                if (res) {
                  this.$api.success()
                  this.beforeClose()
                  if (this.$parent) {
                    let self = this.$parent.$refs.pageView
                    if (self && self.getList) self.getList()
                    let that = this.$parent.$parent
                    if (
                      that &&
                      that.$refs.pageView &&
                      that.$refs.pageView.getList
                    ) {
                      that.$refs.pageView.getList()
                    }
                  }
                  // this.$parent.$refs.pageView &&
                  // this.$parent.$refs.pageView.getList()
                  //   ? this.$parent.$refs.pageView.getList()
                  //   : this.$parent.$parent.$refs.pageView.getList()
                  this.$emit('save-success-event', res)
                }
              })
          }
        }
      })
    },
    init(id) {
      if (this.masterDialogGetUrl || this.apiName) {
        this.$api
          .get(this.masterDialogGetUrl || `${this.apiName}/get`, {
            id: id
          })
          .then(res => {
            if (res) {
              this.currentData = res
              // 主表赋值
              this.editFormItem.form.forEach(p => {
                for (let i in res) {
                  if (p.name === i) p.value = res[i]
                  // 组装日期范围的数据
                  if (
                    p.type == 'daterange' ||
                    (p.type === 'datetime' && p.dateType === 'datetimerange')
                  ) {
                    let name = p.name.split('--')
                    p.value = [res[name[0]], res[name[1]]]
                  }
                  // 组装上传的数据
                  if (
                    p.name === i &&
                    p.type === 'upload' &&
                    p.files &&
                    p.singleUpload
                  ) {
                    res[i] && (p.files = [{ url: res[i] }])
                  }
                }
                // 当有传入判断是否禁用字段是执行该逻辑
                if (this.judgeFormDisabled && this.judgeFormDisabled.length) {
                  this.isDisabled = this.judgeFormDisabled.every(p => {
                    if (Array.isArray(p.judgeValue)) {
                      return p.judgeValue.includes(res[p.judgeField])
                    } else {
                      return res[p.judgeField] === p.judgeValue
                    }
                  })
                  this.handleDisabled()
                  console.log('this.isDisabled', this.isDisabled)
                }
              })
              // 从表赋值
              this.masterDetailData.length &&
                this.masterDetailData.forEach(p => {
                  for (let i in res) {
                    if (p.field === i) this.$set(p, 'data', res[i])
                  }
                })
              console.log(this.masterDetailData)
              this.$emit('master-dialog-init-callback', res, id)
              this.forceUpdateForm()
            }
          })
      }
    },
    handleDisabled() {
      // 保存按钮
      let saveBtn = this.buttons.find(p => p.id === 'save')
      if (saveBtn) saveBtn.disabled = this.isDisabled
      // 从表表格
      this.masterDetailData.forEach(item => {
        item.disabled = this.isDisabled
        if (item.columns) {
          item.columns
            .filter(p => !p.isAlwaysDisabled)
            .forEach(p => (p.disabled = this.isDisabled))
        }
        if (item.type === 'upload') item.uploadDisabled = this.isDisabled
        if (item.tableButtons) {
          // let btn = item.tableButtons.find(p => p.id === 'add')
          // btn && (btn.disabled = this.isDisabled)
          item.tableButtons.forEach(p => {
            if (p.hasOwnProperty('disabled')) p.disabled = this.isDisabled
          })
        } else {
          let tableBtn = this.tableButtons.find(p => p.id === 'add')
          tableBtn && (tableBtn.disabled = this.isDisabled)
        }
      })
    },
    // 强制更新表单
    forceUpdateForm() {
      this.$refs.formView && this.$refs.formView.updateForm()
    },
    closeEvent() {
      // 清除主表验证
      this.$refs.formView && this.$refs.formView.$refs.ruleForm.resetFields()
      // 将主表数据清空
      if (this.editFormItem.form) {
        this.editFormItem.form.forEach(p => {
          if (typeof p.value === ('string' || 'number')) p.value = ''
          if (Array.isArray(p.value)) p.value = []
          if (p.type === 'upload' && p.files) p.files = []
          if (p.type === 'upload' && p.singleUpload) p.value = ''
        })
      }
      // 将从表数据清空
      if (this.masterDetailData.length) {
        this.masterDetailData.forEach(p => {
          if (typeof p.data === 'string') p.data = ''
          if (Array.isArray(p.data)) p.data = []
          if (p.searchConfig) {
            if (typeof p.searchConfig.value === 'string')
              p.searchConfig.value = ''
            if (Array.isArray(p.searchConfig.value)) p.searchConfig.value = []
            console.log('清除了数据没', p.searchConfig)
          }
        })
      }
      // 清除拓展参数
      // this.extendPramas = {}
      this.visible = false
    },
    beforeClose() {
      this.closeEvent()
      this.$emit('update:visible', false)
      this.$emit('before-close')
    },
    // 表格头按钮组事件
    buttonClick(arg, item, index) {
      switch (arg.id) {
        case 'add':
          this.tableAddEvent(item, index)
          break
      }
      this.$emit('table-head-button-click', arg, item, index)
    },
    // 表格添加的按钮方法
    tableAddEvent(item, index) {
      console.log('表格添加的按钮方法', item)
      if (item.addRowData) {
        item.data.push(JSON.parse(JSON.stringify(item.addRowData)))
        this.$emit('add-data-callback', item, index)
      }
      if (item.isShowChoiceDialog) {
        console.log('this.$refs.productDialog', this.$refs.productDialog)
        this.$refs.productDialog[index].open()
      }
    },
    // 表格行内添加图标的添加方法
    addRowEvent(row, index, item) {
      if (item.addRowData) {
        item.data.splice(
          index + 1,
          0,
          JSON.parse(JSON.stringify(item.addRowData))
        )
        this.$emit('add-data-callback', item, index)
      }
      if (item.isShowChoiceDialog) {
        console.log('this.$refs.productDialog', this.$refs.productDialog)
        this.$refs.productDialog[index].open()
      }
    },
    // 打开导入弹窗
    openImportDialog() {
      this.$refs.masterDialogImportFile.open()
    },
    //选择弹窗保存方法
    choiceDialogSubmit(arr, item) {
      arr.forEach(p => {
        if (
          !item.data.find(
            y =>
              y[item.filterField || 'id'] ===
              p[item.originalFilterField || 'id']
          )
        ) {
          // 判断是否有映射表，有映射表则按映射表赋值
          if (item.mapTable) {
            let obj = {}
            Object.keys(item.mapTable).forEach(m => {
              obj[m] = p[m]
              if (item.mapTable[m]) obj[m] = p[item.mapTable[m]]
              if (
                Object.prototype.toString.call(item.mapTable[m]) ===
                '[object Object]'
              ) {
                if (
                  Object.keys(item.mapTable[m]).length === 1 &&
                  item.mapTable[m].hasOwnProperty('defaultValue')
                ) {
                  obj[m] = item.mapTable[m].defaultValue
                }
              }
            })
            console.log(obj)
            item.data.push(obj)
          } else {
            item.data.push(p)
          }
        }
      })
      console.log(arr, item.data)
      this.$emit('add-data-callback', item, arr)
    }
  }
}
</script>
<style lang="less" scoped>
.fixed_status {
  position: fixed;
  top: 60px;
  right: 10px;
  z-index: 99;
  .audit_status {
    width: 90px;
    height: 90px;
  }
  .audit_text {
    position: absolute;
    top: 33px;
    right: 16px;
    transform: rotate(42deg);
    font-size: 19px;
  }
}

.dialog_view_box {
  margin: 16px;
  .dialog_view_item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 16px;
    .dialog_view_title {
      font-size: 14px;
      line-height: 46px;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      // margin-bottom: 10px;
      position: relative;
      padding-left: 20px;
      color: rgba(0, 0, 0, 0.85);
    }
    .steps_box {
      padding: 20px 30px 30px 30px;
    }
    .dialog_view_upload {
      padding: 16px 20px 20px 20px;
    }
  }
  .vxe_table_box {
    padding-bottom: 10px;
    .dialog_view_vxe_title {
      font-size: 14px;
      height: 46px;
      font-weight: bold;
      padding: 0 20px;
      color: rgba(0, 0, 0, 0.85);
      border-bottom: 1px solid #eee;
    }
    .dialog_view_vxetable {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .dialog_view_tools_box {
        display: flex;
        align-items: center;
        .search_input {
          width: 194px;
          margin-right: 10px;
        }
        /deep/ .el-input__inner {
          border-radius: 0px;
          border: none;
          border-bottom: 1px solid #d2d2d7;
        }
      }
      .vxe_add_btn {
        height: 32px;
        line-height: 0;
        border-radius: 8px;
        margin-left: 10px;
      }
    }
  }
}
</style>
