<template>
  <q-view layout="vbox">
    <q-input
      :text="pageName"
      placeholderText="请输入页面名称"
      id="HXInput"
      @textChanged="onPageNameChange"
    ></q-input>
    <q-view layout="hbox">
      <q-checkbox
        id="HXCheckBox"
        text="在pages.json中注册"
        :checked='isRegisterPages'
        @stateChanged='onIsRegisterPageChange'
      ></q-checkbox>
      <q-view horizontal-size-policy="Expanding"></q-view>
      <q-label v-if="hasSubPages" text="选择App和小程序的分包:"></q-label>
      <q-combox
        v-if="hasSubPages"
        :currentText='pageRoot'
        :currentIndex='0'
        :items='pageRoots'
        :editable="false"
        @currentIndexChanged="onPageRootChange"
      ></q-combox>
    </q-view>

    <q-view layout="hbox">
      <q-source-editor
        :font-size="12"
        languageId='json'
        :text='pageStyle'
        :word-wrap='true'
        :line-number-visible='false'
        :end-at-last-line='true'
        :read-only='false'
        @modified="onSourceEditorChange"
      ></q-source-editor>
    </q-view>
  </q-view>
</template>

<script>
export default {
  data () {
    return {
      pageName: "",
      pageRoots: [],
      pageRoot: "",
      pageStyle: JSON.stringify({
        "enablePullDownRefresh": false,
        "navigationBarTitleText": "",
      }, null, 2),
      isRegisterPages: false,
    }
  },
  computed: {
    hasSubPages () {
      return this.pageRoots.length > 0
    }
  },
  mounted () {
    this.pageRoot = this.pageRoots[0]
    this.updateUi()
  },
  methods: {
    async onPageNameChange (e) {
      this.pageName = e.target.text
      await this.updateUi()
    },
    async onIsRegisterPageChange (e) {
      this.isRegisterPages = e.target.checked
      await this.updateUi()
    },
    async onPageRootChange (e) {
      this.pageRoot = e.target.currentText
      await this.updateUi()
    },
    async onSourceEditorChange (e) {
      this.pageStyle = e.target.text
      console.log(this.pageStyle)
      await this.updateUi()
    }
  }
}
</script>

<style scoped lang="qss">
* {
  font-family: "Microsoft YaHei UI", "Menlo", "Consolas";
  font-size: 12px;
  color: #405E42;
}

#HXInput {
  height: 26px;
  border: 1px solid #e5e5e5;
  background: transparent;
}

#HXInput:hover,
#HXInput:focus {
  background: transparent;
  border-color: #43c45b;
}
#HXCheckBox {
  font-size: 13px;
  color: #405E42;
}

#HXCheckBox::indicator::unchecked {
  image: url(:/hxui/resource/chbx.png);
}

#HXCheckBox::indicator::unchecked:hover {
  image: url(:/hxui/resource/chbx-hover.png);
}

#HXCheckBox::indicator::checked {
  image: url(:/hxui/resource/chbx-checked.png);
}

#HXCheckBox::indicator::checked:disabled {
  image: url(:/hxui/resource/chbx-checked-disable.png);
}

#HXCheckBox::indicator::unchecked:pressed,
#HXCheckBox::indicator::checked:pressed {
  image: url(:/hxui/resource/chbx-pressed.png);
}

#HXCheckBox::indicator:disabled {
  image: url(:/hxui/resource/chbx.png);
}
QComboBox {
  height: 26px;
  border: 1px solid #e5e5e5;
  background: #FFFEFA;
}

QComboBox:hover,
QComboBox:focus {
  border: 1px solid #43C45B;
}

QComboBox::down-arrow {
  /* image: url(:/hxui/resource/branch-open.png) */
  image: url(:/login/icons/down-arrow-fill.png);
}

QComboBox::drop-down {
  subcontrol-position: top right;
  width: 32px;
  border: none;
}

QComboBox QAbstractItemView {
  background: #FFFEFA;
  color: #405E42;
  selection-color: #405E42;
}

QComboBox QAbstractItemView::item {
  min-height: 26px;
  background: #FFFEFA;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

QComboBox QAbstractItemView::item:hover,
QComboBox QAbstractItemView::item:selected {
  background: #FAFFFA;
}
</style>
