<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="计划名称" width="300" prop="id" fixed="left">
            <template #default="scope">
                <div class="price">{{ scope.row.plan_name }}</div>
                <span class="dec">计划ID：{{ scope.row.plan_id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="抖音核销金额(元)" prop="id">
            <template #header>
                <el-tooltip effect="dark" placement="top-start" content="成交金额带来的核销金额">
                    <div class="flex">抖音核销金额(元) <el-icon><el-icon-question-filled /></el-icon></div>
                </el-tooltip>
            </template>
            <template #default="scope">
                <span v-if="scope.row.done_money">{{ scope.row.done_money }}</span>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="成交金额(元)" prop="category_id">
            <template #header>
                <el-tooltip effect="dark" placement="top-start">
                    <template #content>除通过达人视频、直播直接下单的成交金额外，还包含消费者<br>看过达人视频后，通过抖音其他渠道下单的成交金额，例如搜索等。</template>
                    <div class="flex">成交金额(元) <el-icon><el-icon-question-filled /></el-icon></div>
                </el-tooltip>
            </template>
            <template #default="scope">
                <span v-if="scope.row.order_money">{{ scope.row.order_money }}</span>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="达人佣金(元)" prop="star_money">
            <template #default="scope">
                <span v-if="scope.row.star_money">{{ scope.row.star_money }}</span>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="订单量" prop="category_id">
            <template #default="scope">
                <span v-if="scope.row.order_num">{{ scope.row.order_num }}</span>
                <span v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="enable" width="120" align="center">
            <template #default="scope">
                <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 进行中</div>
                <div class="status-danger" v-if="scope.row.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 已取消</div>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_at" width="180"></el-table-column>
        <el-table-column label="操作" width="200" align="left" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button size="small" text @click="table_rate(scope.row)" v-if="scope.row.status == 1">修改佣金</el-button>
                    <el-button type="success" size="small" text @click="table_star(scope.row)" v-if="scope.row.status == 1">达人</el-button>
                    <el-button type="danger" text size="small" @click="table_close(scope.row)" v-if="scope.row.status == 1">关闭</el-button>
                    <el-button type="danger" text size="small" @click="table_del(scope.row)" v-if="scope.row.status == 2">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <formMain ref="formMain" @success="handleSuccess"></formMain>
    <editMain ref="editForm" @success="handleSuccess"></editMain>
</template>

<script>
import formMain from './form';
import editMain from './edit';
export default {
    components: {
        formMain,
        editMain
    },
    data(){
        return {
            list: {
                apiObj: this.$API.merPlan.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{}
        }
    },
    
    methods: {
        table_rate(data){
            this.$nextTick(() => {
                this.$refs.editForm.open("goods").setData(data)
            })
        },
        table_star(data){
            this.$nextTick(() => {
                this.$refs.editForm.open("star").setData(data)
            })
        },
        table_auth(data){
            this.$nextTick(() => {
                this.$refs.comboMain.open("edit").setData(data)
            })
        },
        table_update(data){
            this.$confirm(`更新后可能数据没有变化，确定更新该达人的基础数据吗？`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var resp = await this.$API.merStar.update.post({"id":data.id});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(()=>{})
        },
        table_del(data){
            this.$confirm(`删除后，所有该计划对应的数据将一并被删除`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var loading = this.$loading()
                var resp = await this.$API.merPlan.merPlan.post({"id":data.id});
                loading.close();
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(()=>{})
        },
        table_close(data){
            this.$confirm(`关闭该定向计划后，达人无法勾选对应商品进行直播`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                var loading = this.$loading()
                var resp = await this.$API.merPlan.close.post({"id":data.id});
                loading.close();
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$emit("success");
            }).catch(()=>{})
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
        table_passwd(row){
            this.$nextTick(() => {
                this.$refs.userPasswd.open("edit").setData(row)
            })
        }
    }
}
</script>

<style>
.goods-img{display: flex;gap: 5px;}
.goods-img .name span{display: block;}
.goods-img .name span.dec{color: #999;font-size: 12px;}
.goods-price,.price{display: flex;align-items: center;gap: 5px;font-size: 14px;}
.goods-price .del{text-decoration: line-through;}
.goods-price span{background-color: #fff !important;
    border: 1px solid #d3d9e0 !important;
    border-radius: 4px;
    box-sizing: border-box;
    color: #6c737a !important;
    display: inline-flex;
    flex: none;
    font-size: 12px;
    line-height: 18px !important;
    padding: 1px 6px !important;text-decoration: none;}
.flex{display: flex;align-items: center;gap: 5px;}
</style>