<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) {
         console.log('tag', 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>
