<template>
  <div class="questionResult flex-plane-center-l" id="printTest">
    <div class="left">
      <div class="left-top">
        <div class="echarts-top flex-vertical-center-l">
          <span>体质得分</span>
          <div class="img flex-vertical-center-l">
            <img src="../../assets/serious.png" alt />
            <span>严重</span>
          </div>
          <div class="img flex-vertical-center-l">
            <img src="../../assets/obvious.png" alt />
            <span>明显</span>
          </div>
          <div class="img flex-vertical-center-l">
            <img src="../../assets/slight.png" alt />
            <span>轻微</span>
          </div>
          <div class="img flex-vertical-center-l">
            <img src="../../assets/tiny.png" alt />
            <span>微小</span>
          </div>
        </div>
        <div class="echarts-body flex-plane-center-l">
          <div class="echarts-left">
            <div v-for="(item,index) in e_titles" :key="index">{{item.name}}</div>
          </div>
          <div class="echarts-right">
            <div
              class="pillars flex-vertical-center-l"
              v-for="(item,index) in e_values"
              :key="index"
            >
              <div class="flex-vertical-center-r" :style="{width:item.width,background:item.bg}">
                <span></span>
              </div>
              <span>{{item.score}}</span>
            </div>

            <div class="scale">
              <div class="nine flex-center flex-column">
                <span></span>
                <div>微小9</div>
              </div>
              <div class="eleven nine flex-center flex-column">
                <span></span>
                <div>轻微11</div>
              </div>
              <div class="seventeen nine flex-center flex-column">
                <span></span>
                <div>明显17</div>
              </div>
              <div class="twenty-five nine flex-center flex-column">
                <span></span>
                <div>严重25</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="left-bottom flex-plane-center-top flex-column">
        <div v-for="(item,index) in e_titles" :key="index" class="flex-plane-center-l">
          <span style="width:80px;">{{item.name}}:</span>
          <span style="flex:1;">{{item.description}}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top flex-plane-center-top flex-column">
        <!-- {{item.title}}:{{item.desc}} -->
        <div v-for="(item,index) in e_types" :key="index" class="flex-plane-center-l">
          <span style="width:80px;">{{item.title}}:</span>
          <span style="flex:1;">{{item.desc}}</span>
        </div>
        <div class="flex-plane-center-top">
          <span>医生建议：</span>
          <div class="input">
            <el-input type="textarea" placeholder="请输入内容" v-model="textarea"></el-input>
          </div>
        </div>
      </div>
      <div class="flex-plane-center-l">
        <div class="submit flex-center" @click="submitDoctorjy">提交</div>
        <div class="submit1 flex-center" v-print="'#printTest'">打印</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getPhysicalDetail, submitDoctorjy } from "@/api/diagnosis.js";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      textarea: "",
      e_titles: [
        {
          title: "平和体质",
          desc: "平和体质描述描述"
        },
        {
          title: "特禀体质",
          desc: "特禀体质描述描述"
        },
        {
          title: "气郁体质",
          desc: "气郁体质描述描述"
        },
        {
          title: "血瘀体质",
          desc: "血瘀体质描述描述"
        },
        {
          title: "湿热体质",
          desc: "湿热体质描述描述"
        },
        {
          title: "痰湿体质",
          desc: "痰湿体质描述描述"
        },
        {
          title: "阴虚体质",
          desc: "阴虚体质描述描述"
        },
        {
          title: "阳虚体质",
          desc: "阳虚体质描述描述"
        },
        {
          title: "气虚体质",
          desc: "气虚体质描述描述"
        }
      ],
      e_types: [
        {
          title: "体质类型",
          desc: "平和体质描述描述"
        },
        {
          title: "调体法则",
          desc: "特禀体质描述描述"
        },
        {
          title: "调体要点",
          desc: "气郁体质描述描述"
        },
        {
          title: "调体方药",
          desc: "血瘀体质描述描述"
        },
        {
          title: "临症加减",
          desc: "湿热体质描述描述"
        },
        {
          title: "养生建议",
          desc: "痰湿体质描述描述"
        },
        {
          title: "运动建议",
          desc: "阴虚体质描述描述"
        }
      ],
      e_values: [
        {
          value: 19,
          width: "76%",
          bg: "#68A8FF"
        },
        {
          value: 11,
          width: "44%",
          bg: "#FFAD45"
        },
        {
          value: 8,
          width: "32%",
          bg: "#5386F6"
        },
        {
          value: 13,
          width: "52%",
          bg: "#FF6245"
        },
        {
          value: 13,
          width: "52%",
          bg: "#FF6245"
        },
        {
          value: 12,
          width: "48%",
          bg: "#FF6245"
        },
        {
          value: 10,
          width: "40%",
          bg: "#FFAD45"
        },
        {
          value: 11,
          width: "44%",
          bg: "#FFAD45"
        },
        {
          value: 7,
          width: "28%",
          bg: "#5386F6"
        }
      ]
    };
  },
  mounted() {
    // console.log(this)
    this.getPhysicalDetail();
  },
  methods: {
    // 获取详情信息
    async getPhysicalDetail() {
      let res = await getPhysicalDetail({
        identid: this.$route.query.pid
      });
      if (res.ResultCode == 0) {
        res.Data.forEach((item, index) => {
          item.width =
            Number(item.score) / 25 >= 1
              ? "100%"
              : (Number(item.score) / 25) * 100 + "%";
        });
        this.e_values = res.Data;
        this.e_titles = res.Data;
        this.e_types[0].desc = res.Data[0].type;
        this.e_types[1].desc = res.Data[0].tt_RULE;
        this.e_types[2].desc = res.Data[0].tt_POINT;
        this.e_types[3].desc = res.Data[0].tt_PRESCRIPTION;
        this.e_types[4].desc = res.Data[0].lzjj;
        this.e_types[5].desc = res.Data[0].vegetables;
        this.e_types[6].desc = res.Data[0].sports;
        this.textarea = res.Data[0].ysjy;
      }
    },
    // 提交
    async submitDoctorjy() {
      if (!this.textarea) {
        this.$message({
          type: "error",
          message: "请输入医生建议",
          showClose: true
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await submitDoctorjy({
        pid: this.e_values[0].pid,
        ysjy: this.textarea
      }).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          message: "提交成功",
          showClose: true
        });
        setTimeout(() => {
          this.$router.back();
        }, 2000);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.questionResult {
  .left {
    width: 668px;
    margin-right: 20px;

    .left-top {
      // width: 100%;
      padding: 16px 16px 30px;
      border-radius: 5px;
      background: #fff;

      .echarts-top {
        span {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-right: 25px;
        }

        .img {
          img {
            width: 14px;
          }

          span {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-left: 12px;
          }
        }
      }

      .echarts-body {
        margin-top: 34px;

        .echarts-left {
          margin-right: 31px;

          div {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-bottom: 11px;
          }
        }

        .echarts-right {
          height: 271px;
          width: 516px;
          border-left: 2px solid #d8d8d8;
          border-bottom: 2px solid #d8d8d8;
          box-sizing: border-box;
          padding-top: 0px;
          position: relative;
          // padding-right: 10px;

          .pillars {
            width: 100%;
            margin-bottom: 9px;

            span {
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #333333;
              margin-left: 10px;
            }

            div {
              box-sizing: border-box;
              padding-right: 5px;
              width: 50%;
              height: 12px;
              background: #68a8ff;
              border-radius: 0px 6px 6px 0px;

              span {
                width: 7px;
                height: 7px;
                background: #ffffff;
                border-radius: 50%;
                display: inline-block;
              }
            }
          }

          .scale {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 3px;

            .nine {
              position: absolute;
              left: 36%;

              span {
                width: 2px;
                height: 3px;
                background: #d8d8d8;
                display: inline-block;
              }

              div {
                margin-top: 4px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
              }
            }

            .eleven {
              left: 44% !important;
            }

            .seventeen {
              left: 68% !important;
            }

            .twenty-five {
              left: 91% !important;
            }
          }
        }
      }
    }

    .left-bottom {
      padding: 56px 30px;
      border-radius: 5px;
      background: #fff;
      margin-top: 20px;

      div {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;
      }
    }
  }

  .right {
    flex: 1;
    background: #fff;
    padding: 28px 52px;
    border-radius: 5px;

    .right-top {
      div {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-bottom: 20px;

        .input {
          width: 300px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    .submit {
      width: 100px;
      height: 46px;
      background: #5386f6;
      border-radius: 4px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }

    .submit1 {
      margin-left: 20px;
      width: 100px;
      height: 46px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
</style>