<template>
  <div class="ContainerBox tableAlign">

    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row>
        <el-col :span='20'>
          <el-button type="primary" @click="()=>{isAdd=true;editDept({})}">添加组织类型</el-button>
          <!-- <el-button @click="importDept"
            >导入{{ $SuperviseStr.depart }}</el-button
          >
          <el-button :disabled="disabled" @click="moveDept"
            >批量转移{{ $SuperviseStr.depart }}成员</el-button
          >
          <el-button :disabled="disabled" @click="ImDept"
            >批量设置通讯录权限</el-button
          >
          <el-button @click="exportExcel">导出</el-button> -->
          <!-- <el-button type="danger" :disabled="!multipleSelection.length" @click="patchDel">删除</el-button> -->
        </el-col>
        <!-- <el-col :span='4'>
            <el-input v-model="search" placeholder="请输入部门名称" clearable/>
          </el-col> -->
      </el-row>
    </section>

    <!-- 选中表格内容展示区域 -->
    <section class="TableSelectBox" v-if="multipleSelection.length">
      <span><i class="el-icon-warning-outline el-icon-flag"></i>已选中：<span v-for="(item, index) in multipleSelection"
          :key="index">{{ item.name
          }}<b v-if="index != multipleSelection.length - 1">,</b></span></span>
    </section>

    <!-- 内容区域 -->
    <section class="contentBox">
      <el-table :data="tableData" ref="districtTable" max-height="500" row-key="id"
        @selection-change="handleSelectionChange" @select-all="handleSelectionAllChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- <el-table-column  prop="name"  label="部门名称"  width="180">
              </el-table-column> 
     
              <el-table-column  prop="totalMember"  label="部门成员数"  width="180">
                  <template slot-scope="scope">
                      <span class="bluelink" @click="totalMemberClick(scope.row)">
                          {{scope.row.totalMember}}
                      </span>
                  </template>
              </el-table-column> 
              <el-table-column  prop="permissionType"  label="部门成员通讯录权限"  width="180">
              </el-table-column>  -->
        <el-table-column  label="排序" width="150">
          <template slot-scope="scope">
          <span >{{ scope.$index+1 }}</span>

          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in tableColumn" :key="index" :prop="item.prop" :label="item.label"
          :width="item.width" :align="item.align">
          <template slot-scope="scope">
            <span v-if="item.prop == 'permissionType'">

              {{ scope.row[item.prop] == "Whole" ? "可见全部成员" : "" }}
            </span>

            <span v-else-if="item.prop == 'totalMember'">
              <span class="bluelink">
                查看成员
              </span>
            </span>

            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="150">
          <template slot-scope="scope">
            <el-button @click="isAdd=false;editDept(scope.row)" type="text" size="small" class="primaryColor">编辑</el-button>
            <el-button @click="delDept(scope.row)" type="text" size="small" class="dangerColor">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 添加 -->

    <!-- 详情 -->
    <Detail :showdialog.sync="showdialogImport" :disabled="disabled" @getData="tableDatalist"
    
    :isAdd="isAdd"
    :data="rowOne"></Detail>


  </div>
</template>
<script>
import {
  getfindByOrganizationId,
  delDepartmentsApi,
  deleteByOrganizationId
} from "@/api/staffApi.js";
import Detail from "./components/Detail.vue";

export default {
  data() {
    return {
      search: "",
      expandRow: [],
      tableData: [],
      multipleSelection: [], //全选列表
      tableColumn: [
        {
          prop: "name",
          label: `组织类型名称`,
          width: "400",
          align: "center",
          show: true,
        },
        {
          prop: "note",
          label: "组织类型说明",
          align: "center",
          show: true,
        },
       
        {
          prop: "createTime",
          label: `创建时间`,
          width: "180",
          align: "center",
          show: true,
        },
        
        {
          prop: "lastUpdateTime",
          label: `修改时间`,
          width: "180",
          align: "center",
          show: true,
        },
      ],
      showdialog: false,
      showdialogImport: false,
      rowOne: {},
      disabled: true, //默认禁用
      isAllSelect: false, //是否全选,
      disabled: false,
      isAdd:false,

    };
  },
  components: {
    Detail,

  },
  mounted() {
    this.tableDatalist(); //表格列表
  },
  computed: {

  },
  watch: {

  },
  methods: {


    tableDatalist() {
      //表格列表
      let obj = { domainId: this.$route.query.domainId }; //获取url域domainId
      getfindByOrganizationId(obj).then((response) => {
        if (response.data) {
          this.tableData = response.data

        }
      });
    },

    handleSelectionChange(val) {
      //选中全选
      console.log(val);
      this.multipleSelection = val;
    },
    handleSelectionAllChange(selection, first) {
      //全选
      if (!first) {
        this.isAllSelect = !this.isAllSelect;
      }
      selection.map((el) => {
        if (el.children) {
          el.children.map((j) => {
            this.toggleSelection(j, this.isAllSelect);
          });
          if (el.children.length > 0) {
            this.handleSelectionAllChange(el.children, true);
          }
        }
      });
    },
    toggleSelection(row, select) {
      //全选选中与取消选中
      if (select) {
        this.$refs.districtTable.toggleRowSelection(row, select); //全选选中
      } else {
        this.$refs.districtTable.clearSelection(); //取消选中
      }
    },
    patchDel() {

    },

    editDept(row, disabled) {
      this.disabled = !!disabled;
      //编辑
      this.rowOne = { ...row,organizationId:localStorage.getItem("domainId") }
      this.showdialogImport = true;
    },
    delDept(row) {
      //删除
      //删除选中表格数据
      let ids = [row.id];
      let obj2 = { domainId: this.$route.query.domainId }; //获取url域domainId
      if (Object.keys(row) != "") {
        this.$confirm("此操作将永久删除此对应数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteByOrganizationId(row.id).then((response) => {
              if (response.status == 200) {
                this.tableDatalist(); //表格列表
              }
            });
          })
          .catch(() => {
            // this.radio = ""; //清空选中
          });
      }
    },

  },
};
</script>
<style lang="scss">
.ContainerBox {
  .el-table tr td.is-left {
    text-align: left !important;
  }

  .remarkBox {
    .remarkInfo {
      background: #fafafa;
      color: #666666;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      line-height: 30px;
      padding: 10px;
      display: flex;

      .el-icon-flag {
        margin-top: 9px;
        color: #ffc108;
        margin-right: 10px;
      }
    }
  }

  .primaryColor {
    color: #108ee9;
  }

  .dangerColor {
    color: red;
  }

  .bluelink {
    color: #409eff;
    cursor: pointer;
  }

  .TableSelectBox {
    display: flex;
    background: #e6f3fc;
    color: #666666;
    border: 1px solid #d4f0fc;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 0;

    span {
      padding: 0 5px;
      line-height: 20px;

      i {
        margin-left: 5px;
        margin-right: 5px;
        color: #2e8ad7;
      }
    }
  }
}

.displayOrderInput {
  display: flex;
  align-items: center;

  // .el-input{width: 80%;}
  i {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}
</style>
  