import { ref, reactive, watch } from "vue"
interface titleDict {
  add: string;
  edit: string;
  view: string;
}

class pageVisible {
  /**
   * 需要操作的页面类型
   */
  executeType = ref('');
  /**
   * 实际渲染的二级页面或者dialog的标题
   */
  dialogTitle = ref("");
  /**
 * 是否显示二级页面或者dialog
 */
  show2LevelPage = ref(false); // 是否显示二级页面或者dialog
  /**
   * 标题的字典，用于在控制页面显示的时候映射对应的标题
   */
  dialogTitleDict = ref<{ [key: string]: any }>({});
  /**
   * 显示页面的类型
   */
  showPageType = reactive({
    add: false,
    edit: false,
    view: false,
  });

  /**
   * @param dialogTitleDict 传入一个对象，有三个字段，分别是add、edit和view页面的标题<br>
   * { <br>
   *    add: '添加页面的标题',<br>
   *    view: '查看页面的标题',<br>
   *    edit: '编辑页面的标题'<br>
   * }
   */
  constructor(dialogTitleDict: titleDict) {
    this.dialogTitleDict.value = dialogTitleDict;

    // 根据展示的类型更换标题
    watch(
      () => this.showPageType,
      (newVal) => {
        for (let [key, value] of Object.entries(newVal)) {
          if (value) {
            this.show2LevelPage.value = true;
            this.dialogTitle.value = this.dialogTitleDict.value[key];
            if(['edit', 'add'].includes(key)) this.executeType.value = key;
            break;
          }
        }
      },
      { deep: true }
    );
    
    // 页面关闭，展示的类型全部不显示
    watch(
      () => this.show2LevelPage,
      (newVal) => {
        if (!newVal.value) {
          this.showPageType.add = false;
          this.showPageType.edit = false;
          this.showPageType.view = false;
        }
      },
      { deep: true }
    );
  }
}

export default pageVisible;