<style lang="scss" scoped>
.placeOrder{
    ul,li{
        margin: 0;
        padding: 0;
    }
    width: 100%;
    .topBody{
        width: 100%;
        height: 146px;
        background: #FFFFFF;
        margin-bottom: 24px;
        padding: 20px;
        box-sizing: border-box;
         .breadcrumb{
            height: 22px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
        }
        .bottom{
            display: flex;
            position: relative;
            // padding: 20px;
            .touxiang{
                width: 72px;
                height: 72px;
            }
            .tip{
                .greet{
                    width: 300px;
                    height: 28px;
                    font-size: 20px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 0.85);
                    line-height: 28px;
                }
                .descPosition{
                    height: 22px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.45);
                    line-height: 22px;
                }

            }
            .mybtn{
                position: absolute;
                // top: 50%;
                // margin-left: -18px;
                right: 0;
            }
        }

    }
    .section{
        background: white;
        .sectionBody{
            // background: white;
            width:960px;
            margin: 0 auto ;
            margin-top: 20px;
            ul,
            li {
                margin: 0;
                padding: 0;
            }
            .moduler {
                background: #fff;
                margin-bottom: 16px;
                position: relative;
                padding: 32px 24px 48px 32px;
                // border-radius: 4px;
                // box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
                .moduler-title {
                    display: flex;
                    align-items: center;
                    font-size: 22px;
                    margin-bottom: 20px;
                }
                .row-item {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: 32px;
                }
                .row-item:last-of-type {
                    margin-bottom: 0;
                }
                .row-item .hint-item {
                    width: 24px;
                    min-width: 24px;
                    align-self: flex-start;
                    line-height: 20px;
                    height: 20px;
                    margin-top: 9px;
                }
                .row-item .label-item {
                    position: relative;
                    align-items: flex-start;
                    align-self: flex-start;
                    line-height: 20px;
                    height: 20px;
                    margin-top: 10px;
                    width: 80px;
                    min-width: 80px;
                    .text-item {
                        font-size: 14px;
                        width: 60px;
                    }
                }
                .row-item .required-item {
                    width: 4px;
                    height: 4px;
                    border-radius: 2px;
                    background: #f45858;
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .row-item .input-item {
                    min-width: 500px;
                    position: relative;
                    // height: 35px;
                    .tip {
                        font-size: 12px;
                        color: tomato;
                    }
                }
                .adName{
                    display: flex;
                    .nameList{
                        width: 90%;
                    }
                    .item{
                        display: inline-block;
                        width: 30%;
                        margin-left: 15px;
                        margin-bottom: 10px;
                    }
                }
                .opt {
                    text-align: right;
                }
            }
        }
    }
}
</style>

<style lang="less">
    .placeOrder{
        .ant-timeline-item-head{
            background: rgb(240,242,245);
        }
        .ant-form-item {          
            margin-bottom: 0px; 
        }
        .ant-radio-button-wrapper {
            min-width: 80px;
            text-align: center;
            
        }
        .muen{
            cursor: pointer;
        }
        .muen:hover{
            color: #1890ff;
        }
    }
