<template>
  <div :class="$style.processWrap">
    <div :class="$style.tabs">
      <a-card title="业务分类">
        <a-skeleton :loading="loading" :paragraph="{ rows: 30 }" :title="false" />
        <a-empty v-if="!loading && categoryList.length < 1" />
        <a-anchor
          v-else
          :affix="false"
          :wrapper-style="{ maxHeight: '100%' }"
          :get-container="getContainer"
          @click="handleClick"
        >
          <a-anchor-link v-for="(item, index) in categoryList" :key="index" :href="'#' + index">
            <span slot="title"> <a-icon type="sd-list" /> {{ item.text }} </span>
          </a-anchor-link>
        </a-anchor>
      </a-card>
    </div>
    <div ref="allProcess" :class="$style.allProcess">
      <a-input-search
        v-model="search"
        allow-clear
        placeholder="请输入搜索条件"
        :class="$style.searchBtn"
      />
      <!-- 特定骨架屏效果 -->
      <div v-if="loading">
        <a-card v-for="index in 6" :key="index">
          <template slot="title">
            <div :class="$style.cardTitle"> </div>
          </template>
          <div v-for="itm in 8" :key="itm" :class="$style.cateSkeleton"> </div>
        </a-card>
      </div>
      <a-empty v-else-if="!loading && categoryList.length < 1" />
      <a-card v-for="(item, i) in categoryList" v-else :id="i" :key="i" :title="item.text">
        <div
          v-for="itm in duplicateRemoval(item.children.map((i) => i.id)).map((id) => {
            return item.children.find((i) => i.id === id)
          })"
          :key="itm.id"
          :class="$style.cate"
        >
          <span
            :title="`${itm.text}(${itm.props.groupPath || userInfo.deptName})`"
            @click="check(i, itm)"
          >
            {{ itm.text }}
            <template v-if="itm.props.srcTrustId">
              ({{ itm.props.groupPath || userInfo.deptName }})
            </template>
          </span>
          <a-dropdown
            v-if="item.children.filter((i) => i.id === itm.id).length > 1"
            :class="$style.aDropdown"
          >
            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
              <a-icon type="usergroup-add" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item
                v-for="itm2 in item.children.filter((i) => i.id === itm.id)"
                :key="itm2.props.srcTrustId"
                @click="$emit('changeTabActive', itm2)"
              >
                {{ itm2.props.groupPath || userInfo.deptName }}
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import components from './_import-components/sd-process-all-import'
export default {
  name: 'SdProcessAll',
  components,
  mixins: [storeMixin],
  props: {
    activeTab: {
      default: 1,
      type: Number,
    },
    categoryList: {
      default: () => {},
      type: Array,
    },
    firstCategory: {
      default: () => {},
      type: Array,
    },
    loading: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      active: 0,
      search: '',
    }
  },
  watch: {
    activeTab: {
      handler(val) {
        this.active = 0
        this.categoryList.forEach((item, i) => {
          if (this.firstCategory.length > 0) {
            if (item.id === this.firstCategory[val].id) {
              this.categoryList.unshift(this.categoryList.splice(i, 1)[0])
            }
          }
        })
      },
      immediate: true,
    },
    search(val) {
      this.$emit('searchVal', val)
    },
  },

  methods: {
    handleClick(e, link) {
      e.preventDefault()
    },
    getContainer() {
      return this.$refs.allProcess
    },
    check(i, itm) {
      this.active = i
      this.$emit('changeTabActive', itm)
    },
    duplicateRemoval(array) {
      return [...new Set(array)]
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$active: #e7f3ff;
$listdef: #f6f8fb;
.process-wrap {
  display: flex;
  flex: 1;
  width: 100%;
  height: calc(100% - 42px);
}
.tabs {
  width: 200px;
  :global(.ant-card)::-webkit-scrollbar {
    /* 滚动条样式 */
    width: 0;
    height: 4px;
  }
  :global(.ant-card) {
    height: 100%;
    background: $listdef;
    :global(.ant-card-body) {
      height: calc(100% - 60px);
      padding-top: 0;
      padding-right: 0;
      padding-left: 0;
      overflow: auto;
      :global(.ant-anchor-wrapper) {
        background-color: transparent;
        :global(.ant-anchor-link) {
          position: relative;
          height: 40px;
          padding: 10px 0 10px 16px;
        }
        :global(.ant-anchor-link-active) {
          background: $active;
          &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 40px;
            content: '';
            background: $primary-color;
            border-radius: 8px;
          }
        }
        :global(.ant-anchor-ink) {
          position: static;
        }
        :global(.ant-anchor) {
          padding-left: 0;
        }
      }
    }
    :global(.ant-card-head) {
      border-bottom: none;
    }
    :global(.ant-skeleton-paragraph) {
      padding: 10px;
      :global(li) {
        height: 30px;
      }
    }
  }
}
.all-process {
  position: relative;
  width: calc(100% - 200px);
  height: 100%;
  overflow: auto;
  .search-btn {
    position: absolute;
    top: 13px;
    right: 50px;
    z-index: 1;
    width: 200px;
    margin-bottom: 10px;
  }
  .card-title {
    width: 120px;
    height: 30px;
    background-color: $listdef;
  }
  .cate-skeleton {
    height: 55px;
    background-color: $listdef;
  }
  :global(.ant-card-body) {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
    > div {
      position: relative;
      width: calc(25% - 10px);
      margin-right: 10px;
      margin-bottom: 20px;
      text-align: left;
      &:nth-child(4n) {
        text-align: right;
      }
      &:nth-child(4n + 1) {
        text-align: left;
      }
      span {
        display: block;
        float: left;
        width: 85%;
        padding: 16px 0 16px 30px;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        background: $listdef;
        transition: 0.3s;
      }
      .a-dropdown {
        float: right;
        width: 15%;
        padding: 16px 0;
        text-align: center;
        background: $listdef;
      }
      ::before {
        position: absolute;
        top: 20px;
        right: 0;
        bottom: 20px;
        left: 20px;
        width: 3px;
        content: '';
        background: $primary-color;
        border-radius: 8px;
      }
      :hover {
        background: $active;
        transition: all 0.3s;
      }
    }
  }
  :global(.ant-card-head) {
    padding: 0 40px;
    border-bottom: none;
  }
}
</style>
