<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-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="可出商品特性">
                    <el-select multiple v-model="form.attrId">
                      <el-option v-for="(item, index) in attrList" :value="item.id" :label="$l(item, 'attrName')"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div style="display: flex; justify-content: space-between;">
                <h1>
                  渠道包装列表
                </h1>
                <div>
                  <el-button type="primary" @click="addPackaging"  >添加包装类型</el-button>
                  <el-button type="text" @click="dialogVisible = true;">选择渠道包装模板</el-button>
                </div>
              </div>
              <el-row :gutter="20" v-for="(itemm, index) in form.channelPackagingList" :key="index">
                <el-col :span="2">包装类型{{index + 1}}：</el-col>
                <el-col :span="5">
                  <el-select multiple  v-model="itemm.packagingTypes" >
                    <el-option v-for="item in getDictDatas(DICT_TYPE.ECW_PACKAGING_TYPE)" :value="item.value" :key="item.value" :label="$l(item, 'label')" :disabled="deletePackagingTypes.includes(item.value) && !itemm.packagingTypes.includes(item.value)" ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="16">
                  <packaging-type v-if="form.channelPackagingList.length" v-model="form.channelPackagingList[index]">
                    <el-button @click="deleteFn(index)" type="danger">删除包装类型{{index + 1}}</el-button>
                  </packaging-type>
                </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>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%">
      <index-dialog @copyFn="copyFn"></index-dialog>
      <span slot="footer" class="dialog-footer" style="text-align: center;">
    <el-button @click="dialogVisible = false" type="primary">关 闭</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>
import {
	createChannel,
	updateChannel,
	getChannel,
	getChannelPage,
	exportChannelExcel,
} from "@/api/ecw/channel";
import {getWarehouseList} from '@/api/ecw/warehouse'
import {getExpressPage} from '@/api/ecw/express'
import PackagingType from "@/views/ecw/channel/componrnts/packaging-type.vue";
import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict";
import {getProductAttrList} from "@/api/ecw/productAttr";
import indexDialog from "@/views/ecw/channel/index-dialog.vue";
export default {
  components: {PackagingType,indexDialog},
	data() {
		return {
      dialogVisible:false,
			form: {
             channelCostCreateReqVO:{},
             channelPackagingList:[],
             attrId:[],
            },

			rules: {},
            expressList:[],
            warehouseList: [],
            warehouseIdsArr:[],
           attrList:[]
		};
	},
    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(',') || []
        } */
    },
  mounted() {
    getProductAttrList().then(response => {
      this.attrList = response.data;
    })
    },
  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})
              if(this.form.channelPackagingList ===  null ){
                this.form.channelPackagingList = [];
                this.addPackaging()
              }
              if(this.form.attrId){
                this.form.attrId = this.form.attrId.split(',').map(i => +i)
              }else {
                this.form.attrId = []
              }

                this.form.channelPackagingList.forEach(item =>{
                  item.packagingTypes = item.packagingTypes && item.packagingTypes.length !== 0 ? item.packagingTypes.split(',') : []
                })
                if(this.form.warehouseIds.length){
                    this.warehouseIdsArr = this.form.warehouseIds.split(',')?.filter(item => !!item)
                }
            });
        }

	},
    computed:{
      DICT_TYPE() {
        return DICT_TYPE
      },
      deletePackagingTypes(){
        let a = []
        this.form.channelPackagingList.forEach(item => {
          a.push(...item.packagingTypes)
        })
       return a
      }
        /* wareHouseIdsArr:{
            get(){
                return this.form.wareHouseIds?.split(',') || []
            },
            set(val){
                console.log('val', val)
                this.$set(this.form, 'wareHouseIds', val.join(','))
            }
        } */
    },
	methods: {
    getDictDatas,
    copyFn(val){
      this.form.channelPackagingList = [];
      this.dialogVisible = false;
      getChannel(val).then((res) => {
        console.log(res.data,'data')
        res.data.channelPackagingList.forEach((item,index) =>{
          if(!this.form.channelPackagingList[index]){
            this.form.channelPackagingList[index] = { airWeightLimit:item.airWeightLimit, packagingTypes:[], channelPriceStepClearanceList:[],}
          }else {
            this.form.channelPackagingList[index] = { airWeightLimit:item.airWeightLimit, packagingTypes: [], channelPriceStepClearanceList:[],}
          }
          item.channelPriceStepClearanceList.forEach((itemm, indexx) => {
            let p = {
              "channelId":'',
              "clearancePrice":'',
              "clearancePriceUnit":'',
              "clearanceVolumeUnit":'',
              "endNum":'',
              "packagingId":'',
              "startNum":'',
              "weightUnit":''
            }
           if(!this.form.channelPackagingList[index].channelPriceStepClearanceList[indexx]){
             this.form.channelPackagingList[index].channelPriceStepClearanceList[indexx] = p;
           }
            let it = this.form.channelPackagingList[index].channelPriceStepClearanceList[indexx]
            this.form.channelPackagingList[index].channelPriceStepClearanceList[indexx] =  {...p,...it,clearancePrice:itemm.clearancePrice,clearancePriceUnit:itemm.clearancePriceUnit,clearanceVolumeUnit:itemm.clearanceVolumeUnit} ;
          })
        })
        this.$forceUpdate()
      });
    },
    deleteFn(index){
      this.form.channelPackagingList.splice(index, 1)
    },
    //添加包装类型
    addPackaging(){
      let p = {
        airWeightLimit:undefined,
        packagingTypes:[],
        channelPriceStepClearanceList:[],
      }
      this.form.channelPackagingList.push(p)
    },
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate((valid) => {
				if (!valid) {
					return;
				}
        this.form.warehouseIds = this.warehouseIdsArr.join(',')
         let form = JSON.parse(JSON.stringify(this.form))
        let attrId =  this.form.attrId
        attrId  = attrId.join(',')
         form.attrId = attrId
         form.channelPackagingList.forEach(item =>{
           item.packagingTypes = item.packagingTypes.join(',')
         })
				// 修改的提交
				if (this.form.channelId != null) {
					updateChannel(form).then((response) => {
						this.$modal.msgSuccess("修改成功");
						this.$router.back();
					});
					return;
				}
				// 添加的提交
				createChannel(form).then((response) => {
					this.$modal.msgSuccess("新增成功");
					this.$router.back();
				});
			});
		},
	},
};
</script>
<style scoped lang="scss">
.el-card{
    margin-bottom: 20px;
}
</style>
