<template>
  <div class="header">
    <div class="topheader">
        <div class="user">
        <img
          class="headsculpture"
          src="../../../assets/manage/touxiang.png"
          alt=""
          v-if="this.$route.query.sex == 'MALE'"
        />
        <img
          class="headsculpture"
          src="../../../assets/manage/nvtouxiang.png"
          alt=""
          v-if="this.$route.query.sex == 'FEMALE'"
        />

        <div class="name">
   
          {{ this.$route.query.patientName }}
        </div>
        <div class="gender">
          性别：
    {{ this.$route.query.sex == "MALE" ? "男" : this.$route.query.sex == "FEMALE" ? "女" : "" }}
        </div>
        <div class="gender">
          年龄：
          {{ this.$route.query.age }}
        </div>
        <div class="gender">
          出生日期：
          {{ this.$route.query.birthDate }}
        </div>
        <div class="gender">
          医院：{{this.$route.query.hospitalAgencyName}}
 
        </div>
        <div class="gender">
          诊断：{{this.$route.query.mainDiagnosis}}
 
        </div>
       
      </div>
      </div>
    <div class="list">
     
      <div class="timelist">
        <div class="left" ref="box">
          <div class="name">画像分组</div>
          <!-- <div>
            <el-input
              v-model="name"
              placeholder="请输入画像分组"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </div> -->
          <!-- <div class="listitem">
            <div
              :class="itemname == null ? 'allactive' : 'all'"
              @click="bottomclickevent()"
            >
              全部
            </div>
            <span class="count">{{ count }}</span>
          </div> -->
          <div
            class="listitem"
            v-for="(ulitem, index) in DepartmentoList"
            :key="index"
            @click="bottomclickevent(ulitem)"
          >
            <div
              :class="
                taskid == ulitem.taskPartitionDictId ? 'allactive' : 'all'
              "
            >
              {{ ulitem.taskTypeName
              }}<span class="spanitme" v-if="ulitem.taskTypeName">-</span
              >{{ ulitem.taskPartitionDictName }}
              <span class="count" v-if="ulitem.fieldSort">{{ulitem.fieldSort}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="texts">
        <div class="topform">
          <div style="margin-bottom: 20px">
            <div v-for="(aitem, aindex) in getParamslistData" :key="aindex">
              <div style="margin-left: 80px">
                <!-- {{aitem}} -->
                <div class="toptitle">{{ aitem.taskPartitionDictName }}</div>
                <div
                  style="display: flex"
                  v-for="(bitem, bindex) in aitem.portraitSnVOList"
                  :key="bindex"
                >
                  <el-card class="box-card">
                    <el-form
                      ref="form"
                      :inline="true"
                      :model="form"
                      class="form"
                      label-width="100px"
                      :rules="rules"
                    >
                      <el-form-item
                        v-for="(cItem, cIndex) in bitem.groupingValues"
                        :key="cIndex"
                        :label="cItem.fieldName"
                      >
                        <el-input v-model="cItem.fieldValue"></el-input>
                      </el-form-item>
                    </el-form>
                  </el-card>
                  <div class="icon">
                    <i
                      class="el-icon-delete"
                      @click="delitem(aindex, bindex)"
                      v-if="bindex != 0"
                    ></i>
                    <i
                      v-if="bindex == 0"
                      class="el-icon-circle-plus-outline"
                      @click="additem(aindex, bindex)"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="TemporaryStorage" type="primary">保 存</el-button>
    </div>
  </div>
</template>

  <script>
import { groupingValue, insertLabelField, groupingContent } from '@/api/manage/Portraitedit'
export default {
  name: "Portraitedit1",
  data() {
    return {
      name: null,
      taskid: 0,
      DepartmentoList: [],
      // 左侧传值
      querydepartmen: {
        patientId: this.$route.query.patientId,
        taskPartitionDictName: "",
      },
      itemdata: {},
      taskPartitionCode: "",
      // 左侧列表
      getAllNodeByPatientlist: [],
      // 右侧列表
      getParamslistData: [],
      qurelist: {
        patientId: '',
      },
      querytParams: {
        taskPartitionDictId: '',
        patientId: this.$route.query.patientId,
      },
      rules: {},
      updata: {
        specialDiseaseRouteId: '',
        suitRange: '',
        routeName: '',
        specialDiseaseNodeList: [],
      },
      form: {},
      moban: [],
    };
  },
  created() {
    console.log(this.$route.query, 'this.$route.query')
    this.qurelist.patientId = this.$route.query.patientId
    this.getAllNodeBy()

  },
  beforeDestroy() { },
  watch: {
    name(val) {
      this.querydepartmen.taskPartitionDictName = val
      this.Departmentlist();
    },

  },
  mounted() {
  },
  methods: {
    // 左侧
    getAllNodeBy() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.getAllNodeByPatientlist = []
      if (this.$route.query) {
        groupingContent(this.querydepartmen).then(response => {
          this.DepartmentoList = response.data;
          this.querytParams.taskPartitionDictId = this.DepartmentoList[0].taskPartitionDictId
          this.getParams()
          loading.close();
          this.loading = false;
        }).catch(() => {
          loading.close();
        });
      } else {
        loading.close();
      }
    },
    bottomclickevent(ulitem) {
      this.taskid = ulitem.taskPartitionDictId
      // this.querytParams.signPatientManageRouteNodeId = ulitem.taskPartitionDictId
      this.querytParams.taskPartitionDictId = ulitem.taskPartitionDictId
      this.loading = true;
      this.getParams()
    },
    // 右侧列表
    getParams() {
      groupingValue(this.querytParams).then(res => {
        console.log(res, 'res')
        this.moban = JSON.parse(JSON.stringify(res))
        this.getParamslistData = res
        console.log(this.getParamslistData, '009090')

      })
    },

    //保存
    TemporaryStorage() {
      // console.log(this.getParamslistData,'this.getParamslistData')
      var emptyItems = []

      var form = {
        labelFieldAndPartitionDictList: []
      }
      form.labelFieldAndPartitionDictList = this.getParamslistData
      // emptyItems = form.groupingValues.flat().filter(f => f.fieldValue == "" || !f.fieldValue)
      console.log(this.form, 'this.form')
      // console.log(emptyItems, 'emptyItems')
      // return

      // if (emptyItems && emptyItems.length > 0) {
      //   this.$modal.msgError("请填写完整,再进行提交");
      // } else {

      this.$confirm('是否确认提交？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        insertLabelField(form).then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("提交成功!");
            this.indexdata = null
            loading.close();
          }
          else {
            loading.close();
          }
        }).catch(() => {
          loading.close();
        });
      })
      // }
    },
    additem(aindex, bindex) {
      // console.log(this.form.list,'this.form.list')
      const newVal = JSON.parse(JSON.stringify(this.moban[aindex].portraitSnVOList[0]))
      newVal.groupingValues.forEach(e => {
        e.fieldValue = ""
        e.portraitSn = ''

      });

      this.getParamslistData[aindex].portraitSnVOList.push(newVal)
    },
    delitem(aindex, bindex) {
      this.getParamslistData[aindex].portraitSnVOList.splice(bindex, 1)
    },
  }
};
  </script>
  <style scoped lang="scss">
