<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-维修申请</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/user-center/repair.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>

<!-- 维修申请 -->
<div id="repairForm">
    <div class="repair">
        <h1 class="title">申请维修</h1>
        <p class="desc">未注册用户可直接填写维修申请；已注册用户为了方便您查看后续服务进展，请在登录账号后再填写维修申请。</p>
        <form>
            <div class="formLine">
                <p><em>*</em>问题描述：</p>
                <textarea  v-model.trim="postData.question" placeholder="请输入您的问题描述(不超过200字)…" maxlength="200" needverify></textarea>
                <i class="checked icon mIcon"></i>
                <span class="errTips icon mIcon" tips="请输入您的问题描述"></span>
            </div>
            <div class="formLine">
                <p><em>*</em>联系人：</p>
                <input type="text" v-model.trim="postData.linkman" placeholder="请输入联系人姓名" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
                <i class="checked icon mIcon"></i>
                <span class="errTips icon mIcon" tips="请输入正确的联系人姓名"></span>
            </div>
            <div class="formLine">
                <p><em>*</em>联系电话：</p>
                <input type="text" v-model.trim="postData.phone" placeholder="请输入联系电话" :rule="rule.phone" maxlength="12" @blur="blurHandle($event)" needverify>
                <i class="checked icon mIcon"></i>
                <span class="errTips icon mIcon" tips="请输入有效的联系电话"></span>
            </div>
            <div class="formLine">
                <p><em>*</em>联系地址：</p>
                <div class="address">
                    <select><option value="">请选择</option></select>
                    <select><option value="">请选择</option></select>
                    <select><option value="">请选择</option></select>
                    <textarea v-model.trim="postData.address" placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"></textarea>
                </div>
                <i class="checked icon mIcon"></i>
                <span class="errTips icon mIcon" tips="请输入正确的联系地址"></span>
            </div>
            <div class="formLine">
                <p><em>*</em>仪器名称：</p>
                <input type="text" v-model.trim="postData.name" placeholder="请输入仪器名称" :rule="rule.name" maxlength="50" @blur="blurHandle($event)" needverify>
                <i class="checked icon mIcon"></i>
                <span class="errTips icon mIcon" tips="请输入正确的仪器名称"></span>
            </div>
            <div class="formLine">
                <p>生产厂家：</p>
                <input type="text" v-model.trim="postData.shopName" placeholder="请输入生产厂家" :rule="rule.name" maxlength="50" @blur="blurHandle($event)">
                <i class="checked icon mIcon"></i>
                <span class="errTips icon mIcon" tips="请输入正确的公司名称"></span>
            </div>
            <div class="formLine">
                <p>上传图片：</p>
                <input type="file" v-model="postData.image">
                <span class="errTips icon mIcon"></span>
                <p class="fileInfo">请尽量上传仪器全照或者仪器故障图片，方便您的维修事宜上传jpg/png格式照片，单个照片不能超过5M,最多不超过5张</p>
            </div>
            <div class="subLine">
                <button class="btn" type="button" @click="submitData()">提交</button>
            </div>
        </form>
    </div>
</div>

<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/repair/repair.js(v=${version})}"></script>
</body>
</html>
