<template>
  <a-card
    :body-style="{
      padding: '12px',
      overflow: design ? 'hidden' : 'auto',
      borderRadius: '4px',
      position: 'absolute',
      top: '0',
      bottom: '0px',
      left: '0px',
      right: '0px'
    }"
    :bordered="false"
    class="box-card"
  >
    <div class="box-card-body">

      <ViewRedirect v-if="element.type === 'table'"
                    v-show="design || element.showRules !== 'showAfterFks' || element.showRulesResult"
                    v-bind="$attrs"
                    v-on="$listeners"
                    :relationList="relationList"
                    :relationOpenFks="element.relationOpenFks"
                    :relationStatus="element.relationStatus"
                    :stores="stores"
                    :subViews="subViews"
                    :viewCode="element.code">
      </ViewRedirect>

      <ViewEditableRedirect v-else-if="element.type === 'editableTable'"
                            v-show="design || element.showRules !== 'showAfterFks' || element.showRulesResult"
                            v-bind="$attrs"
                            v-on="$listeners"
                            :relationList="relationList"
                            :relationOpenFks="element.relationOpenFks"
                            :relationStatus="element.relationStatus"
                            :stores="stores"
                            :subViews="subViews"
                            :viewCode="element.code">
      </ViewEditableRedirect>

      <TreeRedirect v-else-if="element.type === 'tree'"
                    v-show="design || element.showRules !== 'showAfterFks' || element.showRulesResult"
                    v-bind="$attrs"
                    v-on="$listeners"
                    :relationList="relationList"
                    :relationOpenFks="element.relationOpenFks"
                    :relationStatus="element.relationStatus"
                    :stores="stores"
                    :subViews="subViews"
                    :viewCode="element.code">
      </TreeRedirect>

      <ReportWidgetRedirect v-else-if="element.type === 'report'"
                            v-bind="$attrs"
                            v-on="$listeners"
                            :relationList="relationList"
                            :stores="stores"
                            :widgetCode="element.code">
      </ReportWidgetRedirect>

      <BpmForm v-else-if="element.type === 'form' && bpmOption && element.flowForm === 'Y'"
               v-bind="$attrs"
               v-on="$listeners"
               :bpmId="bpmOption.bpmId"
               :bpmIdType="bpmOption.bpmIdType"
               :buttonDatas="bpmOption.buttonDatas"
               :fks="bpmOption.fks"
               :formCode="element.code"
               :formId="bpmOption.formId"
               :getBpmOperateVoUrl="bpmOption.getBpmOperateVoUrl"
               :layoutCode="bpmOption.formCode"
               :parentValue="bpmOption.parentValue"
               :processDefId="bpmOption.processDefId"
               :processInstanceId="bpmOption.processInstanceId"
               :processInstanceName="bpmOption.processInstanceName"
               :relationList="relationList"
               :relationOpenFks="element.relationOpenFks"
               :relationStatus="element.relationStatus"
               :showCloseBut="bpmOption.showCloseBut"
               :stores="stores" />

      <FormRedirect v-else-if="element.type === 'form'"
                    v-bind="$attrs"
                    v-on="$listeners"
                    :disQueryDB="(element.mainForm !== 'N' && formOption) ? formOption.disQueryDB : undefined"
                    :fks="(element.mainForm !== 'N' && formOption) ? formOption.fks : undefined"
                    :formCode="element.code"
                    :formId="(element.mainForm !== 'N' && formOption) ? formOption.formId : undefined"
                    :func="design ? 'add' : (element.formStatus === 'auto' ? ((element.mainForm !== 'N' && formOption) ? formOption.func : 'add') : (element.formStatus === 'disabled' ? 'detail' : 'edit'))"
                    :hiddenSaveBut="element.saveBut === 'display'"
                    :isTab="formOption ? formOption.isTab : undefined"
                    :parentValue="(element.mainForm !== 'N' && formOption) ? formOption.parentValue : undefined"
                    :record="(element.mainForm !== 'N' && formOption) ? formOption.record : undefined"
                    :relationList="relationList"
                    :relationOpenFks="element.relationOpenFks"
                    :relationStatus="element.relationStatus"
                    :saveInPage="(element.mainForm !== 'N' && formOption) ? formOption.saveInPage : undefined"
                    :stores="stores"
                    @addParentSpinning="$emit('addParentSpinningFromView')"
                    @close="$emit('closeFromView')"
                    @delParentSpinning="$emit('delParentSpinningFromView')"
                    @handleOk="handleOkFromView"
                    @hideDialogButtons="$emit('hideDialogButtonsFromView')"
                    @setFormTitle="setFormTitleFromView">
      </FormRedirect>

      <a-tabs v-else-if="element.type === 'tabs' && !element.isVertical" v-model="selectTab"
              :style="!design && element.affixTabs ? tabStyle : {}"
              :tab-bar-style="!design && element.affixTabs ? tabBarStyle : {}"
              :type="design ? 'editable-card' : 'line'"
              @change="changeTabs" @edit="onEdit">
        <!-- :tab="$locale(tab.title) -->
        <!-- 显示列表数量的强制渲染 -->
        <a-tab-pane v-for="(tab, index) in element.tabs"
                    v-if="design || tab.showRules !== 'showAfterFks' || tab.showRulesResult"
                    :key="tab.key"
                    :closable="design && element.tabs.length > 1"
                    :forceRender="element.showTabListCount">
          <template slot="tab">
            <span>
              {{ $locale(tab.title) }}
              <!-- 仅支持 table, editable显示列表数量 -->
              <template v-if="element.showTabListCount && (tab.type === 'table' || tab.type === 'editableTable')">
                <a-badge :count="cmTabCountMap[cmTabPref + tab.key] ? cmTabCountMap[cmTabPref + tab.key] : 0" :show-zero="false">
              </a-badge>
              </template>
            </span>
          </template>
          <ViewRedirect v-if="tab.type === 'table'"
                        :ref="cmTabPref + tab.key"
                        v-bind="$attrs"
                        v-on="$listeners"
                        :relationList="relationList"
                        :relationOpenFks="tab.relationOpenFks"
                        :relationStatus="tab.relationStatus"
                        :stores="stores"
                        :subViews="subViews"
                        :tab-config="tab"
                        :viewCode="tab.code"
                        @setTabCount="setTabLabel">
          </ViewRedirect>

          <ViewEditableRedirect v-else-if="tab.type === 'editableTable'"
                                :ref="cmTabPref + tab.key"
                                v-bind="$attrs"
                                v-on="$listeners"
                                :relationList="relationList"
                                :relationOpenFks="tab.relationOpenFks"
                                :relationStatus="tab.relationStatus"
                                :stores="stores"
                                :subViews="subViews"
                                :tab-config="tab"
                                :viewCode="tab.code"
                                @setTabCount="setTabLabel">
          </ViewEditableRedirect>

          <TreeRedirect v-else-if="tab.type === 'tree'"
                        v-bind="$attrs"
                        v-on="$listeners"
                        :relationList="relationList"
                        :relationOpenFks="tab.relationOpenFks"
                        :relationStatus="tab.relationStatus"
                        :stores="stores"
                        :subViews="subViews"
                        :tab-config="tab"
                        :viewCode="tab.code">
          </TreeRedirect>

          <ReportWidgetRedirect v-else-if="tab.type === 'report'"
                                v-bind="$attrs"
                                v-on="$listeners"
                                :relationList="relationList"
                                :stores="stores"
                                :tab-config="tab"
                                :widgetCode="tab.code">
          </ReportWidgetRedirect>

          <BpmForm v-else-if="tab.type === 'form' && bpmOption && tab.flowForm === 'Y'"
                   v-bind="$attrs"
                   v-on="$listeners"
                   :bpmId="bpmOption.bpmId"
                   :bpmIdType="bpmOption.bpmIdType"
                   :buttonDatas="bpmOption.buttonDatas"
                   :fks="bpmOption.fks"
                   :formCode="tab.code"
                   :formId="bpmOption.formId"
                   :getBpmOperateVoUrl="bpmOption.getBpmOperateVoUrl"
                   :layoutCode="bpmOption.formCode"
                   :parentValue="bpmOption.parentValue"
                   :processDefId="bpmOption.processDefId"
                   :processInstanceId="bpmOption.processInstanceId"
                   :processInstanceName="bpmOption.processInstanceName"
                   :relationList="relationList"
                   :relationOpenFks="tab.relationOpenFks"
                   :relationStatus="tab.relationStatus"
                   :showCloseBut="bpmOption.showCloseBut"
                   :stores="stores"
                   :tab-config="tab" />

          <FormRedirect v-else-if="tab.type === 'form'"
                        v-bind="$attrs"
                        v-on="$listeners"
                        :disQueryDB="(tab.mainForm !== 'N' && formOption) ? formOption.disQueryDB : undefined"
                        :fks="(tab.mainForm !== 'N' && formOption) ? formOption.fks : undefined"
                        :formCode="tab.code"
                        :formId="(tab.mainForm !== 'N' && formOption) ? formOption.formId : undefined"
                        :func="design ? 'add' : (tab.formStatus === 'auto' ? ((tab.mainForm !== 'N' && formOption) ? formOption.func : 'add') : (tab.formStatus === 'disabled' ? 'detail' : 'edit'))"
                        :hiddenSaveBut="tab.saveBut === 'display'"
                        :isTab="formOption ? formOption.isTab : undefined"
                        :parentValue="(tab.mainForm !== 'N' && formOption) ? formOption.parentValue : undefined"
                        :record="(tab.mainForm !== 'N' && formOption) ? formOption.record : undefined"
                        :relationList="relationList"
                        :relationOpenFks="tab.relationOpenFks"
                        :relationStatus="tab.relationStatus"
                        :saveInPage="(tab.mainForm !== 'N' && formOption) ? formOption.saveInPage : undefined"
                        :stores="stores"
                        :tab-config="tab"
                        @addParentSpinning="$emit('addParentSpinningFromView')"
                        @close="$emit('closeFromView')"
                        @delParentSpinning="$emit('delParentSpinningFromView')"
                        @handleOk="handleOkFromView"
                        @hideDialogButtons="$emit('hideDialogButtonsFromView')"
                        @setFormTitle="setFormTitleFromView">
          </FormRedirect>

          <template v-if="design">
            <draggable
              v-show="!tab.type"
              v-model="element.tabs"
              v-bind="{ group: 'people', ghostClass: 'ghost', animation: 200, handle: '.drag-widget' }"
              style="height: 300px; z-index: 9;"
              @add="handleWidgetAdd"
            >
              <div class="fm-widget-form-empty"
                   style="height: 300px; width: 100%; top: 50px; left: 0; margin: 0; z-index: 9;">
                {{ $locale("m.eform.formDesign.label.dragModel") }}
              </div>
            </draggable>
          </template>
        </a-tab-pane>
      </a-tabs>


      <div  v-else-if="element.type === 'tabs' && element.isVertical" style="position: relative;display: flex">
        <div class="stepStyle"  v-show="isOpen">
          <a-steps :current="current" direction="vertical" size="small" @change="onChange" class="item-step">
            <a-step v-for="(item, index) in element.tabs"
                    :class="current == index ? 'chooseStyle' : 'unChooseStyle'"
                    :key="item.key"
                    :title="$locale(item.title)"
                    @click.stop="stepClick(item,index)">
            </a-step>
          </a-steps>
        </div>
        <div class="arrow" @click="resizeLayout(!isOpen)" :style="stepArrowStyle">
          <a-icon :type="iconType" :style="iconStyle"/>
        </div>
        <div
          v-if="tabStepItem"
          :style="isOpen ? 'width: calc(100% - 145px)' : 'width: 100%'"
          style="padding-left: 1%;margin-top: 10px">
          <ViewRedirect v-if="tabStepItem.type === 'table'"
                        :ref="cmTabPref + tabStepItem.key"
                        v-bind="$attrs"
                        v-on="$listeners"
                        :relationList="relationList"
                        :relationOpenFks="tabStepItem.relationOpenFks"
                        :relationStatus="tabStepItem.relationStatus"
                        :stores="stores"
                        :subViews="subViews"
                        :tab-config="tabStepItem"
                        :viewCode="tabStepItem.code"
                        @firstLoad="calcTabCount">
          </ViewRedirect>

          <ViewEditableRedirect v-else-if="tabStepItem.type === 'editableTable'"
                                :ref="cmTabPref + tabStepItem.key"
                                v-bind="$attrs"
                                v-on="$listeners"
                                :relationList="relationList"
                                :relationOpenFks="tabStepItem.relationOpenFks"
                                :relationStatus="tabStepItem.relationStatus"
                                :stores="stores"
                                :subViews="subViews"
                                :tab-config="tabStepItem"
                                :viewCode="tabStepItem.code"
                                @firstLoad="calcTabCount">
          </ViewEditableRedirect>

          <TreeRedirect v-else-if="tabStepItem.type === 'tree'"
                        v-bind="$attrs"
                        v-on="$listeners"
                        :relationList="relationList"
                        :relationOpenFks="tabStepItem.relationOpenFks"
                        :relationStatus="tabStepItem.relationStatus"
                        :stores="stores"
                        :subViews="subViews"
                        :tab-config="tabStepItem"
                        :viewCode="tabStepItem.code">
          </TreeRedirect>

          <ReportWidgetRedirect v-else-if="tabStepItem.type === 'report'"
                                v-bind="$attrs"
                                v-on="$listeners"
                                :relationList="relationList"
                                :stores="stores"
                                :tab-config="tabStepItem"
                                :widgetCode="tabStepItem.code">
          </ReportWidgetRedirect>

          <BpmForm v-else-if="tabStepItem.type === 'form' && bpmOption && tabStepItem.flowForm === 'Y'"
                   v-bind="$attrs"
                   v-on="$listeners"
                   :bpmId="bpmOption.bpmId"
                   :bpmIdType="bpmOption.bpmIdType"
                   :buttonDatas="bpmOption.buttonDatas"
                   :fks="bpmOption.fks"
                   :formCode="tabStepItem.code"
                   :formId="bpmOption.formId"
                   :getBpmOperateVoUrl="bpmOption.getBpmOperateVoUrl"
                   :layoutCode="bpmOption.formCode"
                   :parentValue="bpmOption.parentValue"
                   :processDefId="bpmOption.processDefId"
                   :processInstanceId="bpmOption.processInstanceId"
                   :processInstanceName="bpmOption.processInstanceName"
                   :relationList="relationList"
                   :relationOpenFks="tabStepItem.relationOpenFks"
                   :relationStatus="tabStepItem.relationStatus"
                   :showCloseBut="bpmOption.showCloseBut"
                   :stores="stores"
                   :tab-config="tabStepItem" />

          <FormRedirect v-else-if="tabStepItem.type === 'form'"
                        v-bind="$attrs"
                        v-on="$listeners"
                        :disQueryDB="(tabStepItem.mainForm !== 'N' && formOption) ? formOption.disQueryDB : undefined"
                        :fks="(tabStepItem.mainForm !== 'N' && formOption) ? formOption.fks : undefined"
                        :formCode="tabStepItem.code"
                        :formId="(tabStepItem.mainForm !== 'N' && formOption) ? formOption.formId : undefined"
                        :func="design ? 'add' : (tabStepItem.formStatus === 'auto' ? ((tabStepItem.mainForm !== 'N' && formOption) ? formOption.func : 'add') : (tabStepItem.formStatus === 'disabled' ? 'detail' : 'edit'))"
                        :hiddenSaveBut="tabStepItem.saveBut === 'display'"
                        :isTab="formOption ? formOption.isTab : undefined"
                        :parentValue="(tabStepItem.mainForm !== 'N' && formOption) ? formOption.parentValue : undefined"
                        :record="(tabStepItem.mainForm !== 'N' && formOption) ? formOption.record : undefined"
                        :relationList="relationList"
                        :relationOpenFks="tabStepItem.relationOpenFks"
                        :relationStatus="tabStepItem.relationStatus"
                        :saveInPage="(tabStepItem.mainForm !== 'N' && formOption) ? formOption.saveInPage : undefined"
                        :stores="stores"
                        :tab-config="tabStepItem"
                        @addParentSpinning="$emit('addParentSpinningFromView')"
                        @close="$emit('closeFromView')"
                        @delParentSpinning="$emit('delParentSpinningFromView')"
                        @handleOk="handleOkFromView"
                        @hideDialogButtons="$emit('hideDialogButtonsFromView')"
                        @setFormTitle="setFormTitleFromView">
          </FormRedirect>

          <template v-if="design">
            <draggable
              v-show="!tabStepItem.type"
              v-model="element.tabs"
              v-bind="{ group: 'people', ghostClass: 'ghost', animation: 200, handle: '.drag-widget' }"
              style="height: 300px; z-index: 9;"
              @add="handleWidgetAdd"
            >
              <div class="fm-widget-form-empty"
                   style="height: 300px; width: 100%; top: 50px; left: 0; margin: 0; z-index: 9;">
                {{ $locale("m.eform.formDesign.label.dragModel") }}
              </div>
            </draggable>
          </template>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>

