<template>
    <el-drawer v-model="visible" size="800px" destroy-on-close :close-on-click-modal="false" :with-header="false">
        <el-container class="flex-column">
            <div class="drawer-detail-main">
                <div class="drawer-detail-header">
                    <div class="drawer-detail-header-body">
                        <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
                        <div class="drawer-detail-header-left">
                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
                        </div>
                    </div>
                </div>
            </div>
            <el-main>
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-form-item label="计划名称" prop="plan_name">
                        <el-input v-model="formData.plan_name" readonly disabled clearable placeholder="请输入"></el-input>
                        <div class="el-form-item-msg"></div>
                    </el-form-item>
                    <el-form-item label="推广团购商品" v-if="mode == 'goods'">
                        <div class="flex-loading" v-if="loading && goodsData.length == 0">
                            <el-card shadow="never">
                                <el-skeleton :rows="5" animated></el-skeleton>
                            </el-card>
                            <el-card shadow="never" style="margin-top: 15px;">
                                <el-skeleton animated></el-skeleton>
                            </el-card>
                        </div>
                        <el-button type="default" @click="quickGoods" v-if="goodsData.length > 0">一键设置佣金</el-button>
                        <div class="goods-live" v-if="goodsData.length>0">
                            <scTable ref="starTable" :data="goodsData" row-key="id" height="500" hidePagination hideDo style="width: 750px;">
                                <el-table-column label="商品信息" width="340" prop="name" fixed="left">
                                    <template #default="scope">
                                        <div class="goods-img">
                                            <div class="img">
                                                <el-image 
                                                style="width: 54px; height: 54px"
                                                :src="scope.row.goods.image_list[0].url"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2"
                                                :preview-src-list="[scope.row.goods.image_list[0].url]"
                                                preview-teleported
                                                z-index="999"
                                                fit="cover"></el-image>
                                            </div>
                                            <div class="name">
                                                <span>{{ scope.row.goods.product_name }}</span>
                                                <span class="dec">商品编码：{{ scope.row.goods.product_id }}</span>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="佣金比例" prop="types" width="150">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.commission_rate" @input="setRate(scope.$index)" @focus="setRate(scope.$index)" placeholder="0%-29%">
                                            <template #suffix>%</template>
                                        </el-input>
                                        <div class="el-form-item-msg">预估每单佣金 {{ scope.row.rate_money }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="商品类型" prop="types" width="100">
                                    <template #default="scope">
                                        <span v-if="scope.row.goods.types">{{ scope.row.goods.types }}</span>
                                        <span v-else>不限</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="价格" width="200" prop="id">
                                    <template #default="scope">
                                        <div class="price">{{ $TOOL.moneyFormat(scope.row.goods.price) }}</div>
                                        <div class="goods-price">
                                            <div class="del">{{ $TOOL.moneyFormat(scope.row.goods.line_price) }}</div>
                                            <span>{{ $TOOL.disFormat(scope.row.goods.price,scope.row.goods.line_price) }}折</span></div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="剩余库存" prop="category_id" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.goods.limit_use_rule==1">{{ scope.row.goods.use_num_per_consume }}</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.goods.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                                        <div class="status-danger" v-if="scope.row.goods.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
                                        <div class="status-danger" v-if="scope.row.goods.status==0"><sc-status-indicator type="danger"></sc-status-indicator> 审核中</div>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </div>
                    </el-form-item>
                    <el-form-item label="指定带货达人" v-if="mode == 'star'">
                        <el-button type="default" @click="addStar" v-if="starData.length>0">添加达人（{{ starData.length }}/200）</el-button>
                        <div class="flex-loading" v-if="loading && starData.length == 0">
                            <el-card shadow="never">
                                <el-skeleton :rows="5" animated></el-skeleton>
                            </el-card>
                            <el-card shadow="never" style="margin-top: 15px;">
                                <el-skeleton animated></el-skeleton>
                            </el-card>
                        </div>
                        <div class="goods-live" v-if="starData.length>0">
                            <scTable ref="starTable" :data="starData" row-key="id" height="500" hidePagination hideDo style="width: 750px;">
                                <el-table-column label="达人" width="340" prop="name" fixed="left">
                                    <template #default="scope">
                                        <div class="goods-img">
                                            <div class="img">
                                                <el-image 
                                                style="width: 54px; height: 54px"
                                                :src="scope.row.star.avatar_url"
                                                :zoom-rate="1.2"
                                                :max-scale="7"
                                                :min-scale="0.2"
                                                :preview-src-list="[scope.row.star.avatar_url]"
                                                preview-teleported
                                                z-index="999"
                                                fit="cover"></el-image>
                                            </div>
                                            <div class="name">
                                                <span>{{ scope.row.star.show_nickname }}</span>
                                                <span class="dec">抖音号：{{ scope.row.star.unique_id }}</span>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="粉丝数" width="200" prop="id">
                                    <template #default="scope">
                                        <div class="price">{{ scope.row.star.fans_count }}</div>
                                        <div class="goods-price">
                                            <span v-for="value in scope.row.star.fans_tag_list">{{ value }}</span></div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="本地粉丝数" width="120" prop="id">
                                    <template #default="scope">
                                        <div class="price">{{ scope.row.star.local_fans_count }}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="视频带货力" prop="category_id" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.star.talent_item_level_display">{{ scope.row.star.talent_item_level_display }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="直播带货力" prop="talent_live_level_display" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.star.talent_live_level_display">{{ scope.row.star.talent_live_level_display }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="内容力" prop="category_id" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.star.content_level_display">{{ scope.row.star.content_level_display }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="信用分" prop="category_id" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.star.credit_score_display">{{ scope.row.star.credit_score_display }}</span>
                                        <span v-else>-</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="视频榜" prop="category_id" width="120">
                                    <template #default="scope">
                                        <span v-if="scope.row.star.rank_display">{{ scope.row.star.city_name }} 第{{ scope.row.star.rank_display }}名</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.star.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                                        <div class="status-danger" v-if="scope.row.star.status==2"><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" align="left" fixed="right">
                                    <template #default="scope">
                                        <el-button-group>
                                            <el-button type="danger" v-if="scope.row.id=='0'" text size="small" @click="removeStar(scope.$index)">删除</el-button>
                                            <el-button type="danger" v-else text size="small" :disabled="true">删除</el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </div>
                    </el-form-item>
                </el-form>
            </el-main>
            <el-footer>
                <el-button @click="visible=false" size="large">取 消</el-button>
                <el-button size="large" type="primary" :loading="isSaveing" @click="submitEdit()">保 存</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
    <starMain ref="starMain" :multiple="true" @success="handleStar"></starMain>
    <el-dialog title="一键设置佣金" v-model="quickData.visible" :width="460" append-to-body destroy-on-close :close-on-click-modal="false">
        <el-form ref="quickForm" :model="quickData.formData" :rules="quickData.rules" label-width="100px" label-position="top">
            <el-form-item label="输入后商品将设置相同佣金" prop="rate">
                <el-input v-model="quickData.formData.rate" clearable placeholder="0%-29%">
                    <template #suffix>%</template>
                </el-input>
                <div class="el-form-item-msg">佣金比例请设置在0%-29%之间</div>
            </el-form-item>
        </el-form>
		<template #footer>
            <el-button @click="quickData.visible=false" size="large">取 消</el-button>
            <el-button size="large" type="primary" :loading="quickData.isSaveing" @click="submitRate()">保 存</el-button>
		</template>
    </el-dialog>
</template>

<script>
import starMain from '@/views/merchant/components/star';
export default {
    components: {
        starMain
    },
    data(){
        return {
            quickData:{
                visible:false,
                rate:null,
                isSaveing:false,
                formData:{
                    rate:null
                },
                rules:{
                    rate: [
                        {required: true, message: '请输入'}
                    ],
                }
            },
            loading: false,
            isSaveing: false,
            mode:"add",
            titleMap:{
                goods:"修改计划商品佣金",
                star:"达人管理"
            },
            visible:false,
            formData:{
                status:1
            },
            goodsData:[],
            starData:[],
        }
    },
    methods:{
        quickGoods(){
            this.quickData.visible = true;
        },
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            this.goodsData = []
            this.starData = []
            this.getDetail()
        },
        async aloneSave(data){
            var loading = this.$loading()
            var resp = await this.$API.merPlan.goods.post({"id":this.formData.id,"commission_rate":data.commission_rate,"goods_id":data.goods.goods_id})
            loading.close();
            if (resp.code == 0) return this.$message.error(resp.msg);
            this.$message.success(resp.msg);
            this.getDetail()
        },
        async getDetail(){
            this.loading = true;
            var resp = await this.$API.merPlan.detail.get({"id":this.formData.id});
            this.loading = false;
            if (resp.code == 0) {
                this.visible = false;
                return this.$message.error(resp.msg);
            }
            var goodsData = resp.data.goods;
            goodsData.forEach((item)=>{
                item.rate_money = this.$TOOL.moneyFormat(parseFloat(item.commission_rate) * item.goods.price / 100);
            })
            this.goodsData = goodsData
            this.starData = resp.data.star
        },
        setRate(index){
            const goods = this.goodsData[index];
            if (parseFloat(goods.commission_rate) > 29) {
                this.goodsData[index].commission_rate = 0;
                this.goodsData[index].rate_money = 0;
                return ;
            }
            const rateMoney = this.$TOOL.moneyFormat(parseFloat(goods.commission_rate) * goods.goods.price / 100);
            this.goodsData[index].rate_money = rateMoney;
        },
        addStar(){
            this.$nextTick(() => {
                this.$refs.starMain.open("add")
            })
        },
        handleStar(data){
            var newData = [];
            data.forEach((value)=>{
                const has = this.starData.some(item => item['unique_id'] === value['unique_id'])
                if (!has) newData.push({"id":'0',"plan_id":this.formData.plan_id,"star":value,"unique_id":value.unique_id})
            })
            if (newData.length > 0) {
                this.starData = this.starData.concat(newData);
            }
        },
        removeStar(index){
            console.log("index",index)
            this.starData.splice(index,1);
        },
        async submitRate(){
            var validate = await this.$refs.quickForm.validate().catch(()=>{});
            if(!validate){ return false }
            if (parseFloat(this.quickData.formData.rate) > 29) {
                this.quickData.formData.rate = 0;
                return ;
            }
            this.quickData.isSaveing = true;
            var goodsData = this.goodsData;
            goodsData.forEach((item) =>{
                const rateMoney = this.$TOOL.moneyFormat(parseFloat(this.quickData.formData.rate) * item.goods.price / 100);
                item.rate_money = rateMoney;
                item.commission_rate = this.quickData.formData.rate;
            })
            this.goodsData = goodsData;
            this.quickData.isSaveing = false;
            this.quickData.visible = false;
        },
        async submitEdit(){
            const formData = {};
            if (this.mode == 'star') {
                formData.data = JSON.stringify(this.starData);
            }
            if (this.mode == 'goods') {
                formData.data = JSON.stringify(this.goodsData);
            }
            formData.id = this.formData.id;
            formData.type = this.mode
            var loading = this.$loading()
            this.isSaveing = true;
            var resp = await this.$API.merPlan.goods.post(formData)
            this.isSaveing = false;
            loading.close();
            if (resp.code == 0) return this.$message.error(resp.msg);
            this.$message.success(resp.msg);
            this.getDetail()
        }
    }
}
</script>

<style>
.goods-live{width: 100%;margin-top: 10px;}
.flex-loading{display: flex;flex-direction: column;flex: 1;}
</style>