<template>
  <div class="container">
    <searchArea :searchData="searchData" @submit="searchByForm"></searchArea>

    <div>
      <functionalArea
        :leftBtn="leftBtn"
        :rightBtn="[]"
        @addOrEditDepartment="addOrEditDepartment"
      ></functionalArea>
      <div class="table-list" v-loading="tableLoading">
        <el-table
          :data="listData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            prop="departmentName"
            label="科室名称"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="departmentPhone"
            label="科室电话"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createUserName"
            label="创建人"
            align="center"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="name" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{
                parseTime(scope.row.createTime, "{yy}-{mm}-{dd}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isKeynoteSubject"
            label="是否重点学科"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.isKeynoteSubject === "1" ? "是" : "否" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isKeynoteEducation"
            label="是否重点专科"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.isKeynoteEducation === "1" ? "是" : "否" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="isFeatureEducation"
            label="是否特色专科"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.isFeatureEducation === "1" ? "是" : "否" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="220">
            <template slot-scope="scope">
              <el-button
                @click="addOrEditDepartment(scope.row.id)"
                type="primary"
                plain
                size="small"
                >编辑
              </el-button>
              <el-button
                @click="deleteDepartment(scope.row.id)"
                type="danger"
                plain
                size="small"
                :disabled="scope.row.children && scope.row.children.length > 0"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-area">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import searchArea from "@/components/searchArea/index";
import tableList from "@/mixins/tableList";
import FunctionalArea from "@/components/FunctionalArea/index";
import departmentAPI from "@/api/department";
import { parseTime } from "@/utils/index";

export default {
  mixins: [tableList], //表格列表相关属性和方法在mixin中
  components: { searchArea, FunctionalArea },
  data() {
    return {
      deleteWarnText: "是否删除该科室？",
      searchData: [
        {
          key: "departmentName",
          label: "科室名称",
          type: "input",
          value: "",
        },
        {
          key: "isKeynoteSubject",
          label: "是否重点学科",
          type: "select",
          optionsData: [
            { value: "0", label: "否" },
            { value: "1", label: "是" },
          ],
          value: "",
        },
        {
          key: "isKeynoteEducation",
          label: "是否重点专科",
          type: "select",
          optionsData: [
            { value: "0", label: "否" },
            { value: "1", label: "是" },
          ],
          value: "",
        },
      ],
      leftBtn: [
        {
          label: "新增",
          eventName: "addOrEditDepartment",
        },
      ],
      searchFormMultipleKey: [],
    };
  },
  watch: {},
  methods: {
    parseTime,
    afterInit() {
      console.log(this.listData);
    },
    initOption() {
      // this.getOrganizationAndChildren();
    },

    addOrEditDepartment(id) {
      let routePath = "departmentManagementDetail";
      // console.log("routePath: ", routePath);
      let params = !id ? {} : { id: id };
      // console.log("params: ", params);
      this.toInfo(routePath, params);
    },
    editUserJurisdiction(id) {
      this.toInfo("editUserJurisdiction", { id: id });
    },
    deleteDepartment(id) {
      this.deleteListItemById(id);
    },
  },
  mounted() {
    this.listMethod = departmentAPI.getDepartmentAndChildren;
    this.deleteMethod = departmentAPI.deleteDepartmentManagementById;
    // this.loginUser = JSON.parse(localStorage.getItem("mh_userInfo"));

    this.initOption();
    this.init();
    // this.getDepartureRecordAndUserExcel();
  },
};
</script>
<style scoped lang="scss">
.container {
  .tree {
    height: 700px;
    overflow: auto;
    .title-basic {
      margin: 10px;
    }
  }
  .table-list {
    box-sizing: border-box;
    padding: $main-inside-padding;
  }

  .obvious-box {
    background-color: $color-background-first;
  }

  .page-area {
    display: flex;
    justify-content: center;
    padding: $main-inside-padding;
  }
}
</style>
