<template>
  <div class="system-wxAuth main-wrap">
    <el-form class="search-bar">
      <div class="grid-content">
        <el-input v-model.trim="filters.name" placeholder="微信端功能" clearable></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>
    </el-form>
    <div class="tabel-wrap">
      <el-table border v-loading="loading" :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="微信功能" min-width="80">
        </el-table-column>
        <el-table-column prop="code" label="功能编号" min-width="50">
        </el-table-column>
        <el-table-column prop="createDate" :formatter="(c,r,val) => $formatDate(new Date(val),'yyyy-MM-dd')" label="创建时间" min-width="50">
        </el-table-column>
        <el-table-column prop="purpose" label="用途" min-width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="50" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.type == 2" type="primary" size="mini" class="operationBtnWidth" @click="showUserAuth(scope)">授权</el-button>
            <span v-else>所有用户开放</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :current-page="pagination.pageNum" :page-size="pagination.pageSize" :total="pagination.total" @current-change="changePage">
      </el-pagination>
    </div>
    <drag-dialog class="wxAuthDialog" title="修改" :visible.sync="dialogEditVisible" :before-close="resetEditDialog" width="70%">
      <el-transfer :key="transferId" v-loading="loading" v-model="selected.userId" filterable :filter-method="filterMethod" filter-placeholder="请输入姓名/科室/电话" :props="{ key: 'userId', label: 'name'}" :titles="['未被选中列', '已被选中列']" :data="allAuthList">
        <div slot-scope="{ option }">
          <span class="auth-name">{{ option.name }}</span>
          <span class="auth-department">{{ option.department }}</span>
          <span class="auth-cellphone">{{ option.cellphone }}</span>
        </div>
      </el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditDialog">取 消</el-button>
        <el-button type="primary" @click="updateAuth">确 定</el-button>
      </div>
    </drag-dialog>
  </div>
</template>

<script>
import listMixin from '@/mixin/listPage.js';
import store from './store.js';
import { mapActions, mapGetters } from 'vuex';
import { fetchAuthUserList, updateAuthList } from '@/api/system/wxAuth.js';

export default {
  beforeRouteEnter(to, from, next) {
    store.install();
    next();
  },
  mixins: [listMixin],
  data() {
    return {
      filters: {
        name: '',
      },
      transferId: '',
    };
  },
  computed: {
    ...mapGetters(['loading', 'authUserList']),
    ...mapGetters('system/wxAuth', ['list', 'pagination']),
    allAuthList() {
      return this.authUserList.map(item => ({
        ...item,
        query: item.name + item.department + item.cellphone,
      }));
    },
  },
  created() {
    this.fetchAllAuthUserList();
  },
  methods: {
    ...mapActions(['fetchAllAuthUserList']),
    ...mapActions('system/wxAuth', ['fetchList']),
    initSelected() {
      this.selected = {
        id: '',
        userId: [],
      };
    },
    showUserAuth(data) {
      this.transferId = data.row.id;
      fetchAuthUserList({
        id: data.row.id,
      })
        .then(res => {
          let list = res.data.map(item => item.userId);
          this.selected = {
            id: data.row.id,
            userId: list,
          };
          this.dialogEditVisible = true;
        })
        .catch(err => {
          this.$message.error(err.msg || '查询失败！');
        });
    },
    filterMethod(query, list) {
      return list.query.indexOf(query) > -1;
    },
    updateAuth() {
      const entity = {
        menuId: this.selected.id,
        userId: this.selected.userId.join(','),
      };
      updateAuthList(entity)
        .then(res => {
          this.$message.success(res.msg);
          this.resetEditDialog();
        })
        .catch(err => {
          this.$message.error(err.msg || '提交失败！');
        });
    },
  },
};
</script>

<style lang="scss">
.wxAuthDialog {
  text-align: center;
  .el-transfer-panel {
    text-align: left;
    width: 43%;
  }
  .auth-name,
  .auth-department,
  .auth-cellphone {
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
