<template>
    <div>
      <mu-col :config="{span: 3}" class="card-item">
        <div class="card-border">
          <div class="title">{{ currentConfig.name }}</div>
          <mu-tree :config="treeConfig" v-model="data" :extension="(tree, value)=>{
            this.getCheckedNodes =  value.getCheckedNodes}"></mu-tree>
        </div>
      </mu-col>
      <mu-col :config="{span: 8}">
        <mu-textarea v-model="formValue" :config="{rows: '6', placeholder: '请输入内容', label:'js脚本'}"></mu-textarea>   
        <mu-btn :config="{text:'确定'}" @click="getNode"></mu-btn>
      </mu-col>
    </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
  // import { SelectTreeApi } from '@/api'

  interface SelectConfig {
    api: string,
    name: string,
    data: any
  }

  @Component({
    name: 'McTreeSelect'
  })
  export default class extends Vue {
    @Prop() private value: any;
    @Prop({ default: () => [] }) private config!: SelectConfig;
    @Prop() private extension?: (value: any) => void;
    private getCheckedNodes: Function | undefined;
    private defaultConfig: any = {
      name: ''
    };
    private formValue: string = '';
    private treeConfig: any = {
      name: "treeName",
      showCheckbox: true,
      nodeKey: "id",
      defaultExpandedKeys: [1, 11],
      nodeClick: (data, node) => {
        // 点击时候的值
        this.setTextarea(data, node)
      },
      checkChange: (data, node) => {
        // 选中时的值
        this.setTextarea(node, null)
      }
      /* sourceConfigs: [{
        "type": "load",
        "api": {
          serviceName: "maxbase-demo-provider",
          funcName: "department_search_GET",
          params: {},
          config: {}
        },
        "onSuccess": (ret) => {
          this.treeData = [{
            id: 1,
            label: '父节点',
            children: [{
              id: 31,
              label: '节点1-1',
              icon: "icon-user",
              children: [{
                id: 4,
                label: '节点1-1-1'
              }, {
                id: 5,
                label: '节点1-1-2',
                disabled: true
              }]
            }, {
              id: 21,
              label: '节点1-2',
              icon: "icon-user",
              children: [{
                id: 6,
                label: '节点1-2-1'
              }, {
                id: 7,
                label: '三级1-2-2',
                disabled: true
              }]
            }, {
              id: 31111,
              label: '节点1-3',
              icon: "icon-user"
            }]
          }, {
            id: 11,
            label: '父节点',
            children: [{
              id: 311,
              label: '节点1-1',
              children: [{
                id: 114,
                label: '节点1-1-1'
              }, {
                id: 115,
                label: '节点1-1-2',
                disabled: true
              }]
            }, {
              id: 211,
              label: '节点1-2',
              children: [{
                id: 61,
                label: '节点1-2-1'
              }, {
                id: 71,
                label: '三级1-2-2',
                disabled: true
              }]
            }, {
              id: 3211,
              label: '节点1-3'
            }]
          }]
        }
      }] */
    }
    private treeData: any = []
    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }
    mounted() {
      // if (!Array.isArray(this.currentConfig) && this.currentConfig.api) {
      //   this.getData()
      // }
    } 
    getData() {
      // CJavaScript/get-cJavaScript-tree
      // SelectTreeApi.getTreeData(this.config.api).then(ret => {
      //   // 处理树接口数据
      //   console.log(ret)
      //   if (ret.code === 0) {
      //     const { data } = ret.data;
      //     // 循环请求数据，添加进树节点数据中
      //     this.treeData = JSON.parse(JSON.stringify(data).replace(/remark/g, 'label'));
      //   }
      // })
    }
    setTextarea(data, node) {
      this.formValue = data.js
    }
    getNode() {
      const nodes = this.getCheckedNodes(); // 当前选中元素
      let iNow = 0;
      nodes.forEach(v => {
        if (v.js.trim() !== '') {
          iNow++
        }
      })
      if (nodes.length && nodes.length > 1 && iNow > 1) {
        this.$mc.Message('当前选中js脚本不能超过一条')
      } else {
        this.$emit('getNode', nodes[0])
      }
    }
  }
</script>

