<template>
    <div class="app-container">

        <div style="margin-bottom: -10px">
            <svg-icon icon-class="home" style="color: #606266" />
            <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
            <el-row>
                <el-col :span="4" class="table-cell-title">计划id(抖音侧 )</el-col>
                <el-col :span="4" class="table-cell-title">计划类型</el-col>
                <el-col :span="4" class="table-cell-title">计划名称</el-col>
                <el-col :span="4" class="table-cell-title">计划状态</el-col>
                <el-col :span="4" class="table-cell-title">联系人手机号</el-col>
                <el-col :span="4" class="table-cell-title">计划创建时间</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell">{{ palnInfo.planId }}</el-col>
                <el-col :span="4" class="table-cell">{{ palnInfo.planType == 1 ? '通用' : palnInfo.planType==3?'短视频定向':"直播间定向" }}</el-col>
                <el-col :span="4" class="table-cell">{{ palnInfo.planName }}</el-col>
                <el-col :span="4" class="table-cell">{{ planStatusMap[palnInfo.planStatus] }}</el-col>
                <el-col :span="4" class="table-cell">{{ palnInfo.merchantPhone }}</el-col>
                <el-col :span="4" class="table-cell">{{ palnInfo.planCreateTime }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell-title">计划带货场景</el-col>
                <el-col :span="4" class="table-cell-title">计划开始时间</el-col>
                <el-col :span="4" class="table-cell-title">计划结束日期</el-col>
                <el-col :span="4" class="table-cell-title">佣金有效期(天)</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="table-cell">{{ contentTypeMap[palnInfo.contentType] }}</el-col>
                <el-col :span="4" class="table-cell"> {{ palnInfo.planStartTime }}</el-col>
                <el-col :span="4" class="table-cell"> {{ palnInfo.planEndTime }}</el-col>
                <el-col :span="4" class="table-cell">{{ palnInfo.commissionDuration }} </el-col>
            </el-row>
        </div>


      <div v-if="palnInfo.total">
        <div style="margin-top: 20px" >
          <svg-icon icon-class="home" style="color: #606266" />
          <span class="font-small">汇总信息{{ palnInfo.total.queryDate }}</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="4" class="table-cell-title">抖音侧分佣计划id</el-col>
            <el-col :span="4" class="table-cell-title">数据产出日期</el-col>
            <el-col :span="4" class="table-cell-title">总带货gmv</el-col>
            <el-col :span="4" class="table-cell-title">达人分佣</el-col>
            <el-col :span="4" class="table-cell-title">已核销gmv</el-col>
            <el-col :span="4" class="table-cell-title">创建时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{ palnInfo.total.planId }}</el-col>
            <el-col :span="4" class="table-cell">{{ palnInfo.total.queryDate }}</el-col>
            <el-col :span="4" class="table-cell">{{ palnInfo.total.gmv }}</el-col>
            <el-col :span="4" class="table-cell">{{ palnInfo.total.talentCommission }}</el-col>
            <el-col :span="4" class="table-cell">{{ palnInfo.total.usedGmv }}</el-col>
            <el-col :span="4" class="table-cell">{{ palnInfo.total.createTime }}</el-col>
          </el-row>
        </div>
      </div>


        <div style="margin-top: 20px">
            <svg-icon icon-class="home" style="color: #606266" />
            <span class="font-small">达人信息</span>
            <br /><br />
        </div>
        <el-table :data="palnInfo.dyTalentList" border fit highlight-current-row>
            <el-table-column align="center" label="抖音侧达人id" prop="talentId" />
            <el-table-column align="center" label="达人昵称" prop="nickName" />
            <el-table-column align="center" label="达人手机" prop="tel" />
            <el-table-column align="center" label="状态" prop="tel" >
                <template slot-scope="scope">
                    {{ (scope.row.talentStaus==null||scope.row.talentStaus==1)?'生效中':'取消' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button v-permission="['GET /admin/dytalent/cancelPlanTalent']" type="text" icon="el-icon-edit"
                        v-if="palnInfo.planType == 3&&(scope.row.talentStaus==null||scope.row.talentStaus==1)" size="mini" @click="cancelDaren(scope.row,planId)">取消达人带货</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
            <svg-icon icon-class="home" style="color: #606266" />
            <span class="font-small">商品信息</span>
            <br /><br />
        </div>
        <el-table :data="palnInfo.goodsList" border fit highlight-current-row>
            <el-table-column align="center" label="抖音商品id" prop="productId" />
            <el-table-column align="center" label="自有商品编号" prop="goodsNo" />
            <el-table-column align="center" label="商品名称" prop="goodsName" />
            <el-table-column align="center" label="分佣率，万分位" prop="commissionRate" />
        </el-table>

        <div style="margin-top: 20px">
            <svg-icon icon-class="home" style="color: #606266" />
            <span class="font-small">各达人带货汇总</span>
            <br /><br />
        </div>
        <el-table :data="palnInfo.info" border fit highlight-current-row>
            <el-table-column align="center" label="计划id" prop="planId" />
            <el-table-column align="center" label="达人抖音号" prop="talentId" />
            <el-table-column align="center" label="达人抖音昵称" prop="nickName" />
            <el-table-column align="center" label="抖音侧数据产出日期" prop="queryDate" />
            <el-table-column align="center" label="带货gmv" prop="gmv" />
            <el-table-column align="center" label="带货的已核销gmv" prop="usedGmv" />
            <el-table-column align="center" label="直播间数量" prop="liveCnt" />
            <el-table-column align="center" label="短视频数量" prop="shortVideoCnt" />
            <el-table-column align="center" label="达人佣金" prop="talentCommission" />
            <el-table-column align="center" label="直播间&短视频总播放量" prop="planCnt" />
            <el-table-column align="center" label="插入时间" prop="createTime" />
        </el-table>

        <div style="margin-top: 20px">
            <svg-icon icon-class="home" style="color: #606266" />
            <span class="font-small">抖音分佣计划达人带货详情</span>
            <br /><br />
        </div>
        <el-table :data="palnInfo.detail" border fit highlight-current-row>
            <el-table-column align="center" label="分佣计划id" prop="planId" />
            <el-table-column align="center" label="数据产出日期" prop="queryDate" />
            <el-table-column align="center" label="达人抖音id" prop="talentId" />
            <el-table-column align="center" label="达人带货场景" prop="contentType">
                <template slot-scope="scope">
                    {{ contentTypeMap[scope.row.contentType] }}
                </template>
            </el-table-column>

            <el-table-column align="center" label="该短视频或直播间的带货gmv" prop="gmv" />
            <el-table-column align="center" label="加密过的短视频/直播间id" prop="contentOpenId" />
            <el-table-column align="center" label="观看人数" prop="playCnt" />
            <el-table-column align="center" label="已核销的gmv" prop="usedGmv" />
            <el-table-column align="center" label="达人的分润" prop="talentCommission" />
            <el-table-column align="center" label="插入时间" prop="createTime" />
        </el-table>

        <addDouYinDirectPlan @getDetail="getDetail" ref="addDouYinDirectPlan" />

    </div>
</template>
<script>
import {cancelPlanTalent, queryPlanDetail} from "@/api/dyApp";
import addDouYinDirectPlan from "./addDouYinDirectPlan.vue";

export default {
    name: "Coupon",
    components: {addDouYinDirectPlan},
    data() {
        return {
            contentTypeMap: {
                1: '仅短视频',
                2: '仅直播间',
                3: '短视频和直播间'
            },
            planStatusMap: {
                1: "进行中",
                2: "已完成",
                3: "已取消"
            },
            planId: this.$route.query.planId,
            palnInfo: {
                planId: null,
                planType: null,
                planName: null,
                planStatus: null,
                merchantPhone: null,
                planCreateTime: null,
                contentType: null,
                planStartTime: null,
                planEndTime: null,
                commissionDuration: null,
                total: {},//每日总汇总信息
                dyTalentList: [],//达人信息
                goodsList: [],//商品信息
                info: [],//各达人带货汇总
                detail: []//带货明细

            },
        }
    },
    created() {
        this.getDetail();
    },
    methods: {

        cancelDaren(row,planId) {
            //取消达人带货
            this.$confirm("取消达人需[达人未发布视频或发布视频已满一天],请先提交沟通后在取消达人,是否确认取消达人(" + row.nickName + ")带货?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                cancelPlanTalent({ planId:planId, talentId: row.talentId })
                    .then(() => {
                        this.$notify.success({
                            title: "成功",
                            message: "操作成功",
                        });
                        this.getDetail();
                    })
                    .catch((response) => {
                        this.$notify.error({
                            title: "失败",
                            message: response.data.errmsg,
                        });
                    });
            });
        },
        getDetail() {
            queryPlanDetail({ planId: this.planId }).then(res => {
                this.palnInfo = res.data.data;
                console.log(res.data.data);
            })
        },
    }
}
</script>
<style scoped>
.table-layout {
    margin-top: 20px;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
}

.table-cell {
    height: 40px;
    line-height: 20px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
}

.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>
