<template>
  <div class="app-container">
    <el-form label-position="left" label-width="160px">
      <div class="itemGroup">
        <el-divider content-position="left">基础设置</el-divider>
        <el-form-item label="渠道名称">
          <el-input v-model="dto.PublicName" />
        </el-form-item>
        <el-form-item label="渠道代码">
          <el-input v-model="dto.PublicCode" />
        </el-form-item>
        <el-form-item label="公开渠道">
          <el-select
            v-model="dto.PublicChanneId"
            placeholder="公开渠道"
            clearable
            filterable
          >
            <el-option
              v-for="item in channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面单尺寸">
          <el-select
            v-model="dto.LabelSize"
            placeholder="面单尺寸"
            clearable
            filterable
          >
            <el-option
              v-for="item in LabelSizes"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="API对接">
                    <el-switch v-model="dto.api" active-color="#13ce66" inactive-color="#ccc">
                    </el-switch>
            </el-form-item>

            <el-form-item label="自定义发货人">
                    <el-switch v-model="dto.defaultSend" active-color="#13ce66" inactive-color="#ccc">
                    </el-switch>
            </el-form-item> -->
      </div>
      <div class="itemGroup">
        <el-divider content-position="left">API对接设置</el-divider>
        <el-form-item label="API服务">
          <el-select
            v-model="dto.ServiceClass"
            placeholder="选择一个服务"
            clearable
            filterable
          >
            <el-option
              v-for="item in apiServices"
              :key="item.APIServiceClass"
              :label="item.APIName"
              :value="item.APIServiceClass"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="代理地址">
          <el-input v-model="dto.AgenUrl" :disabled="!showAgentInfo" />
        </el-form-item>
        <el-form-item label="代理服务代码">
          <el-input v-model="dto.ServiceCode" :disabled="!showAgentInfo" />
        </el-form-item>

        <el-form-item label="服务代码">
          <el-input v-model="dto.ServiceChannelCode" />
        </el-form-item>
        <el-form-item label="API下单地址">
          <el-input v-model="dto.ApiHost" />
        </el-form-item>
        <el-form-item label="API面单地址">
          <el-input v-model="dto.ServiceTrackingUrl" />
        </el-form-item>
        <el-form-item label="API跟踪地址">
          <el-input v-model="dto.TrackingUrl" />
        </el-form-item>
        <el-form-item label="API参数1">
          <el-input v-model="dto.ApiKey" />
        </el-form-item>
        <el-form-item label="API参数2">
          <el-input v-model="dto.ApiSecret" />
        </el-form-item>
      </div>
      <div class="itemGroup">
        <el-divider content-position="left">发件人设置</el-divider>
        <el-form-item label="发件人名称">
          <el-input v-model="dto.SenderName" />
        </el-form-item>
        <el-form-item label="发件人公司名">
          <el-input v-model="dto.SenderCompany" />
        </el-form-item>
        <el-form-item label="发件人国家代码">
          <el-input v-model="dto.SenderCountryCode" />
        </el-form-item>
        <el-form-item label="发件人邮编">
          <el-input v-model="dto.SenderZipCode" />
        </el-form-item>
        <el-form-item label="发件人州名">
          <el-input v-model="dto.SenderState" />
        </el-form-item>
        <el-form-item label="发件人城市名">
          <el-input v-model="dto.SenderCity" />
        </el-form-item>
        <el-form-item label="发件人地区">
          <el-input v-model="dto.SenderCounty" />
        </el-form-item>
        <el-form-item label="发件人地址">
          <el-input v-model="dto.SenderStreet" />
        </el-form-item>
        <el-form-item label="发件人电话">
          <el-input v-model="dto.SenderPhone" />
        </el-form-item>
      </div>
      <div class="itemGroup">
        <el-divider content-position="left">重量</el-divider>
        <el-form-item label="重量限制(g)">
          <el-input v-model="dto.MaxWeight" />
        </el-form-item>
        <el-form-item label="是否计泡">
          <el-switch
            v-model="dto.IsVolumnWeight"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item v-if="dto.IsVolumnWeight" label="服务商计泡系数">
          <el-input v-model="dto.ServiceVolumnWeightFactor" />
        </el-form-item>
        <el-form-item v-if="dto.IsVolumnWeight" label="客户计泡系数">
          <el-input v-model="dto.CustomerVolumnWeightFactor" />
        </el-form-item>
        <el-form-item v-if="dto.IsVolumnWeight" label="空派分泡系数">
          <el-input v-model="dto.ServiceVolumnWeightSeparationRate" />
        </el-form-item>
      </div>

      <div class="itemGroup">
        <el-divider content-position="left">容错</el-divider>
        <el-form-item label="默认电话号码">
          <el-input v-model="dto.DefaultPhone" />
        </el-form-item>
        <el-form-item label="补充州名">
          <el-switch
            v-model="dto.AddStateName"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in dto.DeclareValue"
          :key="domain.MinWeight"
          :label="'申报价值' + (index + 1)"
          :prop="'DeclareValue.' + index"
          class="DeclareValue"
        >
          <el-row :gutter="20">
            <el-col :span="2"> 开始重量(g) </el-col>
            <el-col :span="3">
              <el-input v-model="domain.MinWeight" />
            </el-col>
            <el-col :span="2"> 结束重量(g) </el-col>
            <el-col :span="3">
              <el-input v-model="domain.MaxWeight" />
            </el-col>
            <el-col :span="2"> 申报价值 </el-col>
            <el-col :span="3">
              <el-input v-model="domain.DeclareValue" />
            </el-col>
            <el-col :span="5">
              <el-button
                style="float: left"
                @click.prevent="addDeclareValueNode()"
              >+</el-button>
              <el-button
                v-if="index > 0"
                style="float: left"
                @click.prevent="removeDeclareValueNode(domain)"
              >-</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </div>

      <div class="itemGroup">
        <el-divider content-position="left">中转与流程</el-divider>
        <el-form-item label="装运流程">
          <el-radio v-model="dto.PickingProcess" label="0">仅称重</el-radio>
          <el-radio v-model="dto.PickingProcess" label="1">仅装运</el-radio>
          <el-radio v-model="dto.PickingProcess" label="2">称重装运</el-radio>
        </el-form-item>
        <el-form-item label="称重转单">
          <el-switch
            v-model="dto.IsTransfer"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="出库转单">
          <el-switch
            v-model="dto.IsServiceTransfer"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="按口岸装箱">
          <el-switch
            v-model="dto.PackingByPort"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="目的国家">
          <el-select
            v-model="dto.DestCountries"
            placeholder="选择国家"
            clearable
            filterable
            multiple
          >
            <el-option
              v-for="item in countries"
              :key="item.Code"
              :label="item.CnName"
              :value="item.Code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="通邮地区检查方式">
          <el-select v-model="dto.PostableValidateType" placeholder="通邮地区检查方式" clearable>
            <el-option
              v-for="item in postableValidateTypes"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="跳过品名检查">
          <el-select v-model="dto.CanSkipGoodsName" placeholder="跳过品名检查">
            <el-option :value="false" label="不跳过" />
            <el-option :value="true" label="跳过" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否需要预报">
          <el-switch
            v-model="dto.NeedForecast"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="美国偏远岛屿检查" label-width="180px">
          <el-switch
            v-model="dto.FillterUSOverseas"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="渠道作用范围">
          <el-select v-model="dto.CirculationProcess" placeholder="渠道作用范围">
            <el-option :value="1" label="仅头程" />
            <el-option :value="2" label="仅尾程" />
            <el-option :value="3" label="全程" />
          </el-select>
        </el-form-item>
        <el-form-item label="上网检查天数">
          <el-input-number
            v-model="dto.CheckOnlineDay"
            :controls="false"
            :precision="0"
            :min="0">
          </el-input-number>
        </el-form-item>
        <el-form-item label="签收检查天数">
          <el-input-number
            v-model="dto.CheckSignDay"
            :controls="false"
            :precision="0"
            :min="0">
          </el-input-number>
        </el-form-item>
      </div>

      <div class="itemGroup">
        <el-divider content-position="left">追踪信息</el-divider>
        <!-- <el-form-item label="异常轨迹服务商">
          <el-select v-model="dto.EndServiceProvider" placeholder="异常轨迹服务商" clearable>
            <el-option
              v-for="item in endServiceProviderList"
              :key="item.Id"
              :label="item.ProviderName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="TrackingMore跟踪">
          <!-- <el-switch
            v-model="dto.CanTrackingMore"
            active-color="#13ce66"
            inactive-color="#ccc"
          /> -->
          <el-radio v-model="radioTracking" :label="0">TrackingMore跟踪</el-radio>
        </el-form-item>
        <el-form-item label="Track718跟踪">
          <!-- <el-switch
            v-model="dto.Can718Tracking"
            active-color="#13ce66"
            inactive-color="#ccc"
          /> -->
          <el-radio v-model="radioTracking" :label="1">Track718跟踪</el-radio>
        </el-form-item>
        <el-form-item label="17Track跟踪">
          <!-- <el-switch
            v-model="dto.Can17Tracking"
            active-color="#13ce66"
            inactive-color="#ccc"
          /> -->
          <el-radio v-model="radioTracking" :label="2">17Track跟踪</el-radio>
        </el-form-item>
        <el-form-item label="USPS/PB">
          <el-radio v-model="radioTracking" :label="3">USPS/PB</el-radio>
        </el-form-item>
        <!--
          key: 后端的值
          _country_iso：简码
          _name_zh-cn：国家
         -->
        <el-form-item
          v-for="(domain, index) in dto.TrackingMore"
          :key="domain.Node"
          :label="'单号配置' + (index + 1)"
          :prop="'TrackingMore.' + index"
          class="TrackingMore"
        >
          <el-row :gutter="20">
            <el-col :span="2"> 跟踪前辍 </el-col>
            <el-col :span="3">
              <el-input v-model="domain.Regex" />
            </el-col>
            <el-col :span="2"> 简称 </el-col>
            <el-col :span="3">
              <div v-show="radioTracking === 2">
                <el-select v-model="domain.FirstCode" :filterable="true">
                  <el-option
                    v-for="item in seventeenTrack"
                    :key="item.key"
                    :label="`${item['_name_zh-cn']}-${item._country_iso}`"
                    :value="String(item.key)"
                  >
                    <div class="tracking-flex">
                      <div>{{ item['_name_zh-cn'] }}</div>
                      <div>{{ item._country_iso }}</div>
                    </div>
                  </el-option>
                </el-select>
              </div>
              <div v-show="radioTracking !== 2">
                <el-input v-model="domain.FirstCode" />
              </div>
            </el-col>
            <el-col :span="2"> 服务商地址 </el-col>
            <el-col :span="3">
              <el-input v-model="domain.Url" />
            </el-col>

            <el-col :span="5">
              <el-button style="float: left" @click.prevent="addTMNode()">+</el-button>
              <el-button
                v-if="index > 0"
                style="float: left"
                @click.prevent="removeTMNode(domain)"
              >-</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </div>
      <div class="itemGroup" style="text-align: center">
        <el-form-item>
          <el-button
            type="primary"
            :loading="saveLadding"
            @click="save()"
          >保存</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { Get9518Des } from '@/api/enum/enums'
