<style lang="scss" scoped>
    .search-bar {
        display: flex;
        align-items: center;
    }

    .search-box p {
        display: inline-block;
        border: 1px solid #f2f2f2;
        border-radius: 5px;
        margin-right: 10px;
        padding: 5px 10px;
        cursor: pointer;
    }
</style>
<style>
    /* .data-display-statistics .ant-card-body {
      padding: 0 15px;
    } */
    .data-display-statistics .ant-col-6 {
        margin: 10px 0;
    }

    .data-display-statistics .ant-col-6 .ant-card-body {
        display: flex;
        justify-content: center;
    }

    .data-display-statistics .ant-col-6 p,
    .data-display-statistics .ant-col-6 span {
        text-align: center;
        line-height: 40px;
        font-size: 30px;
        font-weight: 600;
        color: red;
        margin: 0;
    }

    .search-box .ant-card-body {
        padding: 5px 15px;
    }

    .data-display-statistics .ant-col-6 .ant-card-body .styleElse {
        line-height: 60px;
        height: 40px;
        font-size: 16px;
        font-weight: 400;
        margin-left: 10px;
    }

    .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
        display: none !important;
    }

    .yincang .ant-col-6 p {
        text-align: left;
        color: red;
        font-size: 16px;
        font-weight: 500;
    }

    .ant-table-thead div {
        font-weight: 700;
    }

    .tool-tip {
        position: absolute;
        top: 65px;
        right: 10px;
    }

    th div {
        white-space: nowrap;
    }
</style>
<template>
    <div class="data-statistics">
        <a-row class="image-list-heading vm-panel">
            <a-row type="flex" align="middle" justify="space-between" class="panel-body">
                <div class="search-bar" style="width:100%">
                    <span>项目选择：</span>
                    <a-select
                        v-model="projectId"
                        style="width:350px"
                        showSearch
                        optionFilterProp="children"
                        :filterOption="filterOption"
                    >
                        <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.projectId">
                            {{ item.projectName }}
                        </a-select-option>
                    </a-select>
                    <!-- <span style="margin-left:10px">日期选择：</span>
                     <a-date-picker v-model="statDate" format="YYYY-MM-DD" />-->
                    <span style="margin-left:10px">日期选择：</span>
                    <a-col :md="8" :sm="8" :xxl="6">
                        <a-range-picker
                            v-model="dateValue"
                            :ranges="dateRanges"
                            :disabled-date="disabledDate"
                        />
                    </a-col>

                    <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
                    <a-button
                        type="primary"
                        icon="reload"
                        @click="getDataReset"
                        style="background-color:#67c23a;border-color:#67c23a"
                    >重置
                    </a-button
                    >
                    <a-button type="primary" style="margin:10px" @click="exportExcel" :loading="exLoading">导出</a-button>
                </div>
            </a-row>
        </a-row>
        <a-row :gutter="10" style="margin-top:10px">
            <a-col :span="24">

                <!-- <div style="display:flex;margin-bottom:15px">
                   &lt;!&ndash; <a-select style="width: 120px" v-model="statHour" @change="getElseData" allowClear>
                     <a-select-option v-for="item of 24" :key="item - 1" :value="item - 1">{{ item - 1 }}</a-select-option>
                   </a-select> &ndash;&gt;
                   <a-button type="primary" @click="exportExcel">导出</a-button>
                 </div>-->
                <a-table
                    size="middle"
                    :columns="columns"
                    :dataSource="data"
                    :pagination="ipagination"
                    bordered
                    id="outTable"
                    :scroll="{ x: true }"
                    :loading="loading"
                >
                    <span slot="relativePeople" slot-scope="text,record">
                    <p>负责人：{{record.leader_name || '无'}}</p>
                    <p>剪辑：{{record.clip_name || '无'}}</p>
                    <p>拍摄：{{record.shot_name || '无'}}</p>
                    <p>编导：{{record.plan_name || '无'}}</p>
                </span>
                </a-table>

            </a-col>
        </a-row>

    </div>
</template>

