<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="companyQurey">
        <el-form-item label="公司名称">
          <el-input v-model="companyQurey.companyName" placeholder="公司名称"></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="companyQurey.companyAddress" placeholder="公司地址"></el-input>
        </el-form-item>
        <el-form-item label="公司联系电话">
          <el-input v-model="companyQurey.companyPhone" placeholder="公司联系电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="addcompany()">添加公司</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="conter">
      <el-table
        :data="companyList"
        style="width: 100%;text-align: center;"
        border
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center'}"
      >
        <el-table-column label="序号" width="50px">
          <template
            slot-scope="scope"
          >{{ (companyQurey.pageNum - 1) * companyQurey.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="companyName" label="公司名称" />
        <el-table-column prop="companyAddress" label="公司地址" />
        <el-table-column prop="companyPhone" label="公司联系电话" />
        <el-table-column prop="companyCreateTime" label="公司注册时间" />
        <el-table-column prop="companyInformation" label="公司其他信息" />
        <el-table-column prop="prop" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="selectByAdminget(scope.row)"
            >查看公司管理员</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="companyQurey.pageNum"
        :page-size="companyQurey.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 管理员抽屉 -->
    <div>
      <el-drawer title="我是标题" :visible.sync="drawer" :before-close="handleClose" size="40%">
        <div class="container">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="个人信息" name="first">
              <el-form ref="userform" :model="userlist" label-width="120px" style="width:80%;">
                <el-form-item label="姓名" prop="userName">
                  <el-input v-model="userlist.userName" disabled></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="userSex">
                  <el-select v-model="userlist.userSex" placeholder="请选择" disabled>
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="账号">
                  <el-input v-model="userlist.userAdmin" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="userlist.userPhone" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                  <el-input v-model="userlist.userIdentification" disabled></el-input>
                </el-form-item>
                <el-form-item label="银行卡号">
                  <el-input v-model="userlist.userBankNumber" disabled></el-input>
                </el-form-item>
                <el-form-item label="开户银行">
                  <el-input v-model="userlist.userBankAddress" disabled></el-input>
                </el-form-item>
                <el-form-item label="现任角色">
                  <template>
                    <el-tag v-for="item in userlist.roleList" :key="item.rlId">{{item.rlName}}</el-tag>
                  </template>
                </el-form-item>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="修改密码" name="second" style="width:80%; margin:40px 0px">
              <el-row :gutter="20">
                <el-form
                  :model="passwordData"
                  label-width="120px"
                  :rules="rules"
                  class="demo-ruleForm"
                  ref="ruleForm"
                >
                  <el-col :span="20">
                    <el-form-item label="确认密码" prop="staffPassword">
                      <el-input type="password" v-model="passwordData.staffPassword" show-password></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="20">
                    <el-form-item>
                      <el-button
                        type="primary"
                        icon="el-icon-refresh-left"
                        @click="passReset()"
                      >重置信息</el-button>
                      <el-button type="success" icon="el-icon-upload2" @click="changePassword">更换密码</el-button>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { staffpassword,selectByAdministrators} from "@/api/user";
import { select } from "@/api/company";
import { account_password_valid } from "@/utils/myValidate";

export default {
  data() {
    return {
      companyQurey: {
        companyName: null,
        companyAddress: null,
        companyPhone: null,
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      companyList: [],
      drawer: false,
      userlist: [],

      passwordData: {
        staffPassword: null,
        userId: null
      },
      options: [
        {
          value: "1",
          label: "男"
        },
        {
          value: "0",
          label: "女"
        }
      ],
      userupdata: true,
      activeName: "first",
      rules: {
        staffPassword: [
          { required: true, validator: account_password_valid, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getCompany();
  },
  methods: {
    //查询公司
    getCompany() {
      select(this.companyQurey)
        .then(res => {
          if (res.success) {
            this.total = res.data.total;
            this.companyList = res.data.list;
          } else {
            this.$message.error(res.data);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //换页
    handleCurrentChange(val) {
      this.companyQurey.pageNum = val;
      this.getCompany();
    },
    //添加公司
    addcompany() {
      this.$router.push("/companyadd");
    },
    //查询
    qurey() {
      this.companyQurey.pageNum = 1;
      this.getCompany();
    },
    //重置
    reset() {
      this.companyQurey = {
        companyName: null,
        companyAddress: null,
        companyPhone: null,
        pageSize: 10,
        pageNum: 1
      };
      this.getCompany();
    },
    //查询管理员
    selectByAdminget(row) {
      this.passReset();
      this.drawer = true;
      console.log(row);
      selectByAdministrators({ companyId: row.companyId })
        .then(res => {
          if (res.code == 20000) {
            this.userlist = res.data;
            this.passwordData.userId = res.data.userId;
            console.log(this.passwordData.userId);
          }
        })
        .catch(e => {
          this.$message.error(e.msg);
        });
    },
    //关闭抽屉
    handleClose(done) {
      this.passReset();
      done();
    },
    //切换
    handleClick(tab, event) {
      console.log(tab, event);
      this.userupdata = true;

      this.passReset();
    },
    
    passReset() {
      if (this.activeName == "second") {
        this.passwordData.staffPassword = null;
        this.$refs.ruleForm.resetFields();
      }
    },
    //修改密码
    changePassword() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          staffpassword(this.passwordData)
            .then(res => {
              if (res.status == "success") {
                this.$message({
                  showClose: true,
                  message: "修改密码成功",
                  type: "success"
                });
                this.drawer = false;
              }
            })
            .catch(e => {
              this.$message.error(e.msg);
            });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.conter {
  margin-bottom: 10px;
}
.footer {
  text-align: right;
}
</style>