<template>
  <div>
    <el-dialog
      width="620px"
      :visible="dialogVisible"
      v-if="dialogVisible"
      class="form-editor-dialog"
      show-close
      @close="dialogClose"
      title="发布到PC应用模块"
      destory-on-close
    >
      <el-container class="fullheight">
        <el-main>
          <el-form
            data-vv-scope="appModelForm"
            v-form="{formItemAlign: labelPosition}"
          >
            <ht-form-item label="应用名称">
              <ht-input
                v-model="appModel.name"
                validate="required"
                width="384px"
                :maxlength="128"
                show-word-limit
              />
            </ht-form-item>
            <ht-form-item label="应用名称">
              <ht-input
                v-model="appModel.alias"
                validate="required"
                width="384px"
                :maxlength="128"
                show-word-limit
                v-pinyin="appModel.name"
              />
            </ht-form-item>
            <ht-form-item label="图标">
              <div class="icon-wrap">
                <div
                  class="icon-main"
                  :style="{background: appModel.iconColor}"
                >
                  <el-image class="image" :src="image" v-if="image"></el-image>
                  <i v-else :class="appModel.icon" class="app-icon"></i>
                </div>
                <iconDialog class="icon-select_wrap" @selected="selectIcon" />
                <el-upload
                  action="string"
                  :http-request="updateImage"
                  :show-file-list="false"
                  accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"
                >
                  <el-button class="upload-bt" size="small">上传图标</el-button>
                </el-upload>
                <el-button
                  style="margin-left: 16px"
                  class="upload-bt"
                  size="small"
                  @click="handleClear"
                  >清空</el-button
                >
              </div>
            </ht-form-item>
            <ht-form-item label="图标颜色">
              <ht-input
                v-model="appModel.iconColor"
                width="222px"
                show-word-limit
                placeholder=""
              />
              <el-color-picker
                class="layout_md"
                v-model="appModel.iconColor"
              ></el-color-picker>
              <div class="default-color--list">
                <div
                  class="color-item"
                  v-for="(item, index) in colorList"
                  :key="index"
                  @click="handleColor(item)"
                  :style="{background: item}"
                ></div>
              </div>
            </ht-form-item>
            <ht-form-item label="跳转模式">
              <ht-select
                v-model="appModel.type"
                :options="typeOptions"
                validate="required"
                class="width-input"
                disabled
              />
            </ht-form-item>
            <ht-form-item :label="contentLabel">
              {{ contentStr }}
            </ht-form-item>
            <ht-form-item label="排序">
              <ht-input
                class="input-text"
                v-model="appModel.sn"
                :min="0"
                :max="999"
                validate="required"
                type="number"
                width="384px"
              />
            </ht-form-item>
          </el-form>
          <el-form
            data-vv-scope="publishForm"
            v-form="{formItemAlign: labelPosition}"
          >
            <ht-form-item label="应用菜单">
              <template slot="label">
                <span class="is-required">应用菜单</span>
              </template>
              <tree-select
                v-model="menu.id"
                :normalizer="normalizer"
                :multiple="false"
                :options="menus"
                noOptionsText=" "
                noChildrenText=" "
                placeholder="请选择父节点"
                class="tree-select-radio"
              />
            </ht-form-item>
          </el-form>
        </el-main>
        <el-footer class="footer-wrap" >
          <el-button
            type="default"
            size="small"
            @click="dialogClose"
            >取消</el-button
          >
          <ht-submit-button
            class="button-style"
            url="${portal}/portal/sysApp/v1/save"
            :model="appModelChange"
            scope-name="appModelForm"
            @after-save-data="afterSaveData"
            @before-save-data="beforeSaveData"
            >{{ $t('eip.common.save') }}</ht-submit-button
          >
          <ht-submit-button
            style="margin-left: 0"
            url="${portal}/portal/sysApp/v1/saveAndPublish"
            :model="appModelChange"
            scope-name="appModelForm"
            @click="saveAndPublish"
            @after-save-data="afterSaveData"
            @before-save-data="beforeSaveAndPublishData"
            :isSubmit="isSubmit"
            >保存并发布</ht-submit-button
          >       
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const iconDialog = () => import('@/components/dialog/IconDialog.vue')
const treeSelect = () => import('@riophae/vue-treeselect')
import portal from '@/api/portal'
import uc from '@/api/uc.js'

