<template>
  <a-row :gutter="24" class="my-row">
    <a-col :span="16">
      <a-form-model-item
        :label-col="{span:9}"
        :wrapper-col="{span:15}"
        label="分类码引用"
      >
        <a-tree-select
          v-model="formValue.codeValue"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          placeholder="请选择分类码引用"
          @select="onClassSelect"
          :replaceFields="{children:'children', title:'catalogName', key:'catalogCode', value: 'catalogCode' }"
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-model-item>
    </a-col>

    <a-col :span="8">
      <a-form-model-item
        :label-col="{span:7}"
        :wrapper-col="{span:11}"
        label="分类码值"
      >
        <a-input v-model="formValue.codeValue" disabled />
      </a-form-model-item>
    </a-col>
  </a-row >
</template>

<script type="text/ecmascript-6">
import { getClassTreeApi } from '@/api/model/kindManger'
  export default {
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        treeData: [],
        formValue: this.value
      }
    },
    mounted() {
      this.getClassList()
    },
    methods: {
      getClassList() {
        getClassTreeApi().then((res) => {
          if (res.code === 200) {
            this.treeData = res.data.rows
          }
        })
      },
      onClassSelect(e) {
        setTimeout(() => { this.$emit('changeValue', this.formValue) }, 300)
      }
    }
  }
</script>

<style lang="less">
.ant-select-selection.ant-select-selection--single{
  // width: 40%;
}
.my-models{
  display: flex;
  // >div{
  //   width: 40%;
  // }
}
.my-row{
  .ant-col{
    height: 40px;
    // margin-bottom: 0;
    padding: 0;
  }
}
</style>
