<style>
.select-table .ant-table-thead > tr > th,
.select-table .ant-table-tbody > tr > td {
  padding: 0 !important;
}
.select-table .ant-table {
  font-size: 12px;
}
</style>
<template>
  <a-form-item
    label="项目名称"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    v-clickoutside="handleClose"
    style="width:100%"
    class="select-table"
  >
    <a-input placeholder="请选择项目" @focus=";(topMiddle = true), allData()" v-model="keyValue" @change="getData" />
    <div
      style="background:white;padding:10px;box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);position:relative;z-index:1000"
      v-if="topMiddle"
    >
      <a-table
        :showHeader="false"
        :columns="columns"
        :dataSource="data"
        bordered
        :pagination="false"
        :scroll="{ y: 300 }"
        :customRow="rowClick"
      >
        <span slot="mediaId" slot-scope="text">{{ text == '1' ? '头条' : text == '2'? '快手':text == '3'?'头条内广':'快手内广' }}</span>
      </a-table>
    </div>
  </a-form-item>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import { mapGetters } from 'vuex'
import jq from 'jquery'
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = documentHandler
    document.addEventListener('click', documentHandler)
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}
const columns = [
  {
    title: '',
    dataIndex: 'projectName',
    align: 'center'
  },
  {
    title: '',
    dataIndex: 'mediaId',
    scopedSlots: { customRender: 'mediaId' },
    width: 80,
    align: 'center'
  },

  {
    title: '',
    dataIndex: 'advertiserName',
    align: 'center'
  }
]
export default {
  name: 'BaseForm',
  components: {},
  directives: { clickoutside },
  props: {
    projectId: {
      type: String,
      default() {
        return ''
      }
    }
  },

  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      selectedRowKeys: [],
      selectedRowKeysValue: [],
      topMiddle: false,
      keyValue: '',
      columns,
      data: [],
      dataElse: [],
      rowClick: (record, index) => ({
        // 事件
        on: {
          click: () => {
            var str = record.mediaId == '1' ? '头条' : record.mediaId == '2'? '快手':record.mediaId == '3'?'头条内广':'快手内广'
            this.keyValue = record.projectName + ' ' + str
            this.topMiddle = false
            this.data = this.dataElse
            this.$emit('update:projectId', record.projectId)
          }
        }
      })
    }
  },
  computed: {},
  filters: {},
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowKeysValue = selectionRows.map(item => {
        return { orientationId: item.orientationId, orientationName: item.orientationName }
      })
    },
    getData() {
      if (this.keyValue != '') {
        this.data = this.dataElse.filter(item => {
          return item.projectName.toLowerCase().indexOf(this.keyValue.toLowerCase()) > -1
        })
      }
    },
    handleClose() {
      this.topMiddle = false
    },
    allData() {
      getAction('/ctop/projectMember/participateList', { userId: this.userInfo().id }).then(res => {
        if (res.code == 0) {
          this.data = res.result.map((item, index) => {
            return {
              ...item,
              projectId: item.projectId + '',
              key: index
            }
          })
          this.dataElse = res.result.map((item, index) => {
            return {
              ...item,
              projectId: item.projectId + '',
              key: index
            }
          })
        }
      })
    }
  },
  watch: {
    projectId(n, o) {
      if (n == '') {
        this.keyValue = ''
      } else {
      }
    }
  },
  mounted: function() {
    this.allData()
  }
}
</script>

<style type="text/css">
.plug-timer-grid {
  width: 100%;
}

.plug-timer-grid td,
.plug-timer-grid th {
  border: 1px solid #97b4d1;
  text-align: center; /*cursor:pointer;*/
  font-size: 10px;
  line-height: 10px;
}

.Selected {
  background-color: rgb(102, 162, 243);
  opacity: 0.5;
}

.plug-timer-grid {
  border-collapse: collapse;
  z-index: 4;
}

.plug-timer-grid thead tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

.group-creat table td {
  height: 20px;
  max-width: 5px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
}

.plug-timer-grid tbody th {
  width: 4%;
}

.plug-timer-grid tbody tr td {
  width: 2%;
}

/*.clear{*/
/*  margin:20px 0px 20px 0px;*/
/*}*/
</style>