export default {
  components: {
    iconDialog,
    treeSelect
  },
  data() {
    return {
      labelPosition: 'left',
      dialogVisible: false,
      appModel: {
        name: '',
        alias: '',
        icon: '',
        iconType: 1,
        iconColor: '#409EFF',
        type: 1,
        content: ''
      },
      appModelChange: {},
      typeOptions: [
        {key: 1, value: '常规应用'},
        {key: 2, value: '表单列表'},
        {key: 3, value: '数据列表'},
        {key: 4, value: '图表'},
        {key: 5, value: '网页跳转'},
        {key: 6, value: '表单'},
        {key: 7, value: '流程模块'},
        {key: 8, value: '流程'},
        {key: 9, value: 'datav大屏'}
      ],
      image: '',
      formData: {},
      contentLabel: '',
      contentStr: '',
      menu: {},
      menus: [],
      isSubmit: false,
      colorList: [
        '#409EFF',
        '#07C160',
        '#4053FF',
        '#F6B85A',
        '#FF8A46',
        '#8550E1'
      ]
    }
  },
  watch: {
    image: {
      handler(val) {
        this.appModel.icon = val
      }
    }
  },

  methods: {
    handleClear() {
      this.appModel.icon = ''
      this.image = ''
    },
    showDialog(content, type) {
      this.appModel.type = type
      this.appModel.content = content
      this.contentStr = JSON.parse(content).name
      this.image = ''
      this.$set(this.appModel, 'iconColor', '#409EFF')
      this.$set(this.appModel, 'icon', 'icon-application1')
      this.contentLabel = this.typeOptions.filter(item => {
        return item.key === type
      })[0].value
      this.dialogVisible = true
    },
    selectIcon(icon) {
      this.image = ''
      this.$set(this.appModel, 'icon', icon)
    },
    changeColor(val) {
      this.$set(this.appModel, 'iconColor', val)
    },
    updateImage(param) {
      const formData = new FormData()
      formData.append('files', param.file)
      uc.fileUpload(formData)
        .then(response => {
          this.$store
            .dispatch('menu/downloadImg', response.fileId)
            .then(res => {
              if (res != '') {
                this.image = res
                param.onSuccess()
              }
            })
            .catch(() => {
              param.onError()
            })
        })
        .catch(() => {
          param.onError()
        })
    },
    save() {},
    saveAndPublish() {},
    handleColor(color) {
      this.appModel.iconColor = color
    },
    beforeSaveAndPublishData() {
      if (this.image) {
        this.appModel.icon = this.image
      }
      this.appModel.isPublish = 1
      this.appModel.menuId = this.menu.id
      this.appModelChange = _.cloneDeep(this.appModel)
      delete this.appModelChange.iconType
      this.isSubmit = true
    },
    beforeSaveData() {
      if (this.menu.id) {
        this.appModel.menuId = this.menu.id
      }

      this.appModelChange = _.cloneDeep(this.appModel)
      delete this.appModelChange.iconType
    },
    afterSaveData() {
      this.dialogClose()
    },
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
        isDefaultExpanded: false
      }
    },
    loadMenus() {
      portal.getCurrentMenuByAlias('app_menu').then(data => {
        if (data.state) {
          this.menus = data.value
          this.removeEmptyChildren(this.menus)
        }
      })
    },
    removeEmptyChildren(menus) {
      menus.forEach(m => {
        if (m.children) {
          if (m.children.length < 1) {
            delete m.children
          } else {
            this.removeEmptyChildren(m.children)
          }
        }
      })
    },
    dialogClose() {
      this.$set(this, 'menu', {})
      this.$set(this, 'appModel', {
        name: '',
        alias: '',
        icon: '',
        iconType: 1,
        iconColor: '#409EFF',
        type: 1,
        content: ''
      })
      this.dialogVisible = false
    }
  },
  created() {
    this.loadMenus()
  }
}
</script>

<style lang="scss" scoped>
.vue-treeselect__portal-target {
  z-index: 3000 !important;
}

.form-editor-dialog {
  .el-form-item--small.el-form-item {
    margin-bottom: 32px;
  }
  .width-input {
    width: 384px;
  }
  .footer-wrap {
    text-align: right;
    height: 55px !important;
    line-height: 55px;
  }
  .input-text {
    text-align: left;
    /deep/.el-input--small .el-input__inner {
      text-align: left;
    }
  }

  .button-style {
    margin: 0px 24px;
    border-color: #409eff;
    background-color: #fff;
    color: #409eff;
    &:hover {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }
  }

  .icon-wrap {
    .icon-select_wrap {
      margin: 0 16px;
      flex: 0 0 87px;
      height: 34px !important;
    }
  }
}

.icon-wrap {
  display: flex;
  align-items: center;
  margin-top: -5px;
  .icon-main {
    width: 40px;
    height: 40px;
    background: rgb(244, 244, 244);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    text-align: center;
  }
}

.upload-bt {
  width: 98px;
}

.layout_md {
  vertical-align: middle;
  /deep/.el-color-picker__trigger {
    border-color: #dcdfe6;
  }
}

.default-color--list {
  display: flex;
  margin-top: 10px;
  .color-item {
    margin-right: 8px;
    height: 24px;
    width: 24px;
    border-radius: 4px;
    cursor: pointer;
  }
}
.app-icon {
  color: white;
  font-size: 30px;
}
//::v-deep .tree-select-radio .vue-treeselect__control {
//  border-radius: 2px;
//}
</style>
