<template>
  <basic-container>
    <avue-crud
      v-model="form"
      :option="option"
      :data="data"
      ref="crud"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
    >
      <template slot="icon" slot-scope="scope">
        <i :class="scope.row.icon" style="font-size: 24px"></i>
      </template>
      <template slot="menu" slot-scope="{ row, size, type }">
        <el-button :size="size" :type="type" @click="handleAdd(row)">
          新增子级
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>
<script>
import { getList } from "@/api/basicResource/subjectSetting";

export default {
  data() {
    return {
      parentId: undefined,
      form: {},
      data: [],
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        searchLabelWidth: 140,
        labelWidth: 140,
        menuWidth: 290,
        dialogClickModal: false,
        dialogWidth: 500,
        dialogType: "drawer",
        rowKey: "id",
        rowParentKey: "parentId",
        defaultExpandAll: true,
        tree: true,
        column: [
          {
            label: "科目代码",
            prop: "code",
            type: "input",
            span: 24,
            search: true,
            width: 200,
            showOverflowTooltip: true,
            rules: [
              {
                required: true,
                message: "请输入科目代码",
                trigger: "blur",
              },
            ],
          },
          {
            label: "科目名称",
            prop: "name",
            type: "input",
            span: 24,
            minWidth: 160,
            search: true,
            showOverflowTooltip: true,
            rules: [
              {
                required: true,
                message: "请输入科目名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "会计科目",
            prop: "accSubject",
            type: "input",
            span: 24,
            minWidth: 160,
            search: true,
            showOverflowTooltip: true,
          },
          {
            label: "高新研发费用科目",
            prop: "rdSubject",
            type: "input",
            span: 24,
            minWidth: 160,
            search: true,
            showOverflowTooltip: true,
          },
          {
            label: "加计扣除研发费用科目",
            prop: "adSubject",
            type: "input",
            span: 24,
            minWidth: 160,
            search: true,
            showOverflowTooltip: true,
          },
        ],
      },
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      getList().then(res => {
        console.log(res)
        if (res.data.code == 200) {
          const loopData = data => {
            return data.map(item => {
              item.hasChildren = item.children && item.children.length ? false : true;
              if (item.children && item.children.length) {
                loopData(item.children);
              }
              return item;
            });
          }
          this.data = loopData(res.data.data);
          console.log(this.data)
          // this.data = res.data.data.map(item => {
          //   item.children = item.children || [];
          //   delete item.hasChildren;
          //   return item;
          // });
          // console.log(this.data)
        }
      })
    },
    rowDel(row, index, done) {
      done(row);
    },
    rowSave(row, done) {
      row.parentId = this.parentId;
      row.id = new Date().getTime();
      this.parentId = undefined;
      done(row);
    },
    rowUpdate(row, index, done) {
      done(row);
    },
    handleAdd(row) {
      this.parentId = row.id;
      this.$refs.crud.rowAdd();
    },
  },
};
</script>