<template>
  <el-drawer
    v-model="drawer"
    :destroy-on-close="true"
    :direction="direction"
    size="50%"
    @close="handleClose"
  >
    <template #header>
      <h4>編輯物流方式</h4>
    </template>
    <template #default>
      <div v-loading="loading">
        <el-form :model="form" label-width="120px">
          <el-form-item label="物流方式代碼">
            {{ form.shipping_code }}
          </el-form-item>
          <el-form-item label="環境設置">
            <el-radio-group v-model="form.is_test" class="ml-4">
              <el-radio :label="0" size="large">測試環境</el-radio>
              <el-radio :label="1" size="large">正式環境</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="物流方式名稱">
            <el-input v-model="form.shipping_name" />
          </el-form-item>
          <el-form-item label="物流方式描述">
            <el-input v-model="form.shipping_desc" />
          </el-form-item>
          <el-form-item label="運費">
            <el-input v-model="form.shipping_fee" />
          </el-form-item>
          <el-form-item label="貨到付款">
            <el-radio-group v-model="form.support_cod" class="ml-4">
              <el-radio :label="0" size="large">否</el-radio>
              <el-radio :label="1" size="large">是</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="v.name" v-for="(v, i) in config_field" :key="i">
            <el-input v-model="shipping_config[v.key]" />
          </el-form-item>

          <el-form-item label="是否有效">
            <el-switch
              v-model="form.enabled"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="handleClose">關閉</el-button>
        <el-button type="primary" @click="handleSubmit">送出</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import { getShipping, updateShipping } from "@/api/shipping";

const props = defineProps({
  visible: Boolean,
  editid: Number,
});

const loading = ref(false);
const direction = ref("rtl");

const drawer = ref(false);

watch(
  () => props.visible,
  (val) => {
    drawer.value = val;
  }
);

const form = ref({});

const config_field = ref([]);

const shipping_config = ref(null);

watch(
  () => props.editid,
  async (val) => {
    if (val) {
      loading.value = true;
      let res = await getShipping(val);
      if (res.code === 200) {
        form.value = res.data;
        form.value.enabled = res.data.enabled === 1 ? true : false;
        config_field.value = JSON.parse(res.data.shipping_config_field);

        if (res.data.shipping_config_field) {
          if (res.data.shipping_config) {
            shipping_config.value = JSON.parse(res.data.shipping_config);
          } else {
            shipping_config.value = config_field.value.reduce((pv, cv, i) => {
              if (cv.key) {
                pv[cv.key] = "";
              }
              return pv;
            }, {});
          }
        }
      }
      loading.value = false;
    }
  }
);

const emit = defineEmits(["close", "update"]);

const handleClose = () => {
  form.value = {};
  shipping_config.value = {};
  emit("close", true);
};

const handleSubmit = async () => {
  form.value.shipping_config = JSON.stringify(shipping_config.value);

  loading.value = true;
  let res = await updateShipping(form.value);
  if (res.code === 200) {
    ElMessage("更新成功");
    emit("update");
    handleClose();
  } else {
    ElMessage.error("更新失敗,請重新操作");
  }
  loading.value = false;
};
</script>

<style lang="less" scoped></style>
