<template>
  <div>
    <!-- <toolbar
      @onSearch="filterData"
    /> -->
    <white-board>
      <!-- <el-row class="header" :gutter="20">
        <el-col class="flex-end" :span="12">
          <el-button icon="el-icon-plus" type="primary" @click="handleAddItem">创建标签</el-button>
        </el-col>
      </el-row> -->
      <table-with-page
        :columns="columns"
        :items="items"
        :show-page="false"
      />
    </white-board>

    <el-dialog title="设置序号" :visible.sync="dialogVisible" width="15%">
      <el-input-number v-model="num" controls-position="right" :min="0" :max="10000" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeSort">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EMITKEY from '@/const/emitNameKey'
import { getTagTypeInArr, setStatus } from '@/utils'

import { getList, changeShowStatus, updateItem } from '@/model/indexModule'

export default {
  name: 'IndexModulePage',

  data() {
    return {
      items: [],
      columns: [
        {
          key: 'moduleTypeName',
          name: '首页模块类型',
          minWidth: '80'
        }, {
          key: 'sort',
          name: '排序（倒序）',
          width: '100'
        }, {
          key: 'showStatus',
          name: '展示状态',
          width: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['展示中', '未展示'], ['success', 'danger']), val)
        }, {
          key: 'action',
          name: '操作',
          width: '200',
          render: (h, { row }) => {
            const isShow = row.isShow
            const action = []
            action.push(h('el-button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => this.setSort(row)
              }
            }, '设置排序'))
            action.push(h('el-button', {
              props: {
                type: isShow ? 'info' : 'primary',
                size: 'small'
              },
              on: {
                click: () => this.changeShowStatus(row)
              }
            }, isShow ? '禁用展示' : '开启展示'))
            return h('div', action)
          }
        }
      ],
      dialogVisible: false,
      item: {},
      num: null
    }
  },

  created() {
    this.loadData()
    this.bus.$on(EMITKEY.INDEXMODULERELOAD, this.loadData)
  },

  beforedestroy() {
    this.bus.$off(EMITKEY.INDEXMODULERELOAD, this.loadData)
  },

  methods: {
    async loadData() {
      const { success, data, msg } = await getList()
      if (success) {
        this.items.splice(0, this.items.length)
        this.items.push(...data)
      } else {
        this.$message.error(msg)
      }
    },

    async changeShowStatus(row) {
      const { success, msg } = await changeShowStatus({
        id: row.id
      })
      if (success) {
        this.$message.success('切换成功~')
        this.bus.$emit(EMITKEY.INDEXMODULERELOAD)
      } else {
        this.$message.error(msg)
      }
    },

    setSort(row) {
      this.info = row
      this.num = row.sort
      this.dialogVisible = true
    },

    async changeSort() {
      const { success, msg } = await updateItem({
        id: this.info.id,
        data: {
          ...this.info,
          sort: this.num
        }
      })
      if (success) {
        this.id = null
        this.num = null
        this.dialogVisible = false
        this.$message.success('设置成功~')
        this.bus.$emit(EMITKEY.INDEXMODULERELOAD)
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
