<template>
  <div class="layout-no-cols right-list-toolbar" v-show="!showDetailPage">
    <el-row>
      <el-col :span="10">
        <el-toolbar>
          <el-button @click="addClickHandler" priv="Member.ScoreOperation.Add">
            <i class="fa fa-plus"></i>新建
          </el-button>
          <!-- <el-button @click="delClickHandler(selectedRows)" :disabled="selectedRows.length===0">
            <i class="fa fa-remove"></i>删除
          </el-button> -->
        </el-toolbar>
      </el-col>
      <el-col :span="14" align="right">
        <el-select clearable v-model="search.type" placeholder="积分类型" @change="searchClickHandlder">
          <el-option v-for="item in scoreSelect" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="">

      <el-table ref="table" :data="scoreOpts" :data-read-url="getData" :page-size="20" tooltip-effect="dark" style="width:100%"
        @selection-change="onSelectionChange">
        <el-table-column type="index" width="60" align="center"></el-table-column>
        <el-table-column label="类型名称">
          <template slot-scope="scope">
            <a href="javascript:void(0);" @click.stop="gotoDetailPage(scope.row)">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="scoreTypeName" label="积分类型"></el-table-column>
        <el-table-column prop="scoreValue" label="积分值"></el-table-column>
        <el-table-column label="操作" width="136" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="gotoDetailPage(scope.row)" type="text" title="编辑" priv="Member.ScoreOperation.Edit">
              <i class="fa fa-edit f16"></i>
            </el-button>
            <el-button @click.stop="delClickHandler([scope.row])" type="text" title="删除" priv="Member.ScoreOperation.Delete">
              <i class="fa fa-times f16"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      confirmLoading: false,
      configLoading: false,
      scoreSelect: [], // 积分类型下拉框
      ID: 0, //  选择积分项的ID
      search: {
        // 查询条件
        type: ''
      },
      selectedRows: [], // 选中的积分配置
      scoreOpts: [], // 所有积分项数据
      isShowModal: false,
      showDetailPage: false // 是否显示详细页
    }
  },
  created() {
    this.loadScoreSelect()
  },
  methods: {
    // 点击名称进入详情页
    gotoDetailPage(selection) {
      this.onSelectionChange([selection])
      this.ID = selection.ID
      this.$router.push({path: `/member/scoreOperateForm/${this.ID}`})
    },
    // 打开新建积分配置输入框
    addClickHandler() {
      this.$router.push({path: `/member/scoreOperateForm/new`})
    },
    // 修改积分配置回调
    updateOperate() {
      this.searchClickHandlder()
    },
    // 选中积分配置事件
    onSelectionChange(selection) {
      this.selectedRows = selection
      if (selection.length === 1) {
        this.ID = selection[0].ID
      } else {
        this.ID = 0
      }
    },
    // 删除多项积分配置
    async delClickHandler(selectedRows) {
      let rowIds = []
      if (!selectedRows.length) {
        this.$alert('请至少选择一条数据', '警告', {
          type: 'warning'
        })
        return
      }
      selectedRows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      try {
        let res = await axios.delete(`/ui/scoreoperate/${rowIds.join()}`)
        util.showMessage(res)
        if (res.data.status === 1) {
          selectedRows = []
          this.searchClickHandlder()
        }
      } catch (e) {

      }
    },
    // 查询积分配置项
    searchClickHandlder() {
      this.$refs.table.getData()
    },
    // 加载积分配置项
    getData() {
      return ['/ui/scoreoperate', {
        params: { scoreType: this.search.type }
      }]
    },
    // 加载积分配置项类型下拉列表
    async loadScoreSelect() {
      let res = await axios.get('/ui/scoreoperate/scoreselect')
      this.scoreSelect = res.data.data
    }
  }
}
</script>

<style scoped>
</style>
