<template>
  <section>
    <div style="padding: 5px; text-align: center">
      <img :src="logo" style="width: auto; height: 35px" alt="logo" />
    </div>
    <div style="margin: 10px 15px 10px 15px">
      <el-steps :active="stepActive" finish-status="success">
        <el-step
          v-for="(item, index) in stepArray"
          :key="index"
          title=""
        ></el-step>
      </el-steps>
    </div>
    <el-form
      ref="form"
      label-position="top"
      :model="form"
      :rules="rules"
      label-width="100px"
      style="padding: 16px"
    >
      <healthy-form1 v-show="stepArray[0]" :form.sync="form"></healthy-form1>
      <healthy-form2 v-show="stepArray[1]" :form.sync="form"></healthy-form2>
      <healthy-form3 v-show="stepArray[2]" :form.sync="form"></healthy-form3>
      <healthy-form4 v-show="stepArray[3]" :form.sync="form"></healthy-form4>
      <healthy-form5 v-show="stepArray[4]" :form.sync="form"></healthy-form5>
      <healthy-form6 v-show="stepArray[5]" :form.sync="form"></healthy-form6>
      <healthy-form7 v-show="stepArray[6]" :form.sync="form"></healthy-form7>
      <healthy-form8 v-show="stepArray[7]" :form.sync="form"></healthy-form8>
      <healthy-form9
        v-show="stepArray[8]"
        ref="fileForm"
        @addOrEditHealthy="addCustomerHealthy()"
        :form.sync="form"
      ></healthy-form9>
      <el-form-item style="text-align: center; margin: 30px auto">
        <el-button
          @click="nextStep(-1)"
          style="margin-right: 10px; width: 40%"
          v-show="stepActive != 0"
          >上一步</el-button
        >
        <el-button
          type="primary"
          @click="nextStep(1)"
          style="width: 40%"
          v-show="stepActive != stepArray.length - 1"
          >下一步</el-button
        >
        <el-button
          type="primary"
          @click="submit()"
          style="width: 40%"
          v-show="stepActive == stepArray.length - 1"
          >提交数据</el-button
        >
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
import {
  getDictData,
  addCustomerHealthy,
  physicalSignsList,
  getCustomerBaseMessage,
} from "@/api/custom/customerInvestigation";
import * as healthyData from "@/utils/healthyData";
const logo = require("@/assets/logo/st_logo.png");
import Form1 from "@/components/HealthyForm/Form1";
import Form2 from "@/components/HealthyForm/Form2";
import Form3 from "@/components/HealthyForm/Form3";
import Form4 from "@/components/HealthyForm/Form4";
import Form5 from "@/components/HealthyForm/Form5";
import Form6 from "@/components/HealthyForm/Form6";
import Form7 from "@/components/HealthyForm/Form7";
import Form8 from "@/components/HealthyForm/Form8";
import Form9 from "@/components/HealthyForm/Form9";
export default {
  name: "index",
  data() {
    return {
      //客户是否存在标识
      customerExistFlag: false,
      healthyData: healthyData,
      logo,
      submitFlag: false,
      stepArray: [true, false, false, false, false, false, false, false, false],
      stepActive: 0,
      form: {
        customerEncId: null,
        name: null,
        phone: null,
        conditioningProjectId: 0,
        sex: 1,
        age: null,
        tall: null,
        weight: null,
        condiment: ["1", "2", "3"],
        otherCondiment: null,
        cookingStyle: ["8", "9", "4", "11"],
        cookingStyleRate: [1, 1, 1, 1, 1, 1],
        washVegetablesStyle: ["2"],
        otherWashVegetablesStyle: null,
        breakfastType: "2",
        breakfastFood: null,
        lunchType: ["3"],
        dinner: ["2"],
        vegetableRate: 5,
        commonMeat: null,
        dinnerTime: "19:00",
        supperNum: 1,
        supperFood: null,
        dietHotAndCold: "3",
        dietFlavor: ["1", "2"],
        vegetablesNum: 1,
        vegetablesRateType: "3",
        fruitsNum: 1,
        fruitsTime: "2",
        fruitsRate: "2",
        riceNum: 1,
        riceFull: 8,
        eatingSpeed: "3",
        snacks: ["1"],
        otherSnacks: null,
        healthProductsFlag: 0,
        healthProductsBrand: null,
        healthProductsName: null,
        healthProductsWeekRate: 0,
        healthProductsDayRate: 0,

        waterNum: 1500,
        waterType: ["3"],
        waterHabit: ["5"],
        drinksNum: [0, 0, 0, 0, 0, 0, 0, 0],
        drinkWineFlag: "3",
        drinkWineClassify: ["3"],
        otherWineClassify: null,
        drinkWineAmount: [0, 0, 0],
        smokeFlag: 0,
        smokeRate: [0, 0, 0],
        secondSmoke: 0,
        workIndustry: null,
        workType: ["2"],
        defecationNum: 1,
        otherDefecationNum: 0,
        defecationTime: ["1"],
        defecationShape: null,
        defecationSmell: null,
        defecationSpeed: null,
        defecationColor: null,

        motionNum: 3,
        motionDuration: 40,
        motionTime: "08:00",
        //motionMode:"有氧",
        aerobicMotionClassify: ["2"],
        anaerobicMotionClassify: [],
        anaerobicAerobicMotionClassify: [],
        otherMotionClassify: null,
        motionField: ["1"],
        otherMotionField: null,

        sleepTime: "23:00",
        sleepQuality: ["2"],
        sleepDrugFlag: 0,
        sleepDrug: null,
        stayupLateFlag: 0,
        stayupLateWeekNum: 0,

        physicalSignsId: [],
        otherPhysicalSigns: null,
        bloodData: [],
        moistureDate: [],
        familyIllnessHistory: [],
        otherFamilyIllnessHistory: null,
        operationHistory: [],
        otherOperationHistory: null,
        nearOperationFlag: 0,
        recoveryeSituation: null,
        longEatDrugFlag: 0,
        longEatDrugClassify: [],
        otherLongEatDrugClassify: null,
        allergyFlag: 0,
        allergySituation: null,
        allergen: [],
        otherAllergen: null,
        medicalReport: [],
        medicalReportName: [],
        position: 0,
        experience: null,
        rebound: 1,
        difficulty: null,
        crux: 1,
        dishesIngredient: null,
        makeFoodType: 3,
      },
      timer: null,
      rules: {
        sex: [{ required: true, trigger: "blur", message: "请选择性别" }],
        age: [
          { required: true, trigger: "blur", message: "请填写年龄" },
          {
            required: true,
            trigger: "blur",
            pattern: /^[1-9]\d*$/,
            message: "年龄格式不正确",
          },
        ],
        tall: [
          { required: true, trigger: "blur", message: "请填写身高" },
          {
            required: true,
            trigger: "blur",
            pattern: /^[1-9]\d*$/,
            message: "身高格式不正确",
          },
        ],
        weight: [
          { required: true, trigger: "blur", message: "请填写体重" },
          {
            required: true,
            trigger: "blur",
            pattern: /^(\d+)(\.\d{1})?$/,
            message: "体重格式不正确",
          },
        ],
        conditioningProjectId: [
          { required: true, trigger: "blur", message: "请选择调理项目" },
        ],
        position: [
          { required: true, trigger: "blur", message: "请选择地理位置" },
        ],
      },
    };
  },
  components: {
    "healthy-form1": Form1,
    "healthy-form2": Form2,
    "healthy-form3": Form3,
    "healthy-form4": Form4,
    "healthy-form5": Form5,
    "healthy-form6": Form6,
    "healthy-form7": Form7,
    "healthy-form8": Form8,
    "healthy-form9": Form9,
  },
  methods: {
    //根据用户ID获取用户基本信息（手机号、姓名）
    getCustomerBase(id) {
      if (id == null || id == undefined) {
        return;
      }
      getCustomerBaseMessage(id)
        .then((response) => {
          if (response.code === 200) {
            if (response.data) {
              this.customerExistFlag = true;
              this.form.name = response.data.name;
              this.form.phone = response.data.phone;
            }
          }
        })
        .catch(function () {
          console.log("error");
        });
    },
    submit() {
      if (this.submitFlag) {
        this.$message({
          message: "请勿重复提交，1分钟后重试",
          type: "warning",
        });
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitFlag = true;
          this.timer = setTimeout(this.fail, 1000 * 60);
          this.$refs.fileForm.uploadFile();
        } else {
          this.$message({
            message: "数据未填写完整",
            type: "warning",
          });
        }
      });
    },
    addCustomerHealthy() {
      //数据处理
      let cusMessage = Object.assign({}, this.form);
      this.healthyData["arrayName"].forEach(function (item, index) {
        cusMessage[item] =
          cusMessage[item] != null ? cusMessage[item].join(",") : null;
      });
      addCustomerHealthy(cusMessage)
        .then((response) => {
          if (response.code === 200) {
            this.$notify({
              title: "提交成功",
              message: "",
              type: "success",
            });
          }
        })
        .catch(function () {
          console.log("error");
        });
    },
    fail() {
      // console.log("定时--------");
      this.submitFlag = false;
    },
    nextStep(step) {
      if (!this.customerExistFlag) {
        this.$message.error("客户不存在");
        return;
      }
      this.$refs.form.validate((valid) => {
        if (valid || step < 0) {
          this.stepArray[this.stepActive] = false;
          this.stepActive = this.stepActive + step;
          this.stepArray[this.stepActive] = true;
          this.goTop();
        } else {
          this.$message({
            message: "数据未填写完整",
            type: "warning",
          });
        }
      });
    },
    goTop() {
      window.scroll(0, 0);
    },
  },
  created() {
    this.form.customerEncId = this.$route.params.id;
    this.getCustomerBase(this.form.customerEncId);
  },
  beforeCreate() {
    document.title = this.$route.meta.title;
  },
};
</script>

 <style scoped>
.el-form-item {
  margin-bottom: 8px;
}

.p_title_1 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 30px;
}
.p_title_2 {
  font-size: 16px;
  font-weight: bold;
  margin-top: 30px;
}
.p_title_3 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 30px;
}
.margin-left {
  margin-left: 14px;
}
.el-input__inner {
  width: 30%;
}
.margin-top-10 {
  margin-top: 10px;
}
.width-50-left-8-right-5 {
  width: 50%;
  margin-left: 8px;
  margin-right: 5px;
}
.width-70-left-8-right-5 {
  width: 70%;
  margin-left: 8px;
  margin-right: 5px;
}
</style>