<template>
  <div class="flexCard">
    <!-- 表单 ref 和 prop绑定  用于重置表单 -->
    <el-card class="form-container" shadow="never" >
      <el-card  shadow="always" style="margin-bottom: 50px">当前偏远地区包含：西藏、新疆、青海、内蒙古、宁夏、云南、海南、甘肃。可设置为0元，0元就是偏远地区包邮。</el-card>
      <el-form ref="resetFormData" size="large" >
        <el-form-item label="快递费用" prop="price" label-width="100">
          <el-input-number v-model="price" min="0" :precision="2" :step="0.5" />
          <p>元</p>
        </el-form-item>
        <div class="btnBox">
          <el-form-item>
            <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
                           title="是否确认修改" @confirm="onSubmit" width=180>
              <template #reference>
                <el-button type="primary">修改</el-button>
              </template>
            </el-popconfirm>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, inject } from 'vue';
import { SuccessInfo, WarnInfo, CommInfo } from '@/utils/messageInfo';
import myAxios from "@/api/myAxios";
import { saveBtn, invInput } from '@/utils/entityProduct/globalVar';


const resetFormData = ref()
const reload: any = inject("reload")  //导入组件刷新
const price = ref(0)

onMounted(() => {
  getExpressPrice()
})

//提交表单
const onSubmit = async () => {
  const res = await myAxios.get('/global/update/postage/price',{ params: { bigDecimal : price.value } })
  if(res.data.code == 1) {
    SuccessInfo('更新偏远快递费用成功');
    await getExpressPrice()
  }
}

const getExpressPrice = async () => {
  const res = await myAxios.get('/global/query/postage/price')
  if(res.data.code == 1) {
    price.value = res.data.data;
  } else {
    WarnInfo('服务错误');
  }
}

//清除表单
const resetForm = () => {
  resetFormData.value.resetFields()
}

</script>

<style scoped>
.flexCard {
  display: flex;
  height: 100%;
  min-width: 800px;
  margin: 0 auto;
}


.form-container {
  width: 700px;
  margin: 0 auto;
}
.form {
  /* width: 500px; */
  margin: 0 auto;
}


.btnBox {
  display: flex;
  justify-content: space-around;
}
</style>