<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dept">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-button
            v-if="$hasPermission('sys:dept:save')"
            type="primary"
            plain
            icon="el-icon-plus"
            @click="addOrUpdateHandle()"
            >{{ $t("add") }}</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        row-key="id"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          :label="$t('dept.name')"
          header-align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="parentName"
          :label="$t('dept.parentName')"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="deptType"
          :formatter="formatter"
          :label="$t('dept.deptType')"
          header-align="center"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="sort"
          :label="$t('dept.sort')"
          header-align="center"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          :label="$t('handle')" :resizable="false"
          fixed="right"
          header-align="center"
          align="center"
         
        >
          <template slot-scope="scope">
           <el-tooltip :content=' $t("add") + $t("dept.deptType" + ((scope.row.deptType == null? -1 : parseInt(scope.row.deptType)) +1) )' effect="light">  
             <el-button
              v-if="
                $hasPermission('sys:dept:addChild') &&
                (scope.row.deptType == null
                  ? -1
                  : parseInt(scope.row.deptType)) +
                  1 <
                  3
              "
              type="text"
               icon="el-icon-plus"
              @click="addChildHandle(scope.row)"
              ></el-button
            ></el-tooltip>
              <el-tooltip content="编辑" effect="light">
            <el-button
              v-if="$hasPermission('sys:dept:update')"
              type="text"
              @click="addOrUpdateHandle(scope.row.id)"
              ></el-button
            ></el-tooltip>
            <el-tooltip content="删除" effect="light">
            <el-button
              v-if="$hasPermission('sys:dept:delete')"
              type="text"
              @click="deleteHandle(scope.row.id)"
              ></el-button
            >    </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
      ></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./dept-add-or-update";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/sys/dept/list",
        deleteURL: "/sys/dept",
      },
    };
  },
  components: {
    AddOrUpdate,
  },
  methods: {
    formatter(row, column) {
      return this.$t('dept.deptType' + (row.deptType == null ? "Null" : row.deptType));
    },
    addChildHandle(row, id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id;
        this.$refs.addOrUpdate.parentData = row;

        this.$refs.addOrUpdate.init()
      })

    }
  },
};
</script>
