<template>
  <a-layout class="list-wrap">
    <a-form :model="params">
      <a-form-item label="限制输入字母">
        <my-input v-model="params.name" :pattern="/^[a-zA-Z]{0,20}$/"/>
      </a-form-item>
      <a-form-item label="限制输入金额">
        <my-input v-model="params.money" :pattern="/^(\d{1,10})?(\.([0-9]{0,2}))?$/"/>
      </a-form-item>
      <a-form-item label="限制输入数字">
        <my-input v-model="params.number" :pattern="/^\d{1,20}$/"/>
      </a-form-item>
      <a-form-item label="限制输入手机号">
        <my-input v-model="params.mobile" :pattern="/^1([3-9](\d{0,9})?)?$/"/>
      </a-form-item>
      <a-form-item label="下拉框单选">
        <my-select v-model="params.type" :options="options" :formatter="({id,name})=>[+id,name]"/>
      </a-form-item>
      <a-form-item label="下拉框多选">
        <my-select v-model="params.types" :options="options" :formatter="({id,name})=>[id,name]" multiple @change="handleChange"/>
      </a-form-item>
      <a-form-item label="日期区间">
        <my-date-range v-model:start="params.dateStart" v-model:end="params.dateEnd"/>
      </a-form-item>
      <a-form-item label="单选框">
        <my-radio v-model="params.radio" :options="options" formatter="id,name"/>
      </a-form-item>
      <a-form-item label="复选框">
        <my-checkbox v-model="params.checkbox" :options="options" :formatter="({id,name})=>[id,name]"/>
      </a-form-item>
      <a-form-item label="开关">
        <my-tips success>
          <my-switch v-model="params.switch" @change="useResolve"/>
        </my-tips>
      </a-form-item>
      <a-form-item label="图片上传">
        <my-tips error position="right">
          <my-upload v-model="params.image"/>
        </my-tips>
      </a-form-item>
    </a-form>
    <a-row style="padding-left: 50px;">
      <a-space wrap style="width: 600px;">
        <my-button @click="useResolve">提交按钮</my-button>
        <my-tips success>
          <my-button @click="useResolve">tips提交按钮</my-button>
        </my-tips>
        <my-tips success error>
          <my-button type="primary" @click="useResolve">操作成功</my-button>
          <my-button type="primary" status="warning" @click="useReject">操作失败</my-button>
        </my-tips>
        <my-confirm status="danger" width="230px" title="你果真要删除它吗？" @confirm="useResolve">删除</my-confirm>
        <my-confirm type="primary">
          <template #default>审核</template>
          <template #cancel="attrs">
            <my-tips error success>
              <my-button @click="useReject">不通过</my-button>
            </my-tips>
          </template>
          <template #confirm="attrs">
            <my-tips success>
              <my-button type="primary" @click="useResolve">通过</my-button>
            </my-tips>
          </template>
        </my-confirm>
        <my-button innerText="抽屉">
          <a-drawer title="抽屉" width="300px" placement="left"></a-drawer>
        </my-button>
        <my-button innerText="弹窗">
          <a-modal title="假装是个弹窗" simple>
            <a-form ref="form" :model="params" layout="horizontal" auto-label-width>
              <a-form-item label="名称" style="width: 300px">
                <my-input v-model="params.name"/>
              </a-form-item>
              <a-form-item label="名称名称名称" style="width: 300px">
                <my-input v-model="params.name"/>
              </a-form-item>
            </a-form>
          </a-modal>
        </my-button>
        <my-download type="primary" :api="GET_DOWNLOAD"/>
        <my-download-table type="outline" :api="GET_DOWNLOAD" :params="{abc:123}" :total="666666"/>
      </a-space>
    </a-row>
  </a-layout>
</template>
<script>
export default {
  name : 'SettingProduct' ,
}
</script>
<script setup>
import { reactive , watch , toRaw } from 'vue'
import { http } from '@/http'
import { POST_ERROR } from '@/http/apis/user'


const handleUpload = (option) => {
  console.info(option)
  return new Promise(resolve => {
    setTimeout(() => resolve() , 2000)
  })
}

const params = reactive({
  name : 'Master' ,
  money : 999.999 ,
  number : 999 ,
  mobile : '18888888888' ,
  radio : '1' ,
  checkbox : '2' ,
  type : '2' ,
  switch : 1 ,
  image : '/images/logo.png' ,
  types : '1,2' , //[1,3] ,
})

setTimeout(() => {
  params.radio = 2
} , 1000)

watch(params , params => {
  console.log('params:' , toRaw(params))
})

const options = [
  { id : '1' , name : '选项一' } ,
  { id : 2 , name : '选项二' } ,
  { id : 3 , name : '选项三' } ,
]

const useResolve = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ message : '我去，居然成功了' })
    } , 1000)
  })
}

const useReject = () => {
  return http.put(POST_ERROR , { id : '999' })
}

const handleChange = (v,e) => {
  console.log('handleChange',v,e)
}

</script>

<style scoped lang="less">
.list-wrap{
  padding: 50px;

  &>.a-row{
    margin-top: 20px;
  }

  :deep(.my-input),:deep(.my-select),:deep(.my-date-range){
    width: 300px;
  }

  .my-button+.my-button{
    margin-left: 10px;
  }
}
</style>