<template>
  <div class="ribbon-page">
    <Card>
      <div class="add-ribbon">
        <div class="tips" style="color:#FF0000">最多10个，如果达到10个，必须先删除其它的再增加</div>
        <Button type="info" @click="handleAdd">+ 新增功能区</Button>
      </div>
      <tables
        ref="tables"
        editable
        v-model="tableData"
        :columns="columns"
        :loading="loading"
      />
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
export default {
  name: 'ribbon-management',
  components: { Tables },
  data () {
    return {
      tableData: [],
      columns: [
        {
          title: '编号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        { title: '名称', key: 'functionName', minWidth: 200, align: 'center' },
        { title: '图标',
          key: 'functionImage',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            return h('div',
              {
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  height: '70px'
                }
              },
              [
                h('img', {
                  attrs: {
                    src: params.row.functionImage
                  },
                  style: {
                    width: '70px',
                    height: '50px'
                  }
                })
              ])
          }
        },
        { title: '详情链接', key: 'url', minWidth: 200, align: 'center' },
        { title: '顺序', key: 'displayOrder', minWidth: 200, align: 'center' },
        {
          title: '操作',
          // fixed: 'right',
          key: 'number',
          minWidth: 200,
          align: 'center',
          render: (h, params) => {
            let editBtn = h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: this.handleEdit(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '编 辑'
            )
            let deleteBtn = h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: this.handleDelete(params.row)
                },
                style: {
                  marginRight: '5px'
                }
              },
              '删 除'
            )
            return h('div', [editBtn, deleteBtn])
          }
        }
      ],
      loading: false
    }
  },
  methods: {
    requestData () {
      this.loading = true
      this.api({
        apiName: 'getRibbonList',
        complete: () => {
          this.loading = false
        },
        success: (res) => {
          this.tableData = res.data
        }
      })
    },
    handleAdd () {
      if (this.tableData.length == 10) {
        this.$Notice.warning({ title: '数据上限到达10条，请先删除其它数据再添加！' })
        return
      }
      this.$router.push({ name: 'add_ribbon' })
    },
    handleEdit (row) {
      return () => {
        let query = { operationFunctionId: row.operationFunctionId }
        this.$router.push({ name: 'update_ribbon', query })
      }
    },
    handleDelete (row) {
      return () => {
        let { operationFunctionId } = row
        this.$Modal.confirm({
          title: '删除',
          content: `您确认要删除名称为${row.functionName}的功能区吗？`,
          onOk: () => {
            this.api({
              apiName: 'deleteRibbon',
              postdata: operationFunctionId,
              success: () => {
                this.requestData()
                this.$Notice.success({ title: `操作成功！` })
              }
            })
          }
        })
      }
    }
  },
  created () {
    this.requestData()
  }
}
</script>

<style scoped lang="less">
.add-ribbon {
  // width: 100%;
  // text-align: right;
  display: flex;
  /*justify-content: space-between;*/
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
  .tips {
    margin-right: 20px;
  }
}
</style>
