<template>
  <div class="item-role-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title">查询条件
        <el-upload
          v-if="activeUser == 'L1'"
          class="upload-excel"
          action="#"
          accept=".xlsx"
          multiple
          :limit="1"
          :before-upload="beforeUpload">
          <el-button size="small" >导入角色权限</el-button>
          <el-button class="down-button" slot="tip" size="small" @click="download('model')">下载导入模板</el-button>
        </el-upload>
      </div>
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
        <el-form :model="formInline" ref="formInline" label-width="75px" class="form-inline">
          <el-col :span="6">
            <el-form-item label="所属机构：">
              <!-- <el-select size="small" v-model="formInline.organizationName" placeholder="请选择所属机构">
                <el-option
                  v-for="(item, index) in organizationList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option
              </el-select> -->
              <el-input size="small" v-model="formInline.organizationName" placeholder="请输入机构名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名：">
              <el-input size="small" v-model="formInline.userName" placeholder="请输入人员名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="角色：">
              <el-select size="small" v-model="formInline.projeceRole" placeholder="请选择角色">
                <el-option
                  v-for="(item, index) in roleList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
          <!-- <el-col :span="5">
            <el-form-item label="所属科室：">
              <el-select size="small" v-model="formInline.departmentsName" placeholder="请选择所属科室">
                <el-option
                  v-for="(item, index) in departmentsList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6" style="padding:0;text-align:right;padding-right:10px;">
            <el-button type="primary" size="small" @click="searchList()">查询</el-button>
            <el-button
              type="default"
              size="small"
              @click="resetForm('formInline')"
              style="margin-left:0;"
            >重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="projeceRole" label="角色" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.projeceRole | projeceRoleType }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="organizationName" label="所属机构" align="center"></el-table-column>
        <el-table-column prop="departmentsName" label="科室" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="400" align="left">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              v-show="showButton(scope.row,'L2')"
              @click="openDialog(scope.row,'L2')"
            >升级项目负责人</el-button>
            <el-button
              type="primary"
              size="small"
              v-show="showButton(scope.row,'L3')"
              @click="openDialog(scope.row,'L3')"
            >升级次级负责人</el-button>
            <el-button
              type="primary"
              size="small"
              v-show="showButton(scope.row,'L0')"
              @click="openDialog(scope.row,'L0')"
            >降为普通用户</el-button>
            <el-button
              type="primary"
              size="small"
              v-show="scope.row.projeceRole == 'L3'"
              @click="addArea()"
            >追加区域权限</el-button>
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有查询到相关结果</p>
          </div>
        </div>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 20, 30, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
      <el-dialog title :visible.sync="dialog.show" width="30%" center>
        <!-- <p v-if="numL3 > 1" class="dialog-p">
          确认将{{ dialog.role }}
          <span class="user-name">"{{ dialog.name }}"</span>
          {{ dialog.option }}吗?"
        </p>
        <p v-else >该用户为此机构仅有的次级负责人，确认需要降级吗？</p> -->

        <p v-if="numL3 <= 1 && scopeRow.projeceRole == 'L3'" class="dialog-p">
          该用户为此机构仅有的次级负责人，确认需要降级吗？
        </p>
        <p v-else>
          确认将{{ dialog.role }}
          <span class="user-name">"{{ dialog.name }}"</span>
          {{ dialog.option }}吗?"
        </p>

        <span slot="footer" class="dialog-footer">
          <el-button type="default" size="small" @click="dialog.show = false">取消</el-button>
          <el-button type="primary" size="small" @click="changeRole()">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title :visible.sync="dialogFull" width="30%" center>
        <p class="dialog-p">
          无法操作，项目负责人已满
          <span class="user-name">5人</span>
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="default" size="small" @click="dialogFull = false">取消</el-button>
          <el-button type="primary" size="small" @click="dialogFull = false">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="导入成功"
        :visible.sync="dialogSuccess"
        width="30%"
        class="dialog-success"
        center>
        <p >本次成功导入 <span class="upload-text">{{ updateNum }}条</span> 数据</p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="dialogSuccess = false">关闭</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="导入失败"
        :visible.sync="dialogFail"
        width="30%"
        class="dialog-fail"
        center>
        <div class="fail-type" v-if="failType == 1">
          <p >表格不符合格式要求，请修正后再次导入</p>
          <p class="fail-notice"> 仅支持一次导入5000条数据</p>
        </div>
        <div class="fail-type" v-if="failType == 2">
          <p >有 <span class="fail-num"> {{ failNum }}条</span> 数据不符合格式要求，请修正后再次导入</p>
          <p class="fail-notice"> 仅支持xlsx格式的文件</p>
          <p class="fail-link" @click="download('fail')">下载错误数据></p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="fail-close" size="small" @click="dialogFail = false">取消</el-button>
          <el-upload
            class="upload-button"
            action="#"
            accept=".xlsx"
            multiple
            :limit="1"
            :before-upload="beforeUpload">
            <el-button type="primary" size="small" >重新导入</el-button>
          </el-upload>
        </span>
      </el-dialog>
      <el-dialog
        title="追加区域权限"
        :visible.sync="dialogArea"
        width="70%"
        class="dialog-area"
        center>
        
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogArea = false">取消</el-button>
          <el-button type="primary"  size="small" @click="dialogArea = false">确认</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { create } from "domain";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from '../../utils/utils'
