<template>
    <div class="feedbackSurvey">
        <main id="main">
            <h1 id="title">AiDA 调查问卷</h1>
            <p id="description">请填写调查问卷表</p>
            <div id="survey-form">
                <h2 class="section-title">参与者信息</h2>
                <div class="section w40">
                    <label for="name"
                        >姓名:<span class="fontColor">*</span></label
                    >
                    <input
                        type="text"
						v-model="userName"
                        placeholder="请输入您的名字"
                    />
                </div>
                <div class="section w40">
                    <label for="gender"
                        >性别:<span class="fontColor">*</span></label
                    >
					<select name="dropdown" id="dropdown" v-model="gender">
                        <option selected value='Female'>女性</option>
                        <option value='Male'>男性</option>
                    </select>
                    <!-- <input
                        type="text"
						v-model="gender"
                        placeholder="Enter your gender"
                        required
                    /> -->
                </div>
                <div class="section w40">
                    <label for="occupation"
                        >职业:<span class="fontColor">*</span></label
                    >
					
                    <input
                        type="text"
						v-model="occupation"
                        placeholder="请输入您的职业"
                        required
                    />
                </div>
                <!-- <div class="section w40">
                    <label for="country"
                        >Country of Origin:<span class="fontColor" >*</span
                        ></label
                    >
                    <input
                        type="text"
                        id="country"
                        name="country"
                        placeholder="Enter your country of origin"
                        required
                    />
                </div> -->
				<div class="section w40">
                    <label for="dropdown">国籍:<span class="fontColor" >*</span></label>
                    <select name="dropdown" id="dropdown" v-model="country" required>
                        <option disabled selected value> 请选择 </option>
						<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
                    </select>
                </div>
                <div class="section">
                    <label for="email"
                        >邮箱:<span class="fontColor">*</span></label
                    >
                    <input
                        type="email"
						v-model="email"
                        placeholder="请输入您的邮箱"
                        required
                    />
                </div>
                <div class="section">
                    <p>年龄:<span class="fontColor">*</span></p>
                    <label>
                        <input
                            type="radio"
                            value="below20"
                            name="age"
							v-model="age"
                            
                        />
                        20岁以下
                    </label>
                    <label>
                        <input checked type="radio" value="20-30" v-model="age" name="age" />
                        20-30岁
                    </label>
                    <label>
                        <input type="radio" value="30-40" v-model="age" name="age" />
                        30-40岁
                    </label>
                    <label>
                        <input type="radio" value="40+" v-model="age" name="age" />
                        40+岁
                    </label>
                </div>
                <h2 class="section-title">调查问题</h2>
                
                <!-- <div class="section">
                    <p>Do you like this survey?</p>
                    <label>
                        <input
                            type="radio"
                            value="yes"
                            name="radio-question"
                            checked
                        />
                        Yes
                    </label>
                    <label>
                        <input type="radio" value="no" name="radio-question" />
                        No
                    </label>
                    <label>
                        <input
                            type="radio"
                            value="maybe"
                            name="radio-question"
                        />
                        Maybe
                    </label>
                </div> -->
                <div class="section">
                    <p>
                        1. AiDA对您有哪些帮助？（您可以选择多个答案）：<span class="fontColor">*</span>
                    </p>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="1"
							v-model="helpful"
                        />
                        易于学习和使用
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="2"
							v-model="helpful"
                        />
                        容易获取趋势信息
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="3"
							v-model="helpful"
                        />
                        提供大量创意设计方案
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="4"
							v-model="helpful"
                        />
                        AIGC功能对灵感板有帮助
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="5"
							v-model="helpful"
                        />
						AIGC功能对设计草图有帮助
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="6"
							v-model="helpful"
                        />
                        容易选择合适的颜色
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="7"
							v-model="helpful"
                        />
                        聊天机器人功能有帮助
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="8"
							v-model="helpful"
                        />
                        打印位置功能有帮助
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="9"
							v-model="helpful"
                        />
                        绘图功能有帮助
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="10"
							v-model="helpful"
                        />
                        导出功能有用
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="11"
							v-model="helpful"
                        />
                        设计编辑简单
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            class="marTop1"
							ref="helpfulOthers"
                        />
                        <span> 其他:</span>
                        <textarea
                            name="comments"
                            id="text-area"
                            placeholder="请输入..."
							v-model="othersHelpful"
							@input="()=>helpfulOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>
                        2. 您认为AiDA应该改进什么？（您可以选择多个答案）：<span class="fontColor">*</span>
                    </p>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="1"
							v-model="improve"
                        />
                        提供的设计很无聊，需要更多有趣的设计
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="2"
							v-model="improve"
                        />
                        设计修改困难
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="3"
							v-model="improve"
                        />
                        只有2D输出，没有3D结果
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="4"
							v-model="improve"
                        />
						难以选择合适的关键词应用于AIGC生成
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="5"
							v-model="improve"
                        />
                        服装比例不正确
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="6"
							v-model="improve"
                        />
                        与打版解决方案不兼容
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="7"
							v-model="improve"
                        />
                        改进用户界面以便更好导航
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="8"
							v-model="improve"
                        />
						客户支持响应不及时
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="9"
							v-model="improve"
                        />
                        对新用户的教程或指导不足
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            value="10"
							v-model="improve"
                        />
						设计个性化选项有限
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="checkbox-question"
                            class="marTop1"
							ref="improvelOthers"
                        />
                        <span> 其他:</span>
                        <!-- <input
							class="others-input"
							type="text"
						/> -->
                        <textarea
                            name="comments"
                            id="text-area"
							v-model="othersImprovel"
                            placeholder="请输入..."
							@input="()=>improvelOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>3. 您会订阅AiDA吗？<span class="fontColor">*</span></p>
                    <label>
                        <input
                            type="radio"
                            value="yes"
							v-model="isSubscribe"
                            name="radio-question"
                        />
                        会
                    </label>
                    <label>
                        <input v-model="isSubscribe" type="radio" value="no" name="radio-question" />
                        不会
                    </label>
                </div>
                <div class="section" v-show="isSubscribe == 'no'">
                    <p>如果不会，请说明原因：<span class="fontColor">*</span></p>
                    <label>
                        <input
                            type="checkbox"
							value="Not useful"
                            name="reasonForNotSubscribe"
							v-model="reasonForNotSubscribe"
                        />
                        没有用
                    </label>
                    <label>
                        <input type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
                        太贵了
                    </label>
                    <label>
                        <input
                            type="checkbox"
                            name="reasonForNotSubscribe"
							ref="isSubscribeCauseOthers"
                            class="marTop1"
                        />
                        <span> 其他:</span>
                        <textarea
                            name="comments"
                            id="text-area"
							v-model="othersIsSubscribeCause"
                            placeholder="请输入..."
							@input="()=>isSubscribeCauseOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>
						4.	您目前使用哪些设计工具？请列出：
                    </p>
                    <textarea
                        name="comments"
                        id="text-area"
						v-model="designTools"
                        placeholder="请输入..."
                    ></textarea>
                </div>
                <div class="section">
                    <button id="submit" @click="setSubmit">提交 </button>
                </div>
            </div>
        </main>
    </div>
