<template>
    <div class="feedbackSurvey" :class="{'active': forbid}">
        <main id="main">
            <h1 id="title">AiDA 3.0 Feedback Survey</h1>
            <p id="description" v-if="!forbid">Please take the survey</p>
            <div id="survey-form" :class="{'active': !forbid}">
                <h2 class="section-title">Personal Information</h2>
                <div class="section w40">
                    <label for="name"
                        >Name:<span class="fontColor">*</span></label
                    >
                    <input
						:readonly="forbid"
                        type="text"
						v-model="userName"
                        placeholder="Enter your name"
                    />
                </div>
                <div class="section w40">
                    <label for="gender"
                        >Gender:<span class="fontColor">*</span></label
                    >
					<select :disabled="forbid" name="dropdown" id="dropdown" v-model="gender">
                        <option selected value='Female'>Female</option>
                        <option value='Male'>Male</option>
                    </select>
                    <!-- <input
                        type="text"
						v-model="gender"
                        placeholder="Enter your gender"
                        required
                    /> -->
                </div>
                <div class="section w40">
                    <label for="occupation"
                        >Occupation:<span class="fontColor">*</span></label
                    >
					
                    <input
                        type="text"
						:readonly="forbid"
						v-model="occupation"
                        placeholder="Enter your occupation"
                        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">Country of Origin:<span class="fontColor" >*</span></label>
                    <select :disabled="forbid" name="dropdown" id="dropdown" v-model="country" required>
                        <option disabled selected value> Select an option </option>
						<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
                    </select>
                </div>
                <div class="section">
                    <label for="email"
                        >Email:<span class="fontColor">*</span></label
                    >
                    <input
                        type="email"
						:readonly="forbid"
						v-model="email"
                        placeholder="Enter your email"
                        required
                    />
                </div>
                <div class="section">
                    <p>Age Group:<span class="fontColor">*</span></p>
                    <label>
                        <input
							:disabled="forbid"
                            type="radio"
                            value="below20"
                            name="age"
							v-model="age"
                            
                        />
                        Below 20
                    </label>
                    <label>
                        <input :disabled="forbid" checked type="radio" value="20-30" v-model="age" name="age" />
                        20-30
                    </label>
                    <label>
                        <input :disabled="forbid" type="radio" value="30-40" v-model="age" name="age" />
                        30-40
                    </label>
                    <label>
                        <input :disabled="forbid" type="radio" value="40+" v-model="age" name="age" />
                        40+
                    </label>
                </div>
                <h2 class="section-title">Survey Questions</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. How has AiDA been helpful to you? (You can choose
                        more than one answer):<span class="fontColor">*</span>
                    </p>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="1"
							v-model="helpful"
                        />
                        Easy to learn and use
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="2"
							v-model="helpful"
                        />
                        Easy to get trend information
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="3"
							v-model="helpful"
                        />
                        Lots of creative design proposals
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="4"
							v-model="helpful"
                        />
                        The AIGC functions for moodboard is helpful
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="5"
							v-model="helpful"
                        />
                        The AIGC functions for design sketches is helpful
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="6"
							v-model="helpful"
                        />
                        Easy to select the right color
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="7"
							v-model="helpful"
                        />
                        The Chatbot function is helpful
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="8"
							v-model="helpful"
                        />
                        The print position function is helpful
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="9"
							v-model="helpful"
                        />
                        The drawing function is helpful
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="10"
							v-model="helpful"
                        />
                        The export function is useful
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="11"
							v-model="helpful"
                        />
                        Easy to edit the design
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            class="marTop1"
							ref="helpfulOthers"
                        />
                        <span> Others:</span>
                        <textarea
							:readonly="forbid"
                            name="comments"
                            id="text-area"
                            placeholder="Please enter..."
							v-model="othersHelpful"
							@input="()=>helpfulOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>
                        2. What do you think AiDA should improve? (you could choose
                        more than one answer):<span class="fontColor">*</span>
                    </p>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="1"
							v-model="improve"
                        />
                        Proposed designs are boring, need more interesting
                        designs
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="2"
							v-model="improve"
                        />
                        Difficult to make changes on design
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="3"
							v-model="improve"
                        />
                        Only 2D output, no 3D results
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="4"
							v-model="improve"
                        />
                        Difficult to apply keywords for AIGC generation
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="5"
							v-model="improve"
                        />
                        Clothing is not in the right proportion
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="6"
							v-model="improve"
                        />
                        Not compatible with pattern making solutions
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="7"
							v-model="improve"
                        />
                        Improved user interface for better navigation
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="8"
							v-model="improve"
                        />
                        Lack of responsive customer support
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="9"
							v-model="improve"
                        />
                        Insufficient tutorial or guidance for new users
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            value="10"
							v-model="improve"
                        />
                        Limited personalization options for designs
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="checkbox-question"
                            class="marTop1"
							ref="improvelOthers"
                        />
                        <span> Others:</span>
                        <!-- <input
							class="others-input"
							type="text"
						/> -->
                        <textarea
							:readonly="forbid"
                            name="comments"
                            id="text-area"
							v-model="othersImprovel"
                            placeholder="Please enter..."
							@input="()=>improvelOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>3. Will you subscribe to AiDA 3.0?<span class="fontColor">*</span></p>
                    <label>
                        <input
							:disabled="forbid"
                            type="radio"
                            value="yes"
							v-model="isSubscribe"
                            name="radio-question"
                        />
                        Yes
                    </label>
                    <label>
                        <input :disabled="forbid" v-model="isSubscribe" type="radio" value="no" name="radio-question" />
                        No
                    </label>
                </div>
                <div class="section" v-show="isSubscribe == 'no'">
                    <p>If NO, please share why:<span class="fontColor">*</span></p>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
							value="Not useful"
                            name="reasonForNotSubscribe"
							v-model="reasonForNotSubscribe"
                        />
                        Not useful
                    </label>
                    <label>
                        <input :disabled="forbid" type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
                        Too expensive
                    </label>
                    <label>
                        <input
							:disabled="forbid"
                            type="checkbox"
                            name="reasonForNotSubscribe"
							ref="isSubscribeCauseOthers"
                            class="marTop1"
                        />
                        <span> Others:</span>
                        <textarea
							:readonly="forbid"
                            name="comments"
                            id="text-area"
							v-model="othersIsSubscribeCause"
                            placeholder="Please enter..."
							@input="()=>isSubscribeCauseOthers.checked = true"
                        ></textarea>
                    </label>
                </div>
                <div class="section">
                    <p>
                        Are you currently using any design tools? Please
                        list:
                    </p>
                    <textarea
						:readonly="forbid"
                        name="comments"
                        id="text-area"
						v-model="designTools"
                        placeholder="Please enter..."
                    ></textarea>
                </div>
                <div v-if="!forbid" class="section">
                    <button id="submit" @click="setSubmit">Submit</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() {
        let 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 = 'EN'
					submit(JSON.stringify(data))
                }
            });
        };
		let submit = (value:any)=>{
			Https.axiosPost(Https.httpUrls.questionnaire, value).then(
				(rv) => {
					alert('Submit Successfully!')
				}
			).catch(res=>{
			});
		}
		let forbid = ref(false)
		let initData = (data:any) => {
			// Object.assign(feedbackData,data)
			// console.log(JSON.parse(JSON.stringify(feedbackData)));
			forbid.value =  true
			for (const iterator in data) {
				if(typeof data[iterator] == 'object'){
					feedbackData[iterator] = []
					data[iterator].forEach((item:any)=>{
						if(item*1){
							feedbackData[iterator].push(item)
						}else{
							if(iterator == 'helpful'){
								refList.helpfulOthers.checked = true
								othersHelpful.value = item
							}else if(iterator == 'improve'){
								refList.improvelOthers.checked = true
								othersImprovel.value = item
							}
						}
					})
				}else{
					feedbackData[iterator] = data[iterator]
				}
			}
			if(data.othersIsSubscribeCause){
				refList.isSubscribeCauseOthers.checked = true
				let arr = []
				data.reasonForNotSubscribe.forEach((item:any,index:number) => {
					if(index <= 1){
						arr.push(item)
					}
				});
				othersIsSubscribeCause.value = data.othersIsSubscribeCause[2]
			}
			// feedbackData = reactive(...data)
		}
        return {
            ...toRefs(feedbackData),
            ...toRefs(refList),
			othersHelpful,
			othersImprovel,
			othersIsSubscribeCause,
			CountryList,
            setSubmit,
			forbid,
			initData,
        };
    },

    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;
	&.active{
		#title {
			font-size: 3rem;
		}
		#description {
			font-size: 1.4rem;
		}
		#survey-form {
			width: 90%;
			padding: 1.5rem;
			font-size: 1.2rem;
		}
		p{
			font-size: 1.4rem;
		}
		input,
		#dropdown {
			padding: 5px;
		}

		textarea {
			max-height: 125px;
			padding: 5px;
		}
		input[type="radio"],
		input[type="checkbox"] {
			width: 1rem;
			height: 1rem;
		}
		input,select{
			height: 3.5rem;	
		}
	}
	#main{
		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
		padding: 2rem;
	}
    #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;
        display: flex;
        flex-wrap: wrap;
		justify-content: space-between;
		&.active{
			transition: width 1s ease;
		}
    }
	
    @media (max-width: 760px) {
        form {
            width: 75%;
        }
    }
    h2 {
        width: 100%;
		font-weight: 900;
    }
    .section {
        display: flex;
        flex-direction: column;
        margin: 1rem;
        width: 100%;
    }
	.section:last-child{
		margin-bottom: 4rem;
	}
    .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: #39215b;

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

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