<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;
}
.demo-infinite-container {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
}
.demo-loading-container {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
}
</style>
<style lang="scss" scoped>
.require-check {
  ::v-deep .ant-form-item-label {
    label::before {
      display: inline-block;
      margin-right: 4px;
      color: #f5222d;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
}
</style>
<template>
  <a-form-item
    label="项目名称"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    v-clickoutside="handleClose"
    style="width: 100%"
    class="select-table"
    :class="{ 'require-check': requireCheck }"
  >
    <a-input
      placeholder="请选择项目名称"
      @focus="topMiddle = true;getData(productId)"
      v-model="keyValue"
      @change="getData(productId)"
      :disabled="disabled"
    />
    <div
      v-show="topMiddle"
      v-infinite-scroll="handleInfiniteOnLoad"
      style="
        background: white;
        padding: 10px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
        position: absolute;
        z-index: 1000;
        width: 100%;
      "
      class="demo-infinite-container"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="80"
    >
      <a-list :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
          <a-list-item-meta :description="'广告主名称：' + item.advertiserName">
            <a slot="title">项目名称：{{ item.projectName }}</a>
          </a-list-item-meta>
          <div>
            {{
              item.mediaId == '1'
                ? '头条'
                : item.mediaId == '2'
                ? '快手'
                : item.mediaId == '3'
                ? '头条内广'
                : '快手内广'
            }}
          </div>
        </a-list-item>
        <div v-if="loading && !busy" class="demo-loading-container">
          <a-spin />
        </div>
      </a-list>
    </div>
  </a-form-item>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import { mapGetters } from 'vuex'
import jq from 'jquery'
import infiniteScroll from 'vue-infinite-scroll'
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__
  },
}
export default {
  name: 'select-pagination',
  components: {},
  directives: { clickoutside, infiniteScroll },
  props: {
    projectId: {
      type: [String, Number],
      default() {
        return ''
      },
    },
    type: {
      type: String,
      default() {
        return ''
      },
    },
    labelCol: {
      type: Object,
      default() {
        return {
          xs: { span: 24 },
          sm: { span: 5 },
        }
      },
    },
    disabled: {
      type: Boolean,
      default() {
        return false
      },
    },
    requireCheck: {
      type: Boolean,
      default() {
        return false
      },
    },
  },

  data() {
    return {
      taobaoSpecialOfferList: {
        advertiserId: 'fd41614705a047dd65ab0e34e9150cfe',
        advertiserName: ' 淘宝(中国)软件有限公司',
        createTime: '2021-03-03 10:15:30',
        designResponsibleName: '辛巴特',
        id: 3660879,
        maxBid: 30000,
        mediaId: '1',
        productId: 1410280,
        productName: '头条-淘宝特价版',
        projectId: 1530887,
        projectName: '头条-淘宝特价版',
        responsibleName: '董琪',
        roleCode: 'operator',
        saleId: null,
        saleName: null,
        updateTime: '2021-03-03 21:23:04',
        userId: 'a0d58df3392c4583b55ce3b041792aa7',
        userName: '王晓娟',
      },
      productId: '',
      loading: false,
      busy: false,
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      selectedRowKeys: [],
      selectedRowKeysValue: [],
      topMiddle: false,
      keyValue: '',
      data: [],
      dataElse: [],
      ipagination: {
        current: 0,
        pageSize: 20,
      },
      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: {
    showProject(record) {
      var str =
        record.mediaId == '1'
          ? '头条'
          : record.mediaId == '2'
          ? '快手'
          : record.mediaId == '3'
          ? '头条内广'
          : '快手内广'
      this.keyValue = record.projectName
      this.topMiddle = false
      this.$emit('update:projectId', record.projectId)
    },
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowKeysValue = selectionRows.map((item) => {
        return { orientationId: item.orientationId, orientationName: item.orientationName }
      })
    },
    getData(productId) {
      this.productId = productId
      if (this.keyValue == '') {
        this.$emit('update:projectId', '')
      }
      this.ipagination.current = 1
      getAction('/ctop/projectMember/participateListV2', {
        userId: this.userInfo().id,
        pageNo: this.ipagination.current,
        projectName: this.keyValue,
        productId: productId?productId:'',
      }).then((res) => {
        if (res.code == 0) {
          let defaultList = res.result.records.map((item, index) => {
            return {
              ...item,
              projectId: item.projectId + '',
              key: index,
            }
          })
          if (this.type === 'taobao') {
            this.data = defaultList.filter((item) => item.productId === 1410280)
          } else {
            this.data = defaultList
          }
          // this.dataElse = res.result.records.map((item, index) => {
          //   return {
          //     ...item,
          //     projectId: item.projectId + '',
          //     key: index,
          //   }
          // })
        }
      })
    },
    handleClose() {
      this.topMiddle = false
      if(!!!this.projectId){
        this.keyValue = ''
      }
    },
    // allData() {
    //   getAction('/ctop/projectMember/participateListV2', {
    //     userId: this.userInfo().id,
    //     pageSize: this.ipagination.pageSize,
    //     pageNo: this.ipagination.current,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.data = res.result.records.map((item, index) => {
    //         return {
    //           ...item,
    //           projectId: item.projectId + '',
    //           key: index,
    //         }
    //       })
    //       this.dataElse = res.result.records.map((item, index) => {
    //         return {
    //           ...item,
    //           projectId: item.projectId + '',
    //           key: index,
    //         }
    //       })
    //     }
    //   })
    // },
    handleInfiniteOnLoad() {
      const data = this.data
      this.loading = true
      this.ipagination.current++
      // this.fetchData((res) => {
      //   this.data = data.concat(res.results)
      //   this.loading = false
      // })
      getAction('/ctop/projectMember/participateListV2', {
        userId: this.userInfo().id,
        pageSize: this.ipagination.pageSize,
        pageNo: this.ipagination.current,
        projectName: this.keyValue,
        productId: this.productId?this.productId:null,
      }).then((res) => {
        if (res.code == 0) {
          this.busy = true
          let defaultList = res.result.records.map((item, index) => {
            return {
              ...item,
              projectId: item.projectId + '',
            }
          })
          this.data = data.concat()
          if (this.type === 'taobao') {
            this.data = defaultList.filter((item) => item.productId === 1410280)
          } else {
            this.data = data.concat(defaultList)
          }
          // this.data = res.result.records.map((item, index) => {
          //   return {
          //     ...item,
          //     projectId: item.projectId + '',
          //     key: index,
          //   }
          // })
          // this.dataElse = res.result.records.map((item, index) => {
          //   return {
          //     ...item,
          //     projectId: item.projectId + '',
          //     key: index,
          //   }
          // })
        }
      })
    },
  },
  watch: {
    projectId(n, o) {
      if (n == '') {
        this.keyValue = ''
      } else {
      }
    },
  },
  mounted: function () {
    // this.handleInfiniteOnLoad()
  },
}
</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>