<template>
  <div class="logisticsInterface-container">
    <div class="content" :style="{ height: minHeight + 'px' }">
      <el-form ref="form" class="form-dialog" :model="form" label-width="160px">
        <el-form-item label="类型选择" prop="">
          <el-radio-group v-model="form.typeSelect">
            <el-radio :label="0">快递鸟</el-radio>
            <el-radio :label="1">快递100</el-radio>
            <el-radio :label="2">阿里云</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="快递鸟套餐" prop="" v-if="form.typeSelect == 0">
          <el-radio-group v-model="form.setMeal">
            <el-radio :label="0">免费</el-radio>
            <el-radio :label="1">付费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户ID" prop="" v-if="form.typeSelect == 0">
          <el-input clear="form-input" v-model="form.userID"></el-input>
        </el-form-item>
        <el-form-item label="API Key" prop="" v-if="form.typeSelect == 0">
          <el-input
            clear="form-input"
            v-model="form.kuaidiniaoApiKey"
          ></el-input>
        </el-form-item>
        <el-form-item label="京东商家编码" prop="" v-if="form.typeSelect == 0">
          <el-input clear="form-input" v-model="form.code"></el-input>
          <div class="tips">
            若您使用京东物流，则需填写“京东商家编码”，否则将会造成物流信息无法查询
          </div>
        </el-form-item>
        <el-form-item label="接口类型" prop="" v-if="form.typeSelect == 1">
          <el-radio-group v-model="form.apiType">
            <el-radio :label="0" disabled>免费版</el-radio>
            <el-radio :label="1">限量免费</el-radio>
            <el-radio :label="2">企业接口</el-radio>
          </el-radio-group>
          <div class="tips">因快递100接口变更，免费版功能暂时关闭</div>
        </el-form-item>
        <el-form-item
          label="授权密钥（Key）"
          prop=""
          v-if="form.typeSelect == 1"
        >
          <el-input
            clear="form-input"
            v-model="form.kuaidi100ApiKey"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据缓存时间" prop="" v-if="form.typeSelect == 1">
          <el-input v-model="form.dataTimeNum">
            <label slot="append">分钟</label>
          </el-input>
          <div class="tips">
            正式接口可能存在次数限制问题，设置缓存时间后在指定时间内只调取缓存并不调用接口（数据可能会延迟）
          </div>
        </el-form-item>
        <el-form-item label="APPCODE" prop="" v-if="form.typeSelect == 2">
          <el-input clear="form-input" v-model="form.ailiAPPCODE"></el-input>
        </el-form-item>
        <div class="tips" style="margin-left: 54px">
          提示：请到阿里云开通“
          <a
            href="https://market.aliyun.com/products/56928004/cmapi023201.html?spm=5176.730005.productlist.d_cmapi023201.29343524ubjjnd&amp;innerSource=search_%E5%85%A8%E7%90%83%E5%BF%AB%E9%80%92%E7%89%A9%E6%B5%81%E6%9F%A5%E8%AF%A2#sku=yuncode1720100000"
            target="_blank"
            class="express"
          >
            全球快递物流查询
          </a>
          ”服务，获取appcode填入此处
        </div>
      </el-form>
    </div>
    <div class="footer">
      <el-button class="btn" size="medium" type="primary" @click="handerSubmit">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minHeight: window.innerHeight - 220,
      form: {
        typeSelect: 0,
        setMeal: 0,
        userID: null,
        kuaidiniaoApiKey: null,
        code: null,
        apiType: 0,
        kuaidi100ApiKey: null,
        dataTimeNum: 5,
        ailiAPPCODE: null,
      },
    }
  },
  methods: {
    handerSubmit() {},
  },
}
</script>

<style lang="scss">
.logisticsInterface-container {
  position: relative;
  padding: 0 !important;
  background: #f6f8f9 !important;

  .content {
    padding: 20px;
    background: #fff;

    .tips {
      color: #999;
    }
  }

  .footer {
    position: fixed; /* 使用fixed定位 */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 58px;
    background: #fff;
    color: white;
    text-align: center;
    z-index: 1;

    display: flex;
    justify-content: center;
    padding: 10px 0;

    .btn {
      margin: 0 5px;
    }
  }

  .el-input {
    width: 270px;
    height: 38px;
  }

  .el-input__inner {
    width: 270px;
    height: 38px;
    line-height: 38px;
  }

  .el-form-item__label {
    padding-right: 20px !important;
  }

  .el-radio__input {
    transform: scale(130%);
  }

  .el-radio__inner {
    background: #fff !important;
  }

  .el-radio__input.is-checked .el-radio__inner::after {
    transform: translate(-50%, -50%) scale(1.2) !important;
    background-color: #1890ff !important;
    width: 5px !important;
    height: 5px !important;
  }
}
</style>