<template>
  <div class="form-wrap" v-if="canRender">
    <!--渲染不同的模块表单-->
    <div v-for="(item, index) in addComponents" :key="index">
      <div v-if="item.showModule" class="content-box">
        <div v-if="!item.hideTitle" class="title">
          {{ item.title
          }}<span class="gray-tip" v-if="item.disabled"
            ><el-icon style="margin-right: 5px"
              ><el-icon-warning-outline /></el-icon
            >获得居民授权才可进行此项填写</span
          >
        </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 { WarningOutline as ElIconWarningOutline } from '@element-plus/icons'
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
import {
  getDomain,
  getScaleModels,
  getScaleDetail,
  postScale,
  updateScalesStatus,
  submitScale,
  getScaleModels2,
} 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'

export default {
  components: {
    FormScale,
    ElIconWarningOutline,
  },
  data() {
    return {
      domain: '', //通过接口获取白名单域名
      needRule: true, //是否动态开启验证
      showModule: true, //是否隐藏表单模块
      canRender: true,
      valid: false,
      validList: [],
      moduleList: [], //模块列表
      planPatientsTimesId: '',
      scaleNo: '',
      doctorId: '',
      planTimesId: '',
      addComponents: [],
      addComponentsSourceList: [],
      formData: {}, //整个表单对象
    }
  },
  props: {
    scaleType: String, //病种类型
    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]) {
                $emit(this, '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,
                })
              })
            }
          } else {
            this.dataSubmit()
          }

          $emit(this, 'checkEnd', false)
        })
      }
    },
    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)
        }
      })
    },
  },
  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.initScaleType()
    // 获取白名单域名
    this.getWhiteDomain()

    sessionStorage.setItem('needRule', this.needRule)
  },
  methods: {
    // 获取量表类型
    initScaleType() {
      this.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个月履约必填）',
        },
      ]
    },
    // 获取白名单域名
    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) {
      if (this.addComponents[index].disabled === true) {
        //对未授权的敏感字段做处理，让置灰且非必填
        this.addComponents[index].dataSource.forEach((item, k) => {
          this.addComponents[index].dataSource[k].disabled = true
          if (item.rules && item.rules.length > 0) {
            this.addComponents[index].dataSource[k].rules[0].required = false
          }
          if (this.$refs['form' + index].length > 0) {
            this.$refs['form' + index][0].resetFields()
          }
        })
      } else {
        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() {
      let para = {
        planPatientsTimesId: this.planPatientsTimesId,
      }
      // getScaleModels(this.domain,this.scaleNo).then(res=>{
      getScaleModels2(this.domain, this.scaleNo, para).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){
              if (
                this.moduleList[i].modelCode ==
                this.addComponentsSourceList[j].formName
              ) {
                // this.addComponents.push(this.addComponentsSourceList[j])
                //把获取到每个模块的disabeld状态更新进将要渲染的数组
                this.addComponents.push({
                  ...this.addComponentsSourceList[j],
                  disabled: this.moduleList[i].disabled,
                })
              }
            }
          }
          /*start--根据当前模块是否获得居民权限，来判断是否可填写当前模块*/
          this.addComponents.forEach((item, index) => {
            if (item.disabled === true) {
              item.dataSource.forEach((item2, index2) => {
                // item2.disabled = true;
                this.addComponents[index].dataSource[index2].disabled = true
                if (this.addComponents[index].dataSource[index2].rules) {
                  this.addComponents[index].dataSource[
                    index2
                  ].rules[0].required = false
                }
              })
            }
          })
          /*end--*/
          // console.log('展示的数组信息',this.addComponents)
          // if(this.showBtn!='0'){
          //   // 获取量表详情
          //   this.getFormDetail();
          // }
        } 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))
      //判断是否放开敏感字段
      let hasDisabled = false
      this.addComponents.forEach((item, index) => {
        if (item.disabled === true) {
          hasDisabled = true
        }
      })
      postScale(this.domain, this.formData).then((res) => {
        if (res.code == '000000') {
          // let doMsg = (this.saveWay==1) ? '非敏感信息提交成功' : '保存成功';
          let doMsg = ''
          if (this.saveWay == 1) {
            if (hasDisabled === true) {
              doMsg = '非敏感信息提交成功'
            } else {
              doMsg = '提交成功'
            }
          } else {
            doMsg = '保存成功'
          }
          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);
    },
  },
  emits: ['checkEnd'],
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .content-box {
    .title {
      line-height: 60px;
      height: 60px;
      font-weight: bold;
      font-size: 22px;
      border-bottom: 1px dashed #ccc;
      .gray-tip {
        color: #8c8c8c;
        margin-left: 20px;
        font-size: 16px;
      }
    }
  }
}
</style>
