<style lang="scss" scoped xmlns="http://www.w3.org/1999/html">
.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%">
                    <div class="item">
                        <span>媒体维度：</span>
                        <a-radio-group v-model="mediaId" @change="typeChange()">
                            <a-radio-button value="2">快手</a-radio-button>
                            <a-radio-button value="1">头条</a-radio-button>
                        </a-radio-group>
                    </div>
                    <span style="margin-left: 10px">日期选择：</span>
                    <a-date-picker v-model="statDate" format="YYYY-MM-DD" @change="typeChange()"/>

                    <a-button type="primary" style="margin: 10px" @click="searchData"
                    >搜索
                    </a-button
                    >
                    <a-button
                        @click="exportExcel"
                        :loading="visibleLoading"
                        style="margin-right: 15px"
                    >
                        导 出
                    </a-button>
                    <a-button
                        type="primary"
                        icon="reload"
                        @click="getDataReset"
                        style="background-color: #67c23a; border-color: #67c23a"
                    >重置
                    </a-button>
                </div>
            </a-row>
        </a-row>
        <a-row :gutter="10" style="margin-top: 10px">
            <a-col :span="24">
                <a-table
                    v-if="this.mediaId == '2'"
                    size="middle"
                    :columns="ksColumns"
                    :dataSource="data"
                    :pagination="ipagination"
                    bordered
                    id="outTable"
                    :scroll="{ x: true }"
                    :loading="loading"
                >
          <span slot="relativePeople" slot-scope="text, record">
            <p>销售：{{ record.saleName || "无" }}</p>
            <p>运营：{{ record.responsibleName || "无" }}</p>
          </span>

                    <span slot="updateData" slot-scope="text, record">
            <a @click="handleEdit(record)">设置</a>
          </span>

                    <span slot="budgetInfo" slot-scope="text, record">
            <p v-if="!!record.budgetJson.setBudget">
              预算：{{ record.budgetJson.setBudget }}
            </p>
            <p>消耗：{{ record.budgetJson.actualBudget }}</p>
            <p v-if="record.budgetJson.compare && record.budgetJson.compare == 0">
              差值：
            </p>
            <p v-if="record.budgetJson.compare && record.budgetJson.compare > 0">
              差值：<font color="red"> ↑{{ record.budgetJson.subtract }}</font>
            </p>
            <p v-if="record.budgetJson.compare && record.budgetJson.compare < 0">
              差值：<font color="green"> ↓{{ record.budgetJson.subtract }}</font>
            </p>
          </span>

           <span slot="costInfo" slot-scope="text, record">
            <div v-for="(item, index) in record.costArray" :key="index">
              <p>
                {{ item.name }}&nbsp;&nbsp;考核：{{ item.setCost }}&nbsp;&nbsp;实际：
                <font v-if="!item.compare && item.compare == 0"> {{ item.cost }}</font>
                <font v-if="item.compare && item.compare < 0" color="green">
                  ↓{{ item.cost }}</font
                >
                <font v-if="item.compare && item.compare > 0" color="red">
                  ↑{{ item.cost }}</font
                >
              </p>
            </div>
          </span>
                </a-table>

                <a-table
                    v-if="this.mediaId == '1'"
                    size="middle"
                    :columns="bytedanceColumns"
                    :dataSource="data"
                    :pagination="ipagination"
                    bordered
                    id="outTable"
                    :scroll="{ x: true }"
                    :loading="loading"
                >
          <span slot="relativePeople" slot-scope="text, record">
            <p>销售：{{ record.saleName || "无" }}</p>
            <p>运营：{{ record.responsibleName || "无" }}</p>
          </span>

                    <span slot="budgetInfo" slot-scope="text, record">
            <p v-if="!!record.budgetJson.setBudget">
              预算：{{ record.budgetJson.setBudget }}
            </p>
            <p>消耗：{{ record.budgetJson.actualBudget }}</p>
            <p v-if="record.budgetJson.compare && record.budgetJson.compare == 0">
              差值：-
            </p>
            <p v-if="record.budgetJson.compare && record.budgetJson.compare > 0">
              差值：<font color="red"> ↑{{ record.budgetJson.subtract }}</font>
            </p>
            <p v-if="record.budgetJson.compare && record.budgetJson.compare < 0">
              差值：<font color="green"> ↓{{ record.budgetJson.subtract }}</font>
            </p>
          </span>

                    <span slot="costInfo" slot-scope="text, record">
            <div v-for="(item, index) in record.costArray" :key="index">
              <p>
                {{ item.name }}&nbsp;&nbsp;考核：{{ item.setCost }}&nbsp;&nbsp;实际：<font
                  v-if="!item.compare && item.compare == 0"
              >{{ item.cost }}</font
              >
                <font v-if="item.compare && item.compare < 0" color="green">
                  ↓{{ item.cost }}</font
                >
                <font v-if="item.compare && item.compare > 0" color="red">
                  ↑{{ item.cost }}</font
                >
              </p>
            </div>
          </span>
                    <span slot="updateData" slot-scope="text, record">
            <a @click="handleEdit(record)">设置</a>
          </span>
                </a-table>
            </a-col>
        </a-row>



        <a-modal
            title="设置预算及成本"
            v-model="visible"
            @ok="handleOkAdd"
            @cancel="handleCancel"
            :confirmLoading="confirmLoading"

            :width="800"
        >
            <a-form :form="form">
                <a-form-item label="设置预算" :labelCol="labelCol" :wrapperCol="wrapperCol">
                    <a-input
                        @input="maxValueInput"
                        placeholder="请输入预算"
                        v-model="submitForm.budget"
                    />
                </a-form-item>
                <div>
                    <div>
                        <a-form-item
                            label="转化目标"
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            showSearch
                        >
                            <a-select
                                showSearch
                                :filterOption="filterOption"
                                @change="ocpxActionToutiaoChange($event)"
                                @deselect="ocpextiondeselect"
                                v-decorator="[
                  'ocpxActionType',
                  { rules: [{ required: true, message: '请选择转化目标' }] },
                ]"
                                mode="multiple"
                            >
                                <a-select-option
                                    :value="item.ocpxActionType"
                                    v-for="(item, index) in ocpxList"
                                    :key="index"
                                >{{ item.ocpxActionName }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>

                        <div v-if="Array.isArray(getFormFieldValue('ocpxActionType'))">
                            <a-form-item
                                v-if="getFormFieldValue('ocpxActionType').length > 0"
                                :labelCol="labelCol"
                                :wrapperCol="wrapperCol"
                                v-for="(item, index) in submitForm.ruleDetails"
                                :key="index"
                                :label="item.ocpxName"
                            >
                                <a-input
                                    @input="maxValueInput"
                                    @keyup.native="
                    item.maxValue = item.maxValue.replace(
                      /^(\-)*(\d+)\.(\d\d).*$/,
                      '$1$2.$3'
                    )
                  "
                                    placeholder="请输入最高成本"
                                    v-model="item.maxValue"
                                />
                            </a-form-item>
                        </div>
                    </div>
                </div>
            </a-form>
        </a-modal>
    </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 lifting from "./components/lifting";
import timeCheck from "./components/timeCheck";
import {mapGetters} from "vuex";
import pick from "lodash.pick";
import {downFile} from "@api/manage";

var length = 0;
var active = 1;
const ksColumns = [
    {
        title: "项目",
        dataIndex: "projectName",
        align: "left",
        width: 150,
    },
    {
        title: "相关人",
        dataIndex: "relativePeople",
        key: "relativePeople",
        scopedSlots: {customRender: "relativePeople"},
        align: "left",
        width: 130,
    },
    {
        title: "操作",
        dataIndex: "updateData",
        key: "updateData",
        scopedSlots: {customRender: "updateData"},
        align: "left",
        width: 80,
    },
    {
        title: "预算情况",
        dataIndex: "budgetInfo",
        key: "budgetInfo",
        scopedSlots: {customRender: "budgetInfo"},
        align: "left",
        width: 180,
    },

    {
        title: "成本情况",
        dataIndex: "costInfo",
        key: "costInfo",
        scopedSlots: {customRender: "costInfo"},
        align: "left",
        width: 300,
    },

    {
        title: "激活数",
        dataIndex: "activation",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "激活成本",
        dataIndex: "activationCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "次留",
        dataIndex: "eventNextDayStay",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "次留率",
        dataIndex: "eventNextDayStayRate",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "次留成本",
        dataIndex: "eventNextDayStayCost",
        align: "left",
        width: 100,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "表单数",
        dataIndex: "formCount",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "表单成本",
        dataIndex: "formCountCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "付费数",
        dataIndex: "eventPay",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "付费成本",
        dataIndex: "eventCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "关键行为数",
        dataIndex: "keyAction",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "关键行为成本",
        dataIndex: "keyActionCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "唤起数",
        dataIndex: "eventAppInvoked",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "唤起成本",
        dataIndex: "eventAppInvokedCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "roi",
        dataIndex: "eventPayPurchaseAmountFirstDayCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "3留",
        dataIndex: "eventThreeDayStayByConversionCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "7留",
        dataIndex: "eventWeekStayByConversionCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
];

const bytedanceColumns = [
    {
        title: "项目",
        dataIndex: "projectName",
        align: "left",
        width: 150,
    },
    {
        title: "相关人",
        dataIndex: "relativePeople",
        key: "relativePeople",
        scopedSlots: {customRender: "relativePeople"},
        align: "left",
        width: 130,
    },
    {
        title: "操作",
        dataIndex: "updateData",
        key: "updateData",
        scopedSlots: {customRender: "updateData"},
        align: "left",
        width: 80,
    },

    {
        title: "预算情况",
        dataIndex: "budgetInfo",
        key: "budgetInfo",
        scopedSlots: {customRender: "budgetInfo"},
        align: "left",
        width: 180,
    },

    {
        title: "成本情况",
        dataIndex: "costInfo",
        key: "costInfo",
        scopedSlots: {customRender: "costInfo"},
        align: "left",
        width: 300,
    },

    {
        title: "激活数",
        dataIndex: "active",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "激活成本",
        dataIndex: "activeCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "次留",
        dataIndex: "attributionNextDayOpenCnt",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "次留率",
        dataIndex: "attributionNextDayOpenRate",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "次留成本",
        dataIndex: "attributionNextDayOpenCost",
        align: "left",
        width: 100,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "表单数",
        dataIndex: "form",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "表单成本",
        dataIndex: "formCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "付费数",
        dataIndex: "payCount",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "付费成本",
        dataIndex: "payCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "关键行为数",
        dataIndex: "gameAddiction",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "关键行为成本",
        dataIndex: "gameAddictionCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "注册数",
        dataIndex: "register",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "注册成本",
        dataIndex: "registerCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "完件数",
        dataIndex: "loanCompletion",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "完件成本",
        dataIndex: "loanCompletionCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "授信数",
        dataIndex: "preLoanCredit",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "授信成本",
        dataIndex: "preLoanCreditCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "app内访问数",
        dataIndex: "inAppUv",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },

    {
        title: "app内访问成本",
        dataIndex: "inAppUvCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "app内付费数",
        dataIndex: "inAppPay",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "app内付费成本",
        dataIndex: "inAppPayCost",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
    {
        title: "首日roi",
        dataIndex: "statPayAmount",
        align: "left",
        width: 80,
        customRender: function (t) {
            if (t && t != 0) {
                return t;
            } else {
                return "-";
            }
        },
    },
];

export default {
    name: "data-display-statistics",
    components: {
        ACol,
        ARow,
        countTo,
        lifting,
        timeCheck,
        DatePicker,
    },
    mixins: [JeecgListMixin],
    data: function () {
        return {
            visibleLoading: false,
            submitForm: {
                projectId: undefined,
                budget: undefined,
                ruleDetails: [],
            },
            ocpxActionTypeArray: [],
            confirmLoading: false,
            form: this.$form.createForm(this),
            visible: false,
            data: [],
            mediaId: "2",
            statDate: moment(new Date()),
            ksColumns: ksColumns,
            bytedanceColumns: bytedanceColumns,
            loading: false,
            dataElse: [],
            ocpxList: [],
            labelCol: {
                xs: {span: 24},
                sm: {span: 5},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
            ipagination: {
                current: 1,
                pageSize: 10,
                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.getSaleData();
                },
            },
        };
    },
    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,
        ...mapGetters(["nickname", "avatar", "userInfo"]),
        exportExcel() {
            this.visibleLoading = true;
            var params = {};
            params.date = this.statDate.format("YYYY-MM-DD");
            params.userId = this.userInfo().id;
            params.mediaId = this.mediaId;
            downFile("http://api.bjhcstszkj.cn/jeecg-boot" + "/budget/exportReport", params).then(
                (res) => {
                    this.visibleLoading = false;
                    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 = '销售成本报表.xlsx'; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                }
            );
        },
        getDataReset() {
            this.ipagination.current = 1;
            this.ipagination.pageSize = 10;
            this.statDate = moment(new Date());
            this.getSaleData();
            this.getOcpxList();
        },

        ocpextiondeselect(item) {
            this.submitForm.ruleDetails.forEach((element, index) => {
                if (element.ocpxCode == item) {
                    this.submitForm.ruleDetails.splice(index, 1);
                }
            });
        },

        ocpxActionToutiaoChange(item) {
            item.forEach((element) => {
                this.ocpxList.find((par) => {
                    if (par.ocpxActionType == element) {
                        this.submitForm.ruleDetails.push({
                            ocpxCode: par.ocpxActionType,
                            ocpxName: par.ocpxActionName,
                            maxValue: undefined,
                        });
                    }
                });
            });
            this.deWeight();
        },

        deWeight() {
            for (var i = 0; i < this.submitForm.ruleDetails.length - 1; i++) {
                for (var j = i + 1; j < this.submitForm.ruleDetails.length; j++) {
                    if (
                        this.submitForm.ruleDetails[i].ocpxName ==
                        this.submitForm.ruleDetails[j].ocpxName
                    ) {
                        this.submitForm.ruleDetails.splice(j, 1);
                        j--;
                    }
                }
            }
        },
        maxValueInput() {
            this.$forceUpdate();
        },
        getOcpxList() {
            this.getAction("/budget/ocpxList", {
                mediaId: this.mediaId,
            }).then((res) => {
                if (res.success) {
                    this.ocpxList = res.result;
                }
            });
        },

        handleOkAdd() {
            console.log(this.submitForm);
            this.confirmLoading = true;
            this.getAction("/budget/add", {
                userId: this.userInfo().id,
                mediaId: this.mediaId,
                addInfo: this.submitForm,
            }).then((res) => {
                if (res.success) {
                    this.confirmLoading = false;
                    this.visible = false;
                    this.submitForm.ruleDetails = [];
                    this.submitForm.budget = undefined;
                    this.submitForm.projectId = undefined;
                    this.form.resetFields();
                    this.getSaleData();
                } else {
                    this.confirmLoading = false;
                    this.$message.error(res.message);
                }
            });
        },
        handleCancel() {
            this.submitForm.ruleDetails = [];
            this.submitForm.budget = undefined;
            this.submitForm.projectId = undefined;
            this.form.resetFields();
        },

        handleEdit: function (record, sign) {
            this.submitForm.projectId = record.projectId;
            this.visible = true;
            this.getAction("/budget/getById", {
                projectId: record.projectId,
            }).then((res) => {
                if (res.success) {
                    this.visible = true;
                    this.submitForm.budget = res.data.budget;
                    this.submitForm.ruleDetails = res.data.ruleDetails;
                    var model = {};
                    model.ocpxActionType = res.data.ruleDetails.map((item) => {
                        return item.ocpxCode;
                    });
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.form.setFieldsValue(pick(model, "ocpxActionType"));
                        });
                    });
                } else {
                    this.$message.error(res.message);
                }
            });
        },

        searchData() {
            this.ipagination.current = 1;
            this.ipagination.pageSize = 10;
            var that = this;
            that.getSaleData();
        },

        typeChange() {
            this.ipagination.current = 1;
            this.ipagination.pageSize = 10;
            this.getSaleData();
            this.getOcpxList();
        },

        getSaleData() {
            this.loading = true;
            let date = this.statDate.format("YYYY-MM-DD");
            this.getAction("/budget/report", {
                userId: this.userInfo().id,
                mediaId: this.mediaId,
                date: date,
                pageNo: this.ipagination.current,
                pageSize: this.ipagination.pageSize,
            }).then((res) => {
                if (res.success) {
                    this.data = res.result.list;
                    this.ipagination.total = res.result.total;
                    this.loading = false;
                }
            });
        },
        getFormFieldValue(field) {
            return this.form.getFieldValue(field);
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },
        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;
            }
        },
    },

    ipaginationChange(pagination) {
        this.ipagination.current = pagination.current;
        this.ipagination.pageSize = pagination.pageSize;
        this.getSaleData();
    },
    watch: {},
    mounted: function () {
        this.getSaleData();
        this.getOcpxList();
    },
};
</script>
