<template>
  <div>

    <el-form>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="经济事项" width="220">
          <template slot-scope="scope">
            <el-checkbox
              label="scope.row.date"
              v-model="scope.row.checked"
              @change="checkChange(scope)"
            >{{scope.row.name}}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="英国公司(GBP)">
          <el-table-column label="上限" class-name="relateInputCol-left">
            <input type="input"  />
          </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "economics",
  data() {
    return {
      tableData: [
        {
          id: 1000,
          name: "费用报销",
          checked: false,
          children: [
            {
              id: 10001,
              name: "工资奖金支付",
              checked: false
            },
            {
              id: 10002,
              name: "人工成本",
              checked: false
            },
            {
              id: 10003,
              name: "员工借款",
              checked: false
            },
            {
              id: 10004,
              name: "管理费用",
              checked: false
            },
            {
              id: 10005,
              name: "审计费",
              checked: false
            },
            {
              id: 10006,
              name: "团建费",
              checked: false
            },
            {
              id: 10007,
              name: "业务招待费",
              checked: false
            },
            {
              id: 10008,
              name: "会议费",
              checked: false
            },
            {
              id: 10009,
              name: "通信费",
              checked: false
            },
            {
              id: 100010,
              name: "备用金",
              checked: false
            },
            {
              id: 100011,
              name: "其他业务费",
              checked: false
            },
            {
              id: 100012,
              name: "其他应付",
              checked: false
            },
            {
              id: 100013,
              name: "资产购置",
              checked: false
            },
            {
              id: 100014,
              name: "工程服务",
              checked: false
            }
          ]
        },
        {
          id: 1002,
          name: "财务",
          checked: false,
          children: [
            {
              id: 100201,
              name: "财务处理",
              checked: false,
              children: [
                {
                  id: 100202,
                  name: "财务核算专用",
                  checked: false
                }
              ]
            }
          ]
        },
        {
          id: 1003,
          name: "采购订单管理",
          checked: false,
          children: [
            {
              id: 100301,
              name: "订单付款及发票校验",
              checked: false
            }
          ]
        }
      ]
    };
  },
  methods: {
       // 扫描 table 数据，处理父级选中状态
    scan(obj, row) {
      var flag = true; // 父节点直属所有子节点都选中时值为 true ，反之为 false
      for (var i = 0; i < obj.length; i++) {
                // 如果当前行为点击行且为不选中状态，返回 false
                if(row.id === obj[i].id && !row.checked) {
                    return false;
                }
        if (!obj[i].checked) {
            // 所有子节点都选中，父级选中
          if (obj[i].hasOwnProperty("children") && this.scan(obj[i].children, row)) {
            obj[i].checked = true;
          } else {
            flag = false;
          }
        } else {
            // 子节点存在未选中，父级不选中
          if (obj[i].hasOwnProperty("children") && !this.scan(obj[i].children, row)) {
            flag = false;
                        obj[i].checked = false;
                        return flag;
          }
        }
      }
      return flag;
    },
    checkChange(scope) {
      if (scope.row.hasOwnProperty("children")) {
        this.handleCheckAll(scope.row, scope.row.checked);
      }

      this.scan(this.tableData);
    },
    handleCheckAll(row, checked) {
      row.checked = checked;
      if (row.hasOwnProperty("children")) {
        let that = this;
        row.children.forEach((element, i) => {
          that.handleCheckAll(row.children[i], checked);
        });
      }
    }
  }
};
</script>