<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form
        ref="formValidate"
        :model="formValidate"
        :rules="rules"
        label-width="170px"
        v-loading="fullscreenLoading"
      >
        <el-form-item label="采集商品接口方式：">
          <el-radio-group v-model="formValidate.copy_product_status">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="2">一号通</el-radio>
            <el-radio :label="1" class="radio">99API自有账号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="formValidate.copy_product_status == 1"
          label="采集商品接口Key："
          prop="copy_product_apikey"
        >
          <el-input
            v-model="formValidate.copy_product_apikey"
            placeholder="请输入采集商品接口Key"
          ></el-input>
        </el-form-item>
        <el-form-item label="物流查询接口方式：">
          <el-radio-group v-model="formValidate.crmeb_serve_express">
            <el-radio :label="2">一号通</el-radio>
            <el-radio :label="1" class="radio">阿里云物流查询</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="formValidate.crmeb_serve_express == 1"
          label="物流查询接口Key："
          prop="express_app_code"
        >
          <el-input
            v-model="formValidate.express_app_code"
            placeholder="物流查询接口Key"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子面单：">
          <el-radio-group v-model="formValidate.crmeb_serve_dump">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0" class="radio">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="interface_desc">
          <div>接口方式说明：</div>
          <h3>采集商品接口：</h3>
          <p>
            1.一号通方式：是指通过注册CRMEB一号通方式，可对接更多服务接口，方便运营；详情请前往：<span
              class="color_blue"
              >平台后台>一号通>一号通服务</span
            >了解；
          </p>
          <p>
            2.99API自有账号：是指用户在99API平台已注册并购买商品采集的服务，可选择继续使用。
          </p>
          <h3>物流查询接口：</h3>
          <p>
            1.一号通方式：是指通过注册CRMEB一号通方式，可对接更多服务接口，方便运营；详情请前往：<span
              class="color_blue"
              >平台后台>一号通>一号通服务</span
            >了解；
          </p>
          <p>
            2.阿里云物流查询方式：是指用户在阿里云平台自行注册并购买物流查询服务的情况，可选择继续使用。
          </p>
          <p>
            3.阿里云快递查询接口密钥购买地址：https://market.aliyun.com/products/56928004/cmapi021863.html。
          </p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>

import { getSmsConfig, updateSmsConfig } from "@/api/setting";
export default {
  name: "smsConfig",
  data() {
    return {
      fullscreenLoading: false,
      loading: false,
      listLoading: true,
      formValidate: {},
      rules: {
        copy_product_apikey: [
          { required: true, message: "请输入采集商品接口Key", trigger: "blur" },
        ],
        express_app_code: [
          {
            required: true,
            message: "请输入物流查询     接口Key",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    submitForm() {
      updateSmsConfig(this.formValidate)
        .then((res) => {
          this.fullscreenLoading = false;
          this.$message.success(res.message);
        })
        .catch((res) => {
          this.$message.error(res.message);
          this.fullscreenLoading = false;
        });
    },
    // 详情
    getData() {
      this.fullscreenLoading = true;
      getSmsConfig()
        .then((res) => {
          this.fullscreenLoading = false;
          let info = res.data;
          this.formValidate = {
            copy_product_status: info.copy_product_status,
            copy_product_apikey: info.copy_product_apikey,
            crmeb_serve_dump: Number(info.crmeb_serve_dump),
            crmeb_serve_express: Number(info.crmeb_serve_express),
            express_app_code: info.express_app_code,
          };
        })
        .catch((res) => {
          this.$message.error(res.message);
          this.fullscreenLoading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.color_blue {
  color: var(--prev-color-primary);
}
.interface_desc {
  p,
  h3 {
    margin: 0;
  }
  div {
    color: #333;
  }
}
</style>
