<template>
    <div class="changeAccount">
      <el-button type="text" @click="changeOpen=true">账户切换</el-button>
      <!-- 关联账户管理 -->
      <el-dialog title="关联账户"
                 class="relationAccount"
                 :visible.sync="changeOpen"
                 width="800px"
                 :close-on-click-modal="false"
                 append-to-body>
        <el-button type="primary" style="margin-bottom: 10px" @click="addOpen = true">添加关联账号</el-button>
        <el-table v-loading="loading" :data="accountList">
          <el-table-column label="账户名称" align="center" prop="account" />
          <el-table-column label="操作列" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="changeAccout(scope.row)">切换</el-button>
              <el-button type="text" @click="deleteRelation(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 添加关联账户 -->
      <el-dialog title="添加关联账户"
                 class="relationAccount"
                 :visible.sync="addOpen"
                 width="800px"
                 :close-on-click-modal="false"
                 append-to-body>

        <el-form :model="accountForm" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="账号">
                <el-input v-model="accountForm.account" placeholder="请输入账号"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码">
                <el-input v-model="accountForm.password" placeholder="请输入密码" show-password/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { listRelation, addRelation, delRelation } from "@/api/userRelation/userRelation.js";
  import Cookies from "js-cookie";
  export default {
    name: "changeAccount",
    watch:{
      changeOpen(newVal,oldVal){
        if(newVal){
          this.getList();
        }
      }
    },
    data(){
        return{
          changeOpen: false,
          loading: false,
          accountList: [],
          addOpen: false,
          accountForm: {
            account: null,
            password: null
          }
        }
    },
    methods:{
      getList(){
        listRelation({pageNum:1,pageSize:9999,userId:this.$store.state.user.userId}).then(res =>{
          if(res.code == 200){
            this.accountList = res.rows;
          }
        })
      },
      submitForm(){
        this.accountForm.userId = this.$store.state.user.userId;
        addRelation(this.accountForm).then(res =>{
          if(res.code == 200){
            this.addOpen = false;
            this.getList();
            this.$message.success("关联账户添加成功！");
          }
        })

      },
      cancel(){
        this.reset();
        this.addOpen = false;
      },
      reset(){
        this.accountForm = {
          account: null,
          password: null
        }
      },
      deleteRelation(row){
        this.$confirm(
          '是否确认删除账户为"' + row.account + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return delRelation(row.relationId);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      changeAccout(row){
        this.$store.dispatch('LogOut').then(() => {
          //关闭websocket
          this.$websocket.close();
          Cookies.remove("username");
          Cookies.remove("password");
          Cookies.remove('rememberMe');
          this.$store.dispatch("ChangeLogin", {username:row.account,password:row.password}).then(() => {
            this.changeOpen = false;
            //this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
            window.location.reload();
          })
        })
      },
    }
  }
</script>

<style lang="scss">

  .changeAccount{
    .relationAccount{
      height: 800px;
      overflow-y: auto;
      &::-webkit-scrollbar {
        /* 设置滚动条宽度 */
        width: 4px;
        /* 设置滚动条背景色 */
        //background: black;
      }

      //滚动条轨道
      &::-webkit-scrollbar-track {
        background-color:transparent;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
      }

      //滚动条滑块
      &::-webkit-scrollbar-thumb {
        background-color: rgb(147,147,153,0.5);
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
      }
    }

    .el-button--text{
      color: #606266;
    }
  }
</style>