import YchConstant from "../../utils/YchConstant";
import ViewRedirect from "../redirect/ViewRedirect";
import ViewEditableRedirect from "../redirect/ViewEditableRedirect";
import ReportWidgetRedirect from "../redirect/ReportWidgetRedirect";
import TreeRedirect from "../redirect/TreeRedirect";
import FormRedirect from "../redirect/FormRedirect";
import BpmForm from "../redirect/BpmForm";
import { randomString } from "../../utils/util";
import Draggable from "vuedraggable";
import RelationUtil from "../redirect/RelationUtil";
import locleUtil from "../../utils/LocleUtil";

export default {
  name: "LayoutCardContainer",
  props: {
    element: Object,
    data: Object,
    subViews: {
      type: Object,
      default: () => {
        return {};
      }
    },
    design: {
      type: Boolean,
      default: false
    },
    stores: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formOption: Object,
    bpmOption: Object,
    relationList: Array
  },
  components: {
    ViewRedirect,
    ReportWidgetRedirect,
    TreeRedirect,
    FormRedirect,
    BpmForm,
    ViewEditableRedirect,
    Draggable
  },
  computed: {
    //计算arrow的位置
    stepArrowStyle() {
      let styleStr = '';
      if (this.isOpen) {
        styleStr = 'left: 145px;'
      } else {
        styleStr = 'left: 0'
      }
      return styleStr
    },
    //  计算箭头朝向
    iconType() {
      let styleStr = '';
      if (this.isOpen) {
        styleStr = 'left'
      } else {
        styleStr = 'right'
      }
      return styleStr
    },
    //  计算箭头位置
    iconStyle() {
      let styleStr = 'position: absolute;top: 30%;right: -1px';
      return styleStr
    }
  },
  data() {
    return {
      selectTab: this.element.tabs ? this.element.tabs[0].key : null,
      url: {
        getViewModel: YchConstant.PREFIX_EFORM + "/engine/viewEngine/getViewModel"
      },
      tabBarStyle: {
        position: "fixed",
        top: "0px",
        zIndex: "999",
        backgroundColor: "white",
        borderRight: 'unset',
        width: "100%"
      },
      tabStyle: {
        marginTop: "44px"
      },
      cmTabPref: "cm_tab_",
      //自定义tabs数量
      cmTabCountMap: {},
      isOpen: true,
      tabStepItem: this.element.tabs && this.element.tabs[0],
      current: 0
    };
  },
  methods: {
    $locale(params){
      return locleUtil.getLocale(params)
    },
    resizeLayout(isOpen) {
      this.isOpen = isOpen
    },
    onChange(current) {
      this.current = current;
    },
    stepClick(step) {
      this.tabStepItem = null
      setTimeout(() => {
        this.tabStepItem = step
      },500)
    },
    //设置tab右上角badge数量
    setTabLabel(resultTotal, refKey) {
      if (refKey.startsWith(this.cmTabPref)) {
        if (this.$refs[refKey]) {
          this.$nextTick(() => {
            this.$set(this.cmTabCountMap, refKey, resultTotal)
          })
        }
      }
    },
    onEdit(targetKey, action) {
      if (action === "add") {
        const tab = {
          title: "m.eform.formDesign.label.Tab",
          key: randomString(32)
        };
        this.element.tabs.push(tab);
      } else if (action === "remove") {
        let index = 0;
        for (let i = 0; i < this.element.tabs.length; i++) {
          if (this.element.tabs[i].key === targetKey) {
            index = i;
            break;
          }
        }
        this.element.tabs.splice(index, 1);
        if (this.selectTab === targetKey) {
          this.selectTab = this.element.tabs[0].key;
        }
      }
    }
    ,
    handleWidgetAdd(evt) {
      let newIndex = evt.newIndex;
      if (this.element.tabs.length === 1) {
        newIndex = 0;
      }
      const lastItem = this.element.tabs.splice(newIndex, 1);
      const target = lastItem[0];
      for (let i = 0; i < this.element.tabs.length; i++) {
        if (this.element.tabs[i].key === this.selectTab) {
          target.key = this.selectTab;
          this.element.tabs[i] = target;
          break;
        }
      }
      const listString = JSON.stringify(this.element.tabs);
      this.element.tabs = JSON.parse(listString);
    }
    ,
    changeTabs(activeKey) {
      this.selectTab = activeKey;
    }
    ,
    setFormTitleFromView(title) {
      this.$emit("setFormTitleFromView", title);
    },
    handleOkFromView($vue, isDraft) {
      this.$emit("handleOkFromView", $vue, isDraft);
    }
    ,
    relationTable(table) {
      if (table.showRules === "showAfterFks") {
        let tableName = null;
        if (this.subViews && this.subViews[table.code]) {
          const result = this.subViews[table.code];
          tableName = result.tableShow.tableName;
        }

        const fks = RelationUtil.getChangedRelation({
          relationList: this.relationList,
          tableName: tableName,
          fks: [],
          relationOpenFks: table.relationOpenFks
        });
        table.showRulesResult = RelationUtil.checkFks({
          fks: fks
        });
      }
    }
    ,
    relationTree(tree) {
      if (tree.showRules === "showAfterFks") {
        let tableName = null;
        if (this.subViews && this.subViews[tree.code]) {
          const result = this.subViews[tree.code];
          const treeData = result.treeData ? JSON.parse(result.treeData) : {};
          if (treeData.type === "1") {
            //普通模式
            const config = treeData.data || {};
            tableName = config.tableName;
          } else {
            if (treeData.data.length > 0) {
              tableName = treeData.data[0].tableName;
            }
          }
        }

        const fks = RelationUtil.getChangedRelation({
          relationList: this.relationList,
          tableName: tree.tableName,
          fks: [],
          relationOpenFks: tree.relationOpenFks
        });
        const b = RelationUtil.checkFks({
          fks: fks
        });
        tree.showRulesResult = b;
      }
    }

  },
  watch: {
    selectTab: {
      handler(value) {
        if (this.element.type === "tabs") {
          this.element.selectTab = value;
        }
      }
      ,
      immediate: true
    }
    ,
    relationList: {
      handler() {
        if (this.design) {
          return;
        }
        if (this.element.type === "table" || this.element.type === "editableTable") {
          this.relationTable(this.element);
        } else if (this.element.type === "tree") {
          this.relationTree(this.element);
        } else if (this.element.type === "tabs") {
          let currentIndex = -1;
          let index = -1;
          this.element.tabs.forEach(tab => {
            if (tab.showRules !== 'showAfterFks' || tab.showRulesResult) {
              if (currentIndex === -1) {
                index++
              }
              if (tab.key === this.selectTab) {
                currentIndex = index
              }
            }
            if (tab.type === 'table' || tab.type === 'editableTable') {
              this.relationTable(tab);
            } else if (tab.type === "tree") {
              this.relationTree(tab);
            }
          })
          // 当前页签隐藏，切换到其他显示的页签
          const tabs = this.element.tabs.filter(tab => tab.showRules !== 'showAfterFks' || tab.showRulesResult)
          const currentTab = tabs.find(tab => tab.key === this.selectTab)
          if (!currentTab) {
            if (currentIndex === -1 || tabs.length <= currentIndex) {
              this.selectTab = tabs.length > 0 ? tabs[0].key : null
            } else {
              this.selectTab = tabs[currentIndex].key
            }
          }
        }
      }
      ,
      immediate: true
    }

  }
};
</script>

