<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <!-- <el-position></el-position> -->
    <div class="member-list">
      <el-row>
        <el-col :span="10">
          <el-toolbar>
            <el-button @click="addClick" priv="Member.Information.Add"><i class="fa fa-plus"></i>新建</el-button>
            <!-- <el-button priv="Member.Information.Delete" :disabled="selectedRows.length === 0" @click="deleteClick"><i class="fa fa-remove"></i>删除</el-button>
            <el-dropdown @command="handleCommand">
              <el-button>
                <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item priv="Member.Information.Active" :disabled="selectedRows.length === 0 || selectedRows[0].status === 'Y'" command="disableOrEnableClickHandler:active">
                  <i class="fa fa-check-circle" aria-hidden="true"></i>启用
                </el-dropdown-item>
                <el-dropdown-item priv="Member.Information.Active" :disabled="selectedRows.length === 0 || selectedRows[0].status === 'N'" command="disableOrEnableClickHandler:diable">
                  <i class="fa fa-minus-square" aria-hidden="true"></i>禁用
                </el-dropdown-item>
                <el-dropdown-item priv="Member.Information.Send" :disabled="selectedRows.length === 0"  command="sendEmail">
                  <i class="fa fa-envelope" aria-hidden="true"></i>发邮件
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </el-toolbar>
        </el-col>
        <el-col :span="14"   class="dropdown-search-box-r search-bar-algin-toolbar">
          <el-input placeholder="请输入用户名/真实姓名/Email" v-model="searchKey" size="medium" @keyup.enter.native="searchMemberDlgClickHandlder">
            <el-select v-model="memberType" style="margin-right:5px;width:140px;" clearable slot="prepend" placeholder="请选择会员类型" @change="searchMemberDlgClickHandlder">
              <el-option v-for="item in optionsType" :key="item.ID" :label="item.name" :value="item.ID">
              </el-option>
            </el-select>
            <el-select v-model="memberStatus" style="margin-left:-5px;width:120px;" clearable slot="prepend" placeholder="请选择状态" @change="searchMemberDlgClickHandlder">
              <el-option v-for="item in optionsStatus" :key="item.memberStatus" :label="item.label" :value="item.memberStatus">
              </el-option>
            </el-select>
          </el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchMemberDlgClickHandlder" title="查询"></i></span>
        </el-col>
      </el-row>
        <el-list-view
          :data-read-url="getMemberListURL"
          ref="dataTable1"
          @selection-change="onSelectionChange"
          :page-size="10">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row><a class="list-card-title" href="javascript:void(0)" @click.stop="editClick(row)">{{row.userName}}</a></el-row>
              <el-row>
                <el-col :span="8"><span>会员ID: </span><em>{{row.ID || 0}}</em></el-col>
                 <el-col :span="8"><span>真实姓名: </span><em>{{row.realName || ''}}</em></el-col>
                 <el-col :span="8"><span>电子邮箱: </span><em>{{row.email || ''}}</em></el-col>
              </el-row>
              <el-row>
                <el-col :span="8"><span>密码提示问题: </span><em>{{row.pwdQuestion || ''}}</em></el-col>
                 <el-col :span="8"><span>密码提示答案: </span><em>{{row.pwdAnswer || ''}}</em></el-col>
              </el-row>
              <el-row>
                <el-col :span="6"><el-tag size="small" :type="row.status!=='Y'?'danger':''">{{row.status==='Y'?'启用':'禁用'}}</el-tag></el-col>
                <el-col :span="18" class="tar">
                  <el-button @click.stop="editClick(row)" type="text" title="编辑" priv="Member.Information.Edit">
                    <i class="fa fa-edit"></i>编辑
                  </el-button>
                  <el-button v-if="row.status=='N'" @click.stop="enable(row)" type="text" title="启用" priv="Member.Information.Active">
                    <i class="fa fa-power-off"></i>启用
                  </el-button>
                  <el-button v-if="row.status=='Y'" @click.stop="disable(row)" type="text" title="禁用" priv="Member.Information.Active">
                    <i class="fa fa-ban"></i>禁用
                  </el-button>
                  <el-button @click.stop="sendEmail(row)" type="text" title="发送邮件" priv="Member.Information.Send">
                    <i class="fa fa-envelope"></i>发送邮件
                  </el-button>
                  <el-button @click.stop="del(row)" type="text" title="删除" priv="Member.Information.Delete">
                    <i class="fa fa-times"></i>删除
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
// const memberDynamicRouters = [
//   {
//      page:require('./sendMessage.vue').default
//     pagePath: './sendMessage.vue'
//    }
//   {
//      page:require('./memberAddPage.vue').default
//     pagePath: './memberAddPage.vue'
//    }
//   {
//      page:require('./memberEditPage.vue').default
//     pagePath: './memberEditPage.vue'
//   }
// ]

