<template>
  <div style="padding: 20px 0">
    <el-form
      ref="logistics_form"
      :model="logistics_form"
      label-width="200px"
      size="small"
    >
      <el-form-item label="类型选择">
        <el-radio-group v-model="logistics_form.express_type">
          <el-radio label="express_bird">快递鸟</el-radio>
          <el-radio label="express_hundred">快递100</el-radio>
          <el-radio label="express_ali">阿里云</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="logistics_form.express_type === 'express_bird'">
        <el-form-item label="快递鸟套餐">
          <el-radio-group v-model="logistics_form.express_bird.hundredMeal">
            <el-radio :label="4">免费</el-radio>
            <el-radio :label="5">付费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input
            v-model="logistics_form.express_bird.userId"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="API Key">
          <el-input
            v-model="logistics_form.express_bird.apiKey"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="京东商家编码">
          <el-input
            v-model="logistics_form.express_bird.jdCode"
            style="width: 240px"
          ></el-input>
          <p class="form-tip">
            若您使用京东物流，则需填写“京东商家编码”，否则将会造成物流信息无法查询
          </p>
        </el-form-item>
      </div>
      <div v-if="logistics_form.express_type === 'express_hundred'">
        <el-form-item label="接口类型">
          <el-radio-group v-model="logistics_form.express_hundred.enterpriseIn">
            <el-radio :label="5">企业接口</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="授权密钥(Key)">
          <el-input
            v-model="logistics_form.express_hundred.accessKey"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司编号(Customer)">
          <el-input
            v-model="logistics_form.express_hundred.customerCode"
            style="width: 240px"
          ></el-input>
        </el-form-item>
        <el-form-item label="数据缓存时间">
          <el-input-number
            v-model="logistics_form.express_hundred.sessionTime"
            style="width: 240px"
            :controls="false"
          ></el-input-number>
          <span class="input-unit">分钟</span>
        </el-form-item>
      </div>
      <div v-if="logistics_form.express_type === 'express_ali'">
        <el-form-item label="APPCODE">
          <el-input
            v-model="logistics_form.express_ali.appCode"
            style="width: 240px"
          ></el-input>
          <p class="form-tip">
            提示：请到阿里云开通“
            <a
              href="https://market.aliyun.com/products/56928004/cmapi023201.html?spm=5176.730005.productlist.d_cmapi023201.29343524ubjjnd&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"
              style="color: #409eff"
            >
              全球快递物流查询
            </a>
            ”服务，获取appcode填入此处
          </p>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button
          v-if="$accessCheck($Access.Logisticssetting)"
          type="primary"
          @click="setSubmit"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getBasicSetup, setting } from "@/api/System";
  export default {
    name: "Logistics",
    data() {
      return {
        basicData: {},
        logistics_form: {
          express_type: "express_hundred",
          express_bird: {
            hundredMeal: 4,
            userId: "",
            apiKey: "",
            jdCode: "",
          },
          express_hundred: {
            enterpriseIn: 5,
            accessKey: "",
            customerCode: "",
            sessionTime: 1,
          },
          express_ali: {
            appCode: "",
          },
        },
      };
    },
    async created() {
      this.getBasicSetup();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getBasicSetup();
    },
    methods: {
      //  获取详情
      async getBasicSetup() {
        if (!this.$accessCheck(this.$Access.LogisticsgetBasicSetup)) {
          return;
        }

        const { data } = await getBasicSetup();

        this.basicData = data.basicData;
        if (data.basicData.logistics_form) {
          this.logistics_form = data.basicData.logistics_form;
        }
      },
      //  提交
      async setSubmit() {
        this.basicData = {
          ...this.basicData,
          logistics_form: this.logistics_form,
        };
        const data = await setting({
          basicData: this.basicData,
        });

        this.$message({
          message: "提交成功",
          type: "success",
        });
        this.getBasicSetup();
      },
    },
  };
</script>

<style scoped></style>