<style lang="less" scoped>

.box-card {
  position: relative;
  height:100%;

  ::-webkit-scrollbar-thumb {
    border-width: 12px 0 0 12px !important;
  }

  .box-card-body {
    //height: 100%;
  }
}

//用于控制tab
///deep/ .ant-tabs-left-bar {
//  margin-top: 20px;
//
//  div[aria-selected=true] {
//    width: 145px;
//    height: 65px !important;
//    margin-top: 0.5vh;
//    text-align: center !important;
//    font-weight: 700;
//    border: none !important;
//    overflow: hidden;
//    white-space: pre-wrap;
//    color: #1890FF !important;
//    background: transparent linear-gradient(-145deg, transparent 18px, #f4f4f4 0) !important;
//  }
//
//  div[aria-selected=false] {
//    width: 145px;
//    height: 65px !important;
//    margin-top: 0.5vh;
//    text-align: center !important;
//    background-color: #f4f4f4;
//    font-weight: 700;
//    color: #999;
//    border: none !important;
//    overflow: hidden;
//    white-space: pre-wrap;
//  }
//}
///deep/ .ant-tabs-extra-content {
//  float: left !important;
//  position: absolute;
//}
//
///deep/ .ant-tabs-ink-bar {
//  visibility: hidden;
//}

