<template>
  <div class="page_info">
    <div class="card_info">
      <div class="function_btn">
        <el-button
          v-if="$hasPermission('sys:region:save')"
          icon="el-icon-plus"
          type="primary"
          @click="addOrUpdateHandle()"
          >{{ $t("add") }}</el-button
        >
      </div>
      <div class="info_list">
        <el-table
          v-loading="dataListLoading"
          :data="dataList"
          row-key="id"
          lazy
          :load="load"
          :header-cell-style="{ background: '#e6e7ea', color: '#0C1935' }"
          style="width: 100%"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :height="screenHeight"
        >
          <el-table-column
            prop="name"
            label="区域名称"
            align="center"
            header-align="center"
            min-width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="区域标识"
            header-align="center"
            align="center"
            min-width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column
            prop="treeLevel"
            label="区域类型"
            align="center"
            header-align="center"
            min-width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.treeLevel === 1">{{
                $t("region.province")
              }}</span>
              <span v-else-if="scope.row.treeLevel === 2">{{
                $t("region.city")
              }}</span>
              <span v-else>{{ $t("region.county") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序"
            header-align="center"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="updateDate"
            label="更新时间"
            header-align="center"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="操作"
            :resizable="false"
            fixed="right"
            header-align="center"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-link
                v-if="$hasPermission('sys:region:update')"
                type="primary"
                :underline="false"
                @click="addOrUpdateHandle(scope.row.id)"
                >编辑</el-link
              >
              <el-link
                v-if="$hasPermission('sys:region:delete')"
                type="primary"
                :underline="false"
                @click="deleteHandle(scope.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-drawer
      size="25%"
      :visible.sync="drawer"
      :with-header="false"
      :modal="false"
      @close="closedrawer"
    >
      <add-or-update
        ref="addOrUpdate"
        @refreshDataList="getDataList()"
        v-if="addOrUpdateVisible"
      ></add-or-update>
    </el-drawer>
  </div>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./region-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      screenHeight: "666px",
      mixinViewModuleOptions: {
        getDataListURL: "/sys/region/list",
        deleteURL: "/sys/region",
      },
    };
  },
  components: {
    AddOrUpdate,
  },
  mounted() {
    this.setTableHeight();
    // 页面创建完成后添加监听
    window.addEventListener("resize", this.setTableHeight);
  },
  methods: {
    setTableHeight() {
      setTimeout(() => {
        this.screenHeight = getComputedStyle(
          document.querySelector(".info_list")
        ).height;
      }, 1000);
    },
    load(tree, treeNode, resolve) {
      this.$http
        .get(`/sys/region/list?pid=${tree.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          resolve(res.data);
        })
        .catch(() => {});
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.setTableHeight);
  },
};
</script>
<style lang="scss" scoped>
.card_info {
  height: calc(100% - 0px);
  .info_list{
    height: calc(100% - 1.15rem);
  }
}

</style>