<script>
    import ARow from 'ant-design-vue/es/grid/Row'
    import ACol from 'ant-design-vue/es/grid/Col'
    import countTo from 'vue-count-to'
    import moment from 'moment'
    import DatePicker from '@/components/DatePicker'
    import {JeecgListMixin} from '@/mixins/ipagination'


    import {getDailyReport} from '@api/statistics'
    import {getAction, postAction, downFile, downFilePost} from '@/api/manage'
    import axios from 'axios'
    import lifting from '../components/lifting'
    import timeCheck from '../components/timeCheck'
    import Treeselect from '../components/Treeselect.vue'
    import {mapGetters} from 'vuex'

    var length = 0
    var active = 1
    const columns = [
        {
            title: '项目',
            dataIndex: 'project_name',
            align: 'center'
        },
        {
            title:'相关人员',
            dataIndex:'relativePeople',
            key:'relativePeople',
            scopedSlots: { customRender: 'relativePeople' },
            align: 'center',
            width: 300
        },
        {
            title: '素材ID',
            dataIndex: 'material_id',
            align: 'center'
        },
        {
            title: '素材名称',
            dataIndex: 'material_name',
            align: 'center'

        },
        {
            title: '首次消耗时间',
            dataIndex: 'first_cost_time',
            align: 'center',
        },
        {
            title: '消耗天数',
            dataIndex: 'diff_day',
            align: 'center',
        },
        {
            title: '消耗',
            dataIndex: 'seven_day_cost',
            align: 'center',
        },
        // {
        //   title: '预估成本',
        //   dataIndex: 'estimatedCost',
        //   align: 'center',
        //   scopedSlots: { customRender: 'estimatedCost' }
        // }
    ]

    const columnsGroup = columns

    export default {
        name: 'data-display-statistics',
        components: {
            ACol,
            ARow,
            countTo,
            lifting,
            timeCheck,
            Treeselect,
            DatePicker
        },
        mixins: [JeecgListMixin],
        data: function () {
            return {
                projectId: null,
                exLoading: false,
                statDate: moment(new Date()),
                title: '账户数据展示',
                show: true,
                data: [],
                dataAll: null,
                columns: columns,
                options: [],
                list: [],
                appId: [],
                openOptions: false,
                dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'day')],
                date: '',
                loading: false,
                dataElse: [],
                dateRanges: {
                    昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
                    近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
                    近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
                    近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
                    近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
                    近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
                },
                ipagination: {
                    current: 1,
                    pageSize: 10,

                    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.getBytedanceSevenDayCost();
                    }
                },
            }
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value)
                let y = date.getFullYear()
                let MM = date.getMonth() + 1
                MM = MM < 10 ? '0' + MM : MM
                let d = date.getDate()
                d = d < 10 ? '0' + d : d
                let h = date.getHours()
                h = h < 10 ? '0' + h : h
                let m = date.getMinutes()
                m = m < 10 ? '0' + m : m
                let s = date.getSeconds()
                s = s < 10 ? '0' + s : s
                return y + '-' + MM + '-' + d
            },
            toFixtwo: function (value) {
                if (value) {
                    return value.toFixed(2)
                } else {
                    return 0.0
                }
            },
            getBo: function (value) {
                if (value) {
                    return (value * 100).toFixed(2) + '%'
                } else {
                    return '0.00%'
                }
            }
        },
        methods: {
            moment,
            filterOption(input, option) {
                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            },
            ...mapGetters(['nickname', 'avatar', 'userInfo']),
            getParticipateList() {
                postAction('/ctop/projectMember/participateListByMediaId', {
                    userId: "e9ca23d68d884d4ebb19d07889727dae",
                    type: "bytedance"
                }).then(res => {
                    if (res.success) {
                        this.dataElse = res.result
                    }
                })
            },

            opendate() {
                this.openOptions = !this.openOptions;
            },
            opendateClose() {
                this.openOptions = false;
            },
            disabledDate(current) {
                return current && current > moment()
            },
            getDataReset() {
                this.projectId  = null;
                this.ipagination.current = 1
                this.ipagination.pageSize = 10
                this.dateValue =  [moment().subtract(7, 'days'), moment().subtract(1, 'day')]
                this.getBytedanceSevenDayCost();},
            addUser() {
                this.ipagination.current = 1
                this.ipagination.pageSize = 10
                var that = this
                that.getBytedanceSevenDayCost()
            },
            getBytedanceSevenDayCost() {
                var params = {}
                params.projectId = this.projectId
                params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
                params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
                params.pageNo = this.ipagination.current
                params.pageSize = this.ipagination.pageSize
                this.data = []
                this.loading = true
                postAction('/ctop/byteDance/videoReport/getBytedanceSevenDayCost', params).then(res => {
                    if (res.success) {
                        this.loading = false
                        this.data = res.result.list
                        console.log(res)

                        this.ipagination.total = res.result.total
                    }
                })
            },
            getDate(value) {
                if (value) {
                    let date = new Date(value)
                    let y = date.getFullYear()
                    let MM = date.getMonth() + 1
                    MM = MM < 10 ? '0' + MM : MM
                    let d = date.getDate()
                    d = d < 10 ? '0' + d : d
                    this.date = y + '-' + MM + '-' + d
                } else {
                    let date = new Date()
                    let y = date.getFullYear()
                    let MM = date.getMonth() + 1
                    MM = MM < 10 ? '0' + MM : MM
                    let d = date.getDate()
                    d = d < 10 ? '0' + d : d
                    this.date = y + '-' + MM + '-' + d
                }
            },
            exportExcel() {
                this.exLoading  = true
                var params = {}
                params.projectId = this.projectId
                params.startDate = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
                params.endDate = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
                downFilePost('/ctop/byteDance/videoReport/exportBytedanceSevenDayCost', params).then(res => {
                    let blob = new Blob([res], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    })
                    let downloadElement = document.createElement('a')
                    let href = window.URL.createObjectURL(blob) //创建下载的链接
                    downloadElement.href = href
                    downloadElement.download =   '首消报表' //下载后文件名
                    document.body.appendChild(downloadElement)
                    downloadElement.click() //点击下载
                    document.body.removeChild(downloadElement) //下载完成移除元素
                    window.URL.revokeObjectURL(href) //释放掉blob对象
                })
                this.exLoading = false
            }
        },

        ipaginationChange(pagination) {
            this.ipagination.current = pagination.current
            this.ipagination.pageSize = pagination.pageSize
            this.getBytedanceSevenDayCost()
        },


        watch: {},
        distoryed() {
        },
        mounted: function () {
            this.getParticipateList();
            this.getBytedanceSevenDayCost();
        }
    }
</script>
