<template>
  <div class="app-container">
    <el-form :disabled="isView" ref="form" :model="form" :rules="rules" label-width="120px">
      <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="nameFr">
              <el-input v-model="form.nameFr" :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="internalNameFr">
              <el-input
                v-model="form.internalNameFr"
                :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">-->
            <!--                            &lt;!&ndash; <el-select v-model="form.wareHouseIds">-->
            <!--                                <el-option v-for="item in warehouseList" :value="item.id" :label="item.nameZh"/>-->
            <!--                            </el-select> &ndash;&gt;-->
            <!--                            <el-checkbox-group v-model="warehouseIdsArr">-->
            <!--                                &lt;!&ndash;label需要是字符串，因为回显时分解后为字符串格式&ndash;&gt;-->
            <!--                                <el-checkbox v-for="item in warehouseList" :label="`${item.id}`" :key="item.id" >{{item.titleZh}}</el-checkbox>-->
            <!--                            </el-checkbox-group>-->
            <!--                            &lt;!&ndash; <el-input-->
            <!--                                v-model="form.warehouseIds"-->
            <!--                                placeholder="请输入归属仓库Ids"-->
            <!--                            /> &ndash;&gt;-->
            <!--                        </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" style="width: 100%">
                <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="countryId">
              <el-select style="width: 100%" filterable clearable v-model="form.countryId" :placeholder="$t('请选择国家')">
                <el-option v-for="dict in countryList"
                           :key="dict.id" :label="$l(dict,'title')" :value="parseInt(dict.id)"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="可出商品特性" prop="attrId">
              <el-select style="width: 100%" 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-col :span="12">
            <el-form-item :label="$t('免泡重量')" prop="sort">
              <el-input v-model.number="form.bubbleExemptWeight" :placeholder="$t('请输入免泡重量')"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="渠道泡重比例" prop="attrId">
              <el-input  v-model.number="form.bubbleWeightRatio" style="width: 100%">
                <template #suffix>
                  <span>%</span>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--              <div style="display: flex; justify-content: space-between;">-->
        <!--                <h1>-->
        <!--                  <span style="color: red;font-size: 14px;font-weight: 700;">*</span>-->
        <!--                  渠道包装列表-->
        <!--                </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" style="margin-bottom: 50px;border-bottom: 1px solid #cccccc" :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 :disabled="form.channelPackagingList.length === 1" @click="deleteFn(index)" type="danger">删除包装类型{{index + 1}}</el-button>-->
        <!--                  </packaging-type>-->
        <!--                </el-col>-->
        <!--              </el-row>-->
        <el-row :gutter="20">
          <el-col :span="12"> <el-form-item :label="$t('备注-中文')" prop="remarksZh">
            <el-input
              v-model="form.remarksZh"
              :placeholder="$t('请输入备注-中文')"
            />
          </el-form-item></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('备注-英文')" prop="remarksEn">
              <el-input
                v-model="form.remarksEn"
                :placeholder="$t('请输入备注-英文')"
              />
            </el-form-item></el-col>
          <el-col :span="12">
            <el-form-item :label="$t('备注-法文')" prop="remarksFr">
              <el-input
                v-model="form.remarksFr"
                :placeholder="$t('请输入备注-法文')"
              />
            </el-form-item></el-col>
        </el-row>


        <!-- <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 v-if="!isView" 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";
import {getTradeCountryList} from "@/api/ecw/region";

export default {
  components: {PackagingType, indexDialog},
  data() {
    return {
      countryList: [],
      dialogVisible: false,
      form: {
        countryId: undefined,
        bubbleWeightRatio: 100,
        channelCostCreateReqVO: {},
        attrId: [],
      },

      rules: {
        nameZh: {required: true, message: '请输入中文名称', trigger: 'blur'},
        nameEn: {required: true, message: '请输入英文名称', trigger: 'blur'},
        nameFr: {required: true, message: '请输入法文名称', trigger: 'blur'},
        internalNameZh: {required: true, message: '请输入内部中文名称', trigger: 'blur'},
        internalNameEn: {required: true, message: '请输入内部英文名称', trigger: 'blur'},
        internalNameFr: {required: true, message: '请输入内部法文名称', trigger: 'blur'},
        typeNumber: {required: true, message: '请输入编码类型', trigger: 'blur'},
        code: {required: true, message: '请输入简码', trigger: 'blur'},
        attrId: {required: true, message: '请选择可出商品特性', trigger: 'blur'},
        countryId: {required: true, message: '请选择国家', trigger: 'blur'}
      },
      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() {
    console.log(this.$route,'rotue')
    getTradeCountryList().then(r => {
      this.countryList = r.data
    })
    getProductAttrList().then(response => {
      this.attrList = response.data;
      this.form.attrId = this.attrList.map(i => i.id)
    })
  },
  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.countryId = this.form.countryId || undefined

        // 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)
        // }
        if (this.form.bubbleWeightRatio) {
          this.form.bubbleWeightRatio = this.form.bubbleWeightRatio * 100
        }
      });
    } else {
      this.addPackaging()
    }

  },
  computed: {
    isView(){
      return this.$route.path.includes('view_channel')
    },
    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) => {
      //   (res.data.channelPackagingList || []).forEach((item,index) =>{
      //     this.form.channelPackagingList[index] = { airWeightLimit:item.airWeightLimit, packagingTypes: item.packagingTypes ? item.packagingTypes.split(',') : [], channelPriceStepClearanceList:[],}
      //     // if(!this.form.channelPackagingList[index]){
      //     //   this.form.channelPackagingList[index] = { airWeightLimit:item.airWeightLimit, packagingTypes:item.packagingTypes ? item.packagingTypes.split(',') : [], channelPriceStepClearanceList:[],}
      //     // }else {
      //     //
      //     // }
      //     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,
      //         endNum:itemm.endNum,
      //         startNum:itemm.startNum,
      //         weightUnit:itemm.weightUnit
      //      } ;
      //     })
      //   })
      //   this.$forceUpdate()
      // });
    },
    deleteFn(index) {
      this.form.channelPackagingList.splice(index, 1)
    },
    //添加包装类型
    addPackaging() {
      let p = {
        airWeightLimit: '',
        packagingTypes: [],
        channelPriceStepClearanceList: [],
      }
      this.form.channelPackagingList.push(p)
    },
    verify(row) {
      return (row.startNum !== '' && row.endNum !== '' && row.clearancePrice !== '' && row.clearancePriceUnit !== '' && row.clearanceVolumeUnit !== '')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        let derail = false
        // this.form.channelPackagingList.forEach(item =>{
        //    if(item.airWeightLimit === '' || item.airWeightLimit === 0){
        //      derail = true
        //     return this.$message.warning('请输入空运订单重量上限')
        //    }
        //    // if(!item.packagingTypes.length){
        //    //   derail = true
        //    //   return this.$message.warning('请输入包装类型')
        //    // }
        //    // if(!item.channelPriceStepClearanceList.every(this.verify)){
        //    //   derail = true
        //    //   return this.$message.warning('请输入阶梯价格')
        //    // }
        // })
        // 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(',')
        // })
        form.bubbleWeightRatio = form.bubbleWeightRatio / 100
        // 修改的提交
        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>
