<template>
  <div class="page-container inspectSupervisorGroup-addPage-addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{propsData.showType?'督导组详情':(newData.id?'编辑督导组':'添加督导组')}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" v-if="!propsData.showType" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="是否启用" prop="enable" class="page-switch">
          <el-switch
            :disabled="propsData.showType"
            class="switch captcha-img"
            :active-value="true"
            :inactive-value="false"
            active-color="#0183FA"
            inactive-color="#999"
            v-model="newData.enable"
            active-text="启用"
            inactive-text="停用"
          ></el-switch>
        </el-form-item>
        <el-form-item label="督导组名称" prop="groupName">
          <el-input :disabled="propsData.showType" v-model="newData.groupName" placeholder="请输入督导组名称" maxLength="15" style="width:693px;"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" prop="deptId">
          <el-select :disabled="propsData.showType" v-model="newData.deptId"
                     @change="deptChange" placeholder="请选择上级部门" style="width: 300px">
            <el-option
              v-for="dict in deptOptions"
              :key="dict.deptId"
              :label="dict.deptName"
              :value="dict.deptId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="督导组成员" prop="checkGroupMemberList">
          <div class="user-list-max-box">
            <div class="user-list-top-button-box">
              <img src="@/assets/ZDimages/safetyCheck/icon_xyxc_cy.png">
              <p>成员列表</p>
              <p @click="tableButton(1)" v-if="!propsData.showType">+ 添加</p>
            </div>
            <el-table class="table-box table-null-img-20" border :data="newData.checkGroupMemberList">
              <el-table-column label="序号" type="index" width="60"/>
              <el-table-column label="姓名" prop="userName" show-overflow-tooltip/>
              <el-table-column label="工号" prop="account" width="130" show-overflow-tooltip/>
              <el-table-column label="所在部门" prop="deptName" width="188" show-overflow-tooltip/>
              <el-table-column :label="propsData.showType?'状态':'操作'" width="228" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div class="table-button-box" v-if="!propsData.showType&&!scope.row.isAdmin">
                    <p class="table-button-null"></p>
                    <p class="table-button-p"
                       @click="tableButton(2,scope.row)"
                    >{{scope.row.enable?'启用':'停用'}}</p>
                    <p class="table-button-p"
                       @click="tableButton(3,scope.row,scope.$index)"
                    >删除</p>
                    <p class="table-button-p"
                       v-if="!scope.row.isAdmin"
                       @click="tableButton(6,scope.row)"
                    >设为负责人</p>
                    <p class="table-button-null"></p>
                  </div>
                  <div class="table-button-box" v-if="!propsData.showType&&scope.row.isAdmin">
                    <p class="table-button-null"></p>
                    <p>负责人</p>
                    <p class="table-button-null"></p>
                  </div>
                  <div class="table-button-box" v-if="propsData.showType">
                    <p class="table-button-null"></p>
                    <p>{{scope.row.isAdmin?'负责人':(scope.row.enable?'启用':'停用')}}</p>
                    <p class="table-button-null"></p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <userCheckComponent ref="userCheckComponent" v-if="userCheckComponentType"
                        :userCheckComponentData="userCheckComponentData"></userCheckComponent>
  </div>
</template>

