<template>
  <div class="main">
    <el-main v-loading="loading">
      <div>
        <label class="label">总公司信息</label>
        <div class="cut-line"></div>
        <table width="100%" style="margin: 20px 0; font-size: 14px">
          <tr>
            <td class="item">企业名称</td>
            <td>{{ headCompany.companyName }}</td>
            <td class="item">营业期限</td>
            <td>
              {{ headCompany.longFlag == 1 ? '长期' : $methodsTools.timestampFormat(headCompany.operateDate) }}
            </td>
            <td class="item" style="text-align: center; width: 33%">
              营业执照
            </td>
          </tr>
          <tr>
            <td class="item">信用代码</td>
            <td>{{ headCompany.creditCode }}</td>
            <td class="item">登记机关</td>
            <td>{{ headCompany.registrationAuthority }}</td>
            <td rowspan="4" style="text-align: center">
              <div>
                <img
                  style="width: 180px; height: 180px; object-fit: fit"
                  v-if="!headCompany.businessImg"
                  src="@/assets/404_images/wuyuxaog.png"
                  alt=""
                />
                <el-image
                  v-else
                  style="
                    width: 200px;
                    height: 180px;
                    cursor: pointer;
                    object-fit: cover;
                  "
                  :src="$methodsTools.splitImgHost(headCompany.businessImg)"
                  :preview-src-list="[
                    $methodsTools.splitImgHost(headCompany.businessImg),
                  ]"
                ></el-image>
              </div>
            </td>
          </tr>
          <tr>
            <td class="item">企业类型</td>
            <td>{{ headCompany.experienceScope }}</td>
            <td class="item">联系人</td>
            <td>{{ headCompany.companyContacts }}</td>
          </tr>
          <tr>
            <td class="item">法定代表</td>
            <td>{{ headCompany.legalRepresentative }}</td>
            <td class="item">联系电话</td>
            <td>{{ headCompany.contactPhone }}</td>
          </tr>
          <tr>
            <td class="item">企业地址</td>
            <td>{{ headCompany.companyAddress }}</td>
            <td class="item">所在部门</td>
            <td>{{ headCompany.department }}</td>
          </tr>
          <tr>
            <td class="item">成立日期</td>
            <td>
              {{ $methodsTools.timestampFormat(headCompany.establishDate) }}
            </td>
            <td class="item">所属岗位</td>
            <td>{{ headCompany.position }}</td>
            <td
              style="text-align: center; color: #007aff; cursor: pointer"
              @click="downloadImg()"
            >
              下载
            </td>
          </tr>
        </table>
      </div>
      <div>
        <label class="label">企业管理</label>
        <div class="cut-line"></div>
        <search-box
          ref="searchBox"
          :formData="formData"
          :formList="formList"
          @search="search"
          @init="init"
        />

        <div id="tableList">
          <div class="headerNavTool" v-if="navText.headShow !== false">
            <div class="leftIndexText">
              {{ navText.title }}
              <strong>{{ navText.index }}</strong>
              {{ navText.ch }}
            </div>
            <div class="rightBtnBox">
              <el-button
                size="small"
                type="primary"
                @click="openCompanyDialog(null, 'add')"
              >
                新增分/子公司
              </el-button>
            </div>
          </div>
          <el-table
            :row-key="(row) => getRowLKey(row)"
            :loading="loading"
            :data="tableData"
            style="width: 100%"
            fit
            border
            :header-cell-style="{
              'text-align': 'center',
              'background-color': '#eee',
              color: '#333',
              fontSize: '14px',
            }"
          >
            <el-table-column
              prop="departmentName"
              label="名称"
              min-width="180"
            ></el-table-column>
            <el-table-column
              prop="departmentType"
              label="类型"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <!-- {{ scope.row.departmentLevel }} -->
                {{
                  scope.row.fatherId == 0 && scope.row.companyLevel == 1
                    ? "总公司"
                    : scope.row.fatherId == 1 && scope.row.companyLevel == 2
                    ? "分/子公司"
                    : scope.row.departmentLevel == 1
                    ? "部门"
                    : "子级"
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="registeredContacts"
              label="联系人"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="departmentPhone"
              label="联系电话"
              align="center"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="departmentNum"
              label="员工人数"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="departmentRemarks"
              label="备注"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="date"
              label="操作"
              fixed="right"
              width="200px"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="
                    openEditDeptDialog(
                      scope.row,
                      scope.row.companyLevel ? 'addDept' : 'addSub'
                    )
                  "
                >
                  {{ scope.row.companyLevel ? "新增部门" : "新增子级" }}
                </el-button>
                <el-button
                  v-if="scope.row.companyLevel"
                  type="text"
                  @click="openCompanyDetailDialog(scope.row)"
                >
                  详情
                </el-button>
                <el-button
                  type="text"
                  @click="
                    scope.row.companyLevel
                      ? openCompanyDialog(scope.row, 'edit')
                      : openEditDeptDialog(scope.row, 'edit')
                  "
                  >修改</el-button
                >
                <el-button
                  :disabled="scope.row.deleteStatus === 2"
                  type="text"
                  @click="
                    del(scope.row, scope.row.companyLevel ? 'company' : 'dept')
                  "
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          :total="total"
          :pageSize="formData.pageSize"
          :currentPage="formData.pageNum"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </el-main>
    <!-- 新增/修改公司弹窗 -->
    <editCompanyDialog ref="editCompanyDialog" @refresh="init()" />
    <!-- 公司详情弹窗 -->
    <companyDetailDialog ref="companyDetailDialog" />
    <!-- 新增/修改部门弹窗 -->
    <editDeptDialog ref="editDeptDialog" @refresh="init()" />
  </div>
</template>

<script>
import editCompanyDialog from "./component/editCompanyDialog.vue";
import companyDetailDialog from "./component/companyDetailDialog.vue";
import editDeptDialog from "./component/editDeptDialog.vue";
import { departmentList, deleteDepartment, deleteCompany } from "@/api/company";
import pagination from "@/components/pagination.vue";
import * as baseUrls from "@/utils/request.js";
export default {
  components: {
    editCompanyDialog,
    companyDetailDialog,
    editDeptDialog,
    pagination
  },
  data() {
    return {
      disabledBtn: false, // 按钮加载控制
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "企业列表",
        index: 0,
        ch: "个",
      },
      //搜索
      formList: [
        {
          prop: "companyName",
          placeholder: "输入名称",
        },
        {
          prop: "AllTypeName",
          placeholder: "输入联系人",
        },
      ],
      formData: {
        companyName: "",
        AllTypeName: "",
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [],
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
      data: {},
      headCompany: {},
    };
  },
  mounted() {
    this.search();
  },
  activated() {
    // this.search();
  },
  methods: {
    // 打开新增/修改部门弹窗
    openEditDeptDialog(row, type) {
      this.$refs.editDeptDialog.openBoxs(row, type);
    },
    // 打开新增/修改公司弹窗
    openCompanyDialog(row, type) {
      this.$refs.editCompanyDialog.openBoxs(row, type);
    },
    // 打开公司详情弹窗
    openCompanyDetailDialog(row) {
      this.$refs.companyDetailDialog.openBoxs(row);
    },
    search(v) {
      this.loading = true;
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      var data = JSON.parse(JSON.stringify(this.formData));
      departmentList(data)
        .then((res) => {
          console.log(res, "res");
          res.rows.forEach((i) => {
            i.departmentId = i.companyId + 9999;
            i.departmentType = 0;
            i.departmentName = i.companyName;
            i.registeredContacts = i.companyContacts;
            i.departmentPhone = i.contactPhone;
            i.departmentNum = i.companyStaffNum;
            i.departmentRemarks = i.companyRemarks;
            i.children = i.companyDepartmentList;
            // 获得总公司
            if (i.companyLevel === 1 || i.fatherId == null) {
              this.headCompany = i;
            }
          });
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
          // console.log(JSON.stringify(this.tableData) + '3333333333333333333')
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getRowLKey(row) {
      return row.departmentId
    },
    init() {
      this.search(2);
    },
    downloadImg() {
      this.$methodsTools.downloadImg(this.headCompany.businessImg, '营业执照')
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    del(v, type) {
      console.log(type);
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          const params = {};
          var _request;
          if (type === "company") {
            params.companyId = v.companyId;
            _request = deleteCompany;
          } else {
            params.departmentId = v.departmentId;
            _request = deleteDepartment;
          }
          _request(params).then((res) => {
            console.log(res, "del");
            this.$message.success("删除成功");
            this.search();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
#tableList {
  padding: 16px 16px 16px;
  border-radius: 8px;
  box-shadow: 0px 0px 9px 1px rgba(28, 41, 90, 0.1);
  background: #ffffff;
  .headerNavTool {
    height: 72px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -16px;
    .rightBtnBox {
      display: flex;
      align-items: center;
    }
  }
}
.main {
  border: 1px solid #dddddd;
  padding: 0 5px;
  border-radius: 10px;
  box-shadow: 1px #999999;
  .label {
    margin: 10px 0;
  }
  .cut-line {
    margin: 15px 0 10px;
    height: 1px;
    background: #000000;
  }
  table {
    border-collapse: collapse; /* 合并边框 */
    width: 100%;
  }
  td {
    border: 1px solid #dfe6ec; /* 设置边框 */
    padding: 15px 12px; /* 设置内边距 */
    text-align: left; /* 设置文本对齐方式 */
    width: 500px;
  }
  .item {
    width: 130px;
    background: #eeeeee;
    white-space: nowrap;
    font-weight: bold;
  }
}
</style>
