<template>
  <el-dialog
    title="复制应用"
    :visible.sync="dialogVisible"
    width="50%"
    :close-on-click-modal="false"
    append-to-body
  >
    <form v-form data-vv-scope="saveCopyForm">
      <table class="form-table" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <th>原应用名称:</th>
            <td>{{ app.name }}</td>
            <th class="is-required">新应用名称</th>
            <td>
              <ht-input
                v-model="newApp.name"
                :validate="{required: true}"
                :maxlength="50"
              />
            </td>
          </tr>
          <tr>
            <th class="is-required">原应用别名:</th>
            <td>{{ app.alias }}</td>
            <th class="is-required">新应用别名</th>
            <td>
              <ht-input
                v-model="newApp.alias"
                v-pinyin="newApp.name"
                autocomplete="off"
                :validate="{
                  required: true,
                  regex: {
                    exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                    message: '只能输入字母、数字、下划线，且以字母开头',
                  },
                  isExist: '${form}/form/form/v1/checkKey?key=',
                }"
                placeholder="请输入别名"
                :maxlength="50"
              ></ht-input>
            </td>
          </tr>
          <tr>
            <th class="is-required">原应用分类:</th>
            <td>{{ app.menuName }}</td>
            <th class="is-required">新应用分类</th>
            <td>
              <tree-select
                style="width: 220px"
                :appendToBody="true"
                v-model="newApp.menuId"
                :normalizer="normalizer"
                :multiple="false"
                :options="appTypes"
                noOptionsText=" "
                noChildrenText=" "
                z-index="9999"
                placeholder="请选择父节点"
                :clearable="false"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">{{
        $t('eip.common.cancel')
      }}</el-button>
      <ht-submit-button
        url="${portal}/portal/sysApp/v1/copy"
        :model="newApp"
        scope-name="saveCopyForm"
        @after-save-data="afterSaveData"
        >{{ $t('eip.common.save') }}</ht-submit-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {mapState} from 'vuex'
import _ from 'lodash'
import utils from '@/hotent-ui-util'

const TreeSelect = () => import('@riophae/vue-treeselect')
export default {
  name: 'AppCopyDialog',
  components: {
    TreeSelect,
  },
  data() {
    return {
      dialogVisible: false,
      app: {},
      newApp: {
        alias: '',
        name: '',
      },
    }
  },
  created() {
    this.$store.dispatch('menu/getAppTypes')
  },
  computed: mapState({
    appTypes: (state) => {
      let stateAppTypes = _.cloneDeep(state.menu.appTypes)
      utils.nestForEach(stateAppTypes, 'children', (item) => {
        if (!item.children || item.children.length === 0) {
          delete item.children
        }
      })

      return stateAppTypes || []
    },
  }),
  methods: {
    open(app) {
      this.app = app
      this.newApp = {
        appId: app.id,
        alias: '',
        name: '',
      }
      this.dialogVisible = true
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
        isDefaultExpanded: false,
      }
    },
    afterSaveData() {
      this.$emit('refresh')
      this.dialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
th {
  width: 150px;
}
</style>