<template>
  <div class="ContainerBox tableAlign">
    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row>
        <el-col :span="20">
          <el-button type="primary" @click="addDept">添加组织</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="delDept(multipleSelection)"
            >删除组织</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.selectedOrganizationName
          }}<b v-if="index != multipleSelection.length - 1">,</b></span
        ></span
      >
    </section>

    <!-- 内容区域 -->
    <section class="contentBox">
      <el-table
        :data="tableData"
        ref="districtTable"
        max-height="500"
        default-expand-all
        row-key="id"
        :expand-row-keys="expandRow"
        @selection-change="handleSelectionChange"
        @select-all="handleSelectionAllChange"
      >
        <el-table-column type="selection" width="55"> </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 == 'status'" :class="scope.row[item.prop]">
              {{ statusMap[scope.row[item.prop]]||'-' }}
            </span>
            <span v-else-if="item.prop == 'organizationType'">
              {{ scope.row[item.prop]?.organizationTypeName || "-" }}
            </span>

            <span v-else>{{ scope.row[item.prop] || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="350">
          <template slot-scope="scope">
            <div v-if="!scope.row._isPt">
              <el-button
                @click="editDept(scope.row, true)"
                type="text"
                size="small"
                class="primaryColor"
                >详情</el-button
              >
              <el-button
                @click="editDept(scope.row)"
                type="text"
                size="small"
                class="primaryColor"
                >编辑</el-button
              >
              <el-button
                v-if="actionButtonDisplay(scope.row, 'sure')"
                @click="updateOrganizationStatus(scope.row)"
                type="text"
                size="small"
                class="primaryColor"
                >确认关联</el-button
              >
              <el-button
                @click="editDept(scope.row)"
                v-if="actionButtonDisplay(scope.row, 'again')"
                type="text"
                size="small"
                class="primaryColor"
                >再次邀请</el-button
              >
              <el-button
                @click="delDept([scope.row])"
                type="text"
                size="small"
                class="dangerColor"
                >删除</el-button
              >
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 添加 -->
    <DeptDialog :showdialog.sync="showdialog"></DeptDialog>

    <!-- 详情 -->
    <Detail
      :showdialog.sync="showdialogImport"
      :disabled="disabled"
      @getData="tableDatalist"
      :tableData="tableData"
      :dataInfo="rowOne"
    ></Detail>
  </div>
</template>
<script>
import {
  getORGList,
  deleteOrganizationInfo,
  updateOrganizationStatus,
} from "@/api/staffApi.js";
import DeptDialog from "./components/DeptDialog.vue";
import Detail from "./components/Detail.vue";
// Related{
//     @Override
//     public String getTypeName() {
//         return "已关联";
//     }
// },
// TargetVerify {
//     @Override
//     public String getTypeName() {
//         return "待对方确认";
//     }
// },
// TargetRefuse{
//     @Override
//     public String getTypeName() {
//         return "对方已拒绝";
//     }
// },
// Verify{
//     @Override
//     public String getTypeName() {
//         return "待确认";
//     }
// },
// Refuse{
//     @Override
//     public String getTypeName() {
//         return "已拒绝";
//     }
// };
export default {
  data() {
    return {
      statusMap: {
        Refuse: "已拒绝",
        TargetRefuse: "对方已拒绝",
        TargetVerify: "待对方确认",
        Verify: "待确认",
        Related: "已关联",
      },
      search: "",
      expandRow: [],
      tableData: [],
      multipleSelection: [], //全选列表
      tableColumn: [
        {
          prop: "selectedOrganizationName",
          label: `组织名称`,
          width: "400",
          align: "left",
          show: true,
        },
        {
          prop: "selectedOrganizationNote",
          label: "组织说明",
          align: "center",
          show: true,
        },
        {
          prop: "organizationType",
          label: `组织类型`,
          width: "180",
          align: "center",
          show: true,
        },
        // {
        //   prop: "totalMember",
        //   label: `组织管理员/负责人`,
        //   align: "center",
        //   show: true,
        // },
        {
          prop: "status",
          label: `组织状态`,
          width: "180",
          align: "center",
          show: true,
        },
        // {
        //   prop: "totalMember",
        //   label: `添加时间`,
        //   width: "180",
        //   align: "center",
        //   show: true,
        // },
      ],
      showdialog: false,
      showdialogImport: false,
      rowOne: {},
      disabled: true, //默认禁用
      isAllSelect: false, //是否全选,
      disabled: false,
    };
  },
  components: {
    DeptDialog,
    Detail,
  },
  mounted() {
    this.tableDatalist(); //表格列表
  },
  computed: {},
  watch: {},
  methods: {
    actionButtonDisplay(v, type) {
      if (type === "sure") {
        if (v.inviteType === "GroupCode") {
          if (v.status === "Verify") {
            return true;
          } else {
            return false;
          }
        }
      }
      if (type === "again") {
        return false;
      }

      return false;
    },
    updateOrganizationStatus(v) {
      updateOrganizationStatus({id:v.id,status:0})
        .then((response) => {
          if (response.status == 200) {
            this.$message.success("操作成功");
            this.tableDatalist(); //表格列表
          }
        })
        .catch(() => {
          // this.radio = ""; //清空选中
        });
    },
    tableDatalist() {
      //表格列表
      let obj = { domainId: this.$route.query.domainId }; //获取url域domainId
      getORGList(obj).then((response) => {
        if (response.data) {
          this.tableData = [response.data];
          this.tableData[0]._isPt = true; //
          this.tableData[0].status = null; //

          // this.sortTableData(this.tableData);
        }
      });
    },

    handleSelectionChange(val) {
      //选中全选
      console.log(val);
      this.multipleSelection = val;
    },
    handleSelectionAllChange(selection, first) {
      console.log(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(); //取消选中
      }
    },

    addDept() {
      //新增
      this.showdialog = true;
    },
    editDept(row, disabled) {
      this.disabled = !!disabled;
      //编辑
      this.rowOne = JSON.parse(JSON.stringify(row));
      this.showdialogImport = true;
    },
    delDept(list) {

      if (list.length) {
        this.$confirm("此操作将永久删除此对应数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteOrganizationInfo(list.map(ex=>ex.id)).then((response) => {
              if (response.status == 200) {
            this.$message.success("操作成功");

                this.tableDatalist(); //表格列表
              }
            });
          })
          .catch(() => {
            // this.radio = ""; //清空选中
          });
      }else{
        this.$message.error("请选择要删除的数据");
      }
    },
  },
};
</script>
<style lang="scss">
.Refuse,
.TargetRefuse {
  color: red;
}
.TargetVerify,
.Verify {
  color: goldenrod;
}
.Related {
  color: green;
}

.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>
