<template>
  <div class="container">
    <div class="cul-hd">
      <div class="cul-hd-pr">
        <div class="cul-process">
          <div
            class="cul-process-item"
            v-for="(item, index) in processList"
            :key="index"
            :class="{ active: item.active }"
          >
            <svg-icon :icon-class="item.icon" />
            <p>{{ item.sub }}</p>
          </div>
        </div>
      </div>
      <card title="1" footer="1">
        <template slot="header">
          <h5 class="cul-hd-card-title">
            <span>{{ stepTips[currentStep].title }}</span>
            <span class="step">
              <em>{{ currentStep + 1 }}</em>
              / {{ stepTips.length }}
            </span>
          </h5>
          <div class="cul-tip">{{ stepTips[currentStep].sub }}</div>
        </template>
        <cr-form class="cul-hd-card-body">
          <cr-radio-btn
            v-model="formData.relation"
            class="qus-radio"
            :radio-data="insuredOptions"
            v-show="currentStep === 0"
          />
          <date-picker
            v-show="currentStep === 1"
            v-model="formBirth"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            @change="onPickerChange('', '', 'birthday')"
            :show-toolbar="false"
            tem-height="35"
            visible-item-count="5"
          />
          <cr-radio-btn
            v-model="formData.socialSecurity"
            :radio-data="hasSocialOptions"
            class="qus-radio cul-inline"
            v-show="currentStep === 2"
          />
          <cr-picker
            ref="income"
            :columns="incomeOptions"
            @change="
              (picker, value) => {
                onPickerChange(picker, value, 'annualIncome');
              }
            "
            v-show="currentStep === 3"
            item-height="35"
            :show-toolbar="false"
          />
          <cr-picker
            ref="loan"
            :columns="loanOptions"
            @change="
              (picker, value) => {
                onPickerChange(picker, value, 'loan');
              }
            "
            v-show="currentStep === 4"
            item-height="35"
            :show-toolbar="false"
          />
          <cr-area
            ref="area"
            :list="areaList"
            @change="
              (picker, value) => {
                onPickerChange(picker, value, 'addressCode');
              }
            "
            :columns-num="2"
            item-height="35"
            v-show="currentStep === 5"
          />
          <cr-radio-btn
            v-model="formData.questionType"
            :radio-data="solveOptions"
            class="qus-radio cul-inline"
            v-show="currentStep === 6"
          />
          <div class="qus-form" v-show="currentStep === 7">
            <cr-field
              v-model="formData.userName"
              name="姓名"
              label="姓名"
              placeholder="请输入投保人姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <cr-field
              class="qus-form_radio"
              name="您的性别"
              label="您的性别"
              :rules="[{ required: true, message: '请选择性别' }]"
            >
              <cr-radio-btn slot="input" v-model="formData.gender" :radio-data="sexOptions" />
            </cr-field>
            <!-- <cr-field
              v-if="!isLogin"
              v-model="formData.phone"
              type="password"
              name="预留手机"
              label="预留手机"
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
            />
            <cr-field
              v-if="!isLogin"
              v-model="formData.code"
              name="验证码"
              label="验证码"
              placeholder="输入短信验证码"
              :rules="[{ required: true, message: '输入短信验证码' }]"
            >
              <a href="javascript:;" slot="button">发送验证码</a>
            </cr-field> -->
          </div>
        </cr-form>
        <div slot="footer" class="cul-hd-card-footer">
          <cr-button type="warning" size="large" block @click="nextQuestion">
            {{ currentStep === 7 ? "提交问卷" : "下一步" }}
          </cr-button>
          <a href="javascsript:;" @click="prevQuestion" v-show="currentStep > 0">返回上一步</a>
        </div>
      </card>
    </div>
    <cr-overlay class="subing-mask" :show="showSubState" @click="showSubState = false">
      <div class="subing">
        <div class="subing-item">
          <svg-icon icon-class="order" />
          <div class="subing-title">
            <h3>问卷分析中<span class="ani_dot">...</span></h3>
            <small>正在为您分配顾问，请稍等</small>
          </div>
        </div>
      </div>
    </cr-overlay>
  </div>
</template>

<script>
import DatePicker from "vant/lib/datetime-picker";
import "vant/lib/datetime-picker/style";
import { subYears, format as dateFormat } from "date-fns";
import CrRadioBtn from "@/components/CrRadioBtn";
import Card from "@/components/Card";
import localStorage from "@/service/localStorage";
import areaList from "@qg/cherry-ui/src/area/demo/china";
import { subCulQus } from "@/api/consultant";