.pag {
  top: 13px;
  position: relative;
  left: 61%;
}
::v-deep .el-card__body {
  position: relative;
}
::v-deep .el-select .el-input.is-disabled .el-input__inner {
  background: #fff !important;
}
::v-deep .el-input.is-disabled .el-input__inner {
  background: #fff !important;
}
.routeCheckStatus {
  position: absolute;
  right: 10px;
  top: 30px;
}

.dialog-footer {
  padding: 2px 44px 0;
  text-align: right;
  position: relative;
  bottom: 90px;
}
.texts {
  // overflow-y: scroll;
  overflow-x: hidden;
  width: 72%;
  height: calc(100vh - 246px);
  background-color: #fff;
  .topform {
    width: 100%;
    position: relative;
    height: calc(100% - 177px);
    // overflow-y: auto;
    padding: 15px 70px 30px 15px;
    .toptitle {
      margin-top: 21px;
      font-weight: 600;
      font-size: 18px;
    }
    .box-card {
      // width:calc(100% - 149px);
      width: 85%;
      margin-left: 20px;
      padding-top: 25px;
      .textarea {
        display: flex;
        // width: 500px;
        // width: 100%;
      }
    }
    .icon {
      width: 150px;
      right: -20px;
      top: 40px;
      position: relative;
    }
    .form {
      width: 100%;
      ::v-deep .el-form-item {
        display: flex;
      }
      ::v-deep .el-form-item__content {
        flex: 1;
      }
      ::v-deep .el-input__inner {
        height: 30px !important;
        line-height: 30px !important;
      }

      ::v-deep .el-form-item__label {
        font-size: 12px !important;
      }
    }
  }
}
.header {
  // background-color: #f2f4f5;
  // padding-top: 10px;
  height: calc(100vh - 84px);
  padding: 0px 10px 10px 0px;
  // height: calc(100vh - 46px);
  .topheader{
    width: 99%;
    height: 80px;
    margin: 0 auto;
    .user {
      // background: #fff;
      width: 100%;
      padding: 0 20px;
      display: flex;
      height: 80px;
      align-items: center;
      line-height: 80px;
      .name {
        font-size: 20px;
        padding-left: 12px;
      }

      .gender {
        padding-left: 40px;
      }
      .headsculpture {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
    }
  }

}
.list {
  margin: 0 auto;
  width: 100%;
  height: calc(100% - 40px);
  background-color: #f2f4f5;
  display: flex;
  padding-top: 9px;
  justify-content: space-evenly;
  ::v-deep .el-card {
    margin-top: 20px !important;
  }
  .timelist {
    width: 27%;
    overflow: hidden;
    .left {
      width: 100%;
      background-color: #fff;
      padding: 17px 20px;
      height: calc(100vh - 243px);
      overflow-y: auto;
      .name {
        font-weight: 700;
        margin-bottom: 10px;
      }

      .listitem {
        // width: 100%;
        height: 50px;
        border-bottom: 1px solid #dcdfe6;
        .spanitme {
          padding: 10px;
          color: #a8a8a8;
        }

        .count {
          float: right;
          right: 20px;
          margin-right: 30px;
          color: #a4a6aa;
          font-size: 13px;
        }

        .all {
          height: 50px;
          line-height: 50px;
          padding-left: 13px;
        }

        .allactive {
          background: #e8f4ff;
          height: 50px;
          line-height: 50px;
          padding-left: 13px;
          border-left: 3px solid #4d9de7;
        }
      }
    }
    ::v-deep .el-timeline {
      width: 100%;
      padding: 15px 0 0 !important;
    }
  }
}
.cards {
  border: 1px solid #409eff;
  border-left: 5px solid #409eff;
}
::v-deep .el-timeline-item__timestamp {
  margin: 0 !important;
  padding: 0 !important;
}
::v-deep .el-timeline-item__wrapper {
  padding-left: 14px !important;
}

::v-deep .el-timeline-item__content {
  transform: translateY(-2%);
}
</style>
