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


            <el-card shadow="never">
                <div slot="header" class="clearfix">
                    <span>{{ $t('渠道信息') }}</span>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('中文名称')" prop="nameZh">
                            <el-input v-model="form.nameZh" :placeholder="$t('请输入名称-中文')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('名称英文')" prop="nameEn">
                            <el-input v-model="form.nameEn" :placeholder="$t('请输入名称-英文')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('内部名称中文')" prop="internalNameZh">
                            <el-input
                                v-model="form.internalNameZh"
                                :placeholder="$t('请输入内部名称-中文')"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('内部名称英文')" prop="internalNameEn">
                            <el-input
                                v-model="form.internalNameEn"
                                :placeholder="$t('请输入内部名称-英文')"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('类型编码')" prop="typeNumber">
                            <el-input
                                v-model="form.typeNumber"
                                :placeholder="$t('请输入类型编码')"
                            />
                        </el-form-item>
                    </el-col>
                  <el-col :span="12">
                    <el-form-item :label="$t('简码')" prop="code">
                      <el-input
                        v-model="form.code"
                        :placeholder="$t('请输入简码')"
                      />
                    </el-form-item>
                  </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('归属仓库')" prop="warehouseIds">
                            <!-- <el-select v-model="form.wareHouseIds">
                                <el-option v-for="item in warehouseList" :value="item.id" :label="item.nameZh"/>
                            </el-select> -->
                            <el-checkbox-group v-model="warehouseIdsArr">
                                <!--label需要是字符串，因为回显时分解后为字符串格式-->
                                <el-checkbox v-for="item in warehouseList" :label="`${item.id}`" :key="item.id" >{{item.titleZh}}</el-checkbox>
                            </el-checkbox-group>
                            <!-- <el-input
                                v-model="form.warehouseIds"
                                placeholder="请输入归属仓库Ids"
                            /> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                       <el-form-item :label="$t('排序')" prop="sort">
                            <el-input v-model="form.sort" :placeholder="$t('请输入排序')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                       <el-form-item :label="$t('快递')" prop="expressId">
                            <!-- <el-input v-model="form.expressId" placeholder="请输入快递ID" /> -->
                            <el-select v-model="form.expressId">
                                <el-option v-for="item in expressList" :value="item.id" :label="item.companyName" :key="item.id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('预计到达时间')" prop="etaTime">
                            <el-input type="number" v-model="form.etaTime" :placeholder="$t('请输入天数')">
                                <span slot="append">{{ $t('天') }}</span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                       <el-form-item :label="$t('渠道代理')" prop="channelAgent">
                            <el-input
                                v-model="form.channelAgent"
                                :placeholder="$t('请输入渠道代理')"
                            />
                        </el-form-item>
                    </el-col> -->
                </el-row>

                <el-form-item :label="$t('备注-中文')" prop="remarksZh">
                    <el-input
                        v-model="form.remarksZh"
                        :placeholder="$t('请输入备注-中文')"
                    />
                </el-form-item>
                <el-form-item :label="$t('备注-英文')" prop="remarksEn">
                    <el-input
                        v-model="form.remarksEn"
                        :placeholder="$t('请输入备注-英文')"
                    />
                </el-form-item>
                <!-- <el-form-item label="状态(0:禁用 1:启用)" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio label="1">{{ $t('请选择字典生成') }}</el-radio>
                    </el-radio-group>
                </el-form-item> -->
            </el-card>
<!--            <el-card shadow="never">-->
<!--                <div slot="header" class="clearfix">-->
<!--                    <span>{{ $t('渠道收费规则') }}</span>-->
<!--                </div>-->
<!--                -->
<!--                <el-form-item :label="$t('清关单价')" prop="customsClearUnit">-->
<!--                    <el-input v-model="form.customsClearUnit" :placeholder="$t('请输入清关单价')">-->
<!--                        <span slot="append">$</span>-->
<!--                    </el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="每0.5KG单价" prop="weightUnitPrice">-->
<!--                    <el-input v-model="form.weightUnitPrice" :placeholder="$t('此字段名暂缺')" >-->
<!--                        <span slot="append">$</span>-->
<!--                    </el-input>-->
<!--                </el-form-item>-->
<!--            </el-card>-->
		</el-form>
		<div>
			<el-button type="primary" @click="submitForm">{{ $t('确 定') }}</el-button>
			<el-button @click="$router.back()">{{ $t('返回列表') }}</el-button>
		</div>
	</div>
</template>
<script>
import {
	createChannel,
	updateChannel,
	deleteChannel,
	getChannel,
	getChannelPage,
	exportChannelExcel,
} from "@/api/ecw/channel";
import {getWarehouseList} from '@/api/ecw/warehouse'
import {getExpressPage} from '@/api/ecw/express'
export default {
	data() {
		return {
			form: {
                channelCostCreateReqVO:{}
            },
			rules: {},
            expressList:[],
            warehouseList: [],
            warehouseIdsArr:[]
		};
	},
    watch:{
        /* wareHouseIdsArr(val){
            console.log('更新wareHouseIdsArr', val)
            this.$set(this.form, 'wareHouseIds', val.join(','))
        },
        'form.wareHouseIds'(val){
            console.log('form.wareHouseIds', val)
            this.wareHouseIdsArr = val?.split(',') || []
        } */
    },
	async created() {
        // 获得仓库
        await getWarehouseList().then(res => {
            this.warehouseList = res.data
        })
        await getExpressPage({pageSize: 1000}).then(res => {
            this.expressList = res.data.list
        })

        if (this.$route.query.id) {
            getChannel(this.$route.query.id).then((res) => {
                this.$set(this, 'form', res.data)
                console.log('this.form.warehouseIds', this.form.warehouseIds)
                if(this.form.warehouseIds.length){
                    this.warehouseIdsArr = this.form.warehouseIds.split(',')?.filter(item => !!item)
                }
            });
        }

	},
    computed:{
        /* wareHouseIdsArr:{
            get(){
                return this.form.wareHouseIds?.split(',') || []
            },
            set(val){
                console.log('val', val)
                this.$set(this.form, 'wareHouseIds', val.join(','))
            }
        } */
    },
	methods: {
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate((valid) => {
				if (!valid) {
					return;
				}
                this.form.warehouseIds = this.warehouseIdsArr.join(',')
				// 修改的提交
				if (this.form.channelId != null) {
					updateChannel(this.form).then((response) => {
						this.$modal.msgSuccess("修改成功");
						this.$router.back();
					});
					return;
				}
				// 添加的提交
				createChannel(this.form).then((response) => {
					this.$modal.msgSuccess("新增成功");
					this.$router.back();
				});
			});
		},
	},
};
</script>
<style scoped lang="scss">
.el-card{
    margin-bottom: 20px;
}
</style>
