<template>
  <div>
    <el-dialog :title="title" :visible.sync="isShow" class="content-selector-dialog" @open="dialogOpen" @close="dialogClose" modal-class="page-bg-color" :append-to-body="true" :disguise-page="true">
      <div class="tab-content">
        <el-tabs class="tabs-wrap" v-model="tabActiveName" @tab-click="onRoleTabsClick">
          <el-tab-pane name="Normal">
            <span slot="label">一般</span>
            <common-content :siteID="siteID" :select-type="selectType" :from="from" :tab-name="tabActiveName" :catalogID="catalogID" @select="getCommonContentData" ref="commonContent" :clear-selection="clearSelection"></common-content>
          </el-tab-pane>
          <el-tab-pane name="Recommend" v-if="!special && blockShow">
            <span slot="label">推荐</span>
            <recommended-content-selector :siteID="siteID" :select-type="selectType" :blockID="blockID" :block-show="blockShow" :catalogID="catalogID" :tab-name="tabActiveName" @callback="getRecommendData" :cancel-selection="clearSelection"></recommended-content-selector>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import commonContent from './CommonContent.vue'
import recommendedContentSelector from '@src/pages/block/recommendedContentSelector.vue'

export default {
  data() {
    return {
      tabActiveName: 'Normal',
      selectedRows: [],
      selectedRow: {},
      clearSelection: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    dialogOpen() {
      this.$nextTick(() => {
        this.$refs.commonContent.init()
      })
    },
    getCommonContentData(data) {
      if (this.selectType === 'selection') {
        this.selectedRows = data
      } else {
        this.selectedRow = data
      }
    },
    getRecommendData(data) {
      if (this.selectType === 'selection') {
        this.selectedRows = data
      } else {
        this.selectedRow = data
      }
    },
    async onRoleTabsClick(tab) {
      this.tabActiveName = tab.name
    },
    async confirm() {
      if (this.selectType === 'selection') {
        this.$emit('callback', this.selectedRows)
      } else {
        if (this.accountId && String(this.accountId) !== '0') {
          let res = await axios.put(`/ui/mediaaccounts/${this.accountId}/verify/${this.selectedRow.ID}`)
          if (res.data.status !== 1) {
            util.showErrorMessageBox(res.data.message)
            return
          }
        }
        this.$emit('callback', this.selectedRow)
      }
      this.isShow = false
    },
    async dialogClose() {
      this.clearSelection = true
      await this.$nextTick()
      this.clearSelection = false
    }
  },
  props: ['show', 'siteID', 'selectType', 'from', 'title', 'special', 'blockID', 'blockShow', 'catalogID', 'accountId'],
  components: {
    'common-content': commonContent,
    'recommended-content-selector': recommendedContentSelector
  }
}
</script>
<style>
.content-selector-dialog .el-tabs__nav-wrap {
  padding-left: 10px;
}
</style>
<style scoped>
.tab-content {
  border: 1px solid #eee;
}
</style>