let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    const item = {
      userId: "298490",
      userName: "李雪",
      projeceRole: "L0",
      organizationName: "浙江省人民医院",
      departmentsName: "外科"
    };
    return {
      curmbFirst: "系统管理",
      curmbSecond: "角色管理",
      curmbThird: "项目角色",
      tableData: [],
      loading: true,
      timingTime: "",
      totalRows: 0,
      currentPage: 1,
      formInline: {
        portalProjectId: "",
        pageNo: 1,
        pageSize: 10,
        departmentsName: "",
        organizationName: "",
        projeceRole: "",
        userName: ""
      },
      departmentsList: [],
      organizationList: [],
      roleList: [
        // {
        //   label: "内部管理员",
        //   value: "L1"
        // },
        {
          label: "项目负责人",
          value: "L2"
        },
        {
          label: "次级负责人",
          value: "L3"
        },
        {
          label: "普通用户",
          value: "L0"
        }
      ],
      numL2: 0,
      numL3: 0,
      dialog: {
        show: false,
        role: "项目负责人",
        name: "李雷",
        option: "升级为项目负责人",
        full: false
      },
      dialogFull: false,
      scopeRow: {},
      activeUser: '',
      updateNum: 50,
      dialogSuccess: false,
      failType: 2,
      failNum: 2,
      dialogFail: false,
      dialogArea: false,
    };
  },
  created() {
    vm = this;
    this.queryRoleList();
  },
  // 挂载到Dom完成时
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    download(type) {
      console.log('下载',type);
    },
    beforeUpload(file) {
      console.log(file);
    },
    searchList() {
      this.formInline.pageNo = 1;
      this.queryRoleList();
    },
    //查询用户列表
    queryRoleList() {
      this.formInline.portalProjectId = vm.getUrlSearch(
        window.location.href,
        "portalProjectId"
      );
      if (this.formInline.portalProjectId == null) {
        this.formInline.portalProjectId = "";
      }
      let req = {};
      req = this.formInline;
      openLoading(vm);
      vm.GET("portal/portalProjectOrRole/queryRoleList", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.tableData = res.data.projectRoleInfoModels;
          vm.totalRows = res.data.total;
          vm.activeUser = res.data.activeUser;
          console.log('activeUser',vm.activeUser);
          //this.roleList = setRoleList(res.data.roleList);
          this.organizationList = res.data.organizationList;
          this.departmentsList = res.data.departmentsList;
          this.numL2 = res.data.numL2;
          this.numL3 = res.data.numL3;
        }
      });
    },
    //改变等级
    changeRole() {
      let req = {
        portalProjectId: this.formInline.portalProjectId,
        updateL: this.scopeRow.updateL,
        userId: this.scopeRow.userId,
        numL2: this.numL2,
        nowL: this.scopeRow.projeceRole
      };
      vm.GET("portal/portalProjectOrRole/roleLevelUpdate", req).then(res => {
        this.dialog.show = false;
        if (res.code == "000000") {
          console.log(res);
          this.queryRoleList();
        }
        vm.$message({
          type: 'info',
          message: res.message,
        })
      });
    },
    addArea() {
      this.dialogArea = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageNo = val;
      this.queryRoleList();
    },
    //重置表单
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          portalProjectId: "",
          pageNo: 1,
          pageSize: 10,
          departmentsName: "",
          organizationName: "",
          projeceRole: "",
          userName: ""
        }
      );
      vm.queryRoleList();
    },
    //按钮展示情况
    showButton(row, projeceRole) {
      let flag = false;
      if(vm.activeUser == "L1") {
        //当前内部管理员
        if (row.projeceRole == "L2") {
          if (projeceRole == "L0") {
            flag = true;
          }
        } else if (row.projeceRole == "L3") {
          if (projeceRole == "L2" || projeceRole == "L0") {
            flag = true;
          }
        } else if (row.projeceRole == "L0") {
          if (projeceRole == "L2" || projeceRole == "L3") {
            flag = true;
          }
        }
      } else if (vm.activeUser == "L2") {
        //当前项目负责人
        if (row.projeceRole == "L3") {
          if (projeceRole == "L2" || projeceRole == "L0") {
            flag = true;
          }
        } else if (row.projeceRole == "L0") {
          if (projeceRole == "L2" || projeceRole == "L3") {
            flag = true;
          }
        }
      } else if (vm.activeUser == "L3") {
        //当前次级负责人
        if (row.projeceRole == "L0") {
          if (projeceRole == "L3") {
            flag = true;
          }
        }
      }
      return flag;
    },
    //打开弹出框
    openDialog(row, projeceRole) {
      console.log(row);
      if (projeceRole == "L2" && this.numL2 >= 5) {
        this.dialogFull = true;
      } else {
        this.dialog.show = true;
      }
      this.dialog.name = row.userName;
      this.scopeRow = row;
      this.scopeRow.updateL = projeceRole;
      if (row.projeceRole == "L2") {
        this.dialog.role = "项目负责人";
        if (projeceRole == "L0") {
          this.dialog.option = "降级为普通用户";
        }
      } else if (row.projeceRole == "L3") {
        this.dialog.role = "次级负责人";
        if (projeceRole == "L2") {
          this.dialog.option = "升级为项目负责人";
        } else if (projeceRole == "L0") {
          this.dialog.option = "降级为普通用户";
        }
      } else if (row.projeceRole == "L0") {
        this.dialog.role = "普通用户";
        if (projeceRole == "L2") {
          this.dialog.option = "升级为项目负责人";
        } else if (projeceRole == "L3") {
          this.dialog.option = "升级为次级负责人";
        }
      }
    }
  }
};
</script>
<style lang="scss">
.item-role-wrap {
  .component-content {
    padding: 10px;
    background: #fff;
    .form-inline {
      margin-left: 30px;
    }
    .header-title {
      position: relative;
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
      .upload-excel {
        position: absolute;
        top: -2px;
        right: 27px;
        float: right;
      }
      .down-button {
        margin-left: 10px;
      }
    }
    .dialog-p {
      text-align: center;
      span {
        color: #449284;
      }
    }
    .dialog-success {
      p {
        text-align: center;
        .upload-text {
          color: #449284;
        }
      }
    }
    .dialog-fail {
      .fail-close {
        margin-left: -70px;
      }
      .upload-button {
        position: absolute;
        float: right;
        width: 80px;
        bottom: 20px;
        right: 120px;
      }
      .fail-type {
        p {
          margin-top: 10px;
        }
        .fail-num {
          color: #DB3F52;
        }
        .fail-notice {
          color: #E3E3E3;
          font-size: 13px;
        }
        .fail-link {
          text-align: center;
          color: #449284;
          cursor: pointer;
        }
      }
    }
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
  }
}
</style>