<script>
  import {
    securityCheckGroupDetail,
    securityCheckGroupUpdate,
    securityCheckGroupAdd,
  } from "@/api/safetyCheck/index";
  import {
    getDeptDropList,
    systemUserDetail,
    systemDeptGetLoginUserByDeptList,
  } from '@/api/commonality/permission'
  import userCheckComponent from "./userCheckComponent.vue";
  export default {
    name: 'addPage',
    components: {
      userCheckComponent
    },
    props:{
      propsData:{},
    },
    data(){
      return{
        //详情模式
        lookInfoType:false,
        deptOptions:[],
        newData:{
          enable:true,
          groupName:'',
          deptId:null,
          deptName:"",
          checkGroupMemberList:[],
        },
        rules:{
          enable:[
            {required: true, message: '请选择是否启用', trigger: 'blur'},
          ],
          groupName:[
            {required: true, message: '请输入督导组名称', trigger: 'blur'},
            { required: true, message: '请输入督导组名称', validator: this.spaceJudgment, trigger: "blur" }
          ],
          deptId:[
            {required: true, message: '请选择上级部门', trigger: 'blur'},
          ],
          checkGroupMemberList:[
            {required: true, message: '请选择督导组成员', trigger: 'blur'},
          ],
        },
        //人员列表选择
        userCheckComponentType:false,
        userCheckComponentData:{},
        //当前组管理员
        isAdminUserId:'',
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      /** 查询二级单位列表/初始化 */
      initialize() {
        systemDeptGetLoginUserByDeptList({}).then(response => {
          this.$set(this, 'deptOptions', response.data)
          this.$set(this.newData, 'deptId', response.data[0].deptId)
          this.$set(this.newData, 'deptName', response.data[0].deptName)
          this.$nextTick(()=>{
            if(this.propsData.showType){
              this.$set(this,'lookInfoType',true);
              this.securityCheckGroupDetail();
            }else{
              this.$set(this,'lookInfoType',false);
              if(this.propsData.groupId){
                //编辑
                this.securityCheckGroupDetail();
              }else{
                //新增
                this.systemUserDetail();
              }
            }
          })
        })
      },
      tableButton(type,data,index){
        let self = this;
        if(type == 1){
          if(self.newData.checkGroupMemberList.length>50){
            this.msgError('督导组最大成员数量为50人')
            return
          }
          //编辑
          this.$set(this,'userCheckComponentData',JSON.parse(JSON.stringify(self.newData.checkGroupMemberList)));
          this.$set(this,'userCheckComponentType',true);
        }else if(type == 2){
          //启用停用
          let text = data.enable?'停用':'启用'
          this.$confirm('是否确认'+text+'?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            data.enable = !data.enable;
          }).catch(() => {});
        }else if(type == 3){
          //删除
          this.$confirm('是否确认删除?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
            self.newData.checkGroupMemberList.splice(index,1)
          }).catch(() => {});
        }else if(type == 4){
          //人员选择关闭
          this.$set(this,'userCheckComponentType',false);
        }else if(type == 5){
          //人员选择确定
          data.forEach((item)=>{
            item.enable = true;
            item.isAdmin = item.userId == this.isAdminUserId;
          })
          this.$set(this.newData,'checkGroupMemberList',JSON.parse(JSON.stringify(data)));
          this.$set(this,'userCheckComponentType',false);
        }else if(type = 6){
          for(let i=0;i<self.newData.checkGroupMemberList.length;i++){
            if(self.newData.checkGroupMemberList[i].userId == data.userId){
              self.newData.checkGroupMemberList[i].isAdmin = true;
              this.$set(this,'isAdminUserId',self.newData.checkGroupMemberList[i].userId);
            }else{
              self.newData.checkGroupMemberList[i].isAdmin = false;
            }
          }
        }
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.newData.groupId){
              securityCheckGroupUpdate(this.newData).then(response => {
                this.msgSuccess(response.message)
                this.$parent.tableButton(6);
              });
            }else{
              securityCheckGroupAdd(this.newData).then(response => {
                this.msgSuccess(response.message)
                this.$parent.tableButton(6);
              });
            }
          }
        })
      },
      //督导组详情
      securityCheckGroupDetail(){
        securityCheckGroupDetail({groupId:this.propsData.groupId,userEnable:0}).then(response => {
          for(let i=0;i<response.data.checkGroupMemberList.length;i++){
            if (response.data.checkGroupMemberList[i].isAdmin){
              this.$set(this,'isAdminUserId',response.data.checkGroupMemberList[i].userId);
            }
          }
          this.$set(this,'newData',response.data);
        });
      },
      /** 获取用户详情 */
      systemUserDetail() {
        systemUserDetail({ userId: localStorage.getItem('userId') }).then(response => {
          this.$set(this,'isAdminUserId',response.data.userId);
          this.newData.checkGroupMemberList.push({
            account:response.data.account,
            deptId:response.data.deptId,
            deptName:response.data.deptName,
            enable:true,
            userId:response.data.userId,
            userName:response.data.userName,
            userType:response.data.userType,
            isAdmin:true,
          })
        })
      },
      //学院选中
      deptChange(type){
        let self = this;
        for(let i=0;i<self.deptOptions.length;i++){
          if(self.deptOptions[i].deptId == type){
            self.$set(self.newData,'deptName',self.deptOptions[i].deptName);
          }
        }
        console.log('type',type)
      },
    },
  }
</script>

<style scoped lang="scss">
  .inspectSupervisorGroup-addPage-addPage{
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
      .user-list-max-box{
        width:753px;
        height:400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .user-list-top-button-box{
          display: flex;
          border:1px solid #dedede;
          border-bottom:none;
          height:50px;
          img{
            width:14px;
            height:14px;
            display: inline-block;
            margin:18px 15px 20px;
          }
          p:nth-child(2){
            flex:1;
            font-size:16px;
            line-height:50px;
            color:#333;
          }
          p:nth-child(3){
            margin:10px 20px 10px 0;
            cursor: pointer;
            width: 70px;
            height: 30px;
            line-height:30px;
            text-align: center;
            background: #0045AF;
            color:#fff;
            border-radius: 6px 6px 6px 6px;
          }
          p:nth-child(3):hover{
            background: #0183FA;
          }
        }
      }
    }
    ::v-deep .el-input.is-disabled .el-input__inner{
      background-color: #fff;
      color: #666;
      cursor: auto;
    }
    ::v-deep .el-input.is-disabled .el-input__suffix{
      display: none;
    }
  }
</style>