</style>
<template>
    <div class="placeOrder">
        <div class="topBody">
             <p class="breadcrumb">
                <a-breadcrumb style="display:block;width:100%">
                    <a-breadcrumb-item ><span class="muen" @click="goPlantForm()">工作台</span></a-breadcrumb-item>
                    <a-breadcrumb-item>素材下单</a-breadcrumb-item>
                </a-breadcrumb>
            </p>
            <div class="bottom">
                <div class='tip'>
                    <p class="greet">素材下单</p>
                    <p class="descPosition">
                       <span>在此下单给设计组长，下单前请与设计组长沟通日均产出素材量。</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="section">
            <a-spin :spinning="placeOrderSpinning">
            <div class="sectionBody">
                <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                >
                <div class="moduler">
                    <!-- 名称 -->
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">订单标题</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                             <a-form-model-item ref="orderTitle"  prop="orderTitle">
                               <a-input    v-model="form.orderTitle" />
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">设计组长</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                             <a-form-model-item ref="design"  prop="design">
                               <a-select  style="width: 500px" v-model="form.design" show-search  option-filter-prop="children" placeholder="请选择设计组长" :filter-option="filterOption">
                                    <a-select-option v-for="item in designLeaderList" :key="item.userId" :value='item.userId'>
                                        {{item.realname}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">关联项目</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                             <a-form-model-item ref="project"  prop="project">
                               <a-select  style="width: 500px" v-model="form.project" show-search  option-filter-prop="children" placeholder="请选择关联项目">
                                    <a-select-option v-for="item in projectList" :key="item.projectId" :value='item.projectId'>
                                        {{item.projectName+'_'+ (item.mediaId==1?'头条':'快手')+'_'+ item.userName}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">投放系统</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="sysName"  prop="sysName">
                                <a-radio-group v-model="form.sysName" @change="sysNameChange">
                                    <a-radio-button value="3">不限</a-radio-button>
                                    <a-radio-button value="1">IOS</a-radio-button>
                                    <a-radio-button value="2">安卓</a-radio-button> 
                                </a-radio-group>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="form.sysName=='2'">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">APK链接</div>
                            <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="sysPackage"  prop="sysPackage">
                                <a-input v-model="form.sysPackage"/>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">订单周期</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="dateValue"  prop="dateValue">
                                <a-range-picker v-model="dateValue" @change="dateChange" :disabled-date="disabledDate" />
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">素材总量</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="materialAmount"  prop="materialAmount">
                                <a-input-number :min="1" :max="500"  @change="materialAmountChange" v-model="form.materialAmount" />
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">日均产量</div>
                            <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="materialAmountDay"  prop="materialAmountDay">
                                <a-input-number  :max="500"  @blur="materialAmountDayChange" v-model="form.materialAmountDay"  />
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">素材类型</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="materialType"  prop="materialType">
                                <a-radio-group v-model="form.materialType" @change="materialTypeChange">
                                    <a-radio-button :value="1">真人</a-radio-button>
                                    <a-radio-button :value="2">剪辑</a-radio-button>
                                    <a-radio-button :value="3" :disabled='!form.materialAmount || form.materialAmount<=1'>组合</a-radio-button>
                                                                      
                                </a-radio-group>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="form.materialType==3">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">真人数量</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="realAmount"  prop="realAmount">
                                 <a-input-number :min="1" :max="500"  @change="realAmountChange" v-model="form.realAmount" />
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="form.materialType==3">
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">剪辑数量</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="cutAmount"  prop="cutAmount">
                                 <a-input-number :min="1" :max="500"  @change="cutAmountChange" v-model="form.cutAmount" />
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">订单备注</div>
                            <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="orderRemark"  prop="orderRemark">
                                <a-textarea
                                    v-model="form.orderRemark"
                                    placeholder="请输入订单备注"
                                    :auto-size="{ minRows: 7, }"
                                    :maxLength='200'
                                />
                                <span style="position:absolute;bottom:0px;right:10px;line-height:24px"><span style="color:#1890ff">{{form.orderRemark.length}}</span>/200</span>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" >
                        <div class="hint-item"></div>
                        <div class="label-item">
                            <div class="text-item">附件</div>
                            <!-- <div class="required-item"></div> -->
                        </div>
                        <div class="input-item"> 
                            <a-form-model-item ref="orderRemark"  prop="orderRemark">
                                <a :href="form.attachmentUrl" style="margin-right:20px;display:block" v-if="form.attachmentUrl">{{form.attachmentName}}</a>
                                <a-upload
                                    name="file"
                                    :multiple="false"
                                    :action="uploadAction"
                                    :headers="tokenHeader"
                                    :file-list="fileList"
                                    :showUploadList="false"
                                    :beforeUpload="beforeUpload"
                                    @change="handleChange"
                                    style="margin-right:20px"
                                        
                                    >
                                        <a-button :disabled="loadDisabled">
                                        <a-icon type="upload" />
                                            {{loadDisabled?'上传中,请稍后':'文件上传'}}
                                        </a-button>
                                </a-upload>
                            </a-form-model-item>
                        </div>
                    </div>
                </div>
                <div class="moduler">
                    <!-- <div class="moduler-title">计划名称</div> -->
                    <div class="opt">
                        <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
                        <a-button type="primary"  style="margin-right:15px" @click="saveHandler" :loading="saveLoading">
                            {{isEidt?'完成':'下单'}}
                        </a-button>
                    </div>
                </div>   
                </a-form-model>
            </div>
            </a-spin>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types";
const fileSuffix = [
  'rar',
  'zip',
  'arj',
  'gz',
  'z',
  '7-zip',
  'tar',
  'gzip',
  'bz2',
  'jar',
  'ace',
  'iso',
  
]
export default {
    data() {
        return {
            placeOrderSpinning:false,
            fileList:[],
            isEidt:false,
            loadDisabled:false,
            tokenHeader: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
            uploadAction:'',
            

            saveLoading:false,
            dateValue:[],
            form: {
                orderTitle: '',               
                design:undefined,
                project:undefined,
                sysName:'3',
                sysPackage:'',
                materialAmount:undefined,
                materialAmountDay:undefined,
                materialType:1,
                realAmount:undefined,
                cutAmount:undefined,
                orderRemark:'',
                attachmentName:'',
                attachmentUrl:'',

            },
            rules: {
                orderTitle: [
                    { required: true, message: '请填写订单标题', trigger: 'blur' },
                    { min: 2, message: '订单标题长度不得小于2', trigger: 'blur' },
                ],
                // sysPackage: [
                //     { required: true, message: '请输入APK链接', trigger: 'blur' },
                //     { min: 2, message: '长度不得小于2', trigger: 'blur' },
                // ],
                // dateValue: [{ required: true, message: '请选择订单周期', trigger: 'change' }],
                materialAmount: [{ required: true, message: '素材总数必须大于等于1', trigger: 'change' }],
                // materialAmountDay: [{required: true, message: '日均产量必须填写', trigger: 'change' }],
                project: [{required: true, message: '请选择关联项目', trigger: 'change' }],
                design: [{required: true, message: '请选择设计组长', trigger: 'change' }],
                cutAmount: [
                    { required: true, message: '组合模式下，剪辑数量必须填写', trigger: 'blur' },
                    // { min: 1, message: '组合模式下，剪辑数量不能小于1', trigger: 'blur' },
                ],
                realAmount: [
                    { required: true, message: '组合模式下，真人数量必须填写', trigger: 'blur' },
                   
                ],
            },
            // 操作记录
            designLeaderList:[],
            projectList:[],

            // 本周项目燃尽图
            burnDownChart:[],

            // 分页参数
            totalPage:0,
            currentPage:1,
            userInfo:{},
            roleCode:'',
            currentOrderInfo:{},
        }
    },
    methods: {
        dateChange(date,dateString){
            console.log(date)
        },
        goPlantForm(){
            if(this.$parent.role=='operator'){
                this.$parent.currentTabComponent='operatorPlatform'
            }else if(this.$parent.role=='designLeader'){
                this.$parent.currentTabComponent='designleaderPlatform'
            }else if(this.$parent.role=='design'){
                this.$parent.currentTabComponent='operatorPlatform'
            }
            this.$parent.isEdit=false;
        },
        disabledDate(current) {
            return current && current < moment().subtract(1,'days')
        },
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            );
        },
        
        // form-modal 自带方法
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    console.log('submit!',valid);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
        // 分页页码改变
        pageChange(page, pageSize){

        },
        sysNameChange(val){
            console.log(val);
            this.form.sysPackage='';
        },
        materialAmountChange(e){
            console.log(e)
            if(this.form.materialType==1){
                this.form.realAmount=this.form.materialAmount;
                this.form.cutAmount=0
            }else if(this.form.materialType==2){
                this.form.cutAmount=this.form.materialAmount;
                this.form.realAmount=0
            }else{
                if(this.form.materialAmount){
                    this.form.cutAmount=Math.ceil(this.form.materialAmount/2);
                    this.form.realAmount=Math.floor(this.form.materialAmount/2);
                }
                
            }
            if(this.form.materialAmount<=1){
                this.form.materialType=1
            }
            this.form.materialAmountDay=undefined
        },
        materialAmountDayChange(e){
            console.log(e);
            if(e.target.value>this.form.materialAmount&&this.form.materialAmount){
                this.$message.error('日均产量不能大于素材总量')
                this.form.materialAmountDay=undefined
            }else if(!this.form.materialAmount){
                this.$message.error('请先填写素材总量')
                this.form.materialAmountDay=undefined
            }
            
            
        },
        materialTypeChange(e){
            console.log(e.target.value)
            if(e.target.value==1){
                this.form.realAmount=this.form.materialAmount?this.form.materialAmount:undefined;
                this.form.cutAmount=0
            }else if(e.target.value==2){
                this.form.cutAmount=this.form.materialAmount?this.form.materialAmount:undefined;
                this.form.realAmount=0
            }else if(e.target.value==3){
                if(this.form.materialAmount){                    
                    this.form.cutAmount=Math.ceil(this.form.materialAmount/2);
                    this.form.realAmount=Math.floor(this.form.materialAmount/2);
                }else{
                    this.form.cutAmount=undefined;
                    this.form.realAmount=undefined;
                }
                
            }
        },
        realAmountChange(val){
            console.log(val);
            if(this.form.materialAmount){
                if(val>this.form.materialAmount){
                    this.$message.error('数量输入有误，不能超过素材总量哦');
                    this.form.realAmount=this.form.materialAmount-1
                }
                this.form.cutAmount=this.form.materialAmount-this.form.realAmount
            }else{
                this.form.cutAmount=undefined;
                this.form.realAmount=undefined;
            }
            
        },
        cutAmountChange(val){
            console.log(val);
            if(this.form.materialAmount){
                if(this.form.realAmount==null){
                    console.log(1)
                    if(val>this.form.materialAmount){
                        this.$message.error('数量输入有误，不能超过素材总量哦');
                        this.form.cutAmount=this.form.materialAmount-1
                    }
                    this.form.realAmount=this.form.materialAmount-this.form.cutAmount
                }
            }else{
                this.form.cutAmount=undefined;
                this.form.realAmount=undefined;
            }
            
        },
        goBack() {
            this.$parent.currentTabComponent='operatorPlatform';
            this.$parent.isEdit=false;
        },

        saveHandler(){
             this.$refs.ruleForm.validate(valid=> {
                if (valid) {
                    if(this.dateValue.length>0){

                    this.saveLoading=true;
                    console.log(valid,this.form);
                    let params={
                        ...this.form,
                        createBy:this.userInfo.id,
                        startDate:this.dateValue[0].format('YYYY-MM-DD'),
                        endDate:this.dateValue[1].format('YYYY-MM-DD'),
                    };
                    console.log(params)
                    if(!this.$parent.isEdit){
                        postAction('/platform/operator/payout',params).then(res=>{
                            console.log(res);
                            this.saveLoading=false;
                            if(res.success){
                                this.$parent.orderId=res.result.id
                                this.$parent.isEdit=false;
                                this.$parent.currentTabComponent='orderDetail';
                                
                            }else{
                                this.$message.error(res.success)
                            }
                        })
                    }else{
                        params={
                            id:this.currentOrderInfo.id,
                            ...params,
                        }
                        postAction('/platform/operator/rePayout',params).then(res=>{
                            console.log(res);
                            this.saveLoading=false;
                            if(res.success){
                                this.$parent.isEdit=false;
                                this.$parent.orderId=this.currentOrderInfo.id
                                this.$parent.currentTabComponent='orderDetail';

                                
                            }else{
                                this.$message.error(res.success)
                            }
                        })
                    }
                    
                    }else{
                        this.$message.error('请选择订单周期')
                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        getOrderInfo(){
            
            if(this.$parent.isEdit){
                this.placeOrderSpinning=true;
                getAction('/platform/order/queryById',{
                    id:this.$parent.orderId
                }).then(res=>{
                    console.log(res)
                    this.placeOrderSpinning=false;
                    this.currentOrderInfo={}
                    if(res.success){
                        
                        this.currentOrderInfo=res.result;
                        this.form=res.result;
                        this.dateValue=[moment(res.result.startDate),moment(res.result.endDate)]
                        // this.form.dateValue=res.result.dateValue
                    }
                })
            }
        },

        beforeUpload(file) {
            // ${this.form.project}
            // this.uploadAction= `http://api.tjyourong.com.cn/jeecg-boot/platform/file/uploadAttachment?projectId=${this.form.project}`
            // this.uploadAction= `http://139.186.151.174:8804/jeecg-boot/platform/file/uploadAttachment?projectId=${this.form.project}`
            if (process.env.NODE_ENV == 'development') { 
                this.uploadAction= `/jeecg-boot/platform/file/uploadAttachment?projectId=${this.form.project}`
            } 
            else if (process.env.NODE_ENV == 'debug') { 
            } 
            else if (process.env.NODE_ENV == 'production') { 
              this.uploadAction= `${this.axios.defaults.baseURL}/platform/file/uploadAttachment?projectId=${this.form.project}`
            }
            this.loadDisabled = true
            const size = (Number(file.size) / (1024 * 1024)).toFixed(2)
            const fileName = file.name
            const fileStrArr = fileName.split('.')
            const suffix = fileStrArr[fileStrArr.length - 1]

            let result = fileSuffix.some((item) => {
                return item === suffix
            })

            if (!result) {
                this.$message.error('不支持该文件类型')
                this.loadDisabled = false
                return false
            }

            // if (size > 10) {
            //     this.$message.error('文件不能大于10MB')
            //     this.loadDisabled = false
            //     return false
            // }
            
        },
        handleChange(info) {
            // console.log(info)
            let fileList = [...info.fileList];

            // 1. Limit the number of uploaded files
            //    Only to show two recent uploaded files, and old ones will be replaced by the new
            fileList = fileList.slice(-2);

            // 2. read from response and show file link
            fileList = fileList.map(file => {
                if (file.response) {
                    // Component will show file.url as link
                    file.url = file.response.url;
                }
                return file;
            });
            if(fileList.length>0){
                this.fileList = [
                    {
                        ...fileList[fileList.length-1]
                    }
                ]
            }else{
                this.fileList=[]
            }
            


            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList)
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`)
                this.loadDisabled = false 
                this.form.attachmentName=info.file.response.result.attachmentName || ''         
                this.form.attachmentUrl=info.file.response.result.attachmentUrl || ''
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败.`)
                this.loadDisabled = false
            }

            // console.log(this.form)
        },
    },

    mounted(){
        let userInfo=localStorage.getItem('pro__Login_Userinfo');
        if(userInfo){
            this.userInfo=JSON.parse(userInfo).value
        }
        this.roleCode=localStorage.getItem('roleCode')
        getAction('/platform/query/designLeader',{}).then(res=>{
            console.log(res);
            this.designLeaderList=res.result
        })

        getAction('/ctop/projectMember/participateList',{
            userId:this.userInfo.id,
        }).then(res=>{
            console.log(res);
            this.projectList=res.result
        })
        this.isEidt=this.$parent.isEdit
        this.getOrderInfo()
    },
    activated(){
        this.getOrderInfo()
    }
}
</script>