.arrow {
  position: absolute;
  top: 30%;
  z-index: 999;
  width: 10px;
  height: 40px;
  background: #E1E3E5;
  border-radius: 0px 2px 2px 0px;
  opacity: 1;
  cursor: pointer;
}
.stepStyle {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  //top: 20px;
  width: 145px;
  background: #F8F8F9;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #E1E3E5;

  .item-step {
    position: relative;
    top: 20px;
    left: 13px;
  }

  /deep/ .ant-steps-icon {
    color: #13C2C2 !important;
  }

  .chooseStyle {
    //background: linear-gradient(-145deg, transparent 18px, #f4f4f4 0);
    //background-color: transparent !important;

    /deep/ .ant-steps-item-title {
      color: #1A64F4 !important;
      //font-weight: 700;
    }

    /deep/ .ant-steps-item-icon {
      border: none !important;
      color: #fff !important;
      background: #1A64F4 !important;
    }

    /deep/ .ant-steps-icon {
      color: #fff !important;
    }
  }

  .unChooseStyle {
    /deep/ .ant-steps-item-title {
      color: #000;
      //font-weight: 700;
    }

    /deep/ .ant-steps-item-icon {
      background: #E0F6EF !important;
      border: none !important;
      color: #13C2C2 !important;
    }
  }

  .ant-steps-item-disabled {
    /deep/ .ant-steps-item-icon {
      background: #fff !important;
      border: 1px solid #333333 !important;
      color: #333 !important;
    }

    /deep/ .ant-steps-icon {
      color: #333 !important;
    }
  }
}

.stepStyle /deep/ .ant-steps-item {
  //background-color: #f4f4f4;
  //margin-top: 0.5vh;
  //font-weight: 700;
  //height: 65px;
}

.stepStyle /deep/ .ant-steps-item-title {
  font-size: 12px;
  //position: relative;
  //top: 50%;
  //transform: translate(0, 50%);
}
</style>
