<template>
  <div class="directional-content">
    <a-card style="width: 100%"> 
        <div class="table-page-search-wrapper">
            <a-form layout="inline"  :form="form"
                hide-required-mark :selfUpdate="true" 
                @submit="handleQueryList">
                <a-row :gutter="24">
                     <a-col :md="8" :sm="8" :xxl="6">
                        <!-- <a-form-item label="项目名称"> -->
                        <selectTable :projectId.sync="projectId" ref="selectTable" :requireCheck="false"></selectTable>
                    </a-col>
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item label="唯一编码">
                            <a-input
                                v-decorator="['signature']" type="text"
                                placeholder="请输入想要搜索的素材md5"
                            />
                        </a-form-item>
                    </a-col>
                    <!--  -->
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item label="素材状态">
                            <a-select
                                v-decorator="['status',{initialValue:''}]"
                                placeholder="请选择"
                                allow-clear
                            >
                                <a-select-option :value="''">不限</a-select-option>
                                <a-select-option :value="0">可用</a-select-option>
                                <a-select-option :value="1">删除</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                     <!--  -->
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item label="素材渠道">
                            <a-select
                                v-decorator="['channelType',{initialValue:''}]"
                                placeholder="请选择"
                                allow-clear
                            >
                                <a-select-option :value="''">不限</a-select-option>
                                <a-select-option :value="0">内部</a-select-option>
                                <a-select-option :value="1">素造</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8" :xxl="6">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" icon="search" @click="handleQueryList">查询</a-button>
                            <a-button type="primary" @click="handleResetForm" icon="reload" class="middle-button">重置</a-button>
                        </span>
                        
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </a-card>
    <a-row :gutter="24" class="material-total" v-if="totalData">
        <a-col :sm="24" :md="12" :xl="6">
            <chart-card title="素材总数" :total="totalData.total + ''">
                <a-tooltip title="此项目可用的素材总数" slot="action">
                    <a-icon type="info-circle-o" />
                </a-tooltip>
                <!-- <div slot="percentage">
                    <trend :flag="costLink > 0 ? 'up' : 'down'">
                        <span slot="term">环比</span>
                        {{ (costLink * 100).toFixed(2) }}%
                    </trend>
                </div> -->
            </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
            <chart-card title="在投素材数" :total="totalData.yesterdayValidCount + ''">
                <a-tooltip title="此项目昨日在投素材总数" slot="action">
                    <a-icon type="info-circle-o" />
                </a-tooltip>
            </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
            <chart-card title="今日同步素材数" :total="totalData.todayUpCount + ''">
                <a-tooltip title="此项目今日同步素材数" slot="action">
                    <a-icon type="info-circle-o" />
                </a-tooltip>

                <!-- <div slot="percentage">
                    <trend :flag="totalData.todayUpCount >= totalData.yesterdayUpCount > 0 ? 'up' : 'down'">
                        {{ totalData.todayUpCount - totalData.yesterdayUpCount === 0 ? '0' : ((totalData.todayUpCount - totalData.yesterdayUpCount)/totalData.yesterdayUpCount).toFixed(2) }}%
                    </trend>
                </div> -->
            </chart-card>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
            <chart-card title="近一周同步素材数" :total="totalData.thisWeekCount + ''">
                <a-tooltip title="此项目近一周同步素材数" slot="action">
                    <a-icon type="info-circle-o" />
                </a-tooltip>
                <div slot="percentage">
                    <trend :flag="totalData.thisWeekCount >= totalData.lastWeekCount > 0 ? 'up' : 'down'">
                        <!-- <span slot="term">环比</span> -->
                        {{ totalData.thisWeekCount - totalData.lastWeekCount === 0 ? '0' : (((totalData.thisWeekCount - totalData.lastWeekCount)/totalData.lastWeekCount)*100).toFixed(2) }}%
                    </trend>
                </div>
            </chart-card>
        </a-col>
    </a-row>
    <a-card  class="material-main">
        <a-spin :spinning="spinning">
            <div v-if="dataSource.length > 0">
                <div  class="home-card">
                    <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="lookView(items)">
                        <img :src="items.coverUrl" alt="">
                        <div class="bottom-details">
                            <div class="bottom-title">
                                <h3 :title="items.photoName">{{ items.photoName ? items.photoName : '-' }}</h3>
                                <a @click.stop="lowerMaterial(items)" :disabled="items.status === 1">下架素材</a>
                            </div>
                            <p>素材来源：{{ items.channelType === 0 ? '内部' : '素造' }}</p>
                            <p :title="items.statDate">上传日期：{{ items.statDate }}</p>
                            <p>素材状态：{{ items.status === 0 ? '可用' : '删除' }}</p>
                            <p></p>
                        </div>
                    </div>
                </div>
           
                <a-pagination
                size="small"
                :showTotal="ipagination.showTotal"
                style="float: right"
                v-if="dataSource.length > 0"
                showQuickJumper
                :pageSize.sync="ipagination.pageSize"
                :total="ipagination.total"
                v-model="ipagination.current"
                @change="getDataSource"
                />
            </div>
            <div v-else class="home-card" style="justify-content: center;align-items: center;">
                <a-empty />
            </div>
        </a-spin>
    </a-card>
    <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
        <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
            您的浏览器不支持 video 标签。
        </video>
    </a-modal>
  </div>
