<template>
  <div :style="{ width: record.options.width }">
    <a-button
      @click="fishFlag = true"
      type="primary"
    >打开鱼骨图</a-button>
    <ych-modal
      :fullscreen="false"
      :maskClosable="false"
      :visible="fishFlag"
      :footer="null"
      :bodyStyle="{
        height: '100%',
        overflow: 'hidden'
      }"
      @cancel="fishFlag = false"
      :destroyOnClose="true">
      <k-fish-bone
        :ref="record.tableName"
        v-bind="$attrs"
        :value="value"
        @change="changeValue"
        :recordConfig="record"
        :disabled="record.options.disabled"
      />
    </ych-modal>
  </div>
</template>
<script>


import KFishBone from "../KFishBone/KFishBone.vue";

export default {
  name: 'FishBone',
  data () {
    return {
      fishFlag: false,
      dataSource: [],
    }
  },
  components: {
    KFishBone
  },
  props: {
    record: {
      type: Object,
      required: true,
    },
    value: {
      type: String,
    },
    dictMap: {
      type: Object,
      default: () => {
      }
    },
  },
  methods: {
    changeValue(value){
      this.$emit('change', JSON.stringify(value))
      this.$emit('input', JSON.stringify(value))
    }
  }
}
</script>
