<template>
  <t-dialog :closeOnOverlayClick="false" class="dc-my-app-modal" header="我的应用" :visible.sync="modalVisible" :width="800" :confirm-loading="confirmLoading" :maskClosable="false" cancelText="取消" okText="确认" @confirm="handleOk" @close="handleCancel">
    <div class="dc-my-app-container">
      <div class="dc-fixed-nav-box">
        <div class="dc-title">固定至导航({{ checkKeys.length }}/{{ appOptions.length }})</div>
        <div class="dc-context">
          <template v-for="item in sysAppInfos">
            <t-button class="dc-space" size="medium" v-if="checkKeys.includes(item.appId)" :key="item.appId">{{ item.appName }}</t-button>
          </template>
        </div>
      </div>
      <div class="dc-app-list-box">
        <div class="dc-title"><t-icon name="app" theme="filled" twoToneColor="#606266" class="dc-icon" />应用列表</div>
        <div class="dc-context">
          <t-checkbox-group v-model="checkKeys" name="app_check_box_group" :options="appOptions" />
        </div>
      </div>
    </div>
  </t-dialog>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { MessagePlugin as message } from "tdesign-vue";
import { Prop } from "vue-property-decorator";
import { RestfulResponse } from "../../model/RestfulResponse";
import { SysAppInfo } from "../../model/SysAppInfo";
import { SysFuiAppRel } from "../../model/SysFuiAppRel";
import { apiService } from "../../services/api.service";
import { RestApi } from "../../model/RestApi";
import sysFuiAppRelApi from "../../constants/api/sys-fui-app-rel.api";
import { Code } from "../../constants/enum/code.enum";

@Component({
  name: "MyAppModal",
  components: {
    // [Icon.name]: Icon,
    // [Button.name]: Button,
    // [Checkbox.name]: Checkbox,
    // [Checkbox.Group.name]: Checkbox.Group,
  },
})
export default class MyAppModal extends Vue {
  @Prop({ default: () => false }) visible!: boolean; // 模态框展开标识
  @Prop({ default: () => [] }) sysAppInfos!: SysAppInfo[]; // 全量应用信息
  @Prop({ default: () => [] }) sysFuiAppRels!: SysFuiAppRel[]; // 常用应用信息

  confirmLoading = false; // 请求等待状态标识

  checkKeys: string[] = []; // 已选中的节点
  appOptions: any[] = []; // 全量可选项

  // 内部显示标识
  get modalVisible() {
    return this.visible;
  }

  set modalVisible(newValue) {
    this.$emit("update:visible", newValue);
  }

  mounted(): void {
    this.initData();
  }

  initData(): void {
    this.appOptions = [];
    this.sysAppInfos.forEach((item) => {
      this.appOptions.push({ label: item.appName, value: item.appId });
    });
    this.checkKeys = this.sysFuiAppRels.map((item) => item.appId);
  }

  /**
   * @description: 确认事件
   * @author ChenRui
   * @date 2021/8/14 15:17
   */
  handleOk() {
    const restApi: RestApi = new RestApi(sysFuiAppRelApi.fullAdd);
    restApi.url = this.$dc.baseApi + sysFuiAppRelApi.fullAdd.url;
    this.confirmLoading = true;
    const sysFuiAppRels: SysFuiAppRel[] = this.checkKeys.map((item) => new SysFuiAppRel({ appId: item })) || [];
    const params: any = sysFuiAppRels;
    apiService.general(restApi, undefined, params).then((response: RestfulResponse) => {
      this.confirmLoading = false;
      if (response.code === Code.SUCCESS.code) {
        message.info({ content: response.msg! });
        this.handleCancel(null, response);
      } else {
        message.error({ content: response.msg! });
      }
    });
  }

  /**
   * @description: 取消编辑
   * @author ChenRui
   * @date 2021/8/14 15:11
   */
  handleCancel(event: any, response: RestfulResponse) {
    this.$emit("close", response || RestfulResponse.failure());
    this.modalVisible = false;
  }
}
</script>

<style scoped lang="scss">
.dc-my-app-container {
  display: flex;
  flex-direction: column;
  .dc-fixed-nav-box {
    display: flex;
    flex-direction: column;
    .dc-title {
      color: #606266;
      margin-bottom: 10px;
    }
    .dc-context {
      display: flex;
      flex-wrap: wrap;
      .dc-space {
        margin-right: 8px;
      }
      .dc-btn {
        padding: 0 15px;
        border-radius: 4px;
        margin-top: 8px;
        margin-right: 8px;
        background-color: #e8f4ff;
        border-color: #d1e9ff;
        color: #1890ff;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .dc-app-list-box {
    margin-top: 15px;
    .dc-title {
      font-size: 16px;
      color: grey;
      margin: 10px 0;
      .dc-icon {
        margin-right: 5px;
      }
    }
    .dc-context {
      ::v-deep {
        .ant-checkbox-group {
          .ant-checkbox-group-item {
            line-height: 28px;
          }
        }
      }
    }
  }
}
</style>
