<template>
    <el-dialog title="达人选择" :visible.sync="dialogFormVisible" width="860px" :close-on-click-modal="false"
        :modal="true">
        <div class="filter-container">
            <!-- <el-select v-model="selectedProvider" clearable class="filter-item" style="width:360px" placeholder="请选择达运"
                filterable multiple>
                <template v-for="(item, index) in  providers">
                    <el-option :key="item.name" :label="item.name" :value="item.name" />
                </template>
</el-select> -->

            <el-input v-model="nickName" clearable class="filter-item" style="width: 200px;" placeholder="请输入达人昵称" />
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search"
                @click="handleFilter">查找</el-button>
            <!-- <el-button class="filter-item" size="small" type="primary" icon="el-icon-close"
                @click="handleClear">清除选中</el-button> -->
        </div>
        <div style="height: 500px;display: flex;flex-direction: row;">
            <el-table v-loading="listLoading" :data="listTalents" element-loading-text="正在查询中。。。" border fit
                highlight-current-row style="overflow-y: auto;">
                <el-table-column align="center" label="达运" sortable prop="operator" width="90"></el-table-column>
                <el-table-column align="center" label="达人Id" prop="talentId" width="120"></el-table-column>
                <el-table-column align="center" label="达人昵称" prop="nickName"></el-table-column>
                <!-- <el-table-column align="center" label="达人手机" prop="tel"></el-table-column> -->
                <el-table-column align="center" label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-plus" size="mini"
                            @click="handleSeletedTalent(scope.row)">添加
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="display: flex;align-items: center;font-weight: 600;margin: 0 10px;">=></div>
            <el-table v-loading="listLoading" :data="selected" element-loading-text="正在查询中。。。" border fit
                highlight-current-row @selection-change="handleSelectionChange">
                <el-table-column align="center" label="达人Id" prop="talentId" sortable width="120"></el-table-column>
                <el-table-column align="center" label="达人昵称" prop="nickName"></el-table-column>
                <el-table-column align="center" label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-remove" size="mini"
                            @click="handleDeleteTalent(scope.$index)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div style="height: 500px;overflow-y: auto;">
            <el-tree ref="tree" :data="list" :default-checked-keys="selected" show-checkbox node-key="id"
                highlight-current @check="handleCheckChange">
                <span slot-scope="{ node, data }" class="custom-tree-node">
                    <span>{{ data.name }}</span> 
                </span>
            </el-tree>
        </div> -->
        <div style="margin:5px 0;text-align: right;">选中<span style="font-weight: 600;color:red;">{{ selected.length
                }}</span>个达人
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmSelected">确定</el-button>
        </div>
    </el-dialog>
</template>


<script>
import { talentList, talentByPlan, selectOperator, selectTalnetByOperator } from "@/api/dyApp";
import Pagination from "@/components/Pagination";

export default {
    components: { Pagination },
    data() {
        return {
            nickName: '',//昵称筛选
            selectedProvider: [],
            listLoading: false,
            dialogFormVisible: false,
            list: [],
            listTalents: [],
            planId: null,
            providers: [],
            selected: [],
        };
    },
    created() {
        //this.getProviderList();
    },
    methods: {
        load(planId) {
            console.info(planId)
            //dialogFormVisible 必须放在nextTick 前面
            this.dialogFormVisible = true;
            if (planId == this.planId) return;
            this.planId = planId;

            this.getTalentByPlan(planId);
        },

        handleSeletedTalent(row) {
            if (this.selected.indexOf(row) >= 0) return;
            this.selected.push(row);
        },
        handleDeleteTalent(index) {
            console.log(index);
            this.selected.splice(index, 1);
        },
        handleClear() {
            this.$refs.tree.setCheckedKeys([]);
        },
        handleFilter() {
            if (this.selectedProvider.length == 0 && (this.nickName == null || this.nickName == '')) return;
            this.listLoading = true;
            selectTalnetByOperator({ operator: this.selectedProvider.join(','), nickName: this.nickName }).then(res => {
                this.listTalents = res.data.data;
                this.listLoading = false;
            })

        },
        confirmSelected() {
            if (this.selected.length == 0) {
                this.$notify.error({
                    title: "提醒",
                    message: "请至少选择一名达人",
                });
                return;
            }
            const selected = this.selected.map(item => { return item.talentId });
            this.$parent.confirmSelectTalent(selected);
            this.dialogFormVisible = false;
        },
        getTalentByPlan(planId) {
            if (planId == null || planId == '') {
                this.selected = [];
                this.$refs.tree.setCheckedKeys([]);
                return;
            }

            this.listLoading = true;
            talentByPlan({ planId: planId }).then(res => {
                this.listLoading = false;
                this.selected = res.data.data.map(x => x[1]);
            })
        },
        handleCheckChange() {
            this.selected = this.$refs.tree.getCheckedKeys(true);
        },
        getProviderList() {
            if (this.providers.length > 0) return;
            selectOperator().then(res => {
                this.list = res.data.data;
                this.providers = res.data.data;
            })
        },
    },
};
</script>
<style scoped>
>>>.el-dialog__body {
    padding: 15px 10px;
}

.pagination-container {
    margin: 0px !important;
    padding: 10px 0 16px;
}

.hand_title {
    font-size: 15px;
    font-weight: 700;
    color: #09afff;
    padding-left: 8px;
    margin: 15px 0px;
    margin-left: -10px;
}

.client-address,
.client-name,
.client-tel {
    font-size: 14px;
    color: #646464;
}

.row-mp {
    padding: 0px 15px;
    margin: 3px 0px;
    margin-bottom: 10px;
}

.tooltip-span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 300px;
}

.ticket-img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    margin: 20px;
}

.card {
    text-align: center;
    margin-top: 50px;
    position: fixed;
    bottom: 5px;
    width: 80%;
    border: 0px;
    background: transparent;
}

.ticket-img {
    margin: 1px;
}

.table-cell {
    height: 45px;
    line-height: 20px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    white-space: pre-wrap;
    /* overflow: hidden; */
}

.table-layout {
    margin-top: 10px;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    margin-bottom: 20px;
}

.table-cell-title {
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    background: #f2f6fc;
    text-align: center;
    font-size: 14px;
    color: #303133;
}
</style>