<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <el-row>
      <el-col :span="14">
        <el-toolbar>
          <el-button @click="addClick" priv="Member.Level.Add">
            <i class="fa fa-plus"></i>新建
          </el-button>
          <!-- <el-button :disabled="selectedRows.length === 0" @click="deleteClick(selectedRows)" type="danger">
            <i class="fa fa-remove"></i>删除
          </el-button> -->
       </el-toolbar>
      </el-col>
      <el-col :span="10"  class="dropdown-search-box-r search-bar-algin-toolbar">
        <el-input v-model="currentLevelName" placeholder="请输入名称" size="medium" @keyup.enter.native="search">
          <el-select placeholder="会员等级类型" clearable slot="prepend" v-model="currentLevelType" @change="search">
            <el-option v-for="item in levelTypeNames" :key="item.value" :label="item.text" :value="item.value">
            </el-option>
          </el-select>
        </el-input>
        <span class="search-icon"><i class="fa fa-search" @click="search" title="查询"></i></span>
      </el-col>
    </el-row>
    <el-list-view ref="levelList" :data-read-url="getLevelLists" :pageSize="10" @after-sort="afterListSort" @selection-change="onSelectionChange">
      <template slot-scope="row">
        <div class="panel-card" :id="'level'+row.ID">
          <el-row>
            <img :src="row.iconPath" @error="setErrorImg" style="max-width: 25px;padding-right:5px"/>
            <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row)">{{row.name}}</a>
            <span class="gray">{{row.levelTypeName}}</span>
          </el-row>
          <el-row>
            <el-col :span="6"><span>晋级规则：</span>
              <em v-for="item in scoreTypes" :key="item.socreType">{{item.value===row.scoreType?item.text:''}}</em>
            </el-col>
            <el-col :span="6"><span>积分范围：</span> <em>{{row.minScore}}&nbsp;~&nbsp;{{row.maxScore}} 分</em> </el-col>
            <el-col :span="12"><span>备注：</span> <em>{{row.memo || '无'}}</em> </el-col>
          </el-row>
          <el-row class="list-card-buttons">
            <el-col :span="24" class="tar">
              <el-button @click.stop="gotoDetailPage(row)" type="text" title="编辑" priv="Member.Level.Edit">
                <i class="fa fa-edit"></i>编辑
              </el-button>
              <el-button @click.stop="deleteClick([row])" type="text" title="删除" priv="Member.Level.Delete">
                <i class="fa fa-remove"></i>删除
              </el-button>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      // 等级
      levels: [],
      // 等级类型
      levelTypeNames: [],
      // 搜索框当前选中等级类型
      currentLevelType: '',
      currentLevelName: '',
      // 积分类型
      scoreTypes: [],
      // 选择的行
      selectedRows: []
      // 是否显示详细页
    }
  },
  methods: {
    async afterListSort(data) {
      if (data.oldIndex === data.newIndex) {
        return
      }
      let ID = data.oldData[data.oldIndex].ID
      let targetOrderFlag = data.oldData[data.newIndex].weight
      let res = await axios.put(`/ui/memberlevel/${ID}/sort`, {targetOrderFlag})
      util.showResponseMessage(res.data)
    },
    setErrorImg(e) {
      e.target.src = './assets/images/icon401a10.png'
    },
    // 点击名称进入详情页
    gotoDetailPage(row) {
      if (!row || !row.ID) {
        return
      }
      this.$router.push({path: `/member/level/${row.ID}`})
    },
    // 添加
    addClick() {
      this.$router.push({path: '/member/level/new'})
    },
    // 删除
    async deleteClick(selectedRows) {
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      selectedRows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      if (!rowIds.length) {
        return
      }
      let strIds = rowIds.join(',')
      let dataLevel = await axios.delete(`/ui/memberlevel/${strIds}`, {})
      if (dataLevel.data.status === 1) {
        this.search()
      }
      util.showResponseMessage(dataLevel.data)
    },
    // 搜索
    async search() {
      await this.$refs.levelList.getData()
    },
    getLevelLists() {
      return [
        `/ui/memberlevel`,
        {
          params: {
            levelType: this.currentLevelType,
            name: this.currentLevelName.trim()
          }
        }
      ]
    },
    // 选中行
    onSelectionChange(selection) {
      this.selectedRows = selection
    },
    async getLevelTypes() {
      let data = await axios.get('/ui/memberlevel/leveltypes', {})
      this.levelTypeNames = data.data.data
    },
    async getScoreTypes() {
      let data = await axios.get('/ui/memberlevel/scoretypes', {})
      this.scoreTypes = data.data.data
    }
  },
  created() {
    this.getLevelTypes()
    this.getScoreTypes()
  }
}
</script>
