<template>
  <el-container class="fullheight">
    <el-tabs
      tab-position="top"
      type="card"
      class="fullheight portal-news"
      style="width:100%;"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="新闻公告"
        class="fullheight set-table"
        name="news"
        style="width:100%;"
      >
        <PortalNewsNoticeContent ref="news" type="news" key="news" />
      </el-tab-pane>
      <el-tab-pane
        label="轮播图"
        class="fullheight set-table"
        name="images"
        style="width:100%;"
      >
        <PortalNewsNoticeContent ref="images" type="images" key="images" />
      </el-tab-pane>
      <el-tab-pane
        label="标签维护"
        class="fullheight set-table"
        name="tag"
        style="width:100%;"
      >
        <el-container class="fullheight">
          <ht-table
            @load="loadData"
            :data="data"
            :pageResult="pageResult"
            :selection="true"
            quick-search-props="id"
            :show-export="false"
            :show-custom-column="false"
            ref="htTable"
            @selection-change="handleSelectionChanges"
          >
            <template v-slot:toolbar>
              <el-button-group>
                <el-button
                  size="small"
                  type="primary"
                  @click="showDialog()"
                  icon="el-icon-plus"
                  >添加</el-button
                >
                <ht-delete-button
                  url="${portal}/portal/portalNewsTag/v1/"
                  :disabled="isDisabled"
                  :htTable="$refs.htTable"
                  >删除</ht-delete-button
                >
              </el-button-group>
            </template>
            <template>
              <ht-table-column
                type="index"
                width="50"
                align="center"
                label="序号"
              />
              <ht-table-column
                prop="name"
                label="名称"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <el-link
                    type="primary"
                    @click="showDialog(row.id)"
                    title="查看详情"
                    >{{ row.name }}</el-link
                  >
                </template>
              </ht-table-column>
              <ht-table-column
                prop="alias"
                label="标签别名"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
              </ht-table-column>
              <ht-table-column
                prop="style"
                label="标签风格"
                :sortable="true"
                :show-overflow-tooltip="true"
              >
                <template v-slot="{row}">
                  <el-tag
                    v-if="tagsMap[row.style]"
                    :key="tagsMap[row.style].alias"
                    :type="tagsMap[row.style].type"
                    :effect="tagsMap[row.style].effect"
                  >
                    {{ tagsMap[row.style]['lable'] }}
                  </el-tag>
                </template>
              </ht-table-column>
            </template>
          </ht-table>
        </el-container>
      </el-tab-pane>
      <el-tab-pane
        label="会议室管理"
        class="fullheight"
        name="meeting"
        style="width:100%;"
      >
        <PortalMeetingRoomManager ref="meeting" />
      </el-tab-pane>
    </el-tabs>
    <ht-sidebar-dialog
      width="30%"
      title="新闻公告标签"
      class="sp-manager__dialog tag_dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
    >
      <el-form v-form data-vv-scope="portalNewsTagForm">
        <ht-form-item label="标签名称">
          <ht-input
            v-model="portalNewsTag.name"
            validate="required"
            :maxlength="30"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="标签别名">
          <ht-input
            v-model="portalNewsTag.alias"
            v-pinyin="portalNewsTag.name"
            autocomplete="off"
            :disabled="portalNewsTag.id ? true : false"
            :validate="{
              regex: {
                exp: '^[a-zA-Z0-9_-]{2,20}$',
                message: '标签别名输入有误，请重新输入'
              }
            }"
            :maxlength="30"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="标签风格">
          <div class="tag-group">
            <template v-for="row in tagsLibrary">
              <el-tag
                @click="tagClick"
                v-for="item in row.tags"
                :alias="item.alias"
                :key="item.lable"
                :type="item.type"
                :class="selectTag == item.alias ? 'selectTag' : ''"
                :effect="item.effect"
              >
                {{ item.lable }}
              </el-tag>
            </template>
          </div>
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="beforeCloseDialog">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${portal}/portal/portalNewsTag/v1/save"
          :isSubmit="isSubmit"
          :model="portalNewsTag"
          :request-method="saveMethod"
          scope-name="portalNewsTagForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </ht-sidebar-dialog>
  </el-container>
