<template>
  <el-main class="dispatch-config">
    <div class="box sa-flex sa-col-bottom">
      <div class="title">物流接口</div>
      <div class="line"></div>
    </div>
    <el-form ref="formRef" :model="form.model" :rules="form.rules" label-width="122px">
      <el-form-item label="驱动选择">
        <el-radio-group v-model="form.model.driver">
          <el-radio label="kdniao">快递鸟</el-radio>
          <el-radio label="thinkapi">ThinkApi</el-radio>
          <el-button type="primary" class="is-link" @click="onThinkApi">查看</el-button>
        </el-radio-group>
      </el-form-item>
      <div v-if="form.model.driver == 'kdniao'">
        <el-form-item label="快递鸟套餐">
          <div class="sa-flex-col">
            <el-radio-group v-model="form.model.kdniao.type">
              <el-radio label="free">免费版</el-radio>
              <el-radio label="vip">标准版</el-radio>
            </el-radio-group>
            <div class="warning-title sa-flex sa-m-t-4">
              <div class="sa-m-r-8">标准版本支持电子面单接口</div>
              <a href="http://www.kdniao.com/reg?from=wzlxpxx" target="_blank">申请快递鸟商户</a>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="用户ID" prop="ebusiness_id">
          <el-input
            v-model="form.model.kdniao.ebusiness_id"
            type="number"
            placeholder="请输入用户ID"
          ></el-input>
        </el-form-item>
        <el-form-item label="AppKey" prop="app_key">
          <el-input v-model="form.model.kdniao.app_key" placeholder="请输入AppKey"></el-input>
        </el-form-item>
        <el-form-item label="京东青龙编码" prop="jd_code">
          <div class="sa-flex-col sa-w-360">
            <el-input
              v-model="form.model.kdniao.jd_code"
              placeholder="请输入京东青龙编码"
            ></el-input>
            <div class="warning-title sa-m-t-4">
              <div>使用京东时需要配置</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="回调地址">
          <div class="sa-flex-col sa-w-360">
            <el-input v-model="form.model.callback" disabled>
              <template #append>
                <span @click="useClip(form.model.callback)" class="cursor-pointer">复制</span>
              </template>
            </el-input>
            <div class="warning-title sa-m-t-4">
              <div>请在快递鸟后台配置此回调地址</div>
            </div>
          </div>
        </el-form-item>
        <div v-if="form.model.kdniao.type == 'vip'">
          <div class="box sa-flex sa-col-bottom">
            <div class="title">电子面单参数</div>
            <div class="line sender-line" style="width: 90px"></div>
          </div>
          <div class="tip sa-m-b-20">
            请按照
            <a href="https://www.yuque.com/kdnjishuzhichi/dfcrg1/hrfw43" target="_blank"
              >电子面单账号对照表</a
            >
            填写
          </div>
          <el-form-item label="客户号" prop="customer_name">
            <el-input
              v-model="form.model.kdniao.customer_name"
              placeholder="请输入客户号"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户密码" prop="customer_pwd">
            <el-input
              v-model="form.model.kdniao.customer_pwd"
              placeholder="请输入客户密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="月结号" prop="month_code">
            <el-input v-model="form.model.kdniao.month_code" placeholder="请输入月结号"></el-input>
          </el-form-item>
          <el-form-item label="网点编码" prop="send_site">
            <el-input v-model="form.model.kdniao.send_site" placeholder="请输入网点编码"></el-input>
          </el-form-item>
          <el-form-item label="取件员编号" prop="send_staff">
            <el-input
              v-model="form.model.kdniao.send_staff"
              placeholder="请输入取件员编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付方式" prop="pay_type">
            <el-radio-group v-model="form.model.kdniao.pay_type">
              <el-radio label="1">现付</el-radio>
              <el-radio label="2">到付</el-radio>
              <el-radio label="3">月结</el-radio>
              <el-radio label="4">第三方支付（仅SF支持）</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="签约快递">
            <el-select
              v-model="express.code"
              placeholder="请选择快递公司"
              @change="onChangeExpressCode"
              filterable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              :loading="deliverCompany.loading"
            >
              <el-option
                v-for="dc in deliverCompany.data"
                :key="dc"
                :label="dc.name"
                :value="dc.code"
                :ref="`dc-${dc.code}`"
                :data-name="dc.name"
                >{{ dc.name }}&nbsp;({{ dc.code }})</el-option
              >
              <div class="sa-p-l-15 sa-p-r-27">
                <sa-pagination
                  layout="total, prev, pager, next"
                  :pageData="deliverCompany.pageData"
                  @updateFn="getDeliverCompany"
                />
              </div>
            </el-select>
          </el-form-item>
          <el-form-item label="快递类型" prop="exp_type">
            <div class="sa-flex-col sa-w-360">
              <el-input
                v-model="form.model.kdniao.exp_type"
                placeholder="请输入快递类型"
              ></el-input>
              <div class="warning-title sa-flex sa-m-t-4">
                <div class="sa-m-r-8">详细快递类型请下载</div>
                <a
                  href="https://www.yuque.com/kdnjishuzhichi/dfcrg1/hgx758hom5p6wz0l"
                  target="_blank"
                  >快递业务类型</a
                >
              </div>
            </div>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="app_code" prop="app_code" v-if="form.model.driver == 'thinkapi'">
        <el-input v-model="form.model.thinkapi.app_code" placeholder="请输入app_code"></el-input>
      </el-form-item>
      <div class="box sa-flex sa-col-bottom">
        <div class="title">默认发货人信息</div>
        <div class="line sender-line"></div>
      </div>
      <template v-if="form.model.sender">
        <el-form-item label="发件人">
          <el-input v-model="form.model.sender.name" placeholder="请输入发件人"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="form.model.sender.mobile"
            placeholder="请输入手机号"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="省/市/区" prop="provinces">
          <el-cascader
            v-model="form.model.sender.provinces"
            :options="area.data"
            :props="{
              label: 'name',
              value: 'name',
            }"
            clearable
            placeholder="请选择"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.model.sender.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </template>
    </el-form>
  </el-main>
  <el-footer class="sa-footer--submit">
    <el-button @click="getConfig">重置</el-button>
    <el-button type="primary" @click="onSave">保存</el-button>
  </el-footer>
