<template>
    <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-form-item label="商品类型" prop="typeId">
          <el-input v-if="productDisabled && productType" :value="productType.titleZh" disabled />
          <el-select v-if="!productDisabled" v-model="form.productType">
            <el-option v-for="type in productTypeList" :key="type.id" :label="type.titleZh" :value="type.id" />
          </el-select>
        </el-form-item>
      
        <el-form-item label="商品名称" prop="titleZh">
          <el-input v-if="productDisabled" :value="product ? product.titleZh:null" disabled />
          <product-selector v-else v-model="form.productId" :product-type="form.productType" @change="product=$event" />
        </el-form-item>

        <el-form-item label="英文名称" prop="titleEn">
          <el-input :value="product ? product.titleEn : ''" disabled />
        </el-form-item>
        <el-form-item label="路线" v-if="form.warehouseLineDO">
          <el-input :value="'【' + getDictDataLabel(DICT_TYPE.ECW_TRANSPORT_TYPE, form.warehouseLineDO.transportType) + '】从【'+form.warehouseLineDO.startTitleZh+'】发往【'+form.warehouseLineDO.destTitleZh+'】'" disabled />
        </el-form-item>
        <routers-selector v-if="!form.id" v-model="selectedRoutes" />
        <el-card style="margin-bottom: 10px">
            <div slot="header" style="font-size:20px;">
                价格设置
            </div>
            <el-form-item label="默认运费" prop="transportPrice">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <selector v-model="form.transportPriceUnit" :options="currencyList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                        <!-- <el-select v-model="form.transportPriceUnit">
                            <el-option v-for="currency in currencyList" :key="currency.id" :label="currency.titleZh" :value="currency.id" /> 
                        </el-select> -->
                    </el-col>

                    <el-col :span="6">
                        <inputor default="0" v-model.number="form.transportPrice"  type="number" placeholder="整数或者两位小数"/>
                    </el-col>

                    <el-col :span="4">
                        / <selector  v-model="form.transportVolumeUnit" :options="unitList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                        <!-- <el-select v-model="form.transportVolumeUnit">
                            <el-option v-for="unit in unitList" :key="unit.id" :label="unit.titleZh" :value="unit.id" /> 
                        </el-select> -->
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="默认清关费" prop="clearancePrice">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <selector v-model="form.clearancePriceUnit" :options="currencyList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                        <!-- <el-select v-model="form.clearancePriceUnit">
                            <el-option v-for="currency in currencyList" :key="currency.id" :label="currency.titleZh" :value="currency.id" /> 
                        </el-select> -->
                    </el-col>

                    <el-col :span="6">
                        <inputor default="0" v-model.number="form.clearancePrice"  type="number" placeholder="整数或者两位小数"/>
                    </el-col>

                    <el-col :span="4">
                        / <selector  v-model="form.clearanceVolumeUnit" :options="unitList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                        <!-- <el-select v-model="form.clearanceVolumeUnit">
                            <el-option v-for="unit in unitList" :key="unit.id" :label="unit.titleZh" :value="unit.id" /> 
                        </el-select> -->
                    </el-col>
                </el-row>
            </el-form-item>

            <template v-for="(special, specialIndex) in this.specialProducts">
                <el-form-item :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + '运费'" :key="specialIndex + 'transport'">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <selector v-model="special.transportPriceUnit" :options="currencyList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                            <!-- <el-select v-model="special.transportPriceUnit">
                                <el-option v-for="currency in currencyList" :key="currency.id" :label="currency.titleZh" :value="currency.id" /> 
                            </el-select> -->
                        </el-col>

                        <el-col :span="6">
                            <inputor default="0" v-model.number="special.transportPrice"  type="number" placeholder="整数或者两位小数" />
                        </el-col>

                        <el-col :span="4">
                            / <selector  v-model="special.transportVolumeUnit" :options="unitList" label-field="titleZh" value-field="id" defaultable style="width:100px" />

                            <!-- <el-select v-model="special.transportVolumeUnit">
                                <el-option v-for="unit in unitList" :key="unit.id" :label="unit.titleZh" :value="unit.id" /> 
                            </el-select> -->
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + '清关费'" :key="specialIndex + 'clearance'">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <selector v-model="special.clearancePriceUnit" :options="currencyList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                            <!-- <el-select v-model="special.clearancePriceUnit">
                                <el-option v-for="currency in currencyList" :key="currency.id" :label="currency.titleZh" :value="currency.id" /> 
                            </el-select> -->
                        </el-col>

                        <el-col :span="6">
                            <inputor default="0" v-model.number="special.clearancePrice"  type="number" placeholder="整数或者两位小数"/>
                        </el-col>

                        <el-col :span="4">
                            / <selector  v-model="special.clearanceVolumeUnit" :options="unitList" label-field="titleZh" value-field="id" defaultable style="width:100px" />
                            <!-- <el-select v-model="special.clearanceVolumeUnit">
                                <el-option v-for="unit in unitList" :key="unit.id" :label="unit.titleZh" :value="unit.id" /> 
                            </el-select> -->
                        </el-col>
                    </el-row>
                </el-form-item>
            </template>

            
            <el-form-item label="是否预付" prop="advanceStatus">
                <dict-selector form-type="radio" :type="DICT_TYPE.ADVANCE_STATUS" v-model="form.advanceStatus" />
              <!-- <el-radio-group v-model="form.advanceStatus">
                <el-radio v-for="advanceDict in advanceStatusDictDatas" :key="advanceDict.value" :label="parseInt(advanceDict.value)">{{advanceDict.label}}</el-radio>
              </el-radio-group> -->
            </el-form-item>
        </el-card>


        <el-card>
            <div slot="header" style="font-size:20px;">
                基础信息
            </div>

            <el-form-item label="需要预约入仓" prop="needBook">
            <el-radio v-model.number="form.needBook" :label="1">是</el-radio>
            <el-radio v-model.number="form.needBook" :label="0">否</el-radio>
            </el-form-item>

            <el-form-item label="每日入仓上限" prop="dayLimit">
            <el-input v-model.number="form.dayLimit" type="number" style="width:100px" />立方米
            </el-form-item>

            <el-form-item label="货柜位置" prop="containerLocation">
            <!-- <el-select v-model="form.containerLocation" placeholder="选择货柜位置" clearable>
                <el-option v-for="locationItem in locationList" :key="locationItem.value" :label="locationItem.label" :value="locationItem.value"/>
            </el-select> -->
            <dict-selector :type="DICT_TYPE.ECW_CONTAINER_LOCATION" v-model="form.containerLocation" />
            </el-form-item>

            <el-form-item label="方数要求" prop="square">
                <el-input v-model.number="form.square" type="number"  style="width:200px" />
            </el-form-item>
        </el-card>
        

      </el-form>

        <div style="margin: 20px 0">
            <el-button @click="submitForm" type="primary">确认提交</el-button>
            <el-button type="default" @click="$router.back">返回上一页</el-button>
        </div>
    </div>
