<style lang="scss" scoped>
.search-box p {
  display: inline-block;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
}
#office-iframe {
  height: 800px;
}
</style>
<template>
  <a-row :gutter="10">
    <a-col :sm="10" style="margin-bottom: 20px;z-index: 10">
      <a-card class="search-box" style="min-height:500px">
        <div style="margin-bottom:30px">
          <span style="display:inline-block;width:80px">行业</span>
          <a-cascader
            style="margin-top: 1rem;width:300px"
            :options="options"
            :showSearch="{ filter }"
            expandTrigger="hover"
            @change="onChange"
            placeholder="请选择行业"
          >
            <a-icon type="smile" slot="suffixIcon" class="test" />
          </a-cascader>
        </div>
        <div style="margin-bottom:30px">
          <span style="display:inline-block;width:80px">关键词</span>
          <a-select
            showSearch
            :value="value"
            placeholder="input search text"
            style="width: 300px"
            :defaultActiveFirstOption="false"
            :showArrow="false"
            :filterOption="false"
            @search="handleSearch"
            @change="handleChange"
            :notFoundContent="null"
            allowClear
          >
            <!-- <a-select-opt-group>
               -->
            <a-select-option v-for="d in data" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
            <!-- </a-select-opt-group> -->
          </a-select>
        </div>
        <span style="display:inline-block;width:80px"></span>
        <a-button type="primary" @click="searchQuery" :disabled="value == undefined">生成</a-button>
      </a-card>
    </a-col>
    <a-col :sm="14" style="margin-bottom: 20px;z-index: 10">
      <a-card class="search-box" style="over-flow:auto">
        <a-list size="large" bordered :dataSource="title">
          <a-list-item slot="renderItem" slot-scope="item">{{ item }}</a-list-item>
        </a-list>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import $ from 'jquery'
import qs from 'qs'

export default {
  name: 'online-training-list',
  data() {
    return {
      options: [],
      data: [],
      value: undefined,
      dataOne: [],
      title: []
    }
  },
  components: {},
  methods: {
    searchQuery() {
      // /ctop/creativeTitle/titleSuggestion
      console.log(this.value)
      getAction('/ctop/creativeTitle/titleSearch', {
        firstCategory: this.dataOne[0],
        secondCategory: this.dataOne[1],
        keywords: this.value
      }).then(res => {
        console.log(res)
        this.title = res.result ? res.result : []
      })
      // firstCategory，secondCategory，keywords
    },
    getHangye() {
      getAction('/ctop/creativeTitle/getTitleLabel', '').then(res => {
        console.log(res)
        if (res.success) {
          this.options = res.result.map(item => {
            return {
              label: item.label,
              value: item.value,
              children:
                item.children.length > 0
                  ? [{ label: '不限', value: 0 }].concat(item.children)
                  : [{ label: '不限', value: 0 }]
            }
          })
          this.options = [{ label: '不限', value: 0 }].concat(this.options)
        }
      })
    },
    onChange(value, selectedOptions) {
      console.log(value, selectedOptions)
      this.dataOne = value
      this.value = undefined
    },

    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },

    handleSearch(value) {
      if (this.dataOne.length > 0) {
        const str = { firstCategory: this.dataOne[0], secondCategory: this.dataOne[1], keyword: value }
        getAction('/ctop/creativeTitle/titleSuggestion', str).then(d => {
          const result = d.result ? d.result : []
          this.data = result.map(item => {
            return {
              value: item,
              text: item
            }
          })
        })
      } else {
        this.data = []
        return
      }
    },
    handleChange(value) {
      console.log(value)
      this.value = value
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getHangye()
    })
  },
  created() {}
}
</script>
