<style lang="scss" scoped>
#office-iframe {
    height: 800px;
}
.directional-border {
    border: 1px solid #f2f2f2;
    min-height: 250px;
    width: 100%;
    padding: 20px;
    ::v-deep.title-border {
        width: calc(100% + 40px);
        height:50px;
        line-height:50px;
        background:rgb(250,250,250);
        display: flex;
        align-items: center;
        margin-left: -20px;
        margin-top: -20px;
        padding: 20px;
    }
}
.flex-main {
    display: flex;
    margin-bottom: 10px;
    p {
        color: black;
        font-weight: 600;
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //溢出用省略号显示
        white-space:nowrap; //溢出不换行
    }
}

</style>
<style>
.info-detail .ant-descriptions-item-content {
    font-weight: bold;
}
.info-detail .ant-descriptions-item-label {
    color: darkgray;
    min-width: 80px;
}
.info-detail table tr td {
    border: 0;
}
.show-data p {
    color: black;
    font-weight: 600;
}
.show-data p span {
    display: inline-block;
    width: 85px;
    color: slategrey;
    font-weight: 500;
    
}
</style>
<template>
    <a-row :gutter="10">
        <a-spin :spinning="spinning">
            <a-col :sm="6" style="margin-bottom: 20px; z-index: 10">
                <a-card
                style="min-height: 100px"
                :style="{
                    width: (clientWidth / 24) * 6 - 10 + 'px',
                }"
                >
                    <video class="video" :src="url" controls="controls" style="width: 100%" v-if="url">
                        您的浏览器不支持 video 标签。
                    </video>
                    <img :src="noImg" alt="" v-else style="width: 100%" />
                </a-card>
            </a-col>
            <a-col :sm="18" style="margin-bottom: 20px; z-index: 10">
                <a-card class="info-detail" style="min-height: 200px">
                    <a-descriptions title="视频信息" v-if="materialInfo">
                        <a-descriptions-item label="素材标题">
                        {{ materialInfo.photoName ? materialInfo.photoName : '-' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="素材唯一编码">
                        {{ materialInfo.signature ? materialInfo.signature : '-' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="素材状态">
                        {{ materialInfo.status == 0 ? '可用' : '删除' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="素材渠道">
                        {{
                            materialInfo.channelType == 0 ? '内部' : '素造'
                        }}
                        </a-descriptions-item>
                        <a-descriptions-item label="上传时间">
                        <span v-if="materialInfo.createTime">
                            {{ materialInfo.createTime }}
                        </span>
                        <span v-else>-</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="同步时间">
                        {{ materialInfo.statDate ? materialInfo.statDate : '-' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="编导">
                        {{ materialInfo.planName ? (materialInfo.planName == '' ? '无' : materialInfo.planName) : '-' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="拍摄">
                        {{ materialInfo.shotName ? (materialInfo.shotName == '' ? '无' : materialInfo.shotName) : '-' }}
                        </a-descriptions-item>
                        <a-descriptions-item label="剪辑">
                        {{ materialInfo.clipName ? (materialInfo.clipName == '' ? '无' : materialInfo.clipName) : '-' }}
                        </a-descriptions-item>
                    </a-descriptions>
                </a-card>
                <a-card style="min-height: 300px; margin: 10px 0" class="info-detail">
                    <a-descriptions title="素材排期">
                        <a-descriptions-item  :span="3">
                            <span slot="label">
                                <a-tooltip title="当前素材仅可在设置日期内进行投放，其他时段不会投放此素材">
                                    <a-icon type="info-circle-o" />
                                </a-tooltip>
                                可用日期
                            </span>
                            <span  v-if="materialInfo&&materialInfo.putStartTime===''">
                                不限
                                <a @click="selectTime(null)">请选择</a>
                            </span>
                            <span  v-else-if="materialInfo&&materialInfo.putStartTime!==''">
                                {{materialInfo.putStartTime+'~'+materialInfo.putEndTime}}
                                <a @click="selectTime(materialInfo)">修改</a>
                            </span>
                            
                        </a-descriptions-item>
                    </a-descriptions>
                    <div
                        style="
                        margin-bottom: 20px;
                        color: rgba(0, 0, 0, 0.85);
                        font-weight: bold;
                        font-size: 16px;
                        line-height: 1.5;
                        "
                    >
                        素材定向
                    </div>

                    <div class="directional-border">
                        <a-row class="title-border">
                            <a-col :span="24" class="flex-main" style="justify-content: space-between;margin-bottom:0">
                                <div>
                                    <span class="ant-descriptions-item-label" style="color:black;font-weight:500"> 素材可用定向</span>
                                </div>
                                <a @click="addNewTemplate">编辑</a>
                            </a-col>
                        </a-row>
                        <a-row style="margin-top:10px">
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 地区:</span>
                                <div v-if="directionalInfo">
                                    <span v-if="directionalInfo.region == '' || directionalInfo.region == null||JSON.parse(directionalInfo.region).length==0"> 不限 </span>
                                    <div v-else>
                                        {{ region.join(',') }}
                                    </div>
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 年龄:</span>
                                <div v-if="directionalInfo">
                                    <span v-if="
                                    (directionalInfo.agesRange == '[]' || directionalInfo.agesRange == null) &&
                                    (directionalInfo.min == -1 || directionalInfo.min == null) &&
                                    (directionalInfo.max == -1 || directionalInfo.max == null)"> 不限 </span>
                                    <div v-else>
                                        <span v-if="directionalInfo.agesRange == '[]' || directionalInfo.agesRange == null">
                                        {{ directionalInfo.min + '岁~' + directionalInfo.max + '岁' }}
                                        </span>
                                        <span v-else>
                                            <span v-for="(item, index) in JSON.parse(directionalInfo.agesRange)" :key="index">
                                                {{ item | kuaishouAge }}{{ index == JSON.parse(directionalInfo.agesRange).length - 1 ? '' : ',' }}
                                            </span>
                                        </span>
                                    </div>
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                        </a-row>
                         <a-row>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 性别:</span>
                                <div v-if="directionalInfo">
                                     {{ directionalInfo.gender == 1 ? '女' : directionalInfo.gender == 2 ? '男' : '不限' }}
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 最低版本:</span>
                                <div v-if="directionalInfo">
                                    {{ directionalInfo.platformOs == 1 
                                    ? 'Android系统('+(directionalInfo.androidOsv==3?'不限)':directionalInfo.androidOsv+'x+)') : 
                                    directionalInfo.platformOs == 2 ? 'IOS系统('+(directionalInfo.iosOsv==6?'不限)':directionalInfo.iosOsv+'x+)') : '不限' }}
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                        </a-row>
                         <a-row>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 设备品牌:</span>
                                <div v-if="directionalInfo">
                                    <span v-if="directionalInfo.deviceBrand == '' || directionalInfo.deviceBrand == null ||JSON.parse(directionalInfo.deviceBrand).length == 0">
                                        不限
                                    </span>
                                    <span v-else>
                                        <span v-for="(item, index) in JSON.parse(directionalInfo.deviceBrand)" :key="index">
                                            {{ item | deviceBrand }}{{ index == JSON.parse(directionalInfo.deviceBrand).length - 1 ? '' : ',' }}
                                        </span>
                                    </span>
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 设备价格:</span>
                                <div v-if="directionalInfo">
                                    <span v-if="directionalInfo.devicePrice == '' || directionalInfo.devicePrice == null ||JSON.parse(directionalInfo.devicePrice).length == 0">
                                        不限
                                    </span>
                                    <span v-else>
                                        <span v-for="(item, index) in JSON.parse(directionalInfo.devicePrice)" :key="index">
                                            {{ item | kuaishouPrice }}{{ index == JSON.parse(directionalInfo.devicePrice).length - 1 ? '' : ',' }}
                                        </span>
                                    </span>
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                        </a-row>
                         <!-- <a-row>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> APP行为:</span>
                                <p title="-">-</p>
                            </a-col>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 商业兴趣:</span>
                                <p title="-">-</p>
                            </a-col>
                        </a-row> -->
                         <a-row>
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 网络环境:</span>
                                <div v-if="directionalInfo">
                                    {{ directionalInfo.network == 1 ? 'Wi-Fi' : directionalInfo.network == 2 ? '移动网络' : '不限' }}
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                             <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 过滤已转换用户:</span>
                                <div v-if="directionalInfo">
                                    {{ directionalInfo.filterConvertedLevel | kuaishouFilterConvertedLevel }}
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                        </a-row>
                         <a-row>
                            <!-- <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 兴趣视频用户:</span>
                                <p title="-">-</p>
                            </a-col> -->
                            <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 智能扩量:</span>
                                <div v-if="directionalInfo">
                                    {{ directionalInfo.isOpen == 0 ? '关闭' : '开启' }}
                                </div>
                                <p title="-" v-else>-</p>
                            </a-col>
                        </a-row>
                         <!-- <a-row>
                             <a-col :xl="12" :md="24" class="flex-main">
                                <span class="ant-descriptions-item-label"> 网红类别:</span>
                                <p title="-">-</p>
                            </a-col>
                        </a-row> -->
                    </div>
                </a-card>
                <a-card style="min-height: 300px; margin: 10px 0">
                    <div
                        style="
                        margin-bottom: 20px;
                        color: rgba(0, 0, 0, 0.85);
                        font-weight: bold;
                        font-size: 16px;
                        line-height: 1.5;
                        "
                    >
                        素材已关联账户  
                        <a-button type="primary" @click="lowerMaterial" :disabled="selectedRowKeysValue.length==0">下架素材</a-button>
                    </div> 
                    <a-table
                        size="middle"
                        :loading="loadingList"
                        :columns="columns"
                        :dataSource="dataList"
                        bordered
                        :scroll="{ x: 2000 }"
                        :pagination="ipagination"
                        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    >

                    </a-table>
                </a-card>
                <a-card style="min-height: 300px; margin: 10px 0">
                    <div
                        style="
                        margin-bottom: 20px;
                        color: rgba(0, 0, 0, 0.85);
                        font-weight: bold;
                        font-size: 16px;
                        line-height: 1.5;
                        "
                    >
                        素材关联被拒创意 
                        <a-button type="primary" @click="visibleAgain = true;type = 'all'" :disabled="selectedRowKeysCreative.length==0||accountId==''||accountId==null||accountId==undefined">批量重提</a-button>
                        <a-select
                            show-search
                            placeholder="请选择账户"
                            option-filter-prop="children"
                            style="width: 200px;margin-left:20px"
                            :filter-option="filterOption"
                            v-model="accountId"
                            @change="handleChange"
                            allowClear
                        >
                            <a-select-option v-for="(item,index) in accountList" :key="index"
                            :value="item.accountId">
                            {{item.authName}}
                            </a-select-option>
                        </a-select>
                    </div> 

                    <a-table
                        size="middle"
                        :loading="loadingCreative"
                        :columns="columnsCreative"
                        :dataSource="creativeList"
                        bordered
                        :pagination="ipaginationCreative"
                        :rowSelection="{ selectedRowKeys: selectedRowKeysCreative, onChange: onSelectChangeCreative }"
                    >
                        <span slot="action"  slot-scope="text, record">
                            <a  @click="again(record)">重提</a>
                        </span>
                        <span slot="coverUrl" slot-scope="text, record">
                            <img :src="text" alt="" style="width:100px">
                        </span>
                    </a-table>
                </a-card>
            </a-col>
        </a-spin>
        <a-modal 
            title="素材可用日期" 
            v-model="timeVisible" 
            :width="400" 
            @ok="handleOk"
            @cancel="timeVisible=false"
            :confirmLoading="editTimeLoading"
        >
            <a-form layout="inline">
                <a-form-item label="选择日期">
                    <a-radio-group v-model="timeSelsetData" button-style="solid">
                        <a-radio-button value="a">
                            不限
                        </a-radio-button>
                        <a-radio-button value="b">
                            指定日期
                        </a-radio-button>
                    </a-radio-group>
                    
                   
                </a-form-item>
                 <a-range-picker style="margin-top:15px" v-if="timeSelsetData === 'b'" format="YYYY-MM-DD" :disabled-date="disabledDate" v-model="dateRange">
                    </a-range-picker>
            </a-form>
        </a-modal>
        <a-modal title="一键重提" @cancel="handleClose" :visible="visibleAgain" @ok="handleOkAgain"
            :confirmLoading="againLoading"
            :width="650">
            <a-form :form="form">
                <a-form-item label="是否修改" :labelCol="{ lg: { span: 4 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
                <a-radio-group buttonStyle="solid" v-decorator="[
                'type',
                { initialValue: 0} ]">
                    <a-radio-button :value="0">否</a-radio-button>
                    <a-radio-button :value="1">是</a-radio-button>
                </a-radio-group>
                </a-form-item>
                <a-form-item label="广告语" :labelCol="{ lg: { span: 4 }, sm: { span: 6 } }"
                :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }" v-if="getData('type')==1">
                <a-input v-model="updateDescription" :max="10" :min="1" style="width:100%" @change="DescriptionChange">
                </a-input>
                </a-form-item>
            </a-form>
        </a-modal>
        <templateModal ref="templateModal" @getData="getDirectionalInfo" />
    </a-row>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import $ from 'jquery'
import qs from 'qs'
import UploadToAli from '@femessage/upload-to-ali'
import uploadFile from '@/components/uploadFile.vue'
import { mapActions, mapGetters, mapState } from 'vuex'
import templateModal from './components/templateModal';
var echarts = require('echarts')
export default {
    name: 'online-training-list',
    data() {
        return {
            accountId: undefined,
            accountList: [],
            type: 'one',
            form: this.$form.createForm(this),
            visibleAgain: false,
            updateDescription: '',
            noImg: require('@/assets/noImg.png'),
            materialInfo: null,
            dataView: null,
            clientWidth: 1920,
            spinning: false,
            scrollTopAll: 0,
            scrollTop: 124,
            mediaId: 0,
            url: JSON.parse(localStorage.getItem('materialDetail')).url,
            timeVisible: false,
            timeSelsetData: 'a',
            dateRange: [],
            editTimeLoading: false,
            useDirectional: 'noUse',
            directionalInfo: null,
            region: [],
            loadingList: false,
            columns: [
                {
                    title: '账户名称',
                    align: 'center',
                    dataIndex: 'authName',
                    fixed: 'left',
                    width: 150,
                    scopedSlots: {
                        customRender: 'authName',
                    },
                },
                {
                    title: '账户id',
                    align: 'center',
                    dataIndex: 'accountId',
                    fixed: 'left',
                    width: 150,
                    scopedSlots: {
                        customRender: 'accountId',
                    },
                },
                {
                    title: '被拒创意',
                    align: 'center',
                    dataIndex: 'rejectCount',
                    scopedSlots: {
                        customRender: 'rejectCount',
                    },
                },
                {
                    title: '同步时间',
                    align: 'center',
                    dataIndex: 'statDate',
                    scopedSlots: {
                        customRender: 'statDate',
                    },
                },
                {
                    title: '关联创意数',
                    align: 'center',
                    dataIndex: 'creativeCount',
                    scopedSlots: {
                        customRender: 'creativeCount',
                    },
                },
                {
                    title: '消耗',
                    align: 'center',
                    dataIndex: 'charge',
                    scopedSlots: {
                        customRender: 'charge',
                    },
                },
                {
                    title: '封面曝光数',
                    align: 'center',
                    dataIndex: 'photoShow',
                    scopedSlots: {
                        customRender: 'photoShow',
                    },
                },
                {
                    title: '封面点击数',
                    align: 'center',
                    dataIndex: 'photoClick',
                    scopedSlots: {
                        customRender: 'photoClick',
                    },
                },
                {
                    title: '素材曝光数',
                    align: 'center',
                    dataIndex: 'aclick',
                    scopedSlots: {
                        customRender: 'aclick',
                    },
                },
                {
                    title: '行为数',
                    align: 'center',
                    dataIndex: 'bclick',
                    scopedSlots: {
                        customRender: 'bclick',
                    },
                },
                {
                    title: '封面点击率',
                    align: 'center',
                    dataIndex: 'photoClickRatio',
                    scopedSlots: {
                        customRender: 'photoClickRatio',
                    },
                },
                {
                    title: '行为率',
                    align: 'center',
                    dataIndex: 'actionRatio',
                    scopedSlots: {
                        customRender: 'actionRatio',
                    },
                },
                {
                    title: '平均千次封面曝光花费（元）',
                    align: 'center',
                    dataIndex: 'impression1kCost',
                    scopedSlots: {
                        customRender: 'impression1kCost',
                    },
                },
                {
                    title: '平均封面点击单价（元）',
                    align: 'center',
                    dataIndex: 'photoClickCost',
                    scopedSlots: {
                        customRender: 'photoClickCost',
                    },
                },
                {
                    title: '平均行为单价（元）',
                    align: 'center',
                    dataIndex: 'actionCost',
                    scopedSlots: {
                        customRender: 'actionCost',
                    },
                }

            ],
            dataList: [],
            selectedRowKeys: [],
            selectedRowKeysValue: [],
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                    this.getAccountVideo();
                },
                total: 0,
            },

            creativeList: [],
            loadingCreative: false,
            columnsCreative: [
                {
                    title: '账户名称',
                    align: 'center',
                    dataIndex: 'authName',
                    scopedSlots: {
                        customRender: 'authName',
                    },
                },
                {
                    title: '账户ID',
                    align: 'center',
                    dataIndex: 'accountId',
                    width:100,
                    scopedSlots: {
                        customRender: 'accountId',
                    },
                },
                {
                    title: '关联创意ID',
                    align: 'center',
                    dataIndex: 'creativeId',
                    scopedSlots: {
                        customRender: 'creativeId',
                    },
                },
                {
                    title: '创意名称',
                    align: 'center',
                    dataIndex: 'creativeName',
                    scopedSlots: {
                        customRender: 'creativeName',
                    },
                },
                {
                    title: '素材封面',
                    align: 'center',
                    dataIndex: 'coverUrl',
                    scopedSlots: {
                        customRender: 'coverUrl',
                    },
                },
                {
                    title: '广告语',
                    align: 'center',
                    dataIndex: 'description',
                    scopedSlots: {
                        customRender: 'description',
                    },
                },
                {
                    title: '被拒理由',
                    align: 'center',
                    dataIndex: 'reviewDetail',
                    width:120,
                    scopedSlots: {
                        customRender: 'reviewDetail',
                    },
                },
                {
                    title: '操作',
                    align: 'center',
                    dataIndex: 'action',
                    width: 50,
                    scopedSlots: {
                        customRender: 'action',
                    },
                },
            ],
            selectedRowKeysCreative: [],
            selectedRowKeysValueCreative: [],
            selectedOneKeysValueCreative: [],
            againLoading: false,
            ipaginationCreative: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipaginationCreative.current = current
                    this.ipaginationCreative.pageSize = pageSize
                    this.getCreativeByVideo({})
                },
                total: 0,
            },

        }
    },
    components: {
        UploadToAli,
        uploadFile,
        templateModal
    },
    watch: {
    },
    methods: {
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        getData(className) {
            return this.form.getFieldValue(className)
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRowKeysValue = selectionRows.map((item) => {
                return item.accountId
            })
            //    this.selectedRowKeysValue.length > 0 ? this.selectedRowKeysValue :
        },
        onSelectChangeCreative(selectedRowKeys, selectionRows) {
            this.selectedRowKeysCreative = selectedRowKeys
            this.selectedRowKeysValueCreative = selectionRows.map((item) => {
                return {
                    description: item.description,
                    creativeId: item.creativeId
                }
            })
            //    this.selectedRowKeysValue.length > 0 ? this.selectedRowKeysValue :
        },
        getAccountVideo() {
            this.loadingList = true;
            var data = JSON.parse(localStorage.getItem('materialDetail'))
            let params = {};
            params.signature = data.md5;
            params.projectId = data.projectId;
            params.pageNo = this.ipagination.current;
            params.pageSize = this.ipagination.pageSize;
            this.getAction('/kuaishouProjectVideoGet/getAccountVideos', params).then(res => {
                this.loadingList = false;
                if(res.success) {
                    this.dataList = res.result.list;
                    this.ipagination.total = res.result.total;
                }
                else {
                    this.dataList = [];
                }
            })
        },
        getCreativeByVideo() {
            this.loadingCreative = true;
            var data = JSON.parse(localStorage.getItem('materialDetail'))
            let params = {};
            params.signature = data.md5;
            params.projectId = data.projectId;
            params.pageNo = this.ipaginationCreative.current;
            params.pageSize = this.ipaginationCreative.pageSize;
            params.accountId = this.accountId;
            this.getAction('/kuaishouProjectVideoGet/queryCreativeByVideo', params).then(res => {
                this.loadingCreative = false;
                if(res.success) {
                    this.creativeList = res.result.list;
                    this.ipaginationCreative.total = res.result.total;
                }
                else {
                    this.creativeList = [];
                }
            })
        },
        addNewTemplate() {
            if(this.directionalInfo) {
                this.$refs.templateModal.handleOk(this.directionalInfo, 'edit')
            }
            else {
                this.$refs.templateModal.create(null, 'add')
            }
           
        },
        disabledDate(current) {
            // Can not select days before today and today
            return current && current < moment().subtract(1, 'days')
        },
        getMaterialInfo() {
            var data = JSON.parse(localStorage.getItem('materialDetail'))
            this.spinning = true
            var params = {
                signature: data.md5,
                id: data.id
            }
            this.getAction('/kuaishouProjectVideoGet/getVideoDetails', params).then((res) => {
                if (res.success) {
                    if (res.result) {
                        this.materialInfo = res.result;
                        this.spinning = false;
                    } 
                    else {
                        this.$message.error(res.message);
                    }
                }
            })
        },
        getDirectionalInfo() {
            var data = JSON.parse(localStorage.getItem('materialDetail'))
            var params = {
                signature: data.md5,
                id: data.id
            }
            this.getAction('/kuaishouVideoDirectionalPackage/queryDirctional', params).then((res) => {
                if (res.success&&res.result) {
                    this.directionalInfo = res.result;
                    if (res.result&&(res.result.region == '' || res.result.region == null||JSON.parse(res.result.region).length==0)) {
                    } else {
                        this.showRegion(res.result.region)
                    }
                }
                 else {
                    this.$message.error(res.message);
                }
            })
        },
        showRegion(data) {
            return new Promise((resolve, reject) => {
                this.postDataAction('/kuaishou/batch/getRegionDetail', {
                    regionArr: data,
                }).then((res) => {
                    if (res.success) {
                        //   this.populationData.allForm.region = res.result
                        this.region = res.result.map((item) => {
                            return item.label
                        })
                    }
                })
            })
        },
        handleScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            this.scrollTop = scrollTop
        },
        handleChange() {
            this.ipaginationCreative.current = 1;
            this.selectedOneKeysValueCreative = [];
            this.selectedRowKeysValueCreative = [];
            this.selectedRowKeysCreative = [];
            this.getCreativeByVideo();
        },
        selectTime(item) {
            if(item) {
                if(item.putStartTime!='') {
                    this.timeSelsetData = 'b';
                    this.dateRange = [moment(item.putStartTime), moment(item.putEndTime)];
                } 
                else {
                    this.timeSelsetData = 'a';
                    this.dateRange = [];
                }
            }
            else {
                this.timeSelsetData = 'a';
                this.dateRange = [];
            } 
            this.timeVisible = true;
            
        },
        handleOk() {
            let data = JSON.parse(localStorage.getItem('materialDetail'))
            this.editTimeLoading = true;
            let params = {};
            params.id = data.id
            if(this.timeSelsetData === 'a') {
                params.putStartTime = '';
                params.putEndTime = '';
            }
            else {
                if(this.dateRange.length === 0) {
                    this.$message.error('请选择指定日期');
                    this.editTimeLoading = false;
                    return
                }
                params.putStartTime = moment(this.dateRange[0]).format('YYYY-MM-DD');
                params.putEndTime = moment(this.dateRange[1]).format('YYYY-MM-DD');;
            }
            this.postDataAction('/kuaishouProjectVideoGet/edit', params).then(res => {
                if(res.success) {
                    this.editTimeLoading = false;
                    this.$message.success('修改成功');
                    this.timeVisible = false;
                    this.getMaterialInfo();
                }
                else {
                    this.editTimeLoading = false;
                    this.$message.error(res.message);
                }
            })
        },
        lowerMaterial() {
            let data = JSON.parse(localStorage.getItem('materialDetail'))
            let params = {};
            params.projectId = data.projectId;
            params.accountId = this.selectedRowKeysValue;
            params.signature = data.md5;
            this.postDataAction('/kuaishouProjectVideoGet/offShelfVideos', params).then(res => {
                if(res.success) {
                    this.getAccountVideo();
                    this.selectedRowKeysValue = [];
                    this.selectedRowKeys = []
                }
            })
            // /kuaishouProjectVideoGet/offShelfVideos
        },
        again(item) {
            this.visibleAgain = true;
            this.type = "one"
            this.selectedOneKeysValueCreative = [{
                description: item.description,
                creativeId: item.creativeId,
                accountId: item.accountId
            }]
        },
        DescriptionChange(e) {
            if (e.target.value.length > 30) {
                this.$message.error('广告语最多30字！')
            }
        },
        handleClose(e) {
            this.visibleAgain = false;
            this.updateDescription = '';
            this.form.resetFields();
        },
        getAccountList() {
            let data = JSON.parse(localStorage.getItem('materialDetail'))
            let params = {};
            params.projectId = data.projectId;
            this.getAction('/ctop/userAllocation/queryAccountIdsByProjectId', params).then(res => {
                if(res.success) {
                    this.accountList = res.result;
                }
            })
        },
        handleOkAgain() {
            if (this.updateDescription.length > 30 && this.getData('type') == 1) {
                this.$message.error('广告语最多30个字，请修正后再次提交！')
            } else {
                this.againLoading = true
                this.form.validateFields((err, values) => {
                    if (!err) {
                    values.updateDescription = this.updateDescription;
                    var params = {
                        ...values,
                        accountId: this.type=='one'?this.selectedOneKeysValueCreative[0].accountId:this.accountId,
                        creativeArr: this.type=='one'?this.selectedOneKeysValueCreative:this.selectedRowKeysValueCreative
                    }
                    this.postDataAction('/MaterialRefuse/batchUpdateCreative', params).then(res => {
                        if (res.success) {
                            // this.visibleFail = true
                            this.visibleAgain = false;
                            this.updateDescription = '';
                            this.handleClose();
                            this.selectedOneKeysValueCreative = [];
                            this.selectedRowKeysValueCreative = [];
                            this.selectedRowKeysCreative = [];
                            this.ipaginationCreative.current = 1;
                            this.getCreativeByVideo();
                            this.againLoading = false;
                            this.$message.success(res.message);
                        } else {
                            this.againLoading = false
                            this.$message.error(res.message)
                        }
                    })
                    }
                })
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            //   this.mediaId = JSON.parse(localStorage.getItem('videoInfo')).mediaId
            window.addEventListener('scroll', this.handleScroll);
            this.clientWidth = document.documentElement.clientWidth - 224;
            //   this.$route.query.mediaId
            //   this.$route.query.md5
            this.getMaterialInfo();
            this.getDirectionalInfo();
            this.getAccountVideo();
            this.getCreativeByVideo();
            this.getAccountList()

        })
    },
    created() {},
}
</script>