<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;
}
.card-person-drawer {
    width: 100%;
    height: 90%;
    overflow: hidden;
    padding: 10px 0px;
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    ::v-deep .ant-card-body {
        padding: 0;
    }
    ::v-deep .ant-card-head {
        padding: 0 5px;
    }
    .card-item {
        width: calc(25% - 10px);
        margin-bottom: 10px;
        float: left;
        margin: 5px;
    }
    .card-item-else {
        width: calc(20% - 10px);
        margin-bottom: 10px;
        float: left;
    }
}
</style>
<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="8" :sm="8">
                        <selectTable :projectId.sync="queryParam.productId" ref="selectTable"></selectTable>
                    </a-col>

                    <a-col :md="8" :sm="8">
                        <a-form-item label="商品名称">
                            <!-- <a-input placeholder="请输入广告主名称" v-model="queryParam.advertiserName"></a-input> -->

                            <a-input placeholder="请输入商品名称" v-model="queryParam.tradeName"></a-input>
                        </a-form-item>
                    </a-col>
                    <template>
                        <a-col :md="8" :sm="8">
                            <a-form-item label="选择月份">
                                <!-- <a-input placeholder="请输入负责人" v-model="queryParam.responsible"></a-input> -->
                                <!-- <a-range-picker picker="month" v-model="queryParam.monthTime"  /> -->
                                <el-date-picker
                                    v-model="queryParam.monthTime"
                                    type="monthrange"
                                    range-separator="~"
                                    start-placeholder="开始月份"
                                    end-placeholder="结束月份"
                                    style="width: 100%"
                                >
                                </el-date-picker>
                            </a-form-item>
                        </a-col>
                    </template>
                    <template>
                        <a-col :md="8" :sm="8">
                            <a-form-item label="跑量单品">
                                <!-- <a-input placeholder="请输入负责人" v-model="queryParam.responsible"></a-input> -->
                                <a-select v-model="queryParam.itemRun" allowClear>
                                    <a-select-option :value="0"> 否 </a-select-option>
                                    <a-select-option :value="1"> 是 </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </template>
                    <a-col :md="8" :sm="8">
                        <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button
                                type="primary"
                                @click="
                                    $refs.selectTable.keyValue = ''
                                    $refs.selectTable.getData()
                                    queryParam.monthTime = undefined
                                    searchReset()
                                "
                                icon="reload"
                                style="margin-left: 8px"
                                >重置</a-button
                            >
                            <a-button
                                type="primary"
                                @click="
                                    addVideo = true
                                    newAdd = true
                                "
                                style="margin-left: 8px"
                                >新增</a-button
                            >
                            <a-button
                                type="primary"
                                @click="exportPolicy"
                                style="margin-left: 8px"
                                :loading="exportPolicyLoading"
                                >下载</a-button
                            >
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div>
            <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
            >
                <a slot="productName" slot-scope="text, record" @click="showDetailVideo(record)">
                    {{ text }}
                </a>
                <span slot="action" slot-scope="text, record">
                    <a @click="editVideoUrl(record)">添加视频</a>

                    <a-divider type="vertical" />

                    <a-popconfirm
                        title="是否设置跑量单品?"
                        @confirm="() => handleOk(record)"
                        cancelText="否"
                        okText="是"
                        @cancel="() => handleCancel(record)"
                    >
                        <a>是否设置跑量单品</a>
                    </a-popconfirm>
                    <!-- /ctop/project/edit -->
                </span>
            </a-table>
        </div>
        <!-- table区域-end -->

        <!-- 表单区域 -->
        <a-modal
            title="新增选品"
            :width="800"
            :visible="addVideo"
            :confirmLoading="confirmLoading"
            @ok="handleOkVideo"
            @cancel="cancelVideo"
            cancelText="关闭"
        >
            <a-form layout="horizontal" v-bind="formItemLayout" :form="formMaterial">
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="选择产品">
                            <a-select
                                v-decorator="[
                                    'productId', // 给表单赋值或拉取表单时，该input对应的key
                                    { rules: [{ required: true, message: '请选择产品!' }] },
                                ]"
                                @focus="getParticipateList"
                                showSearch
                                @search="getParticipateList"
                                labelInValue
                                showSearch
                                optionFilterProp="children"
                                :filterOption="filterOption"
                                :disabled="!newAdd"
                            >
                                <a-select-option :value="item.id" v-for="item of dataElse" :key="item.id">
                                    {{ item.productName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <div>
                            <div v-for="(item, index) in videoArr" :key="index">
                                <a-form-item label="商品名称" required>
                                    <a-input
                                        placeholder="请输入商品名称"
                                        v-model="item.tradeName"
                                        :disabled="!newAdd"
                                    />
                                </a-form-item>
                                <a-form-item label="视频上传方式">
                                    <a-radio-group
                                        button-style="solid"
                                        v-model="item.addVideoUrl"
                                        @change="checkType(index)"
                                    >
                                        <a-radio-button :value="1">视频链接</a-radio-button>
                                        <a-radio-button :value="2">选择视频</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                                <a-form-item label="视频链接" v-if="item.addVideoUrl == 1">
                                    <a-textarea
                                        :rows="4"
                                        v-model="item.videoUrl"
                                        placeholder="可输入多条视频链接，用','分割"
                                    ></a-textarea>
                                </a-form-item>
                                <a-form-item label="选择视频" v-if="item.addVideoUrl == 2">
                                    <a-button type="primary" @click="selectMaterial(index)" style="margin-left: 8px"
                                        >选择视频</a-button
                                    >
                                    <p v-for="(showName, showIndex) in item.checkVideoArr" :key="showIndex">
                                        {{ showName.materialName }}
                                    </p>
                                </a-form-item>
                                <a-form-item label="" v-bind="tailFormItemLayout">
                                    <a @click="addVideoArr" :disabled="!newAdd">添加</a>
                                    <a-divider type="vertical" v-if="videoArr.length > 1" />
                                    <a @click="removeVideoArr(index)" v-if="videoArr.length > 1">删除</a>
                                </a-form-item>
                            </div>
                        </div>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="选择商品品类">
                            <a-input
                                :disabled="!newAdd"
                                placeholder="请输入商品品类"
                                v-decorator="[
                                    'tradeType', // 给表单赋值或拉取表单时，该input对应的key
                                    { rules: [{ required: false, message: '请选择产品!' }] },
                                ]"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="开始月份">
                            <a-month-picker
                                :disabled="!newAdd"
                                v-decorator="[
                                    'startMonth', // 给表单赋值或拉取表单时，该input对应的key
                                    { rules: [{ required: true, message: '请填写开始月份!' }] },
                                ]"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="16">
                    <a-col :span="24">
                        <a-form-item label="结束月份">
                            <a-month-picker
                                :disabled="!newAdd"
                                v-decorator="[
                                    'endMonth', // 给表单赋值或拉取表单时，该input对应的key
                                    { rules: [{ required: false, message: '请填写结束月份!' }] },
                                ]"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
        <a-modal
            title="选择素材"
            :width="1000"
            v-if="materialVisible"
            :visible="materialVisible"
            :confirm-loading="materialLoading"
            dialog-class="push-modal"
            @ok="handleOkMaterial"
            @cancel="
                materialVisible = false
                checkPersonElse = []
                checkVideo = []
                checkPersonOne = ''
                searchVideo = undefined
            "
        >
            <a-spin :spinning="spinning">
                <a-input-search
                    v-model="searchVideo"
                    placeholder="输入视频名称搜索"
                    style="width: 200px"
                    @search="onSearch"
                />
                <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setVideoDataAll">
                    <div class="card-person-drawer info-detail" style="height: 500px; overflow: auto">
                        <a-card
                            class="card-person card-item"
                            v-for="(item, index) in dataVideoList"
                            :key="index"
                            v-show="item.showCard"
                        >
                            <div slot="title" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
                                {{ item.materialName }}
                            </div>
                            <div slot="extra">
                                <a-checkbox :value="item.id" @change="setVideoData(item.id)"></a-checkbox>
                            </div>
                            <div style="width: 100%; border: 1px solid #f2f2f2; position: relative">
                                <img :src="item.coverUrl" style="width: 100%" alt="" />
                                <a-tag
                                    color="blue"
                                    v-if="item.useStatus == 0"
                                    style="position: absolute; top: 5px; right: 0px"
                                >
                                    已测试
                                </a-tag>
                            </div>
                        </a-card>
                    </div>
                </a-checkbox-group>
            </a-spin>
        </a-modal>

        <a-modal
            title="视频列表"
            :width="1000"
            :visible="showDetailVideoVisible"
            :footer="null"
            @cancel="showDetailVideoVisible = false"
        >
            <a-table
                ref="table"
                size="middle"
                bordered
                rowKey="id"
                :columns="columnsDetail"
                :dataSource="dataSourceDetail"
                :pagination="ipaginationVideo"
                :loading="loadingDetail"
            >
                <span slot="action" slot-scope="text, record">
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                    </a-popconfirm>
                </span>
            </a-table>
        </a-modal>
    </a-card>
