<template>
    <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
             @cancel="handleCancel" cancelText="关闭">
        <a-spin :spinning="confirmLoading">
            <a-form :form="form">
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="媒体类型">
                    <a-radio-group @change="onChange" v-model="model.mediaId">
                        <a-radio-button value="1">头条</a-radio-button>
                        <a-radio-button value="2">快手</a-radio-button>
                        <a-radio-button value="3">头条内广</a-radio-button>
                        <a-radio-button value="4">快手内广</a-radio-button>
                        <a-radio-button value="5">千川</a-radio-button>
                        <a-radio-button value="6">磁力金牛</a-radio-button>
                        <a-radio-button value="12">小红书</a-radio-button>
                        <a-radio-button value="13">b站</a-radio-button>
                        <a-radio-button value="14">快手金教</a-radio-button>
                        <a-radio-button value="15">阿里UC</a-radio-button>
                        <a-radio-button value="16">腾讯</a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="代理商名称">
                    <a-select optionFilterProp="children" showSearch :filterOption="filterOption"
                              v-decorator="['agentCode', validatorRules.agentCodeRule]">
                        <a-select-option :value="item.agentCode" v-for="(item, index) in agentCodeList" :key="index">
                            {{ item.agentName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="项目名称">
                    <a-input placeholder="请输入项目名称" v-decorator="['projectName', validatorRules.projectName]"/>
                </a-form-item>
                <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="行业">
                  <j-tree-select ref="treeSelect" placeholder="请选择行业" v-decorator="['industryId']"
                    dict="sys_category,name,id" pidField="pid" pidValue="f5cb2d2d28417b3b65a6dd744bcb9a76">
                  </j-tree-select>
                </a-form-item>-->
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="供应商"
                             v-show="model.mediaId == '2' || model.mediaId == '4'|| model.mediaId == '6'">
                    <a-select optionFilterProp="children" showSearch :filterOption="filterOption"
                              v-decorator="['supplierCode', validatorRules.supplierCode]">
                        <a-select-option :value="item.supplierCode" v-for="(item, index) of supplierList" :key="index">
                            {{ item.supplierName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="广告主名称">
                    <a-select @change="handleChange" optionFilterProp="children" showSearch :filterOption="filterOption"
                              v-decorator="['advertiserId', validatorRules.advertiserId]">
                        <a-select-option :value="item.id" v-for="(item, index) of list" :key="index">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="产品名称">
                    <a-select optionFilterProp="children" showSearch :filterOption="filterOption"
                              v-decorator="['productId', validatorRules.productId]"
                              :disabled="getFormFieldValue('advertiserId') == '' || getFormFieldValue('advertiserId') == null">
                        <a-select-option :value="item.id" v-for="(item, index) of listProduct" :key="index">
                            {{ item.productName }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item v-if="model.mediaId == '1' || model.mediaId == '3'|| model.mediaId == '5' || maxBidShow"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol" label="最高出价">
                    <a-input placeholder="请输入最高出价" v-decorator="['maxBid', validatorRules.maxBid]"
                             addonAfter="元"/>
                </a-form-item>
                <a-form-item v-if="model.mediaId == '1' || model.mediaId == '3'|| model.mediaId == '5'"
                             :labelCol="labelCol" :wrapperCol="wrapperCol"
                             label="最高转化出价">
                    <a-input placeholder="最高转化出价" v-decorator="['maxDeepCpaBid']" addonAfter="元"
                             @keyup.native="form.setFieldsValue({maxDeepCpaBid:getFormFieldValue('maxDeepCpaBid').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')})"/>
                </a-form-item>
                <div v-show="model.mediaId == '2' || model.mediaId == '4'|| model.mediaId == '6'">
                    <div v-if="model.mediaId == '2' || model.mediaId == '4'|| model.mediaId == '6'">
                        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="优化目标">
                            <a-select @change="bidTypeChange($event)" @deselect="bidtypedeselect"
                                      v-decorator="['bidType', { rules: [{ required: true, message: '请选择优化目标' }],}]"
                                      mode="multiple">
                                <a-select-option :value="2">点击数</a-select-option>
                                <a-select-option :value="10">OCPM</a-select-option>
                                <a-select-option :value="6">OCPC</a-select-option>
                                <a-select-option :value="12">最大转化数</a-select-option>
                            </a-select>
                        </a-form-item>
                    </div>

                    <div v-if="Array.isArray(getFormFieldValue('bidType'))">
                        <a-form-item label="转化目标" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="
                getFormFieldValue('bidType').findIndex((item) => item == 10) > -1 ||
                getFormFieldValue('bidType').findIndex((item) => item == 6) > -1||
                getFormFieldValue('bidType').findIndex((item) => item == 12) > -1
              ">
                            <!-- v-model="model.ocpxActionType" -->
                            <a-select @change="ocpxActionTypeChange($event)" @deselect="ocpextiondeselect" v-decorator="[
                  'ocpxActionType',
                  { rules: [{ required: true, message: '请选择转化目标' }] },
                ]" mode="multiple">
                                <!-- <a-select-option :value="2">行为数</a-select-option> -->
                                <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 ocpxActionTypeArray"
                                         :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" addonAfter="元"/>
                            </a-form-item>
                        </div>

                        <div v-if="Array.isArray(getFormFieldValue('ocpxActionType'))">
                            <a-form-item v-if="
              getFormFieldValue('bidType').findIndex((item) => item == 10) > -1 ||
              getFormFieldValue('bidType').findIndex((item) => item == 6) > -1||
              getFormFieldValue('bidType').findIndex((item) => item == 12) > -1 || getFormFieldValue('ocpxActionType').length == 0
            " label="深度转化目标" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <!-- v-model="model.ocpxActionType" -->
                                <a-select @change="depthChange($event)" @deselect="depthChangedeselect"
                                          v-model="model.deepConversionType" mode="multiple">
                                    <a-select-option :value="item.deepCode" v-for="(item, index) in depthList"
                                                     :key="index">{{
                                            item.deepName
                                        }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </div>

                        <div v-if="model.deepConversionType">
                            <a-form-item v-show="model.deepConversionType.length >0" :labelCol="labelCol"
                                         :wrapperCol="wrapperCol"
                                         v-for="(item, index) in depthArray" :key="index"
                                         :label="item.deepName+'最高出价'">
                                <a-input placeholder="请输入最高出价" @input="deepInput"
                                         @keyup.native="item.deepValue = item.deepValue.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');"
                                         v-model="item.deepValue" addonAfter="元"/>
                            </a-form-item>
                        </div>

                    </div>

                </div>

                <div v-show="model.mediaId == '1' || model.mediaId == '3'|| model.mediaId == '5'">
                    <div v-if="model.mediaId == '1' || model.mediaId == '3'|| model.mediaId == '5'">
                        <a-form-item label="转化目标" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <!-- v-model="model.ocpxActionType" -->
                            <a-select @change="ocpxActionToutiaoChange($event)" @deselect="ocpextiondeselect"
                                      v-decorator="[
                  'ocpxActionType',
                  { rules: [{ required: true, message: '请选择转化目标' }] },
                ]" mode="multiple">
                                <!-- <a-select-option :value="2">行为数</a-select-option> -->
                                <a-select-option :value="item.ocpxActionType"
                                                 v-for="(item, index) in ocpxList.conversionType" :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 ocpxActionTypeArray"
                                         :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" addonAfter="元"/>
                            </a-form-item>
                        </div>

                        <div v-if="Array.isArray(getFormFieldValue('ocpxActionType'))">
                            <a-form-item label="深度转化目标" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <!-- v-model="model.ocpxActionType" -->
                                <a-select @change="depthToutiaoChange($event)" @deselect="depthChangedeselect"
                                          v-model="model.deepConversionType" mode="multiple">
                                    <a-select-option :value="item.ocpxActionType"
                                                     v-for="(item, index) in ocpxList.deepConversionType" :key="index">
                                        {{
                                            item.ocpxActionName
                                        }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </div>
                        <div>
                            <a-form-item v-show="model.deepConversionType.length >0" :labelCol="labelCol"
                                         :wrapperCol="wrapperCol"
                                         v-for="(item, index) in depthArray" :key="index"
                                         :label="item.deepName+'最高出价'">
                                <a-input placeholder="请输入最高出价" @input="deepInput"
                                         @keyup.native="item.deepValue = item.deepValue.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');"
                                         v-model="item.deepValue" addonAfter="元"/>
                            </a-form-item>
                        </div>

                    </div>

                </div>

                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="销售">
                    <a-select showSearch optionFilterProp="children" style="width: 100%" :filterOption="filterOption"
                              v-decorator="['saleId', { rules: [{ required: true, message: '请选择销售' }] }]">
                        <a-select-option v-for="appModel in options" :key="appModel.userId + new Date().getTime()"
                                         :value="appModel.userId">{{ appModel.realName }}&#12288;&#12288;{{
                                appModel.roleName
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="运营负责人">
                    <a-select showSearch optionFilterProp="children" style="width: 100%" @focus="handleFocus"
                              @blur="handleBlur"
                              :filterOption="filterOption"
                              v-decorator="['responsibleId', { rules: [{ required: true, message: '请选择运营负责人' }] }]">
                        <a-select-option v-for="appModel in options" :key="appModel.userId + new Date().getTime()"
                                         :value="appModel.userId">{{ appModel.realName }}&#12288;&#12288;{{
                                appModel.roleName
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="设计负责人">
                    <a-select showSearch optionFilterProp="children" style="width: 100%" @focus="handleFocus"
                              @blur="handleBlur"
                              :filterOption="filterOption"
                              v-decorator="['designResponsibleId', { rules: [{ required: true, message: '请选择设计负责人' }] }]">
                        <a-select-option v-for="appModel in options" :key="appModel.userId + new Date().getTime()"
                                         :value="appModel.userId">{{ appModel.realName }}&#12288;&#12288;{{
                                appModel.roleName
                            }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-spin>
    </a-modal>
</template>

<script>
import {httpAction, getAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import JTreeSelect from '@/components/jeecg/JTreeSelect'
import {mapGetters} from 'vuex'

export default {
    name: 'ProjectModal',
    components: {
        JSelectUserByDep,
        JSelectDepart,
        JTreeSelect,
    },
    data() {
        return {
            title: '操作',
            visible: false,
            model: {},
            labelCol: {
                xs: {span: 24},
                sm: {span: 5},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
            industryId: '',
            confirmLoading: false,
            form: this.$form.createForm(this),
            validatorRules: {
                projectName: {rules: [{required: true, message: '请输入项目名称!'}]},
                industryId: {rules: [{required: true, message: '请选择行业！'}]},
                advertiserId: {rules: [{required: true, message: '请选择广告主!'}]},
                productId: {rules: [{required: true, message: '请选择产品!'}]},
                supplierCode: {rules: [{required: true, message: '请选择供应商!'}], initialValue: 'kuaishou_001'},
                agentCodeRule: {rules: [{required: true, message: '请选择代理商!'}]},
                responsibleName: {rules: [{required: true, message: '请选择负责人!'}]},
                maxBid: {rules: [{required: false, message: '请输入最高出价!'}]},
            },
            url: {
                add: '/ctop/project/add',
                edit: '/ctop/project/edit',
                getList: '/ctop/advertiser/list',
            },
            list: [],
            listProduct: [],
            depthList: [],
            resId: '',
            shejiId: '',
            options: [],
            optionsElse: [],
            supplierList: [],
            agentCodeList: [],
            editAll: false,
            ocpxList: [],
            ocpxActionTypeArray: [],
            depthArray: [],
            maxBidShow: false,
        }
    },
    created() {
        this.getSupplierList()
        this.getAgentCodeList()
    },
    methods: {
        deepInput() {
            this.$forceUpdate()
        },
        maxValueInput() {
            this.$forceUpdate()
        },
        bidTypeChange(item) {
            console.log(item);
            // this.maxBidShow =   item.findIndex((item) => item == 2)
            let odx = item.indexOf(2)
            if (item.length == 1 && odx > -1) {
                this.maxBidShow = true;
                this.model.deepConversionType = [];
                this.depthArray = [];
                this.ocpxActionTypeArray = [];
            } else if (odx > -1) {
                this.maxBidShow = true;
            }

            if (item.length == 0) {
                this.model.deepConversionType = [];
                this.depthArray = [];
                this.ocpxActionTypeArray = [];
                this.maxBidShow = false;
            }
        },
        bidtypedeselect(item) {
            if (item == 2) {
                this.maxBidShow = false

            }
        },
        ocpxActionTypeChange(item) {
            // this.ocpxActionTypeArray = [];
            item.forEach(element => {
                this.ocpxList.find((par) => {
                    if (par.ocpxActionType == element) {

                        this.ocpxActionTypeArray.push({ocpxCode: par.ocpxActionType, ocpxName: par.ocpxActionName});
                    }

                })
            });
            this.deWeight();
            if (item.length == 0) {
                this.model.deepConversionType = [];
            }
        },
        ocpxActionToutiaoChange(item) {
            item.forEach(element => {
                this.ocpxList.conversionType.find((par) => {
                    if (par.ocpxActionType == element) {

                        this.ocpxActionTypeArray.push({
                            ocpxCode: par.ocpxActionType,
                            ocpxName: par.ocpxActionName,
                            maxValue: undefined
                        });
                    }

                })
            });
            this.deWeight();
            if (item.length == 0) {
                this.model.deepConversionType = [];
            }
        },
        deWeight() {
            for (var i = 0; i < this.ocpxActionTypeArray.length - 1; i++) {
                for (var j = i + 1; j < this.ocpxActionTypeArray.length; j++) {
                    if (this.ocpxActionTypeArray[i].ocpxName == this.ocpxActionTypeArray[j].ocpxName) {
                        this.ocpxActionTypeArray.splice(j, 1);
                        //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
                        j--;
                    }
                }
            }
            // return this.ocpxActionTypeArray;

        },
        ocpextiondeselect(item) {
            this.ocpxActionTypeArray.forEach((element, index) => {
                if (element.ocpxCode == item) {
                    this.ocpxActionTypeArray.splice(index, 1)
                }
            });
        },
        depthChange(event) {
            // this.depthArray = [];
            event.forEach(element => {
                this.depthList.find((par) => {
                    if (par.deepCode == element) {
                        this.depthArray.push({
                            deepCode: par.deepCode,
                            deepName: par.deepName,
                            deepValue: par.deepValue
                        })
                    }

                })
            });
            this.duplicate();
        },
        depthToutiaoChange(event) {
            this.depthArray = []
            event.forEach(element => {
                this.ocpxList.deepConversionType.find((par) => {
                    if (par.ocpxActionType == element) {
                        this.depthArray.push({
                            deepCode: par.ocpxActionType,
                            deepName: par.ocpxActionName,
                            deepValue: undefined
                        })
                    }

                })
            });
        },
        duplicate() {
            for (var i = 0; i < this.depthArray.length - 1; i++) {
                for (var j = i + 1; j < this.depthArray.length; j++) {
                    if (this.depthArray[i].deepName == this.depthArray[j].deepName) {
                        this.depthArray.splice(j, 1);
                        //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
                        j--;
                    }
                }
            }
        },
        depthChangedeselect(item) {
            console.log(item, this.depthArray)
            var index = this.depthArray.findIndex((v) => v.deepCode === item)
            this.depthArray.splice(index, 1)
        },
        validateInputCode(rule, value, callback) {
            if (value > 0) {
                callback()
            } else {
                callback('请输入大于0的最高报价!')
            }
        },
        validateInputMaxNum(rule, value, callback) {
            if (value > 0 && value <= 999999) {
                callback()
            } else {
                callback('请输入0~999999之间的出价')
            }
        },
        maxNumInput(obj) {
            console.log(obj);
            obj.target.value = obj.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            // console.log(this.form.setFieldsValue());
        },

        ...mapGetters(['nickname', 'avatar', 'userInfo']),
        onChange(e) {
            console.log(this.ocpxActionTypeArray);
            console.log(e);
            this.getOcpxList()
            this.depthArray = []
            this.ocpxActionTypeArray = []
            this.model.deepConversionType = []
            this.form.resetFields()
            // if (e.target.value == 1 || e.target.value == 3) {
            // //  console.log(this.model.bidType);
            //  this.$nextTick(()=>{
            //    this.form.setFieldsValue({maxBid:this.model.maxBid,bidType:this.model.bidType})
            //  })

            //   // this.form.maxBid = this.model.maxBid ? this.model.maxBid / 1000 : 0
            //   // console.log(this.form.getFieldValue('maxBid'));
            // }else{
            //   this.$nextTick(()=>{
            //     this.form.setFieldsValue({bidType:this.model.bidType})
            //   })
            //   setTimeout(()=>{
            //     this.form.setFieldsValue({ocpxActionType:this.model.ocpxActionType})
            //   },100)
            //   console.log(this.model.bidType);

            // }
            // console.log(`checked = ${e.target.value}`)
            // this.form.resetFields([])
        },
        handleChange(value) {
            console.log(value)
            getAction('/ctop/product/list', {advertiserId: value, pageSize: 1000}).then((res) => {
                if (res.success) {
                    this.listProduct = res.result.records
                }
            })
        },
        handleBlur() {
            console.log('blur')
        },
        handleFocus() {
            console.log('focus')
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        },
        getList() {
            var params = {}
            params.userId = this.userInfo().id
            params.pageSize = 1000
            params.pageNo = 1
            console.log(params)
            getAction(this.url.getList, params)
                .then((res) => {
                    if (res.success) {
                        console.log(res)
                        this.list = res.result.records
                    } else {
                        this.$message.warning(res.message)
                    }
                })
                .finally(() => {
                })
        },
        getAgentCodeList() {
            // /agent/agentConfig/list
            getAction('/agent/agentConfig/list').then((res) => {
                console.log(res)
                if (res.success) {
                    this.agentCodeList = res.result.records
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        getSupplierList() {
            var params = {}
            getAction('/ctop/supplierList/list', {pageNo: 1, pageSize: 100}).then((res) => {
                if (res.success) {
                    this.supplierList = res.result.records
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        add(item) {
            this.editAll = false
            this.edit({
                mediaId: '2',
                ...item,
            })
        },
        edit(record) {
            console.log(record);
            this.getSupplierList()
            this.getList()
            this.getOcpxList()
            if (record.advertiserId) {
                this.editAll = true
                getAction('/ctop/product/list', {advertiserId: record.advertiserId, pageSize: 1000}).then((res) => {
                    if (res.success) {
                        this.listProduct = res.result.records
                    }
                })
            }

            // var params = { ...record }
            if (record.mediaId == '2' || record.mediaId == '4' || record.mediaId == '6') {
                console.log(record)
                var params = {...record}
                params.bidType = record.bidType == null || record.bidType == '' ? [] : JSON.parse(record.bidType)
                // this.maxBidShow = params.bidType.findIndex((item) => item == 2)
                let odx = params.bidType.indexOf(2)
                if (odx > -1) {
                    this.maxBidShow = true;
                } else {
                    this.maxBidShow = false;
                }
                // params.bidType.findIndex(item => {
                //   if (item == 2) {
                //     this.maxBidShow = true;
                //   } else {
                //     this.maxBidShow = false;

                //   }
                // })

                let newArray = [];
                newArray = record.ocpxActionType == null || record.ocpxActionType == '' ? [] : JSON.parse(record.ocpxActionType)
                params.ocpxActionType = [];
                newArray.forEach(element => {
                    if (element.ocpxCode) {
                        params.ocpxActionType.push(element.ocpxCode)
                    }

                });
                this.ocpxActionTypeArray = newArray
                this.ocpxActionTypeArray.forEach(item => {
                    if (item.maxValue) {
                        item.maxValue = item.maxValue ? item.maxValue / 1000 : 0
                    }

                });

                let newArrayTwo = [];
                newArrayTwo = record.deepConversionType == null || record.deepConversionType == '' ? [] : JSON.parse(record.deepConversionType)
                params.deepConversionType = [];
                newArrayTwo.forEach(event => {
                    params.deepConversionType.push(event.deepCode)
                });
                console.log(params.deepConversionType);
                this.depthArray = newArrayTwo
                this.depthArray.forEach(item => {
                    item.deepValue = item.deepValue ? item.deepValue / 1000 : undefined
                });
                console.log(this.depthArray);
            } else {
                var {ocpxActionType, deepConversionType, bidType, ...params} = record
                let newArray = [];
                newArray = record.ocpxActionType == null || record.ocpxActionType == '' ? [] : JSON.parse(record.ocpxActionType)
                params.ocpxActionType = [];
                newArray.forEach(element => {
                    if (element.ocpxCode) {
                        params.ocpxActionType.push(element.ocpxCode)
                    }

                });
                this.ocpxActionTypeArray = newArray
                this.ocpxActionTypeArray.forEach(item => {
                    if (item.maxValue) {
                        item.maxValue = item.maxValue ? item.maxValue / 1000 : undefined
                    }

                });

                let newArrayTwo = [];
                newArrayTwo = record.deepConversionType == null || record.deepConversionType == '' ? [] : JSON.parse(record.deepConversionType)
                params.deepConversionType = [];
                newArrayTwo.forEach(event => {
                    params.deepConversionType.push(event.deepCode)
                });

                let obj = {}
                newArrayTwo = newArrayTwo.reduce((preVal, curVal) => {
                    obj[curVal.deepCode] ? "" : obj[curVal.deepCode] = preVal.push(curVal)
                    return preVal
                }, [])
                console.log(params.deepConversionType);
                this.depthArray = newArrayTwo
                this.depthArray.forEach(item => {
                    item.deepValue = item.deepValue ? item.deepValue / 1000 : undefined
                });
                console.log(this.depthArray);
                this.showDian = false
            }
            this.form.resetFields()
            this.model = Object.assign({}, params)
            console.log(this.model);
            this.model.maxBid = this.model.maxBid ? this.model.maxBid / 1000 : undefined
            this.model.maxDeepCpaBid = this.model.maxDeepCpaBid ? this.model.maxDeepCpaBid / 1000 : undefined
            this.visible = true
            this.getOcpxList()
            this.$nextTick(() => {
                console.log(this.model)
                if (record.advertiserId) {
                    this.form.setFieldsValue(
                        pick(
                            this.model,
                            'projectName',
                            'industryId',
                            'advertiserId',
                            'productId',
                            'responsibleName',
                            'maxBid',
                            'maxDeepCpaBid',
                            'userId',
                            'designResponsibleId',
                            'responsibleId',
                            'industryCode',
                            'supplierCode',
                            // 'advertiserType',
                            'saleId',
                            'bidType',
                            'agentCode'
                        )
                    )
                } else {
                    this.form.setFieldsValue(
                        pick(
                            this.model,
                            'projectName',
                            'industryId',
                            'advertiserId',
                            'responsibleName',
                            'maxBid',
                            'maxDeepCpaBid',
                            'userId',
                            'designResponsibleId',
                            'responsibleId',
                            'industryCode',
                            'supplierCode',
                            // 'advertiserType',
                            'saleId',
                            'bidType',
                            'ocpxActionType',
                            'deepConversionType',
                            'agentCode'
                        )
                    )
                }

                // this.resId = record.responsibleId
                // this.shejiId = record.designResponsibleId
                getAction('/sys/user/getAllUserListV1', '').then((res) => {
                    console.log(res)
                    if (res.success) {
                        this.options = res.result
                    }
                })
                getAction('/sys/user/getAllSaleList', '').then((res) => {
                    console.log(res)
                    if (res.success) {
                        this.optionsElse = res.result
                    }
                })
                //时间格式化
                setTimeout(() => {
                    this.form.setFieldsValue(pick(this.model, 'ocpxActionType'))
                })
            })
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        handleOk() {
            const that = this
            // 触发表单验证
            let isEvery = this.ocpxActionTypeArray.every((item, i) => {
                return "maxValue" in item && item.maxValue != "" && item.maxValue * 1000 >= 0 && item.maxValue * 1000 <= 999999 * 1000
            })
            let deepIsEvery = this.depthArray.every((event, i) => {
                return "deepValue" in event && event.deepValue != "" && event.deepValue * 1000 >= 0 && event.deepValue * 1000 <= 999999 * 1000
            })
            if (!isEvery || !deepIsEvery) {
                this.$message.warning('请输入0~999999之间的最高价')
            } else {
                this.form.validateFields((err, values) => {
                    if (!err) {

                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        var data = values.advertiserId
                        let formData = Object.assign(this.model, values)
                        // if (this.model.mediaId == 1 || this.model.mediaId == 3|| this.model.mediaId == 5) {
                        //   this.ocpxActionTypeArray = [];
                        //   this.depthArray = [];
                        //   formData.bidType = [];
                        // }

                        if (this.maxBidShow) {
                            formData.maxBid = formData.maxBid * 1000
                        } else {
                            if (this.model.mediaId == 1 || this.model.mediaId == 3 || this.model.mediaId == 5) {
                                formData.maxBid = formData.maxBid * 1000
                            } else {
                                formData.maxBid = 0
                            }

                        }
                        that.confirmLoading = true
                        // formData.maxBid = formData.maxBid * 1000
                        formData.maxDeepCpaBid = formData.maxDeepCpaBid * 1000
                        //时间格式化
                        // formData.advertiserId = data.key
                        // formData.advertiserName = data.label
                        formData.responsibleId = values.responsibleId
                        formData.designResponsibleId = values.designResponsibleId
                        formData.userId = formData.userId ? formData.userId : that.userInfo().id

                        // formData.ocpxActionType = formData.bidType == 2 ? JSON.stringify([0]) : JSON.stringify(formData.ocpxActionType)
                        formData.bidType = JSON.stringify(formData.bidType)
                        if (this.model.mediaId == '1' || this.model.mediaId == '3' || this.model.mediaId == '5') {
                            formData.bidType = '[]'
                        }
                        this.ocpxActionTypeArray.forEach(element => {
                            if (element.maxValue) {
                                element.maxValue = element.maxValue * 1000;
                            }

                        });
                        formData.ocpxActionType = this.ocpxActionTypeArray;
                        formData.ocpxActionTypeArray = this.ocpxActionTypeArray;
                        this.depthArray.forEach(element => {
                            if (element.deepValue) {
                                element.deepValue = element.deepValue * 1000;
                            }

                        });

                        formData.deepConversionType = this.depthArray;
                        formData.deepConversionTypeArray = this.depthArray;
                        httpAction(httpurl, formData, method)
                            .then((res) => {
                                if (res.success) {
                                    that.$message.success(res.message)
                                    that.$emit('ok')
                                } else {
                                    that.$message.warning(res.message)
                                }
                            })
                            .finally(() => {
                                that.confirmLoading = false
                                that.close()
                            })
                    }
                })


            }


        },
        handleCancel() {
            this.close()
        },
        getFormFieldValue(field) {
            return this.form.getFieldValue(field)
        },
        get(valueName, key) {
            console.log(valueName, key)
            this.resId = key
        },
        getOcpxList() {
            if (this.model.mediaId == '1' || this.model.mediaId == '3' || this.model.mediaId == '5') {
                this.getAction('/ocpx/kuaiShouOcpxActionTypeConfig/bytedanceList').then((res) => {
                    if (res.success) {
                        this.ocpxList = res.result;
                    }
                })
            } else {
                this.getAction('/ocpx/kuaiShouOcpxActionTypeConfig/list').then((res) => {
                    if (res.success) {
                        this.ocpxList = res.result;
                    }
                }),
                    this.getAction('/ocpx/kuaiShouOcpxActionTypeConfig/deepList').then((res) => {
                        if (res.success) {
                            this.depthList = res.result;
                        }
                    })
            }

        },
    },
}
</script>

<style lang="less" scoped></style>