<template>
  <div class="UserPowerTable">
    <div>
      总记录条数
      <i>{{UserDataList.total}}</i>条
    </div>
    <div>
      <el-row type="flex" justify="start">
        <el-col :span="6">
          <el-input v-model="inputValue" placeholder="请输入姓名或着手机号"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button @click="getSearch" type="primary" round size="mini">查询</el-button>
          <el-button @click="resetSearch" type="info" round plain size="mini">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <!-- one table -->
      <el-table
        :data="UserDataList.rows"
        style="width: 100% text-align:center;"
        border
        v-loading="listpage.loading"
        :header-cell-style="{'background-color': '#fafafa',
    'font-weight':'800'}"
        class="SizeBt"
      >
        <el-table-column prop="userName" label="姓名" min-width="80" align="center"></el-table-column>
        <!-- <el-table-column prop="city" label="操作证" min-width="60" align="center">
          <template slot-scope="rows">
            <i :class="['el-icon-warning-outline',rows.row.IsCertificated===1?'iconColorBL':'']"></i>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="userMobile"
          label="手机号码"
          min-width="90"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="roleName" label="角色" min-width="80" align="center"></el-table-column>
        <el-table-column label="急修工" min-width="60" align="center">
          <template slot-scope="{row,$index}" :show-overflow-tooltip="true">
            <el-tooltip
              effect="dark"
              :content="row.repairFlag===1?'该员工是急修工':'该员工不是急修工'"
              placement="top-start"
            >
              <span
                :class="['iconfont','iconweixiu',row.repairFlag===1?'iconColorBL':'']"
                style="cursor: pointer;"
                @click="IsRepir(row,$index)"
              ></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="job"
          label="职位"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="connectedProjectNum"
          label="关联项目数量"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="connectedLiftNum"
          label="关联电梯数量"
          min-width="80"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="{row,$index}">
            <el-button
              type="primary"
              class="MarB10 marR10"
              size="mini"
              round
              plain
              v-if="MTUserPowerTableBtn.MTUserPowerTableBtn16"
              @click.native="getCurrSeek($index, row)"
            >关联查询</el-button>
            <el-button
              type="primary"
              class="MarB10"
              round
              plain
              size="mini"
              v-if="MTUserPowerTableBtn.MTUserPowerTableBtn15"
              @click.native="changeRole($index, row)"
            >修改角色</el-button>
            <el-button
              type="danger"
              class="marR10"
              size="mini"
              round
              plain
              v-if="MTUserPowerTableBtn.MTUserPowerTableBtn17"
              @click.native="KickOut($index, row,1)"
            >踢出团队</el-button>
            <!-- <el-button
              type="primary"
              class="marL10"
              size="mini"
              round
              plain
              @click.native="KickOut($index, row,2)"
            >取消关联</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  -->
    <!-- currpage -->
    <div class="pagenation">
      <span>
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="UserDataList.total"
          @current-change="click"
          @size-change="handleSizeChange"
          :page-sizes="[5, 15,25, 50]"
          :page-size="listpage.pagesize"
        ></el-pagination>
      </span>
    </div>
    <!--  -->
    <!-- seekDiaLog -->
    <el-dialog title="关联查询" :visible.sync="DiaModels.CurrSeekDia" class="seekCurr" width="980px" :before-close="closeCurrSeek">
      <!-- <div>
        <el-button type="primary" plain @click="changePerson">更换维保负责人</el-button>
      </div>-->
      <el-table
        :data="associatedList"
        tooltip-effect="dark"
        style="width: 100% text-align:center;"
        :header-cell-style="{'background-color': '#fafafa',
      'font-weight':'600'}"
      >
        <el-table-column
          property="projectCode"
          label="关联项目编号"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          property="projectName"
          label="关联项目名称"
          min-width="140"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row,$index}">
            <div class="btnInfo">
              <el-button
                type="primary"
                size="small"
                plain
                @click.native="KickOut($index, row,2)"
              >取消关联</el-button>
              <el-button
                type="primary"
                size="small"
                plain
                @click.native="geteleListOne($index, row,2)"
              >查看关联电梯</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
      <div>
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="assPage.total"
          @current-change="click2"
          @size-change="handleSizeChange2"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="assPage.pagesize"
        ></el-pagination>
      </div>
      </div>
    </el-dialog>
    <!-- modal -->
    <!-- KickOutDigLog -->
    <el-dialog title="更换维保负责人" :visible.sync="DiaModels.pesrson" width="580px" :before-close="closeReplace">
      <div class="plansNext">
      <div class="selectPerson mb20">
        <span>更换维保负责人</span>
        <el-select v-model="personvalue" filterable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          ></el-option>
        </el-select>
      </div>
      <div class="personBtn">
        <span>
          <el-button type="info" plain @click="closeReplace">取消</el-button>
          <el-button type="primary" plain @click="replaceWorker">确定</el-button>
        </span>
      </div>
      </div>
    </el-dialog>
    <!--  -->
    <!-- change position-->
    <el-dialog title="修改角色" :visible.sync="DiaModels.role" width="640px">
      <div class="plansNext">
      <div class="selectPerson mb20">
        <el-row type="flex" justify="start">
          <el-col :span="4">
            <span class="titleText">选择角色:</span>
          </el-col>
          <el-col :span="10">
            <el-select v-model="userData.roleId" value-key="id" placeholder="请选择角色">
              <el-option
                v-for="item in listUser"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row type="flex" justify="start">
          <el-col :span="4">
            <span class="titleText">输入职位:</span>
          </el-col>
          <el-col :span="10">
            <el-input v-model="userData.job" placeholder="请输入职业"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="personBtn">
        <span>
          <el-button type="info" plain @click="updateNone">取消</el-button>
          <el-button type="primary" plain @click="updateUser">确定</el-button>
        </span>
      </div>
       </div>
    </el-dialog>
    <!--  -->
    <el-dialog title="更换维保负责人" :visible.sync="DiaModels.changePeopel" :before-close="changePeopelClose" width="960px" >
      <div class="changePeople">
        <el-button type="primary" plain @click="changePerson">更换维保负责人</el-button>
      </div>
      <el-table
        :data="eleListData"
        tooltip-effect="dark"
        ref="DataSelection"
        @selection-change="handleSelectionChange"
        style="width: 100% text-align:center;"
        :header-cell-style="{'background-color': '#fafafa',
      'font-weight':'600'}"
      >
        <el-table-column
      type="selection"
      width="55"></el-table-column>
        <el-table-column
          property="devicePosition"
          label="电梯位置"
          min-width="120"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          property="registrationCode"
          label="电梯注册编码"
          min-width="140"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
      <div class="pagenation">
      <div>
        <el-pagination
          background
          layout="prev, pager, next, sizes, total, jumper"
          :total="elelist.total"
          @current-change="changeEleNum"
          @size-change="changeEleSize"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="elelist.pageSize"
        ></el-pagination>
      </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "MTCompanyUserPower",
  data() {
    return {
      UserDataList: {
        total: 0,
        rows: []
      },
      inputValue: "",
      queryCondition: "",
      listpage: {
        currpage: 1,
        pagesize: 15,
        loading: false
      },
      // 人员角色获取
      listUser: [],
      userData: {
        userId: "",
        roleId: "",
        job: "",
        id: ""
      },
      activeName: "first",
      // 模态框状态
      DiaModels: {
        CurrSeekDia: false,
        pesrson: false,
        role: false,
        changePeopel: false
      },
      // 选中状态
      DataSelection: [],
      //维保工
      options: [],
      personvalue: null,
      radio1: "1",
      // 关联查询列表
      associatedList: [],
      assOldData: null,
      assPage: {
        currpage: 1,
        pagesize: 10,
        loading: false,
        total: 0
      },
      eleListData: [],
      elelist: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      changeProject:{},
      MTUserPowerTableBtn:{
        MTUserPowerTableBtn15:0,
        MTUserPowerTableBtn16:0,
        MTUserPowerTableBtn17:0,
      }
    };
  },
  created() {
    var MTUserPowerTableBtn = {}
    this.getButton(14).then(result => {
      if (result.data.statusCode==="1") {
        MTUserPowerTableBtn = result.data.data
        MTUserPowerTableBtn.map((item)=>{
          if(item.id==15){
            this.MTUserPowerTableBtn.MTUserPowerTableBtn15 = item.checked?1:0 
          }else if(item.id==16){
            this.MTUserPowerTableBtn.MTUserPowerTableBtn16 = item.checked?1:0  
          }else if(item.id==17){
            this.MTUserPowerTableBtn.MTUserPowerTableBtn17 = item.checked?1:0  
          }
        })
      }
    });
  },
  mounted() {
    this.getMtUserList();
    this.getRolemtWork();
  },
  methods: {
    //   分页条数
    handleSizeChange(val) {
      this.listpage.pagesize = val;
      this.listpage.currpage = 1;
      this.getMtUserList();
    },
    //   分页页码
    click(val) {
      this.listpage.currpage = val;
      this.getMtUserList();
    },
    //加载页面
    getMtUserList() {
      this.loading = true;
      var url = "system/companyuser/list";
      var param = {
        pageSize: this.listpage.pagesize,
        pageNum: this.listpage.currpage,
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        queryCondition: this.queryCondition
      };
      this.axios.post(url, param).then(res => {
        if (res) this.loading = false;
        if (res.statusCode == "1") {
          this.UserDataList = res.data;
        } else if (res.statusCode == "9") {
          this.UserDataList = { rows: [], total: 1 };
        } else {
          this.$message(res.message);
        }
      });
    },
    //   分页条数
    handleSizeChange2(val) {
      this.assPage.pagesize = val;
      this.assPage.currpage = 1;
      this.getCurrSeek2();
    },
    //   分页页码
    click2(val) {
      this.assPage.currpage = val;
      this.getCurrSeek2();
    },
    getRolemtWork() {
      var url = "system/companyuser/getCompanyMembers";
      var param = {
        roleCode: "ROLEMTWORK",
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.options = res.data;
        } else {
          this.options = [];
        }
      });
    },
    // 关联查询
    getCurrSeek(index, row) {
      this.DiaModels.CurrSeekDia = true;
      this.assOldData = row;
      this.getCurrSeek2();
    },
    getCurrSeek2() {
      var url = "business/project/relevanceProject";
      var param = {
        workerId: this.assOldData.userId,
        pageNum: this.assPage.currpage,
        pageSize: this.assPage.pagesize,
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          console.log(res);
          this.associatedList = res.data ? res.data.rows : [];
          this.assPage.total = res.data ? res.data.total : 0;
        } else {
          this.$message({ type: "warning", message: res.message });
        }
      });
    },
    changeEleNum(e) {
      this.elelist.pageNum = e;
      this.geteleList();
    },
    changeEleSize(val){
      this.elelist.pageNum = 1;
      this.elelist.pageSize = val;
      this.geteleList();
    },
    geteleListOne(index, row, a){
      this.changeProject=row;
        this.geteleList(this);
       setTimeout(() => {this.DiaModels.changePeopel=true}, 10);
    },
    geteleList(_this) {
      console.log(this)
      var url = "business/project/relevance/list";
      var param = {
        workerId: this.assOldData.userId,
        projectId:this.changeProject.projectId,
        pageSize: this.elelist.pageSize,
        pageNum: this.elelist.pageNum
      };
      console.log(param);
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.eleListData=res.data.rows;
          this.elelist.total=res.data.total;
        } else {
          // this.
          this.$message.error(res.message)
        }
      });
    },
    // 保存选中项
    handleSelectionChange(val) {
      this.DataSelection = val;
    },
    // 是否急修工
    IsRepir(row, index) {
      var title =
        row.repairFlag === 0 ? "设置该员工为急修工" : "取消该员工为急修工";
      var _this = this;
      this.$confirm(title + ", 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          _this.changeRepair(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 确定
    changeRepair(row) {
      switch (row.repairFlag) {
        case 0:
          row.repairFlag = 1;
          break;
        case 1:
          row.repairFlag = 0;
          break;
      }
      var url = "system/companyuser/setRepair";
      var param = {
        repairFlag: row.repairFlag,
        id: row.id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.getMtUserList();
          this.$message({
            type: "success",
            message: "设置成功!"
          });
        } else {
          this.$message({
            type: warning,
            message: res.message
          });
        }
      });
    },
    //踢出团队||取消关联
    KickOut(index, row, a) {
      console.log(this.assOldData);
      var _this = this;
      const h = this.$createElement;
      if (a === 1) {
        this.$msgbox({
          title: "踢出团队",
          message: h("p", null, [
            h("span", null, "确定将 "),
            h("span", { style: "color:red;padding:0 5px;" }, row.userName),
            h("span", null, "踢出团队吗")
          ]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              var url = "system/companyuser/kickOutTeam";
              var param = { id: row.id };
              this.axios.post(url, param).then(res => {
                if (res.statusCode) {
                  instance.confirmButtonLoading = false;
                  done();
                }
                if (res.statusCode === "1") {
                  this.$message({
                    type: "success",
                    message: "踢出成功"
                  });
                } else {
                  this.$message({
                    type: "warning",
                    message: res.message
                  });
                }
              });
            } else {
              done();
            }
          }
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消踢出"
          });
        });
      } else {
        this.$confirm("确定取消关联?", "取消关联", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            var url = "business/project/relevance/cancelRelevance";
            var param = {
              projectId: row.projectId,
              workerId: _this.assOldData.userId
            };
            this.axios.post(url, param).then(res => {
              if (res.statusCode === "1") {
                this.$message({
                  type: "success",
                  message: "取消成功!"
                });
                _this.getCurrSeek2();
              } else {
                this.$message({
                  type: "warning",
                  message: res.message
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    changePerson() {
      this.DiaModels.pesrson = true;
    },
    // 修改角色
    changeRole(index, row) {
      var url = "system/role/companyRoleList";
      var param = {
        companyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      var id=sessionStorage.getItem("user")
      if(row.userId==id) return this.$message({
        type:'warning',
        message:"自己不能修改自己的角色"
      }); 
      this.userData.userId = row.userId;
      this.userData.job = row.job;
      this.userData.id = row.id;
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.listUser = res.data;
        } else {
          this.$message(res.message);
        }
      });
      this.DiaModels.role = true;
    },
    // 确定修改角色
    updateUser() {
      var url = "system/companyuser/assignRole";
      
      var param = {
        id: this.userData.id,
        job: this.userData.job
      };
      
      if (this.userData.roleId) param.roleId = this.userData.roleId;
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.userData = {
            userId: "",
            roleId: "",
            job: "",
            id: ""
          };
          this.$message(res.message);
          this.DiaModels.role = false;
          this.getMtUserList();
          // time();
        } else {
          this.$message(res.message);
        }
      });
    },
    // 取消修改
    updateNone() {
      this.userData = {
        userId: "",
        roleId: "",
        job: ""
      };
      this.DiaModels.role = false;
    },
    getSearch() {
      this.listpage.pagesize = 15;
      this.listpage.currpage = 1;
      this.queryCondition = this.inputValue;
      this.getMtUserList();
    },
    resetSearch() {
      this.queryCondition = "";
      this.inputValue = "";
      this.listpage.pagesize = 15;
      this.listpage.currpage = 1;
      this.getMtUserList();
    },
    replaceWorker() {
      var _this = this;
      var url = "business/project/relevance/modify";
      var anum=this.DataSelection.map(item=>{
        item.projectId=_this.changeProject.projectId;
        item.mtCompanyId= JSON.parse(sessionStorage.getItem("companyID")).id
        return item;
      })
      var param = {
        list: anum,
        workerId: this.personvalue
      };
      this.$confirm("确定更换维保负责人?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          againContinued();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消更换"
          });
        });
      var againContinued = function() {
        _this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            _this.$message({
              type: "success",
              message: res.message
            });
            _this.personvalue = null;
            _this.DiaModels.pesrson = false;
            _this.elelist={
              pageSize: 10,
              pageNum: 1,
              total: 0
            }
            _this.geteleList();
          } else {
            _this.$message({
              type: "warning",
              message: res.message
            });
          }
        });
      };
    },
    closeReplace() {
      this.personvalue = null;
      this.DiaModels.pesrson = false;
    },
    // 关闭关联查询
    changePeopelClose(){
      this.DiaModels.changePeopel=false;
      this.eleListData=[]
      this.elelist.total=0;
    },
    // 关闭取消关联
    closeCurrSeek(){
       this.DiaModels.CurrSeekDia = false;
        this.assPage={
        currpage: 1,
        pagesize: 10,
        loading: false,
        total: 0
      };
    }
  }
};
</script>
<style lang="stylus"></style>