</template>

<script>
import moment from 'moment';
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
import ChartCard from '@/components/ChartCard';
import Trend from '@/components/Trend';
import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'; // 停止除当前外的其他视频播放，及停止所有视频播放的方法
export default {
    components: {
        selectTable,
        ChartCard,
        Trend
    },
    data() {
        return {
            visibleVideo: false,
            videoUrlShow: null,
            spinning: false,
            form: this.$form.createForm(this),
            projectId: '',
            dataSource: [],
            dataLoading: false,
            ipagination: {
                current: 1,
                pageSize: 10,
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: true,
                showSizeChanger:false,
                pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current;
                    this.ipagination.pageSize= pageSize;
                    this.handleGetTableList({})
                }
            },
            totalData: null
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                closeAllVideoFun()
            }
        },
    },
    methods: {
        lowerMaterial(item) {
            let params = {};
            params.id = item.id;
            let that = this
            this.$confirm({
                title: '下架提示',
                content: '是否下架此素材？',
                onOk() {
                    that.postDataAction('/kuaishouProjectVideoGet/offShelfVideo', params).then(result => {
                        if(result.success) {
                            that.$message.success('下架成功')
                            that.handleGetTableList({})
                        }
                        else {
                            that.$message.error(result.message)
                        }
                    }).catch(error => {
                        console.log(error, 'eeee');
                    });
                }
            });
        },
        lookView(item) {
            // this.visibleVideo = true
            // this.videoUrlShow = item.url
            var params = { md5: item.signature, url:item.url, id:item.id, photoId:item.photoId, projectId:item.projectId }
            localStorage.setItem('materialDetail', JSON.stringify(params))
            this.$router.push({
                path: '/autoLaunch/material-all/material-detail',
            })
        },
        getDataSource(current, pageSize) {
            // 切换分页时的回调，
            // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
            this.ipagination.current = current;
            this.ipagination.pageSize= pageSize;
            const paramsData = this.form.getFieldsValue();
            this.handleGetTableList(paramsData);
        },
        handleQueryList() {
            this.ipagination.current = 1;
            event.preventDefault();
            const paramsData = this.form.getFieldsValue();
            this.handleGetTableList(paramsData);
            this.getVideoTotalNumber();
        },
        handleResetForm() {
            this.totalData = null;
            this.ipagination.current = 1;
            this.form.resetFields();
            this.projectId = undefined;
            this.handleGetTableList({});
            this.$refs.selectTable.keyValue = "";
            this.$refs.selectTable.getData()
        },
        handleGetTableList(data) {
            this.spinning = true;
            const paramsData = {
                signature: data.signature,
                projectId: this.projectId,
                status: data.status,
                channelType: data.channelType,

                pageNo:  this.ipagination.current,
                pageSize: this.ipagination.pageSize
            };
            this.dataSource = []
            this.dataLoading = true;
            this.getAction('/kuaishouProjectVideoGet/list', paramsData).then(result => {
                this.dataLoading = false;
                this.spinning = false;
                if (result.code === 200) {
                    this.dataSource = result.result.list || [];
                    this.ipagination.total = result.result.total || 0;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                this.spinning = false;
                this.dataLoading = false;
                console.log(error, 'eeee');
            });
        },
        getVideoTotalNumber() {
            if(this.projectId !== '') {
                let params = {};
                params.projectId = this.projectId;
                this.getAction('/kuaishouProjectVideoGet/getVideoTotalNumber', params).then(res => {
                    if(res.success) {
                        this.totalData = res.result;
                    }
                    else {
                        this.totalData = null;
                    }
                })
            }
            
        }
    },
    mounted() {
        this.handleGetTableList({});
    },
}
</script>
<style lang="less" scoped>
    @import "material";
</style>