export default {
  name: "ConsultantQuestion",
  components: {
    Card,
    CrRadioBtn,
    DatePicker
  },
  data() {
    return {
      isLogin: localStorage.get("mongoToken"),
      areaList,
      formData: {
        birthday: "1990-01-01",
        socialSecurity: "",
        annualIncome: "10万",
        loan: "无房贷",
        addressCode: "北京市,北京市",
        questionType: "",
        userName: "",
        gender: "",
        relation: ""
      },
      formBirth: new Date("1990-01-01"),
      minDate: subYears(new Date(), 65),
      maxDate: subYears(new Date(), 18),
      currentStep: 0,
      showSubState: false,
      stepTips: [
        {
          title: "您准备为谁买保险？",
          tag: "relation",
          rule: "请选择关系",
          sub:
            "想为多人买保险的情况，请在和保险顾问沟通时说明信息，保险顾问会为每一位家人量身定制方案哦~~"
        },
        {
          title: "请选择TA的出生日期？",
          tag: "birthday",
          rule: "请选择出生日期",
          sub: "出生日期会影响保费计算，准确的填写可让保险顾问帮您更精准的测算保费~"
        },
        {
          title: "请选择TA有无社保",
          tag: "socialSecurity",
          rule: "请选择有无社保",
          sub: "新农合也算社保哦~~"
        },
        {
          title: "请选择您的年收入？",
          tag: "annualIncome",
          rule: "请选择您的年收入",
          sub: "保险顾问会根据您的年收入，帮您选择合适的额度和保费预算"
        },
        {
          title: "请问您每月要还多少贷款呢？",
          tag: "loan",
          rule: "请选择贷款",
          sub: "贷款包含房贷、车贷、信用卡等，了解您的贷款情况，能让顾问更好的帮您定制寿险额度"
        },
        {
          title: "请选择您的居住城市？",
          tag: "addressCode",
          rule: "请选择居住城市",
          sub: "保险产品的销售会受到地区的限制，了解您的居住城市能让顾问帮您挑选到合适的保险"
        },
        {
          title: "您主要想解决哪方面问题？",
          tag: "questionType",
          rule: "请选择问题类型",
          sub: "告诉保险顾问您的咨询意向，可以为您提供更专业的服务哦"
        },
        {
          title: "请填写您的个人信息",
          rule: "请完善个人信息",
          sub: "请预留您的信息，保险师会在您方便时联系您"
        }
      ],
      // 给谁买
      insuredOptions: [
        { label: "本人", value: "本人" },
        { label: "配偶", value: "配偶" },
        { label: "儿子", value: "儿子" },
        { label: "女儿", value: "女儿" },
        { label: "父亲", value: "父亲" },
        { label: "母亲", value: "母亲" }
      ],
      // 有无社保
      hasSocialOptions: [
        { label: "有", value: "1" },
        { label: "无", value: "0" }
      ],
      sexOptions: [
        { label: "男", value: "0" },
        { label: "女", value: "1" }
      ],
      // 收入
      incomeOptions: [
        "5万以下",
        "5万",
        "10万",
        "20万",
        "25万",
        "30万",
        "35万",
        "40万",
        "45万",
        "50万以上"
      ],
      // 贷款
      loanOptions: [
        "无房贷",
        "1000元",
        "2000元",
        "3000元",
        "4000元",
        "5000元",
        "6000元",
        "7000元",
        "8000元",
        "9000元",
        "1万元以上",
        "1万元以上"
      ],
      solveOptions: [
        { label: "之前从没买过保险，打算配置保险", value: "之前从没买过保险，打算配置保险" },
        { label: "已配置部分保险，打算再补充一些", value: "已配置部分保险，打算再补充一些" },
        { label: "不配置保险，就想咨询些保险疑惑", value: "不配置保险，就想咨询些保险疑惑" },
        { label: "无", value: "无" }
      ],
      processList: [
        { icon: "package-active", sub: "聘请成功", active: true },
        { icon: "page-active", sub: "完成问卷", active: true },
        { icon: "flag-black", sub: "顾问服务" }
      ]
    };
  },
  watch: {
    currentStep(val) {
      this.$forceUpdate();
      if (val === 3) {
        this.$refs["income"].refreshColumns();
      }
      if (val === 4) {
        this.$refs["loan"].refreshColumns();
      }
      if (val === 5) {
        this.$refs["area"].refreshColumns();
      }
    }
  },
  mounted() {},
  methods: {
    nextQuestion() {
      const { currentStep, stepTips, formData } = this;
      const userName = formData.userName && formData.gender;
      if (currentStep === 7 && userName) {
        this.showSubState = true;
        this.onSubmit();
        return;
      }
      if (!formData[stepTips[currentStep].tag] || currentStep === 7) {
        this.$notify({ type: "warning", message: stepTips[currentStep].rule });
        return;
      }
      this.currentStep++;
    },
    prevQuestion() {
      if (this.currentStep === 0) {
        return;
      }
      this.currentStep--;
    },
    onPickerChange(picker, value, type) {
      if (type === "birthday") {
        value = dateFormat(this.formBirth, "yyyy-MM-dd");
      }
      if (type === "annualIncome" || type === "loan") {
        value = value[0];
      }
      if (type === "addressCode") {
        value = value.map(item => item.name).join(",");
      }
      this.formData[type] = value;
    },
    async onSubmit() {
      const { formData } = this;
      const { socialSecurity, gender } = formData;
      const params = { ...formData, ...{ socialSecurity: +socialSecurity, gender: +gender } };
      const res = await subCulQus(params);
      if (res) {
        setTimeout(() => {
          this.showSubState = false;
          this.$parent.getOrderInfo();
        }, 2000);
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
