<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>
    <div>
        <a-form-item
            label="关键字"
            v-clickoutside="handleClose"
            style="width: 100%"
            class="select-table"
            :class="{ 'require-check': requireCheck }"
        >
            <a-input
                @focus="
                    topMiddle = true
                    getData()
                "
                v-model="keyValue"
                @change="getData"
                :disabled="disabled"
                @keyup.enter.native="okWord"
                addon-after="选中后按回车键添加"
            />
            <div
                v-show="topMiddle"
                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"
            >
                <!-- <a-list :data-source="data">
                <a-list-item slot="renderItem" slot-scope="item" @click="showProject(item)">
                    <a-list-item-meta>
                        <a slot="title">{{ item.word }}</a>
                    </a-list-item-meta>
                </a-list-item>
                <div v-if="loading && !busy" class="demo-loading-container">
                    <a-spin />
                </div>
            </a-list> -->

                <a-checkbox-group
                    v-model="selectDescriptionArr"
                    style="width:100%;margin-top:10px"
                    v-on:keyup.enter.native="okWord"
                >
                    <a-list bordered :data-source="data" style="width:100%;max-height: 450px;overflow:auto">
                        <a-list-item slot="renderItem" slot-scope="item, index">
                            <a-checkbox :value="item.word">
                                {{ item.word }}
                            </a-checkbox>
                        </a-list-item>
                    </a-list>
                </a-checkbox-group>
            </div>
        </a-form-item>
        <a-table
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            bordered
            size="middle"
            style="word-break: break-all;font-size:16px;font-weight:600"
            id="outTable"
            ref="accountTable"
        >
            <span slot="query_word" slot-scope="text, record">
                {{ text }}
            </span>
            <span slot="recommended_word" slot-scope="text, record">
                {{ !!text[0] ? text.join() : '-' }}
            </span>
            <span slot="action" slot-scope="text, record">
                <a @click.stop="deleteScript(record)">删除</a>
            </span>
        </a-table>
    </div>
</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__
    }
}
let TTcolumns = [
    {
        title: '关键字',
        dataIndex: 'query_word',
        scopedSlots: { customRender: 'query_word' },
        align: 'center',
        key: 'query_word'
    },
    {
        title: '推荐词',
        dataIndex: 'recommended_word',
        scopedSlots: { customRender: 'recommended_word' },
        align: 'center',
        key: 'recommended_word'
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        key: 'action'
    }
]
export default {
    name: 'select-pagination',
    components: {},
    directives: { clickoutside, infiniteScroll },
    props: {
        projectId: {
            type: [String, Number, Array],
            default() {
                return []
            }
        },
        allScript: {
            type: [String, Number, Array],
            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 {
            loading: false,
            busy: false,
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 12 }
            },
            selectedRowKeys: [],
            selectedRowKeysValue: [],
            topMiddle: false,
            keyValue: '',
            data: [],
            selectDescriptionArr: [],
            dataElse: [],
            ipagination: {
                current: 0,
                pageSize: 20
            },
            columns: TTcolumns,
            dataSource: [],
            rowClick: (record, index) => ({
                // 事件
                on: {
                    click: () => {
                        // var str =
                        //   record.mediaId == '1'
                        //     ? '头条'
                        //     : record.mediaId == '2'
                        //     ? '快手'
                        //     : record.mediaId == '3'
                        //     ? '头条内广'
                        //     : '快手内广'
                        this.keyValue = record.productName
                        this.topMiddle = false
                        this.data = this.dataElse
                        // this.$emit('update:projectId', record.id)
                    }
                }
            })
        }
    },
    computed: {},
    filters: {},
    methods: {
        deleteScript(item) {
            var index = this.dataSource.findIndex(i=>i==item.query_word)
            this.dataSource.splice(index,1)
            var indexRemove = this.projectId.findIndex(i=>i==item.query_word)
            this.projectId.splice(indexRemove,1)
        },
        showProject(record) {
            var str =
                record.mediaId == '1'
                    ? '头条'
                    : record.mediaId == '2'
                    ? '快手'
                    : record.mediaId == '3'
                    ? '头条内广'
                    : '快手内广'
            this.keyValue = record.productName
            this.topMiddle = false
            this.$emit('update:projectId', record.id)
        },
        ...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.$emit('update:projectId', this.projectId)
            }
            if (!!this.keyValue) {
                this.topMiddle = true
                this.ipagination.current = 1
                postAction(process.env.VUE_APP_BASE_SCRIPT_URL + '/related_words/?word=' + this.keyValue).then(res => {
                    if (res.code == 0) {
                        this.data = res.result.map((item, index) => {
                            return {
                                productId: item,
                                key: index,
                                word: item
                            }
                        })
                        // 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,
                        //   }
                        // })
                    }
                })
            } else {
                this.data = []
                this.selectDescriptionArr = []
            }
        },
        okWord() {

            if (this.projectId.findIndex(item => item == this.keyValue) > -1) {
            } else {
                this.projectId.push(this.keyValue)
            }

            var index = this.dataSource.findIndex(item => item.query_word == this.keyValue)
            if (index > -1) {
                this.dataSource[index].recommended_word = this.selectDescriptionArr
            } else {
                this.dataSource.push({ query_word: this.keyValue, recommended_word: this.selectDescriptionArr })
            }
            this.keyValue = ''
            this.selectDescriptionArr = []
            
            this.$nextTick(()=>{
                setTimeout(()=>{
                    this.$emit('update:allScript', this.dataSource)
                },100)
                
            })
            
            this.handleClose()
        },
        handleClose() {
            this.topMiddle = false
            if (!!!this.projectId) {
                this.keyValue = ''
            }
        },
        // allData() {
        //   getAction('/ctop/product/getUserProductList', {
        //     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/product/getUserProductList', {
            //     userId: this.userInfo().id,
            //     pageSize: this.ipagination.pageSize,
            //     pageNo: this.ipagination.current,
            //     productName: this.keyValue
            // }).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() {}
}
</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>
