<template>
  <div class="ec-apps">
    <div class="ec-top" v-if="!visibleFooter">
      <div class="ec-select" v-if="false">
        <el-select :size="'medium'" v-model="selectName" multiple filterable remote reserve-keyword placeholder="请输入应用名称" :remote-method="remoteMethod" :loading="loading">
          <el-option v-for="item in options" :key="item.sysId" :label="item.sysName" :value="item.sysId"></el-option>
        </el-select>
      </div>
      <template>
        <img class="ec-app-icon" :src="appSetting" />
        <el-button type="text" @click="editCommonApps">管理常用应用</el-button>
      </template>
    </div>
    <div class="ec-middle" v-if="visibleFooter">
      <div class="ec-middle-text">
        <span>固定至导航（{{ checkedApps.length }}/{{ options.length }}）</span>
      </div>
      <div>
        <el-tag class="ec-middle-tag" v-for="item in checkedApps" :key="item.sysId" effect="plain">{{ item.sysName }}</el-tag>
      </div>
    </div>
    <div class="ec-list" v-for="(items, idx) in appsArr" :key="idx">
      <div class="ec-list-item" v-for="(item, idx) in items" :key="idx">
        <div>
          <i class="el-icon-menu ec-list-item-mr" />
          <span class="ec-list-item-typename">{{ item.sysBusType | transDict }}</span>
        </div>
        <div class="ec-list-item-app" v-for="item2 in item.apps" :key="item2.sysId">
          <el-checkbox class="ec-list-item-mr" v-model="item2.checked" :checked="item2.isCommon === '1'" @change="isCommonChange" v-show="visibleFooter">
            <span class="ec-list-item-sysName">{{ item2.sysName }}</span>
          </el-checkbox>
          <span v-show="!visibleFooter" class="ec-list-item-sysName" :class="visibleFooter ? '' : 'ec-list-item-app-span'">{{ item2.sysName }}</span>
        </div>
      </div>
    </div>
    <div class="ec-footer" :justify="'space-between'">
      <div v-show="visibleFooter">
        <el-button @click="editCommonApps">取 消</el-button>
        <el-button type="primary" @click="confirm">{{ refreshLoading ? "处理中" : "确 定" }}</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { SysBusTypeEnum } from "@/components/my-apps/enum/sys-bus-type.enum";

interface AppType {
  sysBusType: string;
  apps: any[];
}
import Vue from "vue";
import Component from "vue-class-component";
import { Button, Select, Option, Checkbox, Tag } from "element-ui";
import { Prop, Watch } from "vue-property-decorator";
import { NavMenu } from "@/model/NavMenu";
import beanUtilsService from "@/services/bean-utils.service";
import apiService from "@/services/api.service";
import { DataOutput } from "@/model/DataOutput";
import sysApi from "@/constants/api/sys.api";
@Component({
  name: "MyApps",
  components: {
    "el-button": Button,
    "el-select": Select,
    "el-option": Option,
    "el-checkbox": Checkbox,
    "el-tag": Tag
  },
  filters: {
    transDict: (value: string): string => {
      let name = "";
      Object.keys(SysBusTypeEnum).forEach((key: string) => {
        const dict: any = SysBusTypeEnum[key];
        if (dict.code === value) {
          name = dict.name;
        }
      });
      return name || "应用列表";
    }
  }
})
export default class MyApps extends Vue {
  @Prop({ type: Array, default: () => [] }) apps: NavMenu[] | undefined;
  appSetting = require("@/assets/img/app-setting.png");

  visibleFooter = false;
  loading = false;
  refreshLoading = false;
  selectName = "";
  cols = 7;
  appTypes: AppType[] = [];
  appsArr: any[] = [];
  checkedApps: any[] = [];
  options: any[] = [];

  @Prop({ type: Boolean, default: false }) visible: boolean | undefined;

  @Watch("apps", { immediate: true })
  onAppsChange(val: boolean) {
    if (val) {
      this.handleApps();
    }
  }

  mounted() {}

  handleApps() {
    this.appTypes = [];
    const appsCopy = this.apps ? beanUtilsService.copy(this.apps) : [];
    appsCopy.forEach((ap: any) => {
      const appType = this.appTypes.find(e => e.sysBusType === ap.sysBusType);
      if (appType) {
        appType.apps.push(ap);
      } else {
        this.appTypes.push({ sysBusType: ap.sysBusType, apps: [ap] });
      }
    });
    this.appsArr = [];
    this.options = [];
    for (let idx = 0; idx < this.appTypes.length; idx++) {
      const e: AppType = this.appTypes[idx];
      this.options.push(...e.apps);
      const num: any = Math.floor(Number(idx / this.cols)).toFixed(0);
      if (Number(idx % this.cols) === 0) {
        this.appsArr[num] = [];
      }
      this.appsArr[num].push(e);
    }
    this.handleCheckedApps();
  }

  handleCheckedApps() {
    this.checkedApps = [];
    for (let idx = 0; idx < this.appTypes.length; idx++) {
      const e: AppType = this.appTypes[idx];
      e.apps.forEach((ap: any) => {
        ap.isCommon = "0";
        if (ap.checked) {
          ap.isCommon = "1";
          this.checkedApps.push(ap);
        }
      });
    }
  }
  confirm() {
    if (this.refreshLoading) {
      return;
    }
    const params: any[] = [];
    if (this.checkedApps && this.checkedApps.length > 0) {
      this.checkedApps.forEach((item: NavMenu) => {
        params.push(item.sysId);
      });
    }
    this.refreshLoading = true;
    apiService
      .general(sysApi.updateCommon, undefined, params)
      .then((res: DataOutput<any>) => {
        this.refreshLoading = false;
        if (res.code === 200) {
          this.$emit("common-change", false);
        }
      })
      .catch(() => {
        this.refreshLoading = false;
      });
  }

  remoteMethod() {}

  isCommonChange() {
    this.handleCheckedApps();
  }

  editCommonApps() {
    this.visibleFooter = !this.visibleFooter;
    this.handleApps();
  }
}
</script>

<style scoped lang="scss">
.ec-apps {
  display: flex;
  flex-direction: column !important;
  .ec-top {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: flex-end;
    .ec-select {
      flex: 1;
    }
  }
  .ec-middle {
    .ec-middle-text {
      margin-bottom: 10px;
      font-size: 14px;
    }
    .ec-middle-tag {
      margin: 3px;
    }
  }
  .ec-list {
    display: flex;
    justify-content: left;
    .ec-list-item {
      white-space: nowrap;
      margin-left: 10px;
      margin-top: 5px;
      .ec-list-item-typename {
        font-size: 16px;
        color: #808080;
      }
      .ec-list-item-sysName {
        color: #333333;
        cursor: pointer;
        user-select: none;
        margin-left: 2px;
        &:active {
          opacity: 0.7;
        }
      }
      .ec-list-item-app {
        margin-top: 8px;
      }
      .ec-list-item-mr {
        margin-right: 3px;
        font-size: 16px;
        &:active {
          opacity: 0.7;
        }
      }
      .ec-list-item-app-span {
        margin-left: 18px;
      }
    }
  }
  .ec-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .ec-app-icon {
    width: 16px;
    height: 16px;
    margin-right: 0.25rem;
  }
}
::v-deep .el-checkbox__label {
  padding-left: 2px;
}
</style>
