<template>
  <!-- 栅格布局 -->
  <a-row
    v-if="record.type === 'grid'"
    class="grid-row"
    :gutter="[record.options.horizontalDistance,record.options.verticalDistance]"
    v-show="!record.options.hidden"
  >
    <a-col
      class="grid-col"
      :class="{alignRight : record.alignRight}"
      v-for="(colItem, idnex) in record.columns"
      :key="idnex"
      :span="colItem.span || 0"
    >
      <buildBlocks
        @handleReset="$emit('handleReset')"
        @doButtonAction="doButtonAction"
        v-for="item in colItem.list"
        :key="item.key"
        :record="item"
        :config="config"
        @addEditableTableVm="addEditableTableVm"
        @addModelKey="addModelKey"
        @setFieldValue="setFieldValue"
        @getFieldValue="getFieldValue"
        :allDataSource="allDataSource"
        @refreshAllData="$emit('refreshAllData')"
        :form-id="formId"
        :dictMap="dictMap"
        :elValue="elValue"
        :dsCode="dsCode"
        :form="form"
        :linkageMap="linkageMap"
        @setLinkageMap="setLinkageMap"
        @setHidden="setHidden"
        @setTabHidden="setTabHidden"
        :fks="fks"
        :stores="stores"
        :uploadTimestamp="uploadTimestamp"
      />
    </a-col>
  </a-row>
  <!-- 卡片布局 -->
  <a-card
    v-else-if="record.type === 'card'"
    class="grid-row"
    :title="$locle(record.name)"
  >
    <buildBlocks
      @handleReset="$emit('handleReset')"
      @doButtonAction="doButtonAction"
      v-for="item in record.list"
      :key="item.key"
      :record="item"
      :config="config"
      @addEditableTableVm="addEditableTableVm"
      @addModelKey="addModelKey"
      @setFieldValue="setFieldValue"
      @getFieldValue="getFieldValue"
      :allDataSource="allDataSource"
      @refreshAllData="$emit('refreshAllData')"
      :form-id="formId"
      :dictMap="dictMap"
      :elValue="elValue"
      :dsCode="dsCode"
      :form="form"
      :linkageMap="linkageMap"
      @setLinkageMap="setLinkageMap"
      @setHidden="setHidden"
      @setTabHidden="setTabHidden"
      :fks="fks"
      :stores="stores"
      :uploadTimestamp="uploadTimestamp"
    />
  </a-card>
  <!-- 固钉布局 -->
  <a-affix v-else-if="record.type === 'affix'" ref="affix" :target="getAffixTarget">
    <buildBlocks
      @handleReset="$emit('handleReset')"
      @doButtonAction="doButtonAction"
      v-for="item in record.list"
      :key="item.key"
      :record="item"
      :config="config"
      @addEditableTableVm="addEditableTableVm"
      @addModelKey="addModelKey"
      @setFieldValue="setFieldValue"
      @getFieldValue="getFieldValue"
      :allDataSource="allDataSource"
      @refreshAllData="$emit('refreshAllData')"
      :form-id="formId"
      :dictMap="dictMap"
      :elValue="elValue"
      :dsCode="dsCode"
      :form="form"
      :linkageMap="linkageMap"
      @setLinkageMap="setLinkageMap"
      @setHidden="setHidden"
      @setTabHidden="setTabHidden"
      :fks="fks"
      :stores="stores"
      :uploadTimestamp="uploadTimestamp"
    />
  </a-affix>
  <!-- 表格布局 -->
  <table
    v-else-if="record.type === 'table'"
    class="kk-table-9136076486841527"
    :class="{
      bright: record.options.bright,
      small: record.options.small,
      bordered: record.options.bordered,
      borderedRed: record.options.borderedRed,
    }"
    v-show="!record.options.hidden"
    :style="record.options.customStyle"
  >
    <tr v-for="(trItem, trIndex) in record.trs" :key="trIndex">
      <td
        class="table-td"
        v-for="(tdItem, tdIndex) in trItem.tds"
        :key="tdIndex"
        :colspan="tdItem.colspan"
        :rowspan="tdItem.rowspan"
      >
        <buildBlocks
          @handleReset="$emit('handleReset')"
          @doButtonAction="doButtonAction"
          v-for="item in tdItem.list"
          :key="item.key"
          :record="item"
          :config="config"
          @addEditableTableVm="addEditableTableVm"
          @addModelKey="addModelKey"
          @setFieldValue="setFieldValue"
          @getFieldValue="getFieldValue"
          :allDataSource="allDataSource"
          @refreshAllData="$emit('refreshAllData')"
          :form-id="formId"
          :dictMap="dictMap"
          :elValue="elValue"
          :dsCode="dsCode"
          :form="form"
          :linkageMap="linkageMap"
          @setLinkageMap="setLinkageMap"
          @setHidden="setHidden"
          @setTabHidden="setTabHidden"
          :fks="fks"
          :stores="stores"
          :uploadTimestamp="uploadTimestamp"
        />
      </td>
    </tr>
  </table>
  <!-- 页签 -->
  <a-tabs v-else-if="record.type === 'tabs' && !record.isVertical" :defaultActiveKey="tabIndexComputed"
          @change="changeTabs" v-model="activeKey">
    <a-tab-pane v-for="(tabItem, tabIndex) in record.tabs" v-if="!tabItem.hidden" :key="tabItem.key || tabIndex"
                :tab="$locle(tabItem.tab || 'm.eform.formDesign.label.Tab')" :forceRender="!tabItem.lazyRender">
      <buildBlocks
        @handleReset="$emit('handleReset')"
        @doButtonAction="doButtonAction"
        v-for="item in tabItem.list"
        :key="item.key"
        :record="item"
        :config="config"
        @addEditableTableVm="addEditableTableVm"
        @addModelKey="addModelKey"
        @setFieldValue="setFieldValue"
        @getFieldValue="getFieldValue"
        :allDataSource="allDataSource"
        @refreshAllData="$emit('refreshAllData')"
        :form-id="formId"
        :dictMap="dictMap"
        :elValue="elValue"
        :dsCode="dsCode"
        :form="form"
        :linkageMap="linkageMap"
        @setLinkageMap="setLinkageMap"
        @setHidden="setHidden"
        @setTabHidden="setTabHidden"
        :fks="fks"
        :stores="stores"
        :uploadTimestamp="uploadTimestamp"
      />
    </a-tab-pane>
  </a-tabs>
  <!-- 流程明细 -->
