<template>
    <div class="form-wrap">
      <!--渲染不同的模块表单-->
      <div  v-if="canRender" v-for="(item, index) in addComponents">
        <div v-if="item.showModule" class="content-box" >
          <div v-if="!item.hideTitle" class="title">{{item.title}}</div>
          <el-form
            :ref="'form' + index"
            :id="'form' + index"
            :model="item.formObject"
            size="medium"
            label-position="left"
            class="form"
          >
            <FormScale
              :dataSource="item.dataSource"
              :form="item.formObject"
              :ruleNew="item.ruleNew"
              :needRule="needRule"
              :class="item.className"
            />
          </el-form>
        </div>
      </div>
    </div>
</template>

<script>
  import { getDomain, getScaleModels, getScaleDetail, postScale, updateScalesStatus  } from '@/utils/followup/followapis'

  // 量表 template
  import FormScale from '@/components/followup/form/index'
  // 量表模块数据模型

  import dataSourceBaseInfo0 from '../models/stroke/dataSourceBaseInfo0'
  import dataSourceBaseInfo from '../models/stroke/dataSourceBaseInfo'
  import dataSourceBaseInfo2 from '../models/stroke/dataSourceBaseInfo2'
  import dataSourceMainSickControl from '../models/stroke/dataSourceMainSickControl'
  import dataSourceMainSickControl2 from '../models/stroke/dataSourceMainSickControl2'
  import dataSourceMainSickControl3 from '../models/stroke/dataSourceMainSickControl3'
  import dataSourceMainSickControl4 from '../models/stroke/dataSourceMainSickControl4'
  import dataSourceMainSickControl5 from '../models/stroke/dataSourceMainSickControl5'
  import dataSourceMainSickControl6 from '../models/stroke/dataSourceMainSickControl6'
  import dataSourceLifeStyleGuide from '../models/stroke/dataSourceLifeStyleGuide'
  import dataSourceTreatmentSituation from '../models/stroke/dataSourceTreatmentSituation'
  import dataSourceTreatmentSituation2 from '../models/stroke/dataSourceTreatmentSituation2'
  import dataSourceTreatmentSituation3 from '../models/stroke/dataSourceTreatmentSituation3'
  import dataSourceCheckBody from '../models/stroke/dataSourceCheckBody'
  import dataSourceCheckLab from '../models/stroke/dataSourceCheckLab'

  import axios from 'axios';
  import { submitScale } from '@/utils/followup/followapis';

  export default {
    data(){
      return {
        domain: '',//通过接口获取白名单域名
        needRule: true, //是否动态开启验证
        showModule: true, //是否隐藏表单模块
        canRender: true,
        valid: false,
        validList: [],
        moduleList: [],//模块列表
        planPatientsTimesId: '',
        scaleNo: '',
        doctorId: '',
        planTimesId: '',
        addComponents: [],
        addComponentsSourceList: [
          {name: 'BaseInfo0',formObject: {},showModule: true,formName: 'stroke_001',className: 'obj-form-title',dataSource: dataSourceBaseInfo0(this), hideTitle: true, title: '一、量表脑卒中随访人员信息表'},
          {name: 'BaseInfo',formObject: {},showModule: true,formName: 'stroke_002',className: 'obj-form-title',dataSource: dataSourceBaseInfo(this), title: '一、基本信息'},
          {name: 'BaseInfo2',formObject: {},showModule: true,formName: 'stroke_003',className: 'obj-form-title',dataSource: dataSourceBaseInfo2(this), hideTitle: true, title: '一、基本信息'},
          {name: 'LifeStyleGuide',formObject: {},showModule: true,formName: 'stroke_004',className: 'obj-form-title',dataSource: dataSourceLifeStyleGuide(this), title: '二、随访期间生活方式'},
          {name: 'MainSickControl',formObject: {},showModule: true,formName: 'stroke_005',className: 'obj-form-title',dataSource: dataSourceMainSickControl(this), title: '三、随访期间主要病史及控制情况-脑血管病'},
          {name: 'MainSickControl2',formObject: {},showModule: true,formName: 'stroke_006',className: 'obj-form-title',dataSource: dataSourceMainSickControl2(this), hideTitle: true,ruleNew:true, title: '三、随访期间主要病史及控制情况-MRS评分（卒中患者12个月随访必填）'},
          {name: 'MainSickControl3',formObject: {},showModule: true,formName: 'stroke_007',className: 'obj-form-title',dataSource: dataSourceMainSickControl3(this), hideTitle: true, title: '三、随访期间主要病史及控制情况-心脏病'},
          {name: 'MainSickControl4',formObject: {},showModule: true,formName: 'stroke_008',className: 'obj-form-title',dataSource: dataSourceMainSickControl4(this), hideTitle: true, title: '三、随访期间主要病史及控制情况-高血压'},
          {name: 'MainSickControl5',formObject: {},showModule: true,formName: 'stroke_009',className: 'obj-form-title',dataSource: dataSourceMainSickControl5(this), hideTitle: true, title: '三、随访期间主要病史及控制情况-血脂异常'},
          {name: 'MainSickControl6',formObject: {},showModule: true,formName: 'stroke_010',className: 'obj-form-title',dataSource: dataSourceMainSickControl6(this), hideTitle: true, title: '三、随访期间主要病史及控制情况-糖尿病'},
          {name: 'TreatmentSituation',formObject: {},showModule: true,formName: 'stroke_011',className: 'obj-form-title',dataSource: dataSourceTreatmentSituation(this), title: '四、本次随访期间血管病变的外科手术或介入治疗情况'},
          {name: 'TreatmentSituation2',formObject: {},showModule: true,formName: 'stroke_012',className: 'obj-form-title',dataSource: dataSourceTreatmentSituation2(this), hideTitle: true, title: '四、本次随访期间血管病变的外科手术或介入治疗情况-冠状动脉'},
          {name: 'TreatmentSituation3',formObject: {},showModule: true,formName: 'stroke_013',className: 'obj-form-title',dataSource: dataSourceTreatmentSituation3(this), hideTitle: true, title: '四、本次随访期间血管病变的外科手术或介入治疗情况-出血性卒中外科治疗'},
          {name: 'CheckBody',formObject: {bmi: 0,},showModule: true,formName: 'stroke_014',className: 'obj-form-title',dataSource: dataSourceCheckBody(this), ruleNew:true,title: '五、体格检查（高危人群12个月随访必做）'},
          {name: 'CheckLab',formObject: {},showModule: true,formName: 'stroke_015',className: 'obj-form-title',dataSource: dataSourceCheckLab(this),ruleNew:true, title: '六、实验室检查（高危人群12个月随访必填）'},
        ],
        formData: {},//整个表单对象
      }
    },
    components: {
      FormScale,
    },
    props: {
      checkStart: Boolean,
      saveWay: Number,
      showBtn: String,
    },
    watch: {
      checkStart(val){
        if(val){
          this.validList = [];
          for(let i=0;i<this.addComponents.length;i++){
            let formName = this.addComponents[i].formName;
            // 将每个模块的fornName对应后台的表名放到表单对象
            this.formData[formName] = this.addComponents[i].formObject;

            if(formName==='stroke_006'||formName==='stroke_014'||formName==='stroke_015'){
              this.setRuleToTrue(i)
            }
            this.$nextTick(()=>{
              // saveWay=1是提交，进行校验，2是暂存，不需要校验，直接发送请求
              if(this.saveWay==1){
                if(this.$refs['form' + i].length > 0){
                  this.$refs['form' + i][0].validate((valid) => {
                    this.validList.push(valid);
                  });
                }
              }
            })
          }

          this.$nextTick(()=>{
            // saveWay=1是提交，进行校验，2是暂存，不需要校验，直接发送请求
            if(this.saveWay==1){
              for(let k=0;k<this.validList.length;k++){
                if(!this.validList[k]){
                  this.$emit('checkEnd',false);
                  this.valid = false;
                  this.$nextTick(() => {
                    // 如果表单未完善，跳转到该表单模块
                    document.querySelector(`#form${k}`).scrollIntoView(true);
                  })
                  return;
                }else{
                  this.valid = true;
                }
              }
              if(this.valid){
                this.dataSubmit(()=>{
                  updateScalesStatus({
                    fuPlanPatientTimesId: this.planPatientsTimesId,
                    planTimesId: this.planTimesId,
                    resourceId: this.scaleNo
                  })
                });
              }
              this.$emit('checkEnd',false);
            }else{
              this.dataSubmit();
            }


          })

        }
      },
      showModule(val){
        this.addComponents.forEach((item,index)=>{
          if(index >= 3){
            this.addComponents[index].showModule = val;
          }
        })
      },
      needRule(val){
        this.addComponents.forEach((item,index)=>{
          let formName = item.formName;
          if(formName==='stroke_006'||formName==='stroke_014'||formName==='stroke_015'){
            this.addComponents[index].ruleNew = val;
            this.setRuleToTrue(index);
//            if(this.$refs['form' + index].length > 0){
//              this.$refs['form' + index][0].resetFields();
//            }

          }
        })

      }
    },
    created(){

      this.planPatientsTimesId = this.$route.query.planPatientsTimesId
      this.scaleNo = this.$route.query.scaleNo
      this.doctorId = this.$route.query.doctorId
      this.planTimesId = this.$route.query.planTimesId;

      this.getWhiteDomain();

      localStorage.setItem('needRule',this.needRule);
    },
    methods: {
      getWhiteDomain(){
        getDomain().then(res=>{
          if(res.code=='000000'){
            this.domain = res.data
            this.getFormModules();
            if(this.showBtn!='0'){
              this.getFormDetail();
            }
          }else{
            this.$message({
              message: res.message,
              type: 'error'
            });
          }
        })
      },
      // 动态开启验证开关
      setRuleToTrue(index){
        this.addComponents[index].dataSource.forEach((item,k)=>{
          if(item.rules && item.rules.length > 0){
            if(!this.needRule){
              this.addComponents[index].dataSource[k].rules[0].required = true;
            }else{
              this.addComponents[index].dataSource[k].rules[0].required = false;
            }
          }
        })
      },
      // 获取展示的模块
      getFormModules(){
        getScaleModels(this.domain,this.scaleNo).then(res=>{
          if(res.code=='000000'){
            this.moduleList = res.data;
            for(let i=0;i<this.moduleList.length;i++){
              for(let j=0;j<this.addComponentsSourceList.length;j++){
                if(this.moduleList[i]==this.addComponentsSourceList[j].formName){
                 this.addComponents.push(this.addComponentsSourceList[j])
                }
              }
            }
          }else{
            this.$message({
              message: res.message,
              type: 'error'
            });
          }
        })
      },
      // 获取量表详情
      getFormDetail(){
        getScaleDetail(this.domain,this.planPatientsTimesId,this.scaleNo).then(res=>{
          this.formData = res.data
          let keysList = Object.keys(this.formData);
          if(keysList.length > 0){
            for(let i=0;i<this.addComponents.length;i++){
              let formName = this.addComponents[i].formName;

              if(this.formData[formName]){
                let investigationState = this.formData[formName].investigationState;
                let inTurn = this.formData[formName].inTurn;
                if( ( investigationState === '失访' || investigationState === '死亡' ) ){
                  this.showModule = false;
                }
                if(inTurn == '12个月'){
                  this.needRule = false;
                }
                this.addComponents[i].formObject = this.formData[formName];
              }
              // 量表字段回显，会触发change校验，所以这里拿到数据渲染页面后，重置验证
              if(this.$refs['form' + i].length > 0){
                this.$refs['form' + i][0].resetFields();
              }
            }
            this.canRender = true;
            this.$forceUpdate();
          }
        })
      },
      // 提交量表
      dataSubmit(callback){
//        if(this.valid){
          // console.log(this.formData)
          this.formData.doctorId = parseFloat(this.doctorId);
          this.formData.saveWay = parseFloat(this.saveWay);
          this.formData.planPatientsTimesId = parseFloat(this.planPatientsTimesId);
          this.formData.scaleNo = this.scaleNo;
          this.formData.isLine = 2;
          // console.log(JSON.stringify(this.formData))
          postScale(this.domain,this.formData).then(res=>{
            if(res.code=='000000'){
              let doMsg = (this.saveWay==1) ? '提交成功' : '保存成功';
              this.$message({
                message: doMsg,
                type: 'success'
              });
              if(callback){
                callback();
              }
              setTimeout(()=>{
                this.$router.push({
                  path: '/followup/record-manage/record-list'
                })
              },1000)
            }else{
              let doMsg = (this.saveWay==1) ? '提交失败' : '保存失败';
              this.$message({
                message: doMsg,
                type: 'error'
              });
            }
          });
//        }
//        this.$emit('checkEnd',false);
      },
    },
  }
</script>

<style scoped lang="scss">
.form-wrap{
  .content-box{
    .title{
      line-height: 60px;
      height: 60px;
      font-weight: bold;
      font-size: 18px;
      border-bottom: 1px dashed #ccc;
    }

  }
}
</style>
