<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="人员名称">
                            <a-input
                                v-decorator="['realname']" type="text"
                                placeholder="请输入想要搜索的人员名称"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item label="岗位">
                            <a-select
                                v-decorator="['roleCode',{initialValue:''}]"
                                placeholder="请选择"
                                allow-clear
                            >
                                <a-select-option :value="''">不限</a-select-option>
                                <a-select-option value="clip">剪辑</a-select-option>
                                <a-select-option value="shot">拍摄</a-select-option>
                                <a-select-option value="plan">策划</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                     <!--  -->
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item label="时间">
                            <a-range-picker
                                :disabled-date="disabledDate"
                                format="YYYY-MM-DD" 
                                v-model="timeRange"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-form-item label="公司">
                            <a-select
                                v-decorator="['companyId',{initialValue:''}]"
                                placeholder="请选择"
                                allow-clear
                            >
                                <a-select-option :value="''">不限</a-select-option>
                                <a-select-option v-for="(item, index) in allCompany" :value="item.companyId" :key="index">{{ item.companyName }} </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-card  class="material-main">
        <a-table
            ref="table"
            size="middle"
            bordered
            :dataSource="dataSource"
            :pagination="false"
            :loading="dataLoading"
        >
            <a-table-column key="realname" data-index="realname" title="设计人员"  align="center"/>
            <a-table-column key="roleName" data-index="roleName" title="岗位"  align="center"/>
            <a-table-column key="zhenrenNumber" data-index="zhenrenNumber"  align="center">
                <span slot="title">视频数量（真人）
                    <a-tooltip>
                        <template slot="title">
                        显示上传视频数量
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                </span>
            </a-table-column>
             <a-table-column key="zhenrenCharge" data-index="zhenrenCharge"  align="center">
                <span slot="title">消耗（真人）
                    <a-tooltip>
                        <template slot="title">
                        显示该人员所有视频的消耗数据
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                </span>
            </a-table-column>
            <a-table-column key="zhenrenCost" data-index="zhenrenCost" title="消耗/视频数量（真人）"  align="center"/>
            <a-table-column key="zhizuoNumber" data-index="zhizuoNumber" align="center">
                 <span slot="title">视频数量（制作）
                    <a-tooltip>
                        <template slot="title">
                        显示上传视频数量
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                </span>
            </a-table-column>
            <a-table-column key="zhizuoCharge" data-index="zhizuoCharge" align="center">
                 <span slot="title">消耗（制作）
                    <a-tooltip>
                        <template slot="title">
                        显示该人员所有视频的消耗数据
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                </span>
            </a-table-column>
            <a-table-column key="zhizuoCost" data-index="zhizuoCost" title="消耗/视频数量（制作）"  align="center"/>
        </a-table>
        <a-pagination
        size="small"
        :showTotal="ipagination.showTotal"
        style="float: right;margin-top:10px"
        v-if="dataSource.length > 0"
        showQuickJumper
        :pageSize.sync="ipagination.pageSize"
        :total="ipagination.total"
        v-model="ipagination.current"
        @change="getDataSource"
        />
    </a-card>
    
  </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'; // 停止除当前外的其他视频播放，及停止所有视频播放的方法
import { getAction } from '../../../../api/manage';
export default {
    components: {
        selectTable,
        ChartCard,
        Trend
    },
    data() {
        return {
            timeRange: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            visibleVideo: false,
            videoUrlShow: null,
            spinning: false,
            form: this.$form.createForm(this),
            projectId: '',
            dataSource: [],
            dataLoading: false,
            allCompany: [],
            columns: [ {
                    title: '设计人员',
                    dataIndex: 'realname',
                    align: 'center',
                    scopedSlots: { customRender: 'realname' },
                },
                {
                    title: '岗位',
                    dataIndex: 'roleName',
                    align: 'center',
                    scopedSlots: { customRender: 'roleName' },
                },
                {
                    title: '视频数量（真人）',
                    dataIndex: 'zhenrenNumber',
                    align: 'center',
                    scopedSlots: { customRender: 'zhenrenNumber' },
                },
                {
                    title: '消耗（真人）',
                    dataIndex: 'zhenrenCharge',
                    align: 'center',
                    scopedSlots: { customRender: 'zhenrenCharge' },
                },
                {
                    title: '消耗/视频数量（真人）',
                    dataIndex: 'zhenrenCost',
                    align: 'center',
                    scopedSlots: { customRender: 'zhenrenCost' },
                },
                {
                    title: '视频数量（制作）',
                    dataIndex: 'zhizuoNumber',
                    align: 'center',
                    scopedSlots: { customRender: 'zhizuoNumber' },
                },
                {
                    title: '消耗（制作）',
                    dataIndex: 'zhizuoCharge',
                    align: 'center',
                    scopedSlots: { customRender: 'zhizuoCharge' },
                },
                {
                    title: '消耗/视频数量（制作）',
                    dataIndex: 'zhizuoCost',
                    align: 'center',
                    scopedSlots: { customRender: 'zhizuoCost' },
                },
            ],
            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;
                    const paramsData = this.form.getFieldsValue();
                    this.handleGetTableList(paramsData)
                }
            },
            totalData: null
        }
    },
    watch: {
        visibleVideo(n, o) {
            if (!n) {
                closeAllVideoFun()
            }
        },
    },
    methods: {
        disabledDate(current) {
            // Can not select days before today and today
            return current && current > moment().endOf('day');
        },
        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;
            const paramsData = this.form.getFieldsValue();
            this.handleGetTableList(paramsData);
        },
        handleResetForm() {
            this.totalData = null;
            this.ipagination.current = 1;
            this.form.resetFields();
            this.timeRange = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
            this.handleGetTableList({});
        },
        handleGetTableList(data) {
            this.spinning = true;
            const paramsData = {
                realname: data.realname,
                roleCode: data.roleCode ? data.roleCode === '' ? null : data.roleCode : null,
                companyId: data.companyId ? data.companyId === '' ? null : data.companyId : null,
                startTime: this.timeRange&&this.timeRange.length === 2 ?  moment(this.timeRange[0]).format('YYYY-MM-DD') : null,
                endTime: this.timeRange&&this.timeRange.length === 2 ?  moment(this.timeRange[1]).format('YYYY-MM-DD') : null,
                pageNo:  this.ipagination.current,
                pageSize: this.ipagination.pageSize
            };
            this.dataSource = []
            this.dataLoading = true;
            this.getAction('/kuaishou/kuaiShouVideoGet/labelMaterialList', paramsData).then(result => {
                this.dataLoading = false;
                this.spinning = false;
                if (result.code === 200) {
                    this.dataSource = result.result.pageInfo.list || [];
                    if(result.result.total) {
                        this.dataSource.unshift(result.result.total);
                    }
                    
                    this.ipagination.total = result.result.pageInfo.total || 0;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                this.spinning = false;
                this.dataLoading = false;
                console.log(error, 'eeee');
            });
        },
        getAllCompany() {
            getAction('/system/userCompany/allCompany').then(res => {
                if(res.success) {
                    this.allCompany = res.result;
                }
            })
        }
    },
    mounted() {
        this.handleGetTableList({});
        this.getAllCompany();
    },
}
</script>
<style lang="less" scoped>
    @import "material";
</style>