</template>
<script setup>
  import { reactive, onMounted, watch, unref, ref } from 'vue';
  import { api } from '../config.service';
  import { api as dataApi } from '@/app/shop/admin/data/data.service';
  import useClip from '@/sheep/utils/clipboard.js';
  import useExpress from '@/app/shop/admin/data/express/express.js';

  import { isObject } from '@/sheep/utils/index.js';

  const formRef = ref();
  const form = reactive({
    model: {
      driver: 'kdniao',
      kdniao: {
        type: 'free',
        ebusiness_id: '',
        app_key: '',
        jd_code: '',
        customer_name: '',
        customer_pwd: '',
        month_code: '',
        send_site: '',
        send_staff: '',
        pay_type: '',
        shipper_code: '',
        exp_type: '',
        express: {
          name: '',
          code: '',
        },
      },
      thinkapi: {
        app_code: '',
      },
      sender: {
        name: '',
        mobile: '',
        provinces: [],
        address: '',
        province_name: '',
        city_name: '',
        district_name: '',
      },
    },
  });
  const area = reactive({
    data: [],
  });
  const { express, deliverCompany, getDeliverCompany, onChangeExpressCode, remoteMethod } =
    useExpress();

  async function getArea() {
    const { data } = await dataApi.area.list({
      order: 'asc',
      sort: '',
    });
    area.data = data;
  }
  async function getConfig() {
    const { data } = await api.dispatch();
    form.model = data;
    form.model.sender = isObject(form.model.sender) ? form.model.sender : {};
    let arr = [];
    if (!form.model.sender.provinces) {
      form.model.sender.provinces = arr;
      form.model.sender.provinces[0] = form.model.sender.province_name;
      form.model.sender.provinces[1] = form.model.sender.city_name;
      form.model.sender.provinces[2] = form.model.sender.district_name;
    }
  }
  //查看链接
  function onThinkApi() {
    window.open('https://docs.topthink.com/think-api/1835396');
  }
  function onkdniao() {
    window.open('http://www.kdniao.com/reg?from=wzlxp');
  }
  function onSave() {
    unref(formRef) &&
      unref(formRef).validate(async (valid) => {
        if (valid) {
          form.model.sender.province_name = form.model.sender.provinces[0];
          form.model.sender.city_name = form.model.sender.provinces[1];
          form.model.sender.district_name = form.model.sender.provinces[2];
          delete form.model.sender.provinces;
          form.model.kdniao.express = express;
          await api.dispatch(form.model);
          getConfig();
        }
      });
  }

  watch(
    () => form.model,
    () => {
      if (form.model.kdniao && form.model.kdniao.express) {
        express.name = form.model.kdniao.express.name;
        express.code = form.model.kdniao.express.code;
      }
    },
  );

  onMounted(() => {
    getConfig();
    getArea();
  });
</script>
<style lang="scss" scoped>
  .box {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: var(--sa-title);
    position: relative;
    margin: 8px 0 24px 0;
    height: 32px;
  }
  .line {
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 60px;
    height: 6px;
    background: rgba(128, 106, 246, 0.3);
  }
  .sender-line {
    width: 102px;
  }
  .warning-title {
    font-size: 12px;
    line-height: 16px;
    color: var(--sa-subfont);
  }
</style>