import { _getChannel, _editChannel, _addChannel } from '@/api/channel'
import {
  _getChannelAPIList,
  _getDeliverChannel,
  _getPublicChannel,
  _getCountries
} from '@/api/baseInfo'
// import { _getEndServiceProviderList } from '@/api/trakingMoreNode'
import { array } from 'jszip/lib/support'
import axios from 'axios'
export default {
  name: 'ChannelCopy',
  data() {
    return {
      saveLadding: false,
      apiServices: [],
      channels: [],
      countries: [],
      LabelSizes: [],
      postableValidateTypes: [
        { name: '无', value: 0 },
        { name: '检查通邮地区', value: 1 },
        { name: '检查不通邮地区', value: 2 },
        { name: '检查偏远', value: 3 }
      ],
      endServiceProviderList: [],
      dto: {
        PostableValidateType: null,
        EndServiceProvider: undefined,
        DestCountries: [],
        PublicChanneId: '',
        api: true,
        apiService: 1,
        defaultSend: false,
        IsVolumnWeight: true,
        DeclareValue: [
          {
            MinWeight: 0,
            MaxWeight: 0,
            DeclareValue: 0
          }
        ],
        TrackingMore: [{}]
      },
      seventeenTrack: [],
      radioTracking: undefined
    }
  },
  computed: {
    showAgentInfo() {
      return this.dto.ServiceClass == 'XYY.WMS.Core.Channels.Services.AgentApi'
    }
  },
  watch: {
    radioTracking(val) {
      this.resetRadioTracking()
      switch (val) {
        case 0:
          this.dto.CanTrackingMore = true
          break
        case 1:
          this.dto.Can718Tracking = true
          break
        case 2:
          this.dto.Can17Tracking = true
          break
      }
    }
  },
  created() {
    const mode = this.$route.params.mode
    _getChannel(this.$route.params.Id).then((response) => {
      this.dto = response
      this.initRadioTracking(this.dto)
      this.dto.PickingProcess += ''
      if (mode === 'copy') {
        this.dto.Id = 0
      }
    })
    _getChannelAPIList().then((response) => {
      this.apiServices = response
    })
    _getPublicChannel().then((response) => {
      this.channels = response
    })

    _getCountries().then((response) => {
      this.countries = response
    })
    // _getEndServiceProviderList().then((response) => {
    //   this.endServiceProviderList = response
    // })
    Get9518Des('LabelSizeEnum').then(response => {
      this.LabelSizes = response
    })
    // 17Track跟踪列表
    axios.get('https://res.17track.net/asset/carrier/info/apicarrier.all.json').then((res) => {
      if (res.status === 200) {
        this.seventeenTrack = [
          {
            key: 'auto',
            '_name_zh-cn': '自动匹配',
            _country_iso: ''
          },
          ...res.data,
        ]
      }
    }).catch((error) => {
      this.$message({ type: 'error', message: error })
    })
  },
  methods: {
    save() {
      this.saveLadding = true
      if (this.dto.Id == 0) {
        _addChannel(this.dto)
          .then((reponse) => {
            this.$message('添加成功')
            this.saveLadding = false
          })
          .catch((error) => {
            this.saveLadding = false
          })
      } else {
        _editChannel(this.dto)
          .then((response) => {
            this.$message('编辑成功')
            this.saveLadding = false
          })
          .catch((error) => {
            this.saveLadding = false
          })
      }
    },
    addDeclareValueNode() {
      this.dto.DeclareValue.push({
        MinWeight:
          this.dto.DeclareValue[this.dto.DeclareValue.length - 1].MaxWeight * 1 + 1,
        MaxWeight:
          this.dto.DeclareValue[this.dto.DeclareValue.length - 1].MaxWeight * 1 + 1,
        DeclareValue: 0
      })
    },
    removeDeclareValueNode(row) {
      var index = this.dto.DeclareValue.indexOf(row)
      if (index !== -1) {
        this.dto.DeclareValue.splice(index, 1)
      }
    },
    addTMNode() {
      debugger
      this.dto.TrackingMore.push({})
    },
    removeTMNode(row) {
      var index = this.dto.TrackingMore.indexOf(row)
      if (index !== -1) {
        this.dto.TrackingMore.splice(index, 1)
      }
    },
    // 重置选中Tracking跟踪
    resetRadioTracking() {
      this.dto.CanTrackingMore = false
      this.dto.Can718Tracking = false
      this.dto.Can17Tracking = false
    },
    // 初始化追踪信息默认值
    initRadioTracking(data) {
      if (data.CanTrackingMore) {
        this.radioTracking = 0
      } else if (data.Can718Tracking) {
        this.radioTracking = 1
      } else if (data.Can17Tracking) {
        this.radioTracking = 2
      } else {
        this.radioTracking = 3
      }
    }
  }
}
</script>
<style>
.itemGroup {
  margin: 10px;
  border: 1px solid #ebebeb;
  padding: 30px;
}
.tracking-flex {
  display: flex;
  justify-content: space-between;
}
</style>
