<template>
  <div class="main">
    <div class="main-content">
      <div class="cardTitle">添加订单信息</div>
          <div class="content">
            <a-form-model :labelCol="{span: 2}" :wrapperCol="{span: 8}">
                <a-form-model-item label="订单号">
                    <a-input v-model="form.code" ></a-input>
                </a-form-model-item>
                <a-form-model-item label="支付类型">
                    <a-select v-model="form.payType">
                        <a-select-option :value="1">线下</a-select-option>
                        <a-select-option :value="2">支付宝</a-select-option>
                        <a-select-option :value="3">微信</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="选择收费模版">
                    <a-select v-model="form.chargingTemplateId" @change="modelChange">
                        <a-select-option :value="item.id" v-for="(item, index) in modelData" :key="index">
							{{item.name}}
						</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="选择功能模块">
                    <a-checkbox-group v-model="form.modelFunctionId" :options="functionType" @change="functionChange" />
                </a-form-model-item>
                <a-form-model-item label="选择有效时长">
                    <a-select v-model="form.timeTypeId" @change="timeChange">
                        <a-select-option :value="item.id" v-for="(item, index) in timeType" :key="index">
                                        <!-- {{item.years == 0 ? '' : item.years+'年'}}
                                        {{item.months == 0 ? '' : item.months+'个月'}}
                                        {{item.days == 0 ? '' : item.days+'天'}} -->
                                        {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="购买金额">
                    <span style="color: red">¥ {{form.payPrice}}</span>
                </a-form-model-item>
                <a-form-model-item label="绑定小区">
                    <a-select v-model="form.communityId">
                        <a-select-option :value="item.id" v-for="(item, index) in comData" :key="index">
                          {{item.name}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-form-model>
      </div>
        <div class="cardTitle">高级配置</div>
        <div class="content">
            <a-form-model :labelCol="{span: 2}" :wrapperCol="{span: 8}">
                <a-form-model-item label="域名">
                    <a-input v-model="form.domainName" style="width: 394px"></a-input>
                </a-form-model-item>
                <a-form-model-item label="服务器ip">
                    <a-input v-model="form.serviceIp" style="width: 394px"></a-input>
                </a-form-model-item>
                <a-form-model-item label="是否定制">
                    <a-select v-model="form.isCustomized" style="width: 394px" @change="textareaDisable">
                        <a-select-option :value="0">
                            不定制
                        </a-select-option>
                        <a-select-option :value="1">
                            定制
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="定制需求">
                    <a-textarea v-model="form.customizedDemand" style="width: 394px" :disabled="form.isCustomized == 0" placeholder="请填写定制需求">
                    </a-textarea>
                </a-form-model-item>
            </a-form-model> 
        </div>  
      </div>
        <a-space style="margin-left: 138px">
            <a-button type="primary" @click="addConfirm">创建订单</a-button>
            <a-button @click="cancel">取消</a-button>
        </a-space>
  </div>
</template>

<script>
import {calcAmount} from "@/api/manage";
import {createOrder, getAllCommunityInfo} from "@/api/basic/console"
import {getChargingList, getChargeById} from "@/api/manage";
import {findTimeType, findSuperNavigation} from "@/api/manage";
export default {
    name: "addOrder",
    data() {
        return {
            form: {
                code: '',
                payType: 1,
                chargingTemplateId: undefined,
                modelFunctionId: [],
                timeTypeId: undefined,
                payPrice: 0,
                communityId: undefined,
                domainName: '',
                serviceIp: '',
                isCustomized: 0, //定制
                customizedDemand: '' //定制需求
            },
            comData: [], //小区列表
            //功能列表
            functionType: [], //选项
            allFunctionType: [],
            //时长列表
            timeType: [],
            allTimeType: [],
            //收费模版
            modelData: [],
        }
    },
    mounted() {
        this.getApi();
    },
    methods: {
        getApi() {
            let obj = {pageNum: 1,size: 1000};
            getChargingList(Object.assign(obj, {name: ''})).then(res => {
                let data = res.data.rows;
                this.modelData = data
            })
            findTimeType().then(res => {
                let data = res.data;
                this.allTimeType = data
            })
            findSuperNavigation().then(res => {
                let data = res.data;
                this.allFunctionType = data;
            })
            getAllCommunityInfo().then(res => {
                let data = res.data;
                this.comData = data;
            })
        },
        getPrice() {
            if(this.form.chargingTemplateId && this.form.modelFunctionId && this.form.timeTypeId) {
                let obj = {
                    chargingTemplateId: this.form.chargingTemplateId,
                    modelFunctionId: this.form.modelFunctionId,
                    timeTypeId: this.form.timeTypeId
                };
                calcAmount(obj).then(res => {
                    let data = res.data;
                    this.form.payPrice = data * 1
                });
            }
        },
        modelChange(val) {
            this.form.timeTypeId = undefined;
            this.form.modelFunctionId = [];
            this.form.communityId = undefined;
            getChargeById({id: val}).then(res => {
                let data = res.data;
                let functionData = [];
                data.functionList.forEach(ele => {
                    this.allFunctionType.forEach(e => {
                        if(e.id == ele) {
                            let obj = {label: e.name,value: e.id}
                            functionData.push(obj);
                        }
                    })
                })
                this.functionType = functionData;
                let timeData = [];
                data.timeTypeList.forEach(ele => {
                    this.allTimeType.forEach(e => {
                        if(e.id == ele) {
                            let year = e.years == 0 ? '' : e.years+'年';
                            let month = e.months == 0 ? '' : e.months+'个月';
                            let day = e.days == 0 ? '' : e.days+'天';
                            let obj = {name: year+month+day,id: e.id}
                            timeData.push(obj);
                        }
                    })
                })
                this.timeType = timeData;
            });
            this.getPrice();
        },
        timeChange(val) {
            this.getPrice();
        },
        // 选择功能模块
        functionChange(val) {
            if(val.length != 0) {
              this.getPrice()
            } else {
              this.form.payPrice = 0
            }
        },
        textareaDisable(val) {
            if(val == 0) {
                this.form.customizedDemand = ''
            }
        },
        addConfirm() {
            createOrder(this.form).then((res) => {
                if (res.code === 200) {
                  this.$message.success(res.msg);
			            this.$router.go(-1);
                } else {
                  this.$message.error(res.msg);
                }
            })
        },
        cancel() {
			      this.$router.go(-1);
        }
    }
}
</script>

<style lang="less">
.main-content {
    margin-left: 125px;
}
</style>