</template>

<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
export default defineComponent({
    setup() {
        const feedbackData:any = reactive({
			userName:'',
			gender:'Female',
			occupation:'',
			country:'',
			email:'',
			age:'20-30',
			helpful:[],
			improve:[],
			isSubscribe:'',
			reasonForNotSubscribe:[],
			designTools:'',
		});
		let refList:any = reactive({
			helpfulOthers:{},
			improvelOthers:{},
			isSubscribeCauseOthers:{},
		})
		let othersHelpful = ref('')
		let othersImprovel = ref('')
		let othersIsSubscribeCause = ref()
		let CountryList = [
			"Albania",
			"Algeria",
			"Andorra",
			"Angola",
			"Antigua and Barbuda",
			"Argentina",
			"Armenia",
			"Australia",
			"Austria",
			"Azerbaijan",
			"Bahamas",
			"Bangladesh",
			"Barbados",
			"Belgium",
			"Belize",
			"Benin",
			"Bhutan",
			"Bolivia",
			"Bosnia and Herzegovina",
			"Botswana",
			"Brazil",
			"Brunei",
			"Bulgaria",
			"Burkina Faso",
			"Cabo Verde",
			"Canada",
			"China",
			"Chile",
			"Colombia",
			"Comoros",
			"Congo",
			"Costa Rica",
			"Côte d'Ivoire",
			"Croatia",
			"Cyprus",
			"Czech Republic",
			"Denmark",
			"Djibouti",
			"Dominica",
			"Dominican Republic",
			"Ecuador",
			"El Salvador",
			"Estonia",
			"Fiji",
			"Finland",
			"France",
			"Gabon",
			"Gambia",
			"Georgia",
			"Germany",
			"Ghana",
			"Greece",
			"Grenada",
			"Guatemala",
			"Guinea",
			"Guinea-Bissau",
			"Guyana",
			"Haiti",
			"Holy See",
			"Honduras",
			"Hong Kong, China",
			"Hungary",
			"Iceland",
			"India",
			"Indonesia",
			"Iraq",
			"Ireland",
			"Israel",
			"Italy",
			"Jamaica",
			"Japan",
			"Jordan",
			"Kazakhstan",
			"Kenya",
			"Kiribati",
			"Kuwait",
			"Kyrgyzstan",
			"Latvia",
			"Lebanon",
			"Lesotho",
			"Liberia",
			"Liechtenstein",
			"Lithuania",
			"Luxembourg",
			"Madagascar",
			"Malawi",
			"Malaysia",
			"Maldives",
			"Mali",
			"Malta",
			"Marshall Islands",
			"Mauritania",
			"Mauritius",
			"Mexico",
			"Micronesia",
			"Moldova",
			"Monaco",
			"Mongolia",
			"Montenegro",
			"Morocco",
			"Mozambique",
			"Myanmar",
			"Namibia",
			"Nauru",
			"Nepal",
			"Netherlands",
			"New Zealand",
			"Nicaragua",
			"Niger",
			"Nigeria",
			"North Macedonia",
			"Norway",
			"Oman",
			"Pakistan",
			"Palau",
			"Palestine",
			"Panama",
			"Papua New Guinea",
			"Paraguay",
			"Peru",
			"Philippines",
			"Poland",
			"Portugal",
			"Qatar",
			"Romania",
			"Rwanda",
			"Saint Kitts and Nevis",
			"Saint Lucia",
			"Saint Vincent and the Grenadines",
			"Samoa",
			"San Marino",
			"Sao Tome and Principe",
			"Senegal",
			"Serbia",
			"Seychelles",
			"Sierra Leone",
			"Singapore",
			"Slovakia",
			"Slovenia",
			"Solomon Islands",
			"South Africa",
			"South Korea",
			"Spain",
			"Sri Lanka",
			"Suriname",
			"Sweden",
			"Switzerland",
			"Taiwan, China",
			"Tanzania",
			"Thailand",
			"Timor-Leste",
			"Togo",
			"Tonga",
			"Trinidad and Tobago",
			"Tunisia",
			"Turkey",
			"Tuvalu",
			"Uganda",
			"Ukraine",
			"United Arab Emirates",
			"United Kingdom",
			"United States of America",
			"Uruguay",
			"Vanuatu",
			"Zambia"
		]
        let setSubmit = () => {
			let state = false
			let skipList = ['designTools','reasonForNotSubscribe']
			let data = JSON.parse(JSON.stringify(feedbackData))
			if(refList.helpfulOthers.checked && othersHelpful.value){
				data.helpful.push(othersHelpful.value)
			}
			if(refList.improvelOthers.checked && othersImprovel.value){
				data.improve.push(othersImprovel.value)
			}
			if(refList.isSubscribeCauseOthers.checked && othersIsSubscribeCause.value){
				data.reasonForNotSubscribe.push(othersIsSubscribeCause.value)
			}
			for (const key in data) {
				if(skipList.indexOf(key) > -1){
					continue
				}
				let keyList = ['helpful','improve']
				if(keyList.indexOf(key) > -1){
					if(data[key].length == 0){
						state = true
						break
					}
				}else if(data.isSubscribe == 'no' && data.reasonForNotSubscribe.length == 0){
					state = true
					break
				}else{
					if(data[key] == ''){
						state = true
						break
					}
				}
			}

			if(state){
				message.info('Please check that all the * numbers have been filled in')
				return
			}
            Modal.confirm({
                title: `Please confirm your email address to ensure it is correct. ${data.email}`,
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					data.language = 'CN'
					submit(JSON.stringify(data))
                }
            });
        };
		let submit = (value:any)=>{
			Https.axiosPost(Https.httpUrls.questionnaire, value).then(
				(rv) => {
					alert('提交成功!')
				}
			).catch(res=>{
			});
		}
        return {
			...toRefs(feedbackData),
            ...toRefs(refList),
			othersHelpful,
			othersImprovel,
			othersIsSubscribeCause,
			CountryList,
            setSubmit,
        };
    },

    data() {
        return {
            // moodTemplateId: "", //模板id
        };
    },
    mounted() {},
    methods: {},
});
</script>

