<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: 480px;
                    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;
            
        }
    }
</style>
<template>
    <div class="placeOrder">
        <div class="topBody">
             <p class="breadcrumb">
                <a-breadcrumb style="display:block;width:100%">
                    <a-breadcrumb-item><router-link to="/workBench">工作台</router-link></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">
            <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: 300px" v-model="form.design" mode="multiple" placeholder="请选择设计组长">
                                    <a-select-option v-for="item in designLeaderList" :key="item.id" :value='item.value'>
                                        {{item.title}}
                                    </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: 300px" v-model="form.project" mode="multiple" placeholder="请选择关联项目">
                                    <a-select-option v-for="item in projectList" :key="item.id" :value='item.value'>
                                        {{item.title}}
                                    </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"
                                    @blur="
                                    () => {
                                        $refs.sysPackage.onFieldBlur();
                                    }
                                    "
                                />
                            </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="dataValue"  prop="dataValue">
                                <a-range-picker v-model="form.dataValue" />
                            </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 :min="1" :max="500"  @change="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="NONE">不限</a-radio-button>
                                    <a-radio-button value="REALPEOPLE">真人</a-radio-button>
                                    <a-radio-button value="CLIP">剪辑</a-radio-button>
                                    <a-radio-button value="COMBINATION">组合</a-radio-button>
                                                                      
                                </a-radio-group>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="row-item" v-if="form.materialType=='COMBINATION'">
                        <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=='COMBINATION'">
                        <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="materialAmountDayChange" 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: 3,  }"
                                />
                            </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-upload
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                    :default-file-list="defaultFileList"
                                >
                                    <a-button> <a-icon type="upload" /> 上传附件 </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">保存</a-button>
                    </div>
                </div>   
                </a-form-model>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';

export default {
    data() {
        return {
            defaultFileList:[],
            saveLoading:false,
            form: {
                orderTitle: '',               
                design:undefined,
                project:undefined,
                sysName:3,
                sysPackage:'',
                dataValue:[],
                materialAmount:undefined,
                materialAmountDay:undefined,
                materialType:'NONE',
                realAmount:undefined,
                cutAmount:undefined,
                orderRemark:'',

            },
            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' },
                ],
                dataValue: [{ required: true, message: '请选择订单周期', trigger: 'change' }],
                applyRange: [{ required: true, message: '请选择具体应用范围', trigger: 'change' }],
                applyAccount: [{required: true, message: '请选择具体应用范围', trigger: 'change' }],
                specificMoment: [{required: true, message: '请选择具体时刻', trigger: 'change' }],
               
            },
            // 操作记录
            designLeaderList:[],
            projectList:[],

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

            // 分页参数
            totalPage:0,
            currentPage:1,

        }
    },
    methods: {
        // 附件上传的方法
        handleChange({ file, fileList }) {
        if (file.status !== 'uploading') {
            console.log(file, fileList);
        }
        },
        // 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.target.value)
        },
        materialAmountDayChange(){

        },
        materialTypeChange(val){

        },
        goBack() {
            this.$router.replace('/autoRules')
            this.$bus.$emit('remove', '/newBlankRule')
           
        },

        saveHandler(){
             this.$refs.ruleForm.validate(valid=> {
                if (valid) {
                    this.form.rulesList=this.rulesList;
                    console.log(valid,this.form);

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

