<style>
  .scmAccountManagement .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%
  }

  .scmAccountManagement .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .scmAccountManagement .avatar-uploader-icon {
    font-size: 28px;
    color: white;
    width: 100px;
    height: 100px;
    line-height: 80px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  /* 上传样式 */
  .scmAccountManagement .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%
  }

  .scmAccountManagement .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .scmAccountManagement .avatar-uploader-icon {
    font-size: 28px;
    color: white;
    width: 100px;
    height: 100px;
    line-height: 80px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .scmAccountManagement .avatar {
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    left: 0;
    top: 0
  }

</style>

<template>
  <div class="flexOne scmAccountManagement">
    <div class="query-box">
      <ul>
        <li>
          <span><em>姓名</em>
            <el-input class='w210' v-model="msg.Name" :placeholder="$t('pub.pleaseImport')"
              @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span><em>账号</em>
            <el-input class='w210' v-model="msg.Account" :placeholder="$t('pub.pleaseImport')"
              @keyup.enter.native="getList"></el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_status')}}</em>
            <el-select class='w210' v-model="msg.Status" :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
              <el-option label="正常" :value='0'></el-option>
              <el-option label="禁用" :value='1'></el-option>
              <el-option label="删除" :value='2'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()" />
          <input type="button" @click="outerVisible = true,dialogTitle='新增账号信息',clearData()" class="normalBtn"
            :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th style="width:80px">编号</th>
        <th style="width:100px">姓名</th>
        <th style="width:100px">账号</th>
        <th style="width:100px">状态</th>
        <th style="width:100px">操作人</th>
        <th style="width:100px">操作时间</th>
        <th style="width:100px">操作</th>
      </tr>
      <tr v-for="(item,index) in DataList" v-loading='loading' :key="index">
        <td>{{item.Id}}</td>
        <td>{{item.Name}}</td>
        <td>{{item.Account}}</td>
        <td>{{item.StatusStr}}</td>
        <td>{{item.UpdateByName}} </td>
        <td> {{item.UpdateTimeStr}}</td>
        <td>
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
            <el-button @click="outerVisible = true,dialogTitle='修改账号信息',GetAccount(item.Id)" type="primary"
              icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="重置密码" placement="top-start">
            <el-button  type="primary" icon="iconfont icon-zhongzhi1" circle @click="resetPwd(item.Id)"></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
    </el-pagination>

    <el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center>
      <el-form :model="addMsg" ref="addMsg" label-width="120px">
        <el-form-item class='w400' label="姓名">
          <el-input type="text" v-model="addMsg.Name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item class='w400' label="账号">
          <el-input type="text" v-model="addMsg.Account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item class='w400' label="供应商">
          <el-select class='w210' v-model="addMsg.SupplierId" :placeholder="$t('pub.unlimitedSel')">
            <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class='w400' label="状态">
          <el-select class='w210' v-model="addMsg.Status" :placeholder="$t('pub.unlimitedSel')">
            <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
            <el-option label="正常" :value='0'></el-option>
            <el-option label="禁用" :value='1'></el-option>
            <el-option label="删除" :value='2'></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible =false,clearData()">取消</button> &nbsp;
        <button class="normalBtn"   @click="saveSCMAccount()">保存</button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        DataList: '',
        total: 0,
        currentPage: 1,
        outerVisible: false,
        dialogTitle: '',
        msg: {
          //请求数据
          pageIndex: 1,
          pageSize: 15,
          Status: -1,
          Name: '',
          Account: ''
        },
        addMsg: {
          Id: 0, //编号
          Name: "", //姓名
          Account: "", //账号
          Pwd: "123456", //密码
          SupplierId: 0, //供应商编号
          HeadImg: "", //头像
        },
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      //保存信息
      saveSCMAccount() {
         this.apipost('scm_post_SetSCMAccountService', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.outerVisible=false;
            this.$message.success(res.data.message);
            this.getList();
            this.clearData();
          }
          else
          {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      //清空数据
      clearData() {
        this.addMsg.Id = 0;
        this.addMsg.Name = "";
        this.addMsg.Account = "";
        this.addMsg.Pwd = "123456";
        this.addMsg.SupplierId = 0;
        this.addMsg.HeadImg = "";
      },
      getList() { //获取数据
        this.loading = true
        this.apipost('scm_get_GetSCMAccountPageListService', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {}
        }, err => {})
      },
      //获取账号信息
      GetAccount(id) {
        this.apipost('scm_get_GetSCMAccountService', {
          Id: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
          }
        }, err => {})
      },
        //重置密码
      resetPwd(id) {
        var that = this;
        this.Confirm("是否要重置密码?", function () {
          var msg = {
            Id: id
          };
          that.apipost(
            "scm_post_ResetPwdService",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success('重置成功！');
                that.getList();
              } else {
                that.Error(res.data.data);
              }
            },
            null
          );
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      }
    }
  }

</script>
