<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="20" :md="14" :lg="12" :xl="8">
      <el-form
        label-position="top"
        :label-width="120"
        :model="formValue"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="商品图片(大)">
          <el-space>
            <span>宽度：</span>
            <el-input v-model="formValue.bigWidth" style="width: 80px" placeholder="宽度像素" />
            <span>高度：</span>
            <el-input v-model="formValue.bigHeight" style="width: 80px" placeholder="高度像素" />
          </el-space>
        </el-form-item>

        <el-form-item label="商品图片(小)">
          <el-space>
            <span>宽度：</span>
            <el-input v-model="formValue.smallWidth" style="width: 80px" placeholder="宽度像素" />
            <span>高度：</span>
            <el-input v-model="formValue.smallHeight" style="width: 80px" placeholder="高度像素" />
          </el-space>
        </el-form-item>

        <el-form-item label="水印透明度" prop="watermarkClarity">
          <el-input-number
            v-model="formValue.watermarkClarity"
            :show-button="false"
            placeholder="请输入水印透明度"
          />
        </el-form-item>

        <el-form-item label="水印图片" prop="watermarkClarity">
          <el-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
            <el-button>上传文件</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="水印位置" prop="watermarkPlace">
          <el-select placeholder="请选择价格精确方式" v-model="formValue.watermarkPlace">
            <el-option
              v-for="item in watermarkPlaceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="价格精确位数" prop="pricePreciseNum">
          <el-select placeholder="请选择价格精确位数" v-model="formValue.pricePreciseNum">
            <el-option
              v-for="item in pricePreciseNumList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="价格精确方式" prop="pricePrecise">
          <el-select placeholder="请选择价格精确方式" v-model="formValue.pricePrecise">
            <el-option
              v-for="item in pricePreciseList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="前台显示市场价" prop="isMarketPrice">
          <el-switch size="large" v-model="formValue.isMarketPrice" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="formSubmit(formRef)">更新显示信息</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import type { ElForm } from 'element-plus';

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const rules = {
    name: {
      required: true,
      message: '请输入网站名称',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };

  const watermarkPlaceList = [
    {
      label: '左上',
      value: 1,
    },
    {
      label: '右上',
      value: 2,
    },
    {
      label: '居中',
      value: 3,
    },
    {
      label: '右下',
      value: 4,
    },
  ];

  const pricePreciseNumList = [
    {
      label: '2位',
      value: 1,
    },
    {
      label: '3位',
      value: 2,
    },
    {
      label: '4位',
      value: 3,
    },
  ];

  const pricePreciseList = [
    {
      label: '四舍五入',
      value: 1,
    },
    {
      label: '向上取整',
      value: 2,
    },
    {
      label: '向下取整',
      value: 3,
    },
  ];

  const formValue = reactive({
    bigWidth: '',
    bigHeight: '',
    smallWidth: '',
    smallHeight: '',
    watermarkClarity: null,
    pricePrecise: 1,
    isMarketPrice: true,
    pricePreciseNum: null,
    systemOpen: false,
    watermarkPlace: '',
  });

  function formSubmit(formEl: FormInstance | undefined) {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!');
        ElMessage.success('验证成功');
      } else {
        ElMessage.error('验证失败，请填写完整信息');
      }
    });
  }
</script>
