<template>
  <div class="ec-apps">
    <div class="ec-top">
      <div class="ec-select">
        <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>
      <el-button type="text" @click="editCommonApps" v-show="!visibleFooter">管理常用应用</el-button>
    </div>
    <div class="ec-middle" v-show="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 class="">
          <i class="el-icon-menu ec-list-item-mr"></i><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"></el-checkbox>
          <span 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">确 定</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 apiService from "@/components/services/api.service";
import { DataOutput } from "@/components/model/DataOutput";
@Component({
  name: "MyApps",
  components: {
    "el-button": Button,
    "el-select": Select,
    "el-option": Option,
    "el-checkbox": Checkbox,
    "el-tag": Tag
  },
  watch: {
    selectName: (val, oldVal) => {
      console.log(val, oldVal);
    }
  },
  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 {
  visibleFooter = false;
  loading = false;
  selectName = "";
  cols = 7;
  apps: any[] = [];
  appTypes: AppType[] = [];
  appsArr: any[] = [];
  checkedApps: any[] = [];
  options: any[] = [];
  mounted() {
    this.selectApps({ userId: "admin" });
  }
  selectApps(param: any) {
    apiService
      .fetch("/api/sys/findAllSys", param, undefined, "GET", apiService.createAuthHeaders())
      .then((value: DataOutput<any>) => {
        if (value.code === 200) {
          this.apps = [];
          if (value.data) {
            this.apps = value.data;
            this.handleApps();
          }
        }
      })
      .catch(err => {});
  }
  handleApps() {
    this.appTypes = [];
    JSON.parse(JSON.stringify(this.apps)).forEach((ap: any) => {
      ap.checked = ap.isCommon === "1";
      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() {
    this.$emit("save");
  }
  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;
    flex-direction: row;
    .ec-select {
      flex: 1;
    }
  }
  .ec-middle {
    margin-top: 20px;
    .ec-middle-text {
      margin-bottom: 10px;
    }
    .ec-middle-tag {
      margin: 3px;
    }
  }
  .ec-list {
    margin-top: 20px;
    display: flex;
    justify-content: left;
    .ec-list-item {
      white-space: nowrap;
      margin-left: 23px;
      .ec-list-item-typename {
        font-size: 16px;
      }
      .ec-list-item-sysName {
        color: #333333;
      }
      .ec-list-item-app {
        margin-top: 5px;
      }
      .ec-list-item-mr {
        margin-right: 3px;
      }
      .ec-list-item-app-span {
        margin-left: 15px;
      }
    }
  }
  .ec-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