</template>
<script>
const PortalNewsNoticeContent = () =>
  import('@/components/news/PortalNewsNoticeContent.vue')
const PortalMeetingRoomManager = () => import('./PortalMeetingRoomManager.vue')
export default {
  components: {PortalNewsNoticeContent, PortalMeetingRoomManager},
  data() {
    return {
      selectedList: [],
      isDisabled: true,
      activeName: 'news',
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      portalNewsTag: {},
      saveMethod: 'POST',
      tagsLibrary: [
        {
          index: 0,
          tags: [
            {
              alias: 'plain_success',
              type: 'success',
              lable: '标签一',
              effect: 'plain'
            },
            {
              alias: 'plain_info',
              type: 'info',
              lable: '标签二',
              effect: 'plain'
            },
            {
              alias: 'plain_warning',
              type: 'warning',
              lable: '标签三',
              effect: 'plain'
            },
            {
              alias: 'plain_danger',
              type: 'danger',
              lable: '标签四',
              effect: 'plain'
            }
          ]
        },
        {
          index: 1,
          tags: [
            {
              alias: 'light_success',
              type: 'success',
              lable: '标签五',
              effect: 'light'
            },
            {
              alias: 'light_info',
              type: 'info',
              lable: '标签六',
              effect: 'light'
            },
            {
              alias: 'light_warning',
              type: 'warning',
              lable: '标签七',
              effect: 'light'
            },
            {
              alias: 'light_danger',
              type: 'danger',
              lable: '标签八',
              effect: 'light'
            }
          ]
        },
        {
          index: 2,
          tags: [
            {
              alias: 'dark_success',
              type: 'success',
              lable: '标签九',
              effect: 'dark'
            },
            {alias: 'dark_info', type: 'info', lable: '标签十', effect: 'dark'},
            {
              alias: 'dark_warning',
              type: 'warning',
              lable: '标签十一',
              effect: 'dark'
            },
            {
              alias: 'dark_danger',
              type: 'danger',
              lable: '标签十二',
              effect: 'dark'
            }
          ]
        }
      ],
      tagsMap: {},
      selectTag: '',
      isSubmit: false
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  created() {
    this.initTagsMap()
  },
  methods: {
    handleSelectionChanges(selection) {
      this.selectedList = selection
    },
    initTagsMap() {
      let _this = this
      this.tagsLibrary.forEach(row => {
        row.tags.forEach(tag => {
          _this.tagsMap[tag.alias] = tag
        })
      })
    },
    handleClick(tab, event) {},
    tagClick(event) {
      this.selectTag = $(event.currentTarget).attr('alias')
      this.portalNewsTag.style = this.selectTag
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${portal}/portal/portalNewsTag/v1/' + id).then(
          resp => {
            this.portalNewsTag = resp.data
            this.dialogVisible = true
            if (resp.data && resp.data.style) {
              this.selectTag = resp.data.style
            }
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
        this.portalNewsTag = {name: '', alias: ''}
        this.selectTag = ''
      }
    },
    beforeSaveData() {
      this.isSubmit = true
      if (!this.portalNewsTag.style) {
        this.isSubmit = false
        this.$message({type: 'warning', message: '请选择标签样式。'})
        return
      }
    },
    beforeCloseDialog() {
      this.portalNewsTag = {}
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$http
        .post('${portal}/portal/portalNewsTag/v1/query', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.portal-news >>> .el-tabs__content {
  height: 100%;
  overflow: auto;
}
.portal-news {
  .set-table {
    /deep/ .el-table {
      height: calc(100% - 140px) !important;
      max-height: calc(100% - 140px) !important;
      .el-table__body-wrapper{
        max-height: calc(100% - 140px) !important;
      }
    }
  }
}

.fullheight .el-tabs--card {
  padding: 0;
}

.el-tabs {
  // padding: 0px 24px;
  /deep/ .el-tabs__item {
    height: 56px;
    line-height: 56px;
  }
}
.el-tag {
  margin-left: 15px;
  width: 68px;
  height: 28px;
  cursor: pointer;
}
.selectTag {
  border: 2px dashed green;
}
.tag_dialog >>> .el-dialog__body {
  height: calc(100% - 190px);
}
</style>
