<template>
  <div class="CustomPage">
    <template>
      <div class="head-title">
        管理员列表
        <el-button @click="showDialog" style="float:right;margin-top: -5px;" size="small" type="primary">
          添加管理员
        </el-button>
      </div>
      <div class="content">
        <div class="searchInput" style="display:inline-block;width:200px;">
          <el-select v-model="msg.Source" placeholder="请选择" size="small" @change="(msg.pageIndex = 1), getList()">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="searchInput">
          <el-input style="display:inline-block;width:260px;height:30px" placeholder="请输入ID/昵称/手机号/备注/联系方式"
            v-model="msg.Name" size="small" clearable @keyup.enter.native="msg.pageIndex = 1, getList()"
            @clear="msg.pageIndex = 1, getList()">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="msg.pageIndex = 1, getList()"></i>
          </el-input>
        </div>
        <br>
        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
          <el-table-column prop="AdminId" label="ID" width="100">
          </el-table-column>
          <el-table-column prop="Photo" label="头像">
            <template slot-scope="scope">
              <div class="app-image" :style="{
                backgroundImage: 'url(' + scope.row.Photo + ')',
                backgroundSize: 'cover',
              }"></div>
              <div flex="dir:left cross:center">
                {{ scope.row.Name }}
              </div>
              <img v-if="scope.row.Source == 1" style="width: 24px; height: 24px" src="../../assets/img/userman/wx.png"
                alt="" class="platform-img" />
              <img v-if="scope.row.Source == 2" style="width: 30px; height: 30px"
                src="../../assets/img/userman/alipay.png" alt="" class="platform-img" />
            </template>
          </el-table-column>
          <el-table-column prop="Moblie" label="手机号">
          </el-table-column>
          <el-table-column prop="CreateDate" label="加入时间">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="移除管理员" placement="top">
                <img @click="removeAdmin(scope.row)" style="width:32px;height:32px;margin:0 10px"
                  src="../../assets/img/userman/renew.png" alt="">
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right" background @current-change="handleCurrentChange"
          :page-size="msg.pageSize" layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </template>
    <el-dialog title="设置管理员" :visible.sync="isShowModule" width="600px">
      <el-form :model="addMsg" :rules="addMsgRules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="昵称搜索" prop="UserId">
          <el-select v-model="addMsg.UserId" placeholder="请选择" filterable :filter-method="ChangeListName">
            <el-option v-for="item in adminOptions" :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowModule = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      //弹窗
      isShowModule: false,
      dataList: [],
      msg: {
        Source: "",
        Name: "",
        pageIndex: 1,
        pageSize: 10,
      },
      addMsg: {
        AdminId: 0,
        UserId: "",
      },
      total: 0,
      options: [{
        value: 0,
        label: "不限",
      },
      {
        value: 1,
        label: "微信小程序",
      },
      {
        value: 2,
        label: "支付宝小程序",
      },
      ],
      adminOptions: [],
      addMsgRules: {
        UserId: [{
          required: true,
          message: "请选择小程序用户",
          trigger: "blur"
        }],
      },
      usermsg: {
        pageIndex: 1,
        pageSize: 20,
        Name: '',
        Source: 0,
        MemberGrade: 0,
        Id: 0,
        Moblie: ''
      },
    };
  },
  methods: {
    showDialog() {
      this.isShowModule = true;
      this.addMsg.UserId = "";
    },
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.apipost(
            '/api/user/SetMiniprogramAdmin',
            that.addMsg,
            (res) => {
              if (res.data.resultCode === 1) {
                that.getList();
                that.Success(res.data.message);
                that.isShowModule = false;
              } else {
                that.Error(res.data.message);
              }
            });
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    getList() {
      this.apipost(
        "/api/user/GetMiniprogramAdminPage",
        this.msg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        }
      );
    },
    //删除
    removeAdmin(item) {
      let that = this;
      that.Confirm("是否删除?", function () {
        that.apipost(
          "/api/user/DeleteMiniprogramAdmin", {
          AdminId: item.AdminId,
        },
          (res) => {
            if (res.data.resultCode == 1) {
              that.getList();
            } else {
              that.Info(res.data.message);
            }
          }
        );
      });
    },
    ChangeListName(val) {
      this.usermsg.Name = val;
      this.getUserList();
    },
    //获取用户列表
    getUserList() {
      this.apipost(
        "/api/user/GetMemberUserDropDownList", this.usermsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.adminOptions = res.data.data.pageData;
          } else {
            this.Info(res.data.message);
          }
        }
      );
    }
  },
  mounted() {
    this.getUserList();
    this.getList();
  },
};

</script>
<style>
.CustomPage .app-image {
  background-position: center center;
  width: 50px;
  height: 50px;
  border-radius: 0%;
  float: left;
  margin-right: 8px;
}

.CustomPage .templat-list {
  border: 1px solid #ebeef5;
}

.CustomPage .templat-item {
  line-height: 40px;
  height: 40px;
  display: flex;
  font-size: 13px;
}

.templat-item:nth-child(odd) {
  background-color: #f7f7f7;
}

.templat-item:nth-child(even) {
  background-color: #fff;
}

.CustomPage .templat-item div {
  width: 50%;
  padding-left: 20px;
}

.CustomPage .Custom_item {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin-bottom: 10px;
}

.CustomPage .Custom_item>div {
  padding: 20px;
}

.CustomPage .content {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.CustomPage .conten_indder {
  padding: 20px;
  background-color: #fff;
  padding-right: 50%;
  min-width: 1100px;
}
</style>
