<template>
  <div class="drawer-container">
    <el-form ref="form" :model="form" label-width="170px" :rules="rules">
      <el-form-item label="是否开通自提" prop="ablePickup">
        <el-switch
          v-model="form.ablePickup"
          @change="handleSwitch($event, 0)"
        ></el-switch>
      </el-form-item>
      <el-form-item label="是否开启自提有效期" prop="ablePickupExpired" v-if="form.ablePickup">
        <el-switch
          v-model="form.ablePickupExpired"
        ></el-switch>
      </el-form-item>
      <el-form-item
        v-if="form.ablePickupExpired"
        label="提货有效期过期天数"
        prop="pickupExpired"
      >
        <el-input-number
          v-model="form.pickupExpired"
          controls-position="right"
          :min="1"
          :max="10"
          :precision="0"
          placeholder="请输入提货有效期"
          style="width: 400px"
        ></el-input-number>
        <span class="ml-10">天</span>
      </el-form-item>

      <el-form-item label="是否开启系统自动备货" prop="autoStock">
        <el-switch
          v-model="form.autoStock"
          @change="handleSwitch($event, 1)"
        ></el-switch>
      </el-form-item>

      <template v-if="form.autoStock">
        <el-form-item label="自动备货所需延时配置" prop="delayDays">
          <el-input-number
            v-model="form.delayDays"
            controls-position="right"
            :min="0"
            :max="30"
            :precision="0"
            placeholder="天数（最大30）"
            style="width: 400px"
          ></el-input-number>
          <span class="ml-10">天（最大30）</span>
        </el-form-item>
        <el-form-item label="" prop="delayHours">
          <el-input-number
            v-model="form.delayHours"
            controls-position="right"
            :min="0"
            :max="23"
            :precision="0"
            placeholder="小时数（最大23）"
            style="width: 400px"
          ></el-input-number>
          <span class="ml-10">小时（最大23）</span>
        </el-form-item>
        <el-form-item label="" prop="delayMinutes">
          <el-input-number
            v-model="form.delayMinutes"
            controls-position="right"
            :min="1"
            :max="59"
            :precision="0"
            placeholder="分钟数（最大59）"
            style="width: 400px"
          ></el-input-number>
          <span class="ml-10">分钟（最大59）</span>
        </el-form-item>
      </template>

      <el-form-item label="自提过期订单处理方式" prop="expiredOrderHandleType">
        <el-select
          v-model="form.expiredOrderHandleType"
          placeholder="请选择自提过期订单处理"
          style="width: 400px"
          clearable
        >
          <el-option
            v-for="(v, i) in orderHandleTypeList"
            :key="i"
            :label="v.label"
            :value="v.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="运费计算策略" prop="freightStrategy">
        <el-select
          v-model="form.freightStrategy"
          placeholder="请选择运费计算策略"
          style="width: 400px"
          clearable
        >
          <el-option
            v-for="(v, i) in freightList"
            :key="i"
            :label="v.label"
            :value="v.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认</el-button>
        <el-button @click="handleClose">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  businessLogisticsConfigSet,
  businessLogisticsConfigInfo,
} from "@/api/shopLogistics.js";
export default {
  data() {
    return {
      form: {
        ablePickup: true,
        autoStock: false,
        ablePickupExpired: false,
      },
      rules: {
        businessId: [
          { required: true, message: "请选择所属商家", trigger: "change" },
        ],
        pickupExpired: [
          { required: true, message: "请输入提货有效期过期时间", trigger: "blur" },
        ],
        delayDays: [
          {
            required: true,
            message: "请输入天数（最大30天）",
            trigger: "blur",
          },
        ],
        delayHours: [
          {
            required: true,
            message: "请输入小时数（最大23小时）",
            trigger: "blur",
          },
        ],
        delayMinutes: [
          {
            required: true,
            message: "请输入分钟数（最大59分钟）",
            trigger: "blur",
          },
        ],
        expiredOrderHandleType: [
          {
            required: true,
            message: "请选择自提过期订单处理方式",
            trigger: "change",
          },
        ],
        freightStrategy: [
          {
            required: true,
            message: "请选择运费计算策略",
            trigger: "change",
          },
        ],
      },
      orderHandleTypeList: [
        { value: 0, label: "过期后，订单将自动完成，不退款" },
        { value: 1, label: "过期后，订单将自动维权，自动向买家退款" },
      ],
      freightList: [
        { value: 0, label: "订单总运费为各个商品运费之和" },
        { value: 1, label: "订单总运费为运费最高商品运费" },
        { value: 2, label: "订单总运费为运费最低的商品运费" },
      ],
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      businessLogisticsConfigInfo().then((res) => {
        if (res.code === 200) {
          this.form = res.data || {
            ablePickup: true,
            autoStock: false,
            ablePickupExpired: false,
          };
        }
      });
    },
    handleClose() {
      this.form = {
        ablePickup: true,
        autoStock: false,
        ablePickupExpired: false,
      };
      this.$refs.form.resetFields();
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        // console.log(valid);
        if (valid) {
          const params = { ...this.form };
          businessLogisticsConfigSet(params).then((res) => {
            if (res.code === 200) {
              this.$message.success("保存成功");
            }
          });
        } else {
          return false;
        }
      });
    },
    handleSwitch(val, index) {
      if (index === 1) {
        this.form.delayDays = undefined;
        this.form.delayHours = undefined;
        this.form.delayMinutes = undefined;
      } else if (index === 0) {
        this.form.ablePickupExpired = false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.drawer-container {
  padding: 20px 40px 20px 20px;
  .ml-10 {
    margin-left: 10px;
    color: #666666;
  }
}
</style>
