<template>
  <el-drawer
    class="es-simplicity-apps"
    direction="ltr"
    modal-class="es-simplicity-apps-modal"
    size="90%"
    :modal-append-to-body="false"
    :with-header="false"
    :visible.sync="show"
  >
    <div class="es-simplicity_apps">
      <div class="es-simplicity_apps-all">
        <div class="es-simplicity_apps-title">
          所有业务系统
          <el-input
            class="es-simplicity_apps-search"
            size="medium"
            placeholder="请输入关键字"
            prefix-icon="el-icon-search"
            v-model="value"
          >
          </el-input>
        </div>
        <div class="es-simplicity_apps-box" @mousewheel="handleWheel">
          <ul class="es-simplicity_apps-list">
            <li
              v-for="item in _applications"
              class="es-simplicity_apps-list-item"
              :key="item.id"
            >
              <div
                class="es-simplicity_apps-list-content"
                :class="{ 'es-simplicity_apps-disabled': !item.permission }"
                @click="handleClick(item)"
              >
                <el-badge v-bind="getBadge(item)">
                  <es-icon
                    class="es-simplicity_apps-icon"
                    :contents="item.icons || item.icon || menuIcon"
                  ></es-icon>
                </el-badge>
                <div class="es-simplicity_apps-text">
                  {{ item.text || item.name }}
                </div>
                <div class="es-simplicity_apps-hover">
                  <es-icon
                    class="es-simplicity_apps-icon"
                    :contents="
                      item.permission ? 'es-icon-solid-you' : 'es-icon-mima'
                    "
                  ></es-icon>
                  <div class="es-simplicity_apps-text">
                    {{ item.permission ? '进入系统' : '暂无权限' }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <el-pagination
          class="es-simplicity_apps-pagination"
          background
          layout="total,prev, pager, next"
          total-text="共 {total} 个业务系统"
          :page-size="appSize"
          :total="apps.length"
          :current-page.sync="appNum"
          @current-change="
            (res) => {
              this.handleChange(res, 0);
            }
          "
        >
        </el-pagination>
      </div>
      <div class="es-simplicity_apps-other">
        <div class="es-simplicity_apps-business">
          <div class="es-simplicity_apps-title">专项业务系统</div>
          <ul class="es-simplicity_apps-list">
            <li
              v-for="(item, index) in _business"
              class="es-simplicity_apps-list-item"
              :key="item.id"
            >
              <div
                class="es-simplicity_apps-list-content"
                :class="{ 'es-simplicity_apps-disabled': !item.permission }"
                @click="handleClick(item)"
              >
                <es-icon
                  class="es-simplicity_app-icon"
                  :style="setStyle(index)"
                  :contents="item.icons || item.icon || menuIcon"
                ></es-icon>
                <el-badge
                  v-bind="getBadge(item)"
                  class="es-simplicity_apps-texts"
                >
                  <div class="es-simplicity_apps-text">
                    {{ item.text || item.name }}
                  </div>
                </el-badge>
                <div class="es-simplicity_apps-hover">
                  <es-icon
                    class="es-simplicity_apps-icon"
                    :contents="
                      item.permission ? 'es-icon-solid-you' : 'es-icon-mima'
                    "
                  ></es-icon>
                  <div class="es-simplicity_apps-text">
                    {{ item.permission ? '进入系统' : '暂无权限' }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <el-pagination
            class="es-simplicity_apps-pagination"
            background
            layout="total,prev, pager, next"
            total-text="共 {total} 专项业务系统"
            :page-size="bsSize"
            :total="business.length"
            @current-change="
              (res) => {
                this.handleChange(res, 1);
              }
            "
          >
          </el-pagination>
        </div>
        <div class="es-simplicity_apps-systems">
          <div class="es-simplicity_apps-title">系统设置</div>
          <ul class="es-simplicity_apps-list">
            <li
              v-for="(item, index) in _systems"
              class="es-simplicity_apps-list-item"
              :key="item.id"
            >
              <div
                class="es-simplicity_apps-list-content"
                :class="{ 'es-simplicity_apps-disabled': !item.permission }"
                @click="handleClick(item)"
              >
                <es-icon
                  class="es-simplicity_app-icon"
                  :style="setStyle(index)"
                  :contents="item.icons || item.icon || menuIcon"
                ></es-icon>
                <el-badge
                  v-bind="getBadge(item)"
                  class="es-simplicity_apps-texts"
                >
                  <div class="es-simplicity_apps-text">
                    {{ item.text || item.name }}
                  </div>
                </el-badge>
                <div class="es-simplicity_apps-hover">
                  <es-icon
                    class="es-simplicity_apps-icon"
                    :contents="
                      item.permission ? 'es-icon-solid-you' : 'es-icon-mima'
                    "
                  ></es-icon>
                  <div class="es-simplicity_apps-text">
                    {{ item.permission ? '进入系统' : '暂无权限' }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <el-pagination
            class="es-simplicity_apps-pagination"
            background
            layout="total,prev, pager, next"
            total-text="共 {total} 系统设置"
            hide-on-single-page
            :page-size="sysSize"
            :total="systems.length"
            @current-change="
              (res) => {
                this.handleChange(res, 2);
              }
            "
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import util from 'eoss-ui/src/utils/util';
import { debounce } from 'throttle-debounce';
import { recordUserApp } from 'eoss-ui/src/config/api.js';
export default {
  name: 'Apps',
  components: {},
  props: {
    user: Object,
    visible: Boolean,
    //菜单、应用默认图标
    menuIcon: String,
    color: {
      type: [String, Array],
      default: '#fff'
    },
    backgroundColor: {
      type: [String, Array],
      default() {
        return [
          '#0B3978',
          '#2591F7',
          '#69C0FF',
          '#E34D59',
          '#2591F7',
          '#FF9C52',
          '#17C27B'
        ];
      }
    },
    applications: {
      type: Array,
      default() {
        return [];
      }
    },
    //业务系统
    business: {
      type: Array,
      default() {
        return [];
      }
    },
    //系统管理
    systems: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      value: '',
      apps: [],
      appSize: 20,
      appNum: 1,
      bsSize: 8,
      bsNum: 1,
      sysSize: 2,
      sysNum: 1
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
        return val;
      }
    },
    _applications() {
      return this.apps.filter((item, index) => {
        return (
          index > (this.appNum - 1) * this.appSize - 1 &&
          index < this.appNum * this.appSize
        );
      });
    },
    _business() {
      return this.business.filter((item, index) => {
        return (
          index > (this.bsNum - 1) * this.bsSize - 1 &&
          index < this.bsNum * this.bsSize
        );
      });
    },
    _systems() {
      return this.systems.filter((item, index) => {
        return (
          index > (this.sysNum - 1) * this.sysSize - 1 &&
          index < this.sysNum * this.sysSize
        );
      });
    }
  },
  watch: {
    applications: {
      deep: true,
      handler() {
        this.getApps();
      }
    },
    value() {
      this.getApps();
    }
  },
  beforeCreate() {
    this.getApps = debounce(500, () => {
      this.getApp();
    });
  },
  created() {},
  mounted() {
    this.getApps();
  },
  methods: {
    getApp() {
      this.apps = this.value
        ? this.applications.filter((item) => {
            return (item.name || item.text).indexOf(this.value) > -1;
          })
        : this.applications;
    },
    setStyle(num) {
      let obj = {};
      if (this.color) {
        obj.color = this.color;
        if (Array.isArray(this.color)) {
          obj.color = this.color[num % this.color.length];
        } else {
          obj.color = this.color;
        }
      }
      if (this.backgroundColor) {
        if (Array.isArray(this.backgroundColor)) {
          obj.backgroundColor =
            this.backgroundColor[num % this.backgroundColor.length];
        } else {
          obj.backgroundColor = this.backgroundColor;
        }
      }
      return obj;
    },
    handleChange(res, index) {
      let name = ['appNum', 'bsNum', 'sysNum'];
      this[name[index]] = res;
    },
    handleWheel(e) {
      let direction = e.deltaY > 0 ? 'down' : 'up'; //deltaY为正则滚轮向下，为负滚轮向上
      let total = Math.ceil(this.apps.length / this.appSize);
      if (direction == 'up' && this.appNum > 1) {
        this.appNum -= 1;
      }
      if (direction == 'down' && this.appNum < total) {
        this.appNum += 1;
      }
    },
    handleClick(res) {
      util
        .ajax({
          url: recordUserApp,
          params: {
            userId: this.user.userId,
            appId: res.id
          }
        })
        .then(() => {})
        .catch(() => {});
      this.$emit('click', res);
    },
    /**
     * @desc:获取气泡提醒
     * @author huangbo
     * @date 2024年9月7日
     **/
    getBadge(res) {
      let num = res.tips || 0;
      return num === true
        ? {
            isDot: true
            //hidden: item.tips
          }
        : {
            value: num,
            max: 99,
            hidden: !num
          };
    }
  }
};
</script>

<style lang="scss" scoped></style>
