<template>
    <ele-modal
      custom-class="ele-dialog-form long-dialog-form"
      :centered="true"
      :visible.sync="addOrEditDialogFlag"
      :title="title"
      :append-to-body="false"
      :close-on-click-modal="false"
      width="60%"
      :before-close="cancel"
      :maxable="true"
    :resizable="true"
    >
      <vue2-org-tree
        name="test"
        :data="data"
        :collapsable="true"
        horizontal="horizontal"
        :render-content="renderContent"
        @on-expand="onExpand"
        @on-node-click="onNodeClick"
      />
    </ele-modal>
  </template>
  <script>
  import { mapGetters } from 'vuex';

  
  export default {
    name: 'add-or-edit-dialog',
    components: {},
    props: {
      addOrEditDialogFlag: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapGetters(['user'])
    },
    data() {
      return {
        data: {
       
        },
  
        dialogType: '',
        title: '',
        form: {
          account: '',
          bankName: '',
          branchName: '',
          createTime: '',
          enabled: 1,
          id: '',
          remark: '',
          type: undefined
        },
        feeTypeList: [],
        accountingSubjectList: [],
        deptList: [],
        deptTreeList: [],
        rules: {
          type: { required: true, message: '请选择', trigger: 'change' },
          enabled: { required: true, message: '请选择', trigger: 'change' }
        }
      };
    },
    created() {},
    methods: {
      renderContent(h, data) {
        return (
        
          <div class="sss">
             <span class={data.type==1?'zaz':'ddd'}>{data.type==1?'公司':'部门'}</span>
            {data.label}</div>
        );
      },
      //初始化
      async init(row = {}, type) {
        this.title = type == 'add' ? '新增' : '修改';
        this.dialogType = type;
        if (type !== 'add') {
          await this.getFeeApplyInfoInfo(row.id);
        }
      },
      //获取详情
      async getFeeApplyInfoInfo(id) {
        this.form = await getSettlementAccountInfoAPI(id);
      },
      onExpand(e, data) {
        if ('expand' in data) {
          data.expand = !data.expand;
          if (!data.expand && data.children) {
            this.collapse(data.children);
          }
        } else {
          this.$set(data, 'expand', true);
        }
      },
      //点击选项执行的方法，可以用于跳转到其他链接，注意一定要写协议头
      onNodeClick(e, data) {
        //console.log(data.label);
        if (data.url == null) {
          return false;
        } else {
          window.open(data.url);
        }
      },
  
      handleSave(flag) {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return this.$message.warning('有必填项未填，请检查');
          const API =
            this.dialogType == 'add'
              ? settlementAccountSaveAPI
              : settlementAccountUpdateAPI;
          const id = await API(this.form);
          if (flag) {
            await this.handleSub(id);
          }
          this.$message.success('操作成功');
          this.done();
          this.cancel();
        });
      },
      //提交-开启流程
      async handleSub(id) {
        try {
          await settlementAccountSubmit({ businessId: id });
        } catch (e) {
          this.$message.error(e.message);
        }
      },
      //刷新主列表数据
      done() {
        this.$emit('reload');
      },
      //关闭弹窗
      cancel() {
        this.$emit('update:addOrEditDialogFlag', false);
      }
    }
  };
  </script>
  <style scoped lang="scss">
  @import '~vue2-org-tree/dist/style.css';
  </style>
  