<!--  <process-detail :record="record" :form="formId" v-else-if="record.type === 'processDetail'" />-->
  <div  v-else-if="record.type === 'tabs' && record.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 record.tabs"
                :class="current == index ? 'chooseStyle' : 'unChooseStyle'"
                :key="item.key"
                :title="$locle(item.tab)"
                @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
      :style="isOpen ? 'width: calc(100% - 145px)' : 'width: 100%'"
      style="padding-left: 1%;margin-top: 10px">
      <buildBlocks
        @handleReset="$emit('handleReset')"
        @doButtonAction="doButtonAction"
        v-for="item in tabStepItem.list"
        :key="item.key"
        :record="item"
        :config="config"
        @addEditableTableVm="addEditableTableVm"
        @addModelKey="addModelKey"
        @setFieldValue="setFieldValue"
        @getFieldValue="getFieldValue"
        :allDataSource="allDataSource"
        @refreshAllData="$emit('refreshAllData')"
        :form-id="formId"
        :dictMap="dictMap"
        :elValue="elValue"
        :dsCode="dsCode"
        :form="form"
        :linkageMap="linkageMap"
        @setLinkageMap="setLinkageMap"
        @setHidden="setHidden"
        @setTabHidden="setTabHidden"
        :fks="fks"
        :stores="stores"
        :uploadTimestamp="uploadTimestamp"
      />
    </div>
  </div>
  <KFormItem
    @handleReset="$emit('handleReset')"
    @doButtonAction="doButtonAction"
    v-else
    :key="record.key"
    :record="record"
    :config="config"
    @addEditableTableVm="addEditableTableVm"
    @addModelKey="addModelKey"
    @setFieldValue="setFieldValue"
    @getFieldValue="getFieldValue"
    :allDataSource="allDataSource"
    @refreshAllData="$emit('refreshAllData')"
    :form-id="formId"
    :dictMap="dictMap"
    :elValue="elValue"
    :dsCode="dsCode"
    :form="form"
    :linkageMap="linkageMap"
    @setLinkageMap="setLinkageMap"
    @setHidden="setHidden"
    @setTabHidden="setTabHidden"
    :fks="fks"
    :stores="stores"
    :uploadTimestamp="uploadTimestamp"
  />
</template>
<script>

import KFormItem from "../KFormItem/index";
import {handleCreateFunc, handleExecFunc} from '../utils/actions'
import locleUtil from "../utils/LocleUtil";
// import ProcessDetail from "@/views/eform/modules/designer/packages/ProcessDetail/ProcessDetail";

export default {
  name: "buildBlocks",
  props: {
    form: {
      type: Object,
      default: () => {
      }
    },
    linkageMap: {
      type: Object,
      default: () => {
      }
    },
    record: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      required: true
    },
    allDataSource: {
      type: Object,
      default: () => {
      }
    },
    dictMap: {
      type: Object,
      default: () => {
      }
    },
    elValue: {
      type: Object,
      default: () => {
      }
    },
    dsCode: {
      type: Object,
      default: () => {
      }
    },
    formId: {
      type: String
    },
    fks: {
      type: Array,
      default: () => []
    },
    stores: {
      type: Object,
      default: () => {
        return {}
      }
    },
    uploadTimestamp: {
      type: String
    },
  },
  components: {
    // ProcessDetail,
    KFormItem
  },
  data() {
    return {
      rootRef: null,
      activeKey: null,
      isOpen: true,
      tabStepItem: this.record.tabs && this.record.tabs[0],
      current: 0
    };
  },
  computed: {
    tabIndexComputed() {
      // TODO 未做除 1、2 之外的历史数据兼容处理
      return this.record.defaultActiveKeyIndex || this.record.tabs[0].key || 0
    },
    getAffixTarget() {
      if (this.rootRef) {
        return () => this.rootRef
      } else {
        return () => window
      }
    },
    //计算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
    }
  },
  methods: {
    $locle(params) {
      return locleUtil.getLocale(params)
    },
    resizeLayout(isOpen) {
      this.isOpen = isOpen
    },
    onChange(current) {
      this.current = current;
    },
    stepClick(step) {
      this.tabStepItem = step
    },
    addEditableTableVm(key, vm) {
      this.$emit("addEditableTableVm", key, vm);
    },
    addModelKey(key) {
      this.$emit("addModelKey", key);
    },
    setFieldValue(key, value) {
      this.$emit("setFieldValue", key, value);
    },
    getFieldValue(key, func) {
      this.$emit('getFieldValue', key, func)
    },
    doButtonAction(action) {
      this.$emit("doButtonAction", action);
    },
    setLinkageMap(key, value, keep) {
      this.$emit("setLinkageMap", key, value, keep);
    },
    setHidden(tableName, modelName, isHidden) {
      this.$emit("setHidden", tableName, modelName, isHidden);
    },
    setTabHidden(key, isHidden) {
      this.$emit("setTabHidden", key, isHidden);
    },
    getRootRef(el) {
      if (!el) {
        return el;
      }
      if (el.className && (el.className.indexOf('ant-modal-body') !== -1) || el.className === 'main') {
        return el;
      }
      return this.getRootRef(el.parentNode);
    },
    changeTabs(activeKey) {
      this.activeKey = activeKey
      if (this.record.watch) {
        const func = handleCreateFunc(this.record.watch, this)
        handleExecFunc(func, {activeKey})
      }
    }
  },
  mounted() {
    if (this.record.type === 'tabs') {
      this.activeKey = this.tabIndexComputed
    }
    this.$nextTick(() => {
      if (this.$refs.affix) {
        this.rootRef = this.getRootRef(this.$refs.affix.$el)
      }
    })
  },
};
</script>
<style lang="less" scoped>
.card-tabs-left {

}
.alignRight{
  text-align: right;
}
.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 {

    /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>