export default {
  components: {},
  data() {
    return {
      // 邮件发送框是否可见控制开关
      showSendEmailPage: false,
      handlerLoading: false,
      optionsStatus: [
        {
          memberStatus: 'Y',
          label: '启用'
        },
        {
          memberStatus: 'N',
          label: '禁用'
        }
      ], // 查询会员状态
      memberType: '',
      memberStatus: '',
      optionsType: [], // 查询会员类型
      searchKey: '', // 查询词
      // 选择的行
      selectedRows: [],
      // 表单会员
      members: [],
      memberIds: []
    }
  },
  created() {
    this.getMemberTypes() // 会员类型
  },
  methods: {
    handleCommand(method) {
      if (method) {
        let arr = method.split(':')
        let fun = arr[0]
        let param = arr.length > 1 ? arr[1] : ''
        typeof this[fun] === 'function' && this[fun](param)
      } else {
        console.warn(`未找到改菜单对应的方法:${method}`)
      }
    },

    // 发送邮件
    async sendEmail(row) {
      if (row) {
        this.selectedRows = [row]
      }
      this.memberIds = []
      this.selectedRows.forEach(function(row) {
        this.memberIds.push(row.ID)
      }, this)
      if (!this.memberIds.length) {
        try {
          await this.$confirm('确认批量发送邮件？', '发送邮件', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (e) {
          return
        }
      }
      this.$router.push({path: `/member/sendMessage/${this.memberIds.join()}`, query: {searchName: encodeURIComponent(this.searchKey), memberType: this.memberType}})
    },

    // 处理禁用、启用设置
    async disableOrEnableClickHandler(optype) {
      let enble = ''
      if (optype === 'active') {
        enble = '启用'
      } else {
        enble = '禁用'
      }
      try {
        await this.$confirm('确定' + enble + '吗？', '确认' + enble, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      this.selectedRows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      if (!rowIds.length) {
        return
      }
      let strIds = rowIds.join(',')
      let data = await axios.put('/ui/member/status', {
        strIds,
        optype
      })
      if (data.data.status === 1) {
        this.$refs.dataTable1.getData()
      }
      util.showResponseMessage(data.data)
    },

    enable(row) {
      this.selectedRows = [row]
      this.disableOrEnableClickHandler('active')
    },

    disable(row) {
      this.selectedRows = [row]
      this.disableOrEnableClickHandler('disable')
    },

    // 选中行
    onSelectionChange(selection) {
      this.selectedRows = selection
    },

    // 添加事件
    addClick() {
      //  let aRouter = util.addRoute(memberDynamicRouters[1].page this)
      // this.$router.push({path: aRouter.path})
      this.$router.push({path: '/member/info/new'})
    },
    // 编辑事件
    async editClick(row) {
      if (!row || !row.ID) {
        return
      }
      this.selectedRows = [row]
      //  let aRouter = util.addRoute(memberDynamicRouters[2].page this)
      //  this.$router.push({path: aRouter.path query: { memberId: row.ID }})
      this.$router.push({path: `/member/info/${row.ID}`})
    },
    // 删除事件
    async deleteClick() {
      try {
        await this.$confirm('确定删除吗，删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      this.selectedRows.forEach(function(row) {
        rowIds.push(row.ID)
      })
      if (!rowIds.length) {
        return
      }
      let strIds = rowIds.join(',')
      let data = await axios.delete(`/ui/member/${strIds}`, {})
      if (data.data.status === 1) {
        this.$refs.dataTable1.getData()
      }
      util.showResponseMessage(data.data)
    },

    del(row) {
      this.selectedRows[0] = row
      this.deleteClick()
    },

    searchMemberDlgClickHandlder() {
      this.$refs.dataTable1.getData()
    },

    getMemberListURL() {
      return [
        '/ui/member',
        {
          params: {
            searchName: encodeURIComponent(this.searchKey),
            memberType: this.memberType,
            memberStatus: this.memberStatus
          }
        }
      ]
    },

    async getMemberTypes() {
      let dataList = await axios.get('/ui/member/type')
      this.optionsType = dataList.data.data
    }
  }
}
</script>
<style>
.member-list .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner, .role-page .el-breadcrumb .el-breadcrumb__item .el-breadcrumb__inner a {
    font-weight: 400;
}
.member-list .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.member-list .dropdown-search-box-r .el-select:first-child {
  border-right: 1px solid #e3e3e3
}
</style>
