<template>
  <div style="padding: 20px">
    <span style="color: orange">*所有信息只针对于同城秒送商品</span>
    <el-form
      ref="form"
      :rules="rules"
      :model="shopInfo"
      label-width="120px"
      style="padding: 35px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="营业时间："
            prop="businessEndTime"
            style="margin-top: 30px"
          >
            <el-time-picker
              value-format="HH:mm"
              format="HH:mm"
              type="time"
              placeholder="开始时间"
              v-model="shopInfo.businessStartTime"
              style="width: 200px"
            ></el-time-picker>
            -
            <el-time-picker
              value-format="HH:mm"
              format="HH:mm"
              type="time"
              placeholder="结束时间"
              v-model="shopInfo.businessEndTime"
              style="width: 200px"
            ></el-time-picker>
          </el-form-item>
          <el-form-item label="配送范围:" prop="deliveryRange" style="margin-top: 30px">
            店铺地址附近
            <el-input-number
              v-model="shopInfo.deliveryRange"
              @change="handleChange"
              style="width: 150px"
              :controls="false"
              max="9999"
              min="1"
              step="1"
            ></el-input-number>
            公里
          </el-form-item>
          <el-form-item
            label="起送金额:"
            prop="minDeliveryAmount"
            style="margin-top: 30px"
          >
            <el-input-number
              v-model="shopInfo.minDeliveryAmount"
              @change="handleChange"
              style="width: 150px"
              :controls="false"
              max="9999"
              min="1"
              step="1"
            ></el-input-number>
            元
          </el-form-item>
          <el-form-item label="配送费：">
            <span style="color: orange; font-size: 12px"
              >*平台3公里内配送费收取4元,每增加一公里，增加配送费2元</span
            >
            <br />
            3公里内
            <el-input type="text" style="width: 70px" v-model="shopInfo.thirdDeliveryFee"></el-input>
            ，每增加1公里，增加配送费<el-input
              type="text"
              style="width: 70px"
              v-model="shopInfo.oneDeliveryFee"
            ></el-input
            >元 <br /><br />
            免配送费，需下单满
            <el-input type="text" style="width: 70px" v-model="shopInfo.freeDeliveryAmount"></el-input>元
          </el-form-item>
          <el-form-item label="商品打包费：">
            打包费收取方式:
            <el-select v-model="shopInfo.packingMethod" placeholder="请选择" style="width: 120px">
              <el-option label="商品数量" :value="0" />
              <el-option label="整笔订单" :value="1" />
            </el-select>
            <br />
            <br />
            每件商品收取打包费：<el-input
              type="text"
              style="width: 70px"
              v-model="shopInfo.goodsPackingFee"
            ></el-input
            >元
          </el-form-item>
        </el-col>
        <el-col :span="24" style="margin-top: 30px">
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getStoreInfo, modifyStoreInfo } from "@/api/common/index";
export default {
  data() {
    return {
      form: {},
      rules: {
        businessEndTime: [{ required: true, message: "请选择营业时间", trigger: "blur" }],
        deliveryRange: [{ required: true, message: "请输入配送范围", trigger: "blur" }],
        minDeliveryAmount: [
          { required: true, message: "请输入起送金额", trigger: "blur" },
        ],
      },
      shopInfo: {},
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          modifyStoreInfo(this.shopInfo).then((res) => {
            if (res.code == 200) {
              this.$message.success("保存成功！");
              this.getInfo();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getInfo() {
      getStoreInfo().then((res) => {
        if (res.code == 200) {
          this.shopInfo = res.data;
        }
      });
    },
  },
};
</script>

<style></style>