</template>

<script>
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import { httpAction, getAction, downFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapActions, mapGetters } from 'vuex'
import selectTable from './comment/selectTable.vue'
import moment from 'moment'
import pick from 'lodash.pick'
export default {
    name: 'selectionLibrary',
    mixins: [JeecgListMixin],
    components: {
        JTreeSelect,
        selectTable,
    },
    data() {
        return {
            description: '项目管理页面',
            addVideo: false,
            exportPolicyLoading: false,
            confirmLoading: false,
            formItemLayout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 },
            },
            tailFormItemLayout: {
                wrapperCol: {
                    sm: {
                        span: 20,
                        offset: 4,
                    },
                },
            },
            formMaterial: this.$form.createForm(this), //素材表单
            dataElse: [],
            videoArr: [
                { tradeName: '', videoUrl: '', addVideoUrl: 1, signature: '', uploaderId: '', checkVideoArr: [] },
            ],
            materialVisible: false,
            materialLoading: false,
            checkVideo: [],
            checkPersonElse: [],
            dataVideoList: [],
            searchVideoList: [],
            checkPersonOne: '',
            ipaginationVideo: {
                current: 1,
                pageSize: 8,
                id: '',
                accountId: '',
                //   pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                //   showSizeChanger: true,
                total: 0,
                onChange: (current) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipaginationVideo.current = current
                    this.getVideoList()
                },
            },
            // 表头
            columns: [
                {
                    title: '产品名称',
                    align: 'center',
                    dataIndex: 'productName',
                    scopedSlots: {
                        customRender: 'productName',
                    },
                },
                {
                    title: '商品名称',
                    align: 'center',
                    dataIndex: 'tradeName',
                },
                {
                    title: '商品类型',
                    align: 'center',
                    dataIndex: 'tradeType',
                    customRender: function (t) {
                        if (t) {
                            return t
                        } else {
                            return '-'
                        }
                    },
                },
                {
                    title: '跑量单品',
                    align: 'center',
                    dataIndex: 'itemRun',
                    customRender: function (t) {
                        if (t) {
                            if (t == 1) {
                                return '是'
                            } else {
                                return '否'
                            }
                        } else {
                            return '-'
                        }
                    },
                },
                {
                    title: '时间',
                    align: 'center',
                    dataIndex: 'time',
                },
                {
                    title: '创建人',
                    align: 'center',
                    dataIndex: 'user',
                },
                {
                    title: '视频',
                    align: 'center',
                    dataIndex: 'videoCount',
                    customRender: function (t) {
                        if (t) {
                            return t
                        } else {
                            return '-'
                        }
                    },
                },
                {
                    title: '消耗',
                    align: 'center',
                    dataIndex: 'charge',
                    customRender: function (t, record) {
                        if (record.videoCount) {
                            return t
                        } else {
                            return '-'
                        }
                    },
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: {
                        customRender: 'action',
                    },
                },
            ],
            url: {
                list: '/product/material/list',
                delete: '/product/material/delete',
                deleteBatch: '/ctop/project/deleteBatch',
                exportXlsUrl: 'ctop/project/exportXls',
                importExcelUrl: 'ctop/project/importExcel',
            },
            showDetailVideoVisible: false,
            columnsDetail: [
                {
                    title: '产品名称',
                    align: 'center',
                    dataIndex: 'productName',
                    scopedSlots: {
                        customRender: 'productName',
                    },
                },
                {
                    title: '商品名称',
                    align: 'center',
                    dataIndex: 'tradeName',
                },
                {
                    title: '视频',
                    align: 'center',
                    dataIndex: 'videoUrl',
                    width: 200,
                },
                {
                    title: '消耗',
                    align: 'center',
                    dataIndex: 'charge',
                },
                {
                    title: '上传人',
                    align: 'center',
                    dataIndex: 'user',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: {
                        customRender: 'action',
                    },
                },
            ],
            dataSourceDetail: [],
            loadingDetail: false,
            detailData: null,
            list: [],
            options: [],
            spinning: false,
            searchVideo: undefined,
            checkVideoIndex: 0,
            newAdd: true,
            editData: null,
        }
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        },
    },
    created() {
        this.queryParam.userId = this.userInfo().id
    },
    methods: {
        onSearch() {
            this.$nextTick(() => {
                if (!this.searchVideo) {
                    this.dataVideoList = this.dataVideoList.map((item) => {
                        return {
                            ...item,
                            showCard: true,
                        }
                    })
                } else {
                    this.dataVideoList = this.dataVideoList.map((item) => {
                        return {
                            ...item,
                            showCard: item.materialName.includes(this.searchVideo) ? true : false,
                        }
                    })
                }
            })
        },
        exportPolicy() {
            this.exportPolicyLoading = true
            console.log(this.selectionRows)
            var params = {}
            params.productId = this.queryParam.productId || null
            params.tradeName = this.queryParam.tradeName || null
            params.startMonth =
                this.queryParam.monthTime && this.queryParam.monthTime.length == 2
                    ? moment(this.queryParam.monthTime[0]).format('YYYY-MM')
                    : null
            params.endMonth =
                this.queryParam.monthTime && this.queryParam.monthTime.length == 2
                    ? moment(this.queryParam.monthTime[1]).format('YYYY-MM')
                    : null
            params.itemRun =
                this.queryParam.itemRun == 0 || this.queryParam.itemRun == 1 ? this.queryParam.itemRun : null
            downFile('/product/material/getVideoDetailsReportExcel', params).then((res) => {
                // console.log(res)
                this.exportPolicyLoading = false
                let blob = new Blob([res], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                })
                // console.log(blob)
                let downloadElement = document.createElement('a')
                let href = window.URL.createObjectURL(blob) //创建下载的链接
                downloadElement.href = href
                downloadElement.download = '视频详情报表' + '.xlsx' //下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() //点击下载
                document.body.removeChild(downloadElement) //下载完成移除元素
                window.URL.revokeObjectURL(href) //释放掉blob对象
            })
        },
        handleDelete(id) {
            this.getAction('/product/material/delete', {
                id,
            }).then((res) => {
                if (res.success) {
                    this.getVideoList()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        getVideoList() {
            this.loadingDetail = true
            var params = {}
            params.productId = this.detailData.productId
            params.tradeName = this.detailData.tradeName
            params.startMonth = this.detailData.time
                .split('~')[0]
                .replace(/[\r\n]/g, '')
                .trim()
            params.endMonth = this.detailData.time.split('~')[1]
                ? this.detailData.time
                      .split('~')[1]
                      .replace(/[\r\n]/g, '')
                      .trim()
                : null
            params.pageNo = this.ipaginationVideo.current
            params.pageSize = this.ipaginationVideo.pageSize
            this.getAction('/product/material/videoList', params).then((res) => {
                this.loadingDetail = false
                if (res.success) {
                    this.dataSourceDetail = res.result.list || []
                    this.ipaginationVideo.total = res.result.total || 0
                }
            })
        },
        showDetailVideo(item) {
            this.showDetailVideoVisible = true
            this.detailData = item
            this.getVideoList()
        },
        checkType(index) {
            this.videoArr[index].videoUrl = ''
            this.videoArr[index].checkVideoArr = []
            this.checkVideo = []
        },
        CompareDate(d1, d2) {
            return new Date(d1.replace(/-/g, '/')) >= new Date(d2.replace(/-/g, '/'))
        },
        editVideoUrl(item) {
            this.editData = {
                productId: { key: item.productId, label: item.productName },
                tradeType: item.tradeType,
                startMonth: item.time
                    .split('~')[0]
                    .replace(/[\r\n]/g, '')
                    .trim(),
                endMonth: item.time.split('~')[1]
                    ? item.time
                          .split('~')[1]
                          .replace(/[\r\n]/g, '')
                          .trim()
                    : undefined,
            }
            this.newAdd = false
            this.addVideo = true
            this.getParticipateList()
            //  params.productId = values.productId.key
            //                     params.productName = values.productId.label.replace(/[\r\n]/g, '').trim()
            //                     params.tradeType = values.tradeType
            //                     params.startMonth = moment(values.startMonth).format('YYYY-MM')
            //                     params.endMonth = values.endMonth ? moment(values.endMonth).format('YYYY-MM') : null
            //                     params.userId = this.userInfo().id
            //                     params.list = []
            this.$nextTick(() => {
                this.formMaterial.setFieldsValue(
                    pick(this.editData, 'productId', 'tradeType', 'startMonth', 'endMonth')
                )
                this.videoArr = [
                    {
                        tradeName: item.tradeName,
                        videoUrl: '',
                        addVideoUrl: 1,
                        signature: '',
                        uploaderId: '',
                        checkVideoArr: [],
                    },
                ]
            })
        },
        handleOkVideo() {
            this.formMaterial.validateFields((err, values) => {
                //console.log(values)
                if (!err) {
                    // let isNotComplete2 = this.videoArr.findIndex((item) => {
                    //     if (item.addVideoUrl == 1) {
                    //         return item.videoUrl === ''
                    //     } else {
                    //         return item.checkVideoArr.length == 0
                    //     }
                    // })
                    // if (isNotComplete2 > -1) {
                    //     this.$message.error('视频未填写完整')
                    //     return
                    // }

                    let isNotComplete = this.videoArr.findIndex((item) => {
                        return item.tradeName === ''
                    })
                    if (isNotComplete > -1) {
                        this.$message.error('有商品名称未填写')
                        return
                    }
                    var lastVideoUrlArr = [],
                        lastVideoUrlCheck = false
                    const fileSuffix = ['mp4', 'MP4']
                    for (let index = 0; index < this.videoArr.length; index++) {
                        if (this.videoArr[index].addVideoUrl == 1) {
                            if (this.videoArr[index].videoUrl.includes('，')) {
                                lastVideoUrlCheck = true
                            } else {
                                lastVideoUrlArr = this.videoArr[index].videoUrl.split(',')
                            }
                        }
                    }
                    console.log(lastVideoUrlArr)
                    if (lastVideoUrlCheck) {
                        this.$message.error('请用英文逗号拼接视频')
                        return
                    } else {
                        if (lastVideoUrlArr[0] != '') {
                            for (let i = 0; i < lastVideoUrlArr.length; i++) {
                                let result = lastVideoUrlArr[i].includes('.mp4')
                                // const fileStrArr = lastVideoUrlArr[i].split('.')
                                // const suffix = fileStrArr[fileStrArr.length - 1]
                                // let result = fileSuffix.some((item) => {
                                //     return item === suffix
                                // })
                                if (!result) {
                                    this.$message.error('请填写正确视频链接')
                                    return false
                                }
                            }
                        }
                    }

                    if (!values.endMonth) {
                    } else {
                        var time = this.CompareDate(
                            moment(values.endMonth).format('YYYY-MM'),
                            moment(values.startMonth).format('YYYY-MM')
                        )
                        if (time) {
                        } else {
                            this.$message.error('请修改时间，结束时间需大于等于开始时间')
                            return
                        }
                    }

                    //  /(http|https):\/\/([\w.]+\/?)\S*/.test(value)
                    // .replace(/[\r\n]/g, "").trim();
                    var params = {}
                    params.productId = values.productId.key
                    params.productName = values.productId.label.replace(/[\r\n]/g, '').trim()
                    params.tradeType = values.tradeType
                    params.startMonth = moment(values.startMonth).format('YYYY-MM')
                    params.endMonth = values.endMonth ? moment(values.endMonth).format('YYYY-MM') : null
                    params.userId = this.userInfo().id
                    params.list = []
                    for (let i = 0; i < this.videoArr.length; i++) {
                        if (this.videoArr[i].addVideoUrl == 1) {
                            // params.list.push(this.videoArr[i])

                            params.list.push({
                                videoUrl: !this.videoArr[i].videoUrl ? null : this.videoArr[i].videoUrl,
                                tradeName: this.videoArr[i].tradeName,
                            })
                        } else {
                            if (this.videoArr[i].checkVideoArr.length > 0) {
                                for (let j = 0; j < this.videoArr[i].checkVideoArr.length; j++) {
                                    params.list.push({
                                        signature: this.videoArr[i].checkVideoArr[j].id,
                                        uploaderId: this.videoArr[i].checkVideoArr[j].auditorId,
                                        videoUrl: this.videoArr[i].checkVideoArr[j].url,
                                        tradeName: this.videoArr[i].tradeName,
                                    })
                                }
                            } else {
                                params.list.push({
                                    signature: null,
                                    uploaderId: null,
                                    videoUrl: null,
                                    tradeName: this.videoArr[i].tradeName,
                                })
                            }
                        }
                    }
                    this.confirmLoading = true
                    this.postDataAction('/product/material/add', params).then((res) => {
                        this.confirmLoading = false
                        if (res.success) {
                            this.formMaterial.resetFields()
                            this.videoArr = [
                                {
                                    tradeName: '',
                                    videoUrl: '',
                                    addVideoUrl: 1,
                                    signature: '',
                                    uploaderId: '',
                                    checkVideoArr: [],
                                },
                            ]
                            this.addVideo = false
                            this.$refs.selectTable.keyValue = ''
                            this.$refs.selectTable.getData()
                            this.queryParam.monthTime = undefined
                            this.searchReset()
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                } else {
                    this.$message.error('请正确填写必填项目')
                }
            })
        },
        cancelVideo() {
            this.formMaterial.resetFields()
            this.videoArr = [
                {
                    tradeName: '',
                    videoUrl: '',
                    addVideoUrl: 1,
                    signature: '',
                    uploaderId: '',
                    checkVideoArr: [],
                },
            ]
            this.addVideo = false
        },
        getFormData(form, className) {
            return this[form].getFieldValue(className)
        },
        handleOkMaterial() {
            // this.videoArr.push({ tradeName: '', videoUrl: '', addVideoUrl: 1, signature: , uploaderId: '',checkVideoArr:[] })
            this.videoArr[this.checkVideoIndex].checkVideoArr = []
            this.$nextTick(() => {
                for (let i = 0; i < this.dataVideoList.length; i++) {
                    for (let j = 0; j < this.checkVideo.length; j++) {
                        if (this.checkVideo[j] == this.dataVideoList[i].id) {
                            this.videoArr[this.checkVideoIndex].checkVideoArr.push(this.dataVideoList[i])
                        }
                    }
                }

                this.materialVisible = false
                this.searchVideo = undefined
            })
        },
        selectMaterial(index) {
            this.checkVideoIndex = index
            if (!!this.getFormData('formMaterial', 'productId')) {
                this.getAction('/product/material/materialList', {
                    productId: this.getFormData('formMaterial', 'productId').key,
                }).then((res) => {
                    if (res.success) {
                        // this.ipaginationVideo.accountId = res.result
                        // this.ipaginationVideo.current = 1

                        this.materialVisible = true
                        this.dataVideoList = res.result.list.map((item) => {
                            return {
                                ...item,
                                showCard: true,
                            }
                        })
                        this.searchVideoList = res.result.list
                        // this.ipaginationVideo.total = res.result.total
                    } else {
                    }
                })
            } else {
                this.$message.error('请选择产品')
            }
        },
        setVideoData(data) {
            this.checkPersonOne = data
        },
        setVideoDataAll(data) {
            //  checkPerson: [],
            // checkPersonAll: [],
            if (data.findIndex((item) => item === this.checkPersonOne) > -1) {
                this.checkPersonElse.push(...data)
                this.checkPersonElse = [...new Set(this.checkPersonElse)]
            } else {
                // data.findIndex((item) => item === this.checkPersonOne) > -1
                this.checkPersonElse.splice(
                    this.checkPersonElse.findIndex((item) => item === this.checkPersonOne),
                    1
                )
            }
        },
        addVideoArr() {
            this.videoArr.push({
                tradeName: '',
                videoUrl: '',
                addVideoUrl: 1,
                signature: '',
                uploaderId: '',
                checkVideoArr: [],
            })
        },
        removeVideoArr(index) {
            this.videoArr.splice(index, 1)
        },
        getParticipateList(value) {
            this.dataElse = []
            this.getAction('/ctop/product/getUserProductList', {
                userId: this.userInfo().id,
                pageNo: 1,
                productName: value,
                pageSize: 1000,
            }).then((res) => {
                if (res.code == 0) {
                    this.dataElse = res.result.records
                }
            })
        },
        handleOk(item) {
            this.postDataAction('/product/material/edit', {
                productId: item.productId,
                tradeName: item.tradeName,
                itemRun: 1,
            }).then((res) => {
                if (res.success) {
                    this.searchQuery()
                } else {
                    this.$message.error(res.message)
                }
            })
        },

        handleCancel(item) {
            this.postDataAction('/product/material/edit', {
                productId: item.productId,
                tradeName: item.tradeName,
                itemRun: 0,
            }).then((res) => {
                if (res.success) {
                    this.searchQuery()
                } else {
                    this.$message.error(res.message)
                }
            })
        },

        ...mapGetters(['nickname', 'avatar', 'userInfo']),
        getList() {
            var params = {}
            // params.userId = this.userInfo().id
            params.pageSize = 1000
            params.pageNo = 1
            params.userId = this.userInfo().id
            getAction('/ctop/advertiser/list', params)
                .then((res) => {
                    if (res.success) {
                        this.list = res.result.records
                    } else {
                        this.$message.warning(res.message)
                    }
                })
                .finally(() => {})
        },
        // searchQuery(){
        //   this.queryParam.userId = this.userInfo().id;
        //   this.getList();
        // },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        getAllUserList(value) {
            this.options = []
            getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
                if (res.success) {
                    this.options = res.result.list
                }
            })
        },
        search(value) {
            this.options = []
            if (value != '') {
                // this.options = this.list.filter(item => {
                //   var data = item.realName + ' ' + item.roleName
                //   return data.toLowerCase().indexOf(value.toLowerCase()) > -1
                // })
                // this.options = [...this.options]
                this.getAllUserList(value)
            } else {
                this.getAllUserList()
            }
        },
    },
    mounted() {
        this.getAllUserList()
        this.getList()
        // getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: '' }).then((res) => {
        //   if (res.success) {
        //     this.options = res.result.list
        //   }
        // })
    },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
