<template>
  <div className="page">
    <LayoutTable ref="layoutTable" :data="tableData" notAdd :config="tableConfig"/>
    <dialog-show ref="dialogform" @ok="getData"/>

  </div>
</template>

<script>
import {handleTree} from "@/assets/utils/table";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import table from "@/assets/mixins/table";
import dialogShow from "./dialogshow";

export default {
  name: "Dept",
  mixins: [table],
  components: {Treeselect, dialogShow},
  created() {
  },
  methods: {
    afterRender(data) {
      data.data = handleTree(data.data, "id", "parentId");
      console.log("tree",data.data)
      this.deptOptions = data.data;
      this.$refs.layoutTable.showType = "treetable"
    },

    handleAdd(row) {
      this.$refs.dialogform.add(row, this.deptOptions);
    },

    /** 重写新增方法 */
    toAdd(row) {
      this.$refs.dialogform.add(row, this.deptOptions);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.loading = true;
      this.$post(this.pageInfo.exclude, {id: row.id})
          .then((res) => {
            if (res && res.code && res.code == 1) {
              this.deptOptions = handleTree(res.data.result);
              this.$refs.dialogform.edit(row, this.deptOptions);
              this.loading = false;
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.dialogform.view(row, this.deptOptions);
    },
  },
  data() {
    return {
      config: {
        /** 树表是否默认展开 */
        expand: true,
        showType: "treetable",
        search: [],
        columns: [
          {label: "部门名称", prop: "deptName"},
          {label: "部门编码", prop: "deptCode"},
          {label: "顺序", prop: "orderNum"},
          {label: "部门人数", prop: "personNum"},
          {label: "绩效分数", prop: "score", formatter: this.formatterMoney},

          {
            label: "操作",
            width: 280,
            formatter: row => {
              return (
                  <div>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit-outline"
                        onClick={() => {
                          this.handleAdd(row);
                        }}
                    >
                      新增
                    </el-button>
                    <table-buttons
                        noAdd
                        noView
                        row={row}
                        onEdit={this.toEdit}
                        onView={this.toView}
                        onDel={this.toDel}
                    />
                  </div>
              );
            }
          }
        ]
      }
    };
  }
};
</script>
<style lang="scss">
.ml-row {
  margin-bottom: 5px;
}

.el-radio-button__inner {
  // width: 82px;
  height: 36px;
  border-radius: 4px 0px 0px 4px;
  border: 1px solid rgba(0, 0, 0, 0) !important;
  border-radius: 2px !important;
  background-color: rgba(0, 0, 0, 0);
  font-size: 14px;
  font-weight: 400;
  color: #606677;
  line-height: 14px;
  outline: none;
  box-shadow: none;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: rgba(0, 0, 0, 0);
  border: 1px solid #3E7BFA !important;
  color: #3E7BFA;
  line-height: 14px;
  outline: none;
  box-shadow: none;
}

.ml-top-button {
  border-color: #ffffff;
  background: rgba(0, 0, 0, 0);
  font-size: 16px;
  margin: 0 10px 0 10px;
}
</style>
