<template>
  <el-main class="order-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="自动关闭时间" prop="auto_close">
        <div>
          <el-input v-model="form.model.auto_close" placeholder="请输入自动关闭时间" type="number">
            <template #append>分钟</template>
          </el-input>
          <div class="warning-title sa-m-t-4">
            <div>
              订单创建后,用户如在设定时间内未支付,将自动关闭,建议设置为10~15分钟,0为不限制
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="自动收货时间" prop="auto_confirm">
        <div>
          <el-input
            v-model="form.model.auto_confirm"
            placeholder="请输入自动收货时间"
            type="number"
          >
            <template #append>天</template>
          </el-input>
          <div class="warning-title sa-m-t-4">
            <div>
              商品发货后,用户需自行点击确认收货,如在设定时间内无操作,系统将默认收货,0为关闭自动收货
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="自动评价时间" prop="auto_comment">
        <div>
          <el-input
            v-model="form.model.auto_comment"
            placeholder="请输入自动评价时间"
            type="number"
          >
            <template #append>天</template>
          </el-input>
          <div class="warning-title sa-m-t-4">
            <div>
              商品确认收货后,用户需发布商品评价,如在设定时间内无操作,系统将默认5星好评,0为关闭自动评价
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="评价内容" prop="auto_comment_content">
        <el-input v-model="form.model.auto_comment_content" placeholder="请输入自动评价内容">
        </el-input>
      </el-form-item>
      <el-form-item label="评价内容审核">
        <div>
          <el-radio-group v-model="form.model.comment_check">
            <el-radio :label="1">审核后展示</el-radio>
            <el-radio :label="0">直接展示 </el-radio>
          </el-radio-group>
          <div class="warning-title sa-m-t-4">
            <div> 建议用户评价内容在后台审核后展示,选择直接展示将跳过审核直接发布 </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="自动退款审核">
        <div>
          <div class="sa-flex sa-m-r-32">
            <el-switch
              v-model="form.model.auto_refund"
              class="sa-m-r-8"
              :active-value="1"
              :inactive-value="0"
            />
            <div v-if="form.model.auto_refund == 1" class="openswitch"> 开启 </div>
            <div v-if="form.model.auto_refund == 0">关闭</div>
          </div>
          <div class="warning-title sa-m-t-4">
            <div> 未发货订单,用户申请退款后将自动原路退款,并且恢复库存和销量 </div>
          </div>
        </div>
      </el-form-item>
      <div class="box sa-flex sa-col-bottom">
        <div class="title">发票配置</div>
        <div class="line"></div>
      </div>
      <el-form-item label="自助申请发票">
        <div class="sa-flex sa-m-r-32" v-if="form.model.invoice">
          <el-switch
            v-model="form.model.invoice.status"
            class="sa-m-r-8"
            :active-value="1"
            :inactive-value="0"
          />
          <div v-if="form.model.invoice.status == 1" class="openswitch"> 开启 </div>
          <div v-if="form.model.invoice.status == 0">关闭</div>
        </div>
      </el-form-item>
      <el-form-item label="票面金额" v-if="form.model.invoice">
        <el-radio-group v-model="form.model.invoice.amount_type">
          <el-radio label="pay_fee">实际支付金额</el-radio>
          <el-radio label="goods_amount">商品金额</el-radio>
        </el-radio-group>
      </el-form-item>
    </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, ref, onMounted, unref } from 'vue';
  import { api } from '../config.service';
  const formRef = ref();
  const form = reactive({
    model: {
      auto_close: '',
      auto_confirm: '',
      auto_comment: '',
      auto_comment_content: '',
      comment_check: 0,
      auto_refund: 0,
      invoice: {
        amount_type: '',
        status: 0,
      },
    },
  });
  async function getConfig() {
    const { data } = await api.order();
    form.model = data;
  }
  function onSave() {
    unref(formRef) &&
      unref(formRef).validate(async (valid) => {
        if (valid) {
          await api.order(form.model);
        }
      });
  }
  onMounted(() => {
    getConfig();
  });
</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);
  }
  .warning-title {
    font-size: 12px;
    line-height: 16px;
    color: var(--sa-subfont);
  }
  .openswitch {
    color: var(--el-color-primary);
  }
</style>
