<template>
  <a-row>
    <a-col :span="12">
      <a-card :bordered="false">
        <a-spin :spinning="spinning != 0">
          <a-tree
            :expandedKeys.sync="expandedKeys"
            checkStrictly
            checkable
            :showLine="true"
            :tree-data="treeData"
            :load-data="onLoadData"
            :checkedKeys="checkedKeys"
            @check="onCheck"
          />
        </a-spin>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card :title="locleUtil.getLocale('m.eform.formDesign.label.yi-xuan')" size="small" style="margin-left: 10px;">
        <ych-icon slot="extra" type="delete" @click="removeAll"/>
        <a-list :dataSource="checkedRows" size="small" bordered>
          <a-list-item slot="renderItem" slot-scope="item, index">
        <span>
          <span style="margin-right: 5px;">{{index+1}}</span>
          {{labelField ? item[labelField] : (item["_TITLE"] || '')}}
        </span>
            <ych-icon slot="actions" @click="remove(item)" type="delete"/>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

  import { postAction } from '../../utils/manage'
  import YchConstant from "../../utils/YchConstant";
  import locleUtil from "../../utils/LocleUtil";

  export default {
    name: 'TreeSelectRedirect',
    computed: {
      locleUtil() {
        return locleUtil
      }
    },
    components: {},
    props: {
      viewCode: String,
      multi: Boolean,
      rows: Array,
      keys: Array,
      labelField: String,
      stores: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        spinning: 0,
        treeData: [],
        expandedKeys: [],
        url: {
          queryTreeList: YchConstant.PREFIX_EFORM + '/engine/viewEngine/queryTreeList',
        },
        checkedKeys: {
          checked: this.keys
        },
        checkedRows: this.rows,
      }
    },
    created () {
      this.onLoadData()
    },
    methods: {
      onLoadData (treeNode) {
        return new Promise(resolve => {
          if (treeNode && treeNode.dataRef.children) {
            resolve()
            return
          }
          this.spinning++
          const parameter = {}
          if (treeNode) {
            parameter.treeShowId = treeNode.dataRef.attributes.treeShowId
            parameter.treeParameter = treeNode.dataRef.attributes.treeParameter
          }
          postAction(this.url.queryTreeList + '?viewCode=' + this.viewCode, parameter).then((res) => {
            if (res.success) {
              if (treeNode) {
                treeNode.dataRef.children = res.result
                this.treeData = [...this.treeData]
              } else {
                this.treeData = res.result
                this.expandedKeys = []
                this.setExpandedKeys(this.treeData || [])
              }
              resolve()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.spinning--
          })
        })
      },
      setExpandedKeys (treeData) {
        const that = this
        treeData.forEach(vo => {
          if (vo.children) {
            that.expandedKeys.push(vo.key)
            that.setExpandedKeys(vo.children)
          }
        })
      },
      onCheck (checkedKeys, info) {
        if (this.multi) {
          this.checkedKeys = checkedKeys
          this.checkedRows = info.checkedNodes.map(item => {
            const row = JSON.parse(item.data.props.dataRef.attributes.treeParameter)
            row["_KEY"] = item.key
            row["_TITLE"] = item.data.props.title
            return row
          })
        } else {
          this.checkedKeys = {
            checked: checkedKeys.checked.filter(id => this.checkedKeys.checked.indexOf(id) == -1)
          }
          this.checkedRows = []
          info.checkedNodes.forEach(item => {
            if (this.checkedKeys.checked.indexOf(item.key) != -1) {
              const row = JSON.parse(item.data.props.dataRef.attributes.treeParameter)
              row["_KEY"] = item.key
              row["_TITLE"] = item.data.props.title
              this.checkedRows.push(row)
            }
          })
        }
      },
      removeAll () {
        this.checkedKeys = {
          checked: []
        }
        this.checkedRows = []
      },
      remove (item) {
        // TODO 是否根据_KEY来判断
        this.checkedKeys = {
          checked: this.checkedKeys.checked.filter(id => id != item.id)
        }
        this.checkedRows = this.checkedRows.filter(vo => vo.id != item.id)
      }
    }
  }
</script>