<style lang="less" scoped>
// @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
.feedbackSurvey {
    font-family: "Quicksand", sans-serif;
	font-family: 'Roboto', sans-serif;
    text-align: center;
    line-height: 1.5;
    // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
    margin: 1rem;
	height: 100%;
	overflow-y: auto;
	padding-bottom: 2rem;
	#main{
		background: linear-gradient(45deg, #eee4f3, #f3f4e6);

	}
    #title {
        font-size: 6rem;
        margin: 0;
		font-weight: 900;
    }

    #description {
        font-size: 2.8rem;
        font-style: italic;
    }

    #survey-form {
        position: relative;
        background: rgba(255, 255, 255, 0.2);
        width: 60%;
        left: 50%;
        transform: translateX(-50%);
        text-align: left;
        border-radius: 15px;
        padding: 3rem;
        box-shadow: -1px 1px 5px 0.5px;
        font-size: 2.4rem;
        transition: width 1s ease;
        display: flex;
        flex-wrap: wrap;
		justify-content: space-between;
    }

    @media (max-width: 760px) {
        form {
            width: 75%;
        }
    }
    h2 {
        width: 100%;
		font-weight: 900;
    }
    .section {
        display: flex;
        flex-direction: column;
        margin: 1rem;
        width: 100%;
    }
    .w40 {
        width: 40%;
    }
	.fontColor{
		color: rgb(255, 2, 2);
	}
	p{
		font-size: 2.8rem;
	}
    p,
    label {
        font-weight: bold;
        margin: 0;
        margin-left: 5px;
    }
	
    input,
    #dropdown {
        border: none;
        border-radius: 5px;
        padding: 10px;
        outline: 0;
    }

    input:focus,
    #dropdown:focus {
        border: 2px solid rgb(173, 173, 173);
    }
	input,select{
		height: 7rem;	
	}
    input,
    button,
    select,
    textarea {
		cursor: pointer;
        font-family: inherit;
        font-size: inherit;
    }

    input[type="radio"],
    input[type="checkbox"] {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        vertical-align: middle;
        margin: 0;
    }
	label{
		vertical-align: baseline;
		cursor: pointer;
		.others-input{
			background: rgba(255, 255, 255, 0);
			border-top: none;
			border-right: none;
			border-left: none;
			border-radius: 0;
			border-bottom: 2px solid;
		}
		.others-input:focus{
			border: none;
			border-bottom: 2px solid;
		}
		span{
			vertical-align: top;
		}
		textarea{
			width: 80%;
			vertical-align: top;
			margin-left: 1rem;

		}
	}
    textarea {
        min-height: 75%;
		max-height: 250px;
        width: 100%;
        resize: vertical;
        border: none;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    #submit {
        background: green;
		background: #000;

        border: none;
        border-radius: 10px;
        color: white;
        font-size: 3rem;
        transition: all 0.3s ease-in;
    }

    #submit:hover {
        background: darkgreen;
		background: #543087;
    }
}
</style>