</template>
<script>
import RoutersSelector from '@/components/RoutersSelector'
import { createProductPrice, updateProductPrice, deleteProductPrice, getProductPrice, getProductPricePage, exportProductPriceExcel } from "@/api/ecw/productPrice";
import { getProduct } from '@/api/ecw/product'
import { getProductType, getProductTypeList } from '@/api/ecw/productType'
import { getCurrencyList } from '@/api/ecw/currency';
import { getUnitList } from '@/api/ecw/unit';
import ProductSelector from '@/components/ProductSelector'
import {arrryToKeyedObjectBy} from '@/utils/index'
import Selector from '@/components/Selector'
import Inputor from '@/components/Inputor'

export default {
    components: {RoutersSelector, ProductSelector, Selector, Inputor},
    data(){
        return {
            selectedRoutes: [], // 勾选的路线渠道
            form:{},
            specialProducts: [],
            // specialList:[], // 特殊需求,默认四个
            rules: {
                /* typeId: [{ required: true, message: "产品类型不能为空", trigger: "blur" }],
                titleZh: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
                titleEn: [{ required: true, message: "英文名称不能为空", trigger: "blur" }], */
                transportPrice: [{ required: true, message: "海运费不能为空", trigger: "blur" }],
                clearancePrice: [{ required: true, message: "清关费不能为空", trigger: "blur" }],
                advanceStatus: [{ required: true, message: "是否预付不能为空", trigger: "blur" }],
                containerLocation:[{ required: true, message: "货柜位置不能为空", trigger: "blur" }],
                square:[{ required: true, message: "方数不能为空", trigger: "blur" }],
                // zhongLinjie:[{ required: true, message: "默认重货标准不能为空", trigger: "blur" }],
                // paoLinjie:[{ required: true, message: "默认泡货标准不能为空", trigger: "blur" }],
                needBook:[{ required: true, message: "预约入仓不能为空", trigger: "blur" }],
            },
            product: null,
            productType: null,
            currencyList:[],
            unitList:[],
            productTypeList:[],
            productDisabled: true
        }
    },
    computed:{
        
    },
    watch:{
        product(){
            getProductType(this.product.typeId).then(res => {
                this.productType = res.data
            })
        },
        form(val){
            if(!val)return
            // 特殊需求回显
            if(val.specialList){
                let keyed = arrryToKeyedObjectBy(val.specialList, 'specialDictType')
                console.log(keyed)
                this.specialProducts.map((item, index) => {
                    if(keyed[item.specialDictType]){
                        for(let field in item){
                            if(keyed[item.specialDictType][field]){
                                item[field] = keyed[item.specialDictType][field]
                            }
                        }
                    }
                    
                    /* clearancePric
                    clearancePriceUnit,
                    clearanceVolumeUnit,
                    specialDictType,
                    transportPrice,
                    transportPriceUnit,
                    transportVolumeUnit, */
                })
            }
        }
    },
    created(){
        
        // 修改回显
        if(this.$route.query.id){
            getProductPrice(this.$route.query.id).then(res => {
                this.form = res.data
                this.product = res.data.productDO
                /* getProduct(res.data.productId).then(res => {
                    this.product = res.data
                }) */
            })
        }
        // 指定产品
        else if(this.$route.query.product_id){
            getProduct(this.$route.query.product_id).then(res => {
                this.product = res.data
            })
        }
        // 获取类型列表
        else{
            this.productDisabled = false
            getProductTypeList().then(res => this.productTypeList = res.data)
        }

        getCurrencyList().then(res => this.currencyList = res.data)
        getUnitList().then(res => this.unitList = res.data)

        this.getDictDatas(this.DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS).forEach(item => {
            console.log(item, this.getDictDataLabel(item.value))
            this.specialProducts.push({
                "clearancePrice": null,
                "clearancePriceUnit": null,
                "clearanceVolumeUnit": null,
                "specialDictType": item.value,
                "transportPrice": null,
                "transportPriceUnit": null,
                "transportVolumeUnit": null,
            })
        })
    },
    methods:{
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (!valid) {
                return;
                }

                // 只有新增的时候做判断
                if(!this.form.id && (!this.selectedRoutes || !this.selectedRoutes.length)) {
                    this.$message.error('请选择线路');
                    return;
                }
                let data = Object.assign({}, this.form, {
                    // lineChannelList: this.selectedRoutes,
                    specialList: this.specialProducts
                })

                // 修改的提交
                if (this.form.id != null) {
                    updateProductPrice(data).then(response => {
                        this.$modal.msgSuccess("修改成功");
                        this.$router.replace('/product/product-price')
                    });
                    return;
                }
                // 添加的提交
                data.productId = this.product.id;
                data.lineChannelList = this.lineChannelList
                createProductPrice(data).then(response => {
                    this.$modal.msgSuccess("请求成功");
                    this.$router.replace('/product/product-price')
                });
            });
            },
    }
}
</script>