<template>
  <div>
    <!-- 栏目选择框 -->
    <el-dialog :title="title" :visible.sync="isShow" @open="dialogOpen" append-to-body class="catalog-selector-dialog">
      <div class="dialog-body">
        <!-- 站点选择 -->
        <div v-if="this.site === 'Y'">
          <site-select @callback="siteSelectCallback"></site-select>
        </div>
        <catalog-selector-body :content-type="contentType" :select-type="inputType" :checked-ids="checkedIds" :catalog-id="catalogId" ref="selectorBody" class="catalog-tree"></catalog-selector-body>
      </div>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import siteSelectDialog from '../siteSelectDialog.vue'
import CatalogSelectorBody from './CatalogSelectorBody.vue'

export default {
  components: {
    'site-select': siteSelectDialog,
    'catalog-selector-body': CatalogSelectorBody
  },
  data() {
    return {
      siteID: null // 站点ID
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  props: {
    contentType: {
      default: ''
    },
    inputType: {
      default: 'radio'
    },
    checkedIds: {
      default: () => {
        return []
      }
    },
    catalogId: {
      type: [Number, String],
      default: ''
    },
    site: {
      default: ''
    },
    title: {
      default: '栏目选择'
    },
    show: {
      default: false
    }
  },
  methods: {
    // 弹框打开回调
    dialogOpen() {
      this.$nextTick(() => {
        this.$refs.selectorBody.init()
      })
    },
    // 站点选择回调
    siteSelectCallback(val) {
      this.siteID = val
    },
    // 确认按钮点击事件
    confirm() {
      this.$emit('callback', this.$refs.selectorBody.confirm())
      this.isShow = false
    }
  }
}
</script>
<style>
  /* 在一般情况下dialog宽为400像素，在逻辑分辨率480像素以下dialog宽为96% */
  .catalog-selector-dialog .el-dialog {
    width: 450px;
  }
  @media (max-width: 480px) {
    .catalog-selector-dialog .el-dialog {
      width: 96%;
    }
  }
</style>
<style scoped>
 .catalog-tree {
  height: 99%;
  width: 100%;
  overflow: auto;
}

.dialog-body {
  height: 400px;
  width: 100%;
  border: 1px solid #eee;
}
</style>
