<template>
  <div class="table_wrap">
    <div
      :key="'comKey' + comKey"
      class="container"
      :style="{
        marginTop: marginTop + 'px'
      }"
    >
      <svg width="100%" height="100%"></svg>
    </div>
    <table class="temperatureChart">
      <caption>
        <p style="font-size: 20px; font-weight: bold">长沙泰和医院</p>
        <p style="font-size: 20px; font-weight: bold">体温单</p>
        <p style="position: relative; text-align: left">
          <span class="tbale-label">&nbsp&nbsp;姓名：</span
          ><span
            style="display: inline-block; width: 75px; text-align: left"
            >{{ patientInfo.name }}</span
          >
          <span class="tbale-label">年龄：</span>
          <span
            style="display: inline-block; width: 60px; text-align: left"
            >{{ patientInfo.age + "岁"  }}</span
          >
          <span class="tbale-label">性别：</span>
          <span
            style="display: inline-block; width: 60px; text-align: left"
            >{{ patientInfo.sexName }}</span
          >
          <span class="tbale-label">入院日期：</span>
          <span
                  style="display: inline-block; width: 100px; text-align: left"
          >{{patientInfo.admissDate}}</span
          >
          <span class="tbale-label">科室：</span>
          <span
                  style="display: inline-block; width: 65px; text-align: left"
          >{{ patientInfo.admissWardName }}</span
          >
          <span class="tbale-label">床号：</span>
          <span
            style="display: inline-block; width: 60px; text-align: left"
            >{{ patientInfo.bedNo }}</span
          >
          <span class="tbale-label">住院号：</span>
          <span
            style="display: inline-block; width: 100px; text-align: left"
            >{{ patientInfo.inpatientNo }}</span
          >
        </p>
      </caption>

      <thead></thead>
      <tbody>
        <tr>
          <td
            ref="topTd"
            :colspan="index === 0 ? 8 : 6"
            :class="[index && 'redLineTd', !index && 'table-just']"
            v-for="(item, index) in inHospitalTime"
            :key="index + '|indays'"
          >
            {{
              index === 0
                ? "日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;期"
                : item
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            :class="[index && 'redLineTd', !index && 'table-just']"
            v-for="(item, index) in inHospitalDays"
            :key="index + '|inHospitalDays'"
          >
            {{ index === 0 ? "住院天数" : item }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            :class="[index && 'redLineTd', !index && 'table-just']"
            v-for="(item, index) in surgeryDays"
            :key="index + '|surgeryDays'"
          >
            {{ index === 0 ? "手术后天数" : item }}
          </td>
        </tr>
        <tr>
          <td class="table-just" rowspan="2" colspan="8">
            时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间
          </td>
        </tr>
        <tr>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText redLineTd">23</td>
          <td class="focusText">3</td>
          <td>7</td>
          <td>11</td>
          <td>15</td>
          <td class="focusText">19</td>
          <td class="focusText">23</td>
        </tr>

        <!-- <record></record> -->
        <tr class="recorde temperature_mark">
          <td colspan="2" rowspan="45" style="border-right: 1px solid white">
            <div style="margin-top: 476px;height: 31px">
              <p style="width:35px;">
                <span>口表•</span>
                <span style="color: blue">腋表x</span>
                <span>肛表o</span>
                <span style="color: red">脉搏•</span>
                <span style="color: red">心率o</span>
              </p>
              <p></p>
            </div>
          </td>
          <td colspan="3" rowspan="45">
            <div style="color: red" class="num_wrapper">
              <p style="margin-top: 0;text-align: right">脉搏次/分</p>
              <p style="margin-top: 32px">180</p>
              <p style="margin-top: 55px">160</p>
              <p style="margin-top: 55px">140</p>
              <p style="margin-top: 55px">120</p>
              <p style="margin-top: 55px">100</p>
              <p style="margin-top: 55px">80</p>
              <p style="margin-top: 56px">60</p>
              <p style="margin-top: 56px">40</p>
            </div>
          </td>
          <td colspan="3" rowspan="45">
            <div style="color: blue" class="num_wrapper">
              <p style="margin-top: 0">体温<br />x</p>
              <p style="margin-top: 32px">41</p>
              <p style="margin-top: 55px">40</p>
              <p style="margin-top: 55px">39</p>
              <p style="margin-top: 55px">38</p>
              <p style="margin-top: 55px">37</p>
              <p style="margin-top: 55px">36</p>
              <p style="margin-top: 56px">35</p>
              <p style="margin-top: 56px">34</p>
            </div>
          </td>
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td0'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          >
            <div class="recorde-text">{{ getSymbolTextArr(y) }}</div>
          </td>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0]"
          :key="index + 'tr1'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td1'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td2'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td2'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr2'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td3'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td4'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td4'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr3'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td5'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td6'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td6'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr4'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td7'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td8'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td8'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr5'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td9'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td10'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td10'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr6'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td11'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td11'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td11'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>

        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr7'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td12'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td12'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0]"
          :key="index + 'tr8'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td13'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>
        <tr class="recorde">
          <template v-for="(item, index) of tdList">
            <td
              :key="index + 'td14'"
              v-if="index % 6 === 5 && index != tdList.length"
              style="
                border-right: 1px solid #ff6e71;
                border-bottom: 1px solid #7e7eff;
              "
            ></td>
            <td
              :key="index + 'td14'"
              v-else
              style="border-bottom: 1px solid #7e7eff"
            ></td>
          </template>
        </tr>
        <tr
          class="recorde"
          v-for="(tr, index) in [0, 0, 0, 0, 0]"
          :key="index + 'tr9'"
        >
          <td
            v-for="(item, y) in tdList"
            :key="y + 'td15'"
            :class="[y % 6 === 5 && y != tdList.length && 'redLineTd']"
          ></td>
        </tr>

        <tr></tr>

        <tr>
          <td

                  :colspan="index === 0 ? 8 : 1"
                  v-for="(item, index) in array42"
                  :class="[index && 'redLineTd']"
                  :key="index + '|098'"
          >
            {{
            index === 0
            ? "呼吸(次/分)"
            : typesViewData["098"] && typesViewData["098"][index - 1]
            }}
          </td>

        </tr>
        <tr>
          <td

                  :colspan="index === 0 ? 8 : 1"
                  v-for="(item, index) in array42"
                  :class="[index && 'redLineTd']"
                  :key="index + '|099'"
          >
            {{
            index === 0
            ? "疼痛强度"
            : typesViewData["099"] && typesViewData["099"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
                  :colspan="index === 0 ? 8 : 6"
                  v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
                  :class="[index && 'redLineTd']"
                  :key="index + '|005'"
          >
            {{
            index === 0
            ? "大便(次/日)"
            : typesViewData["005"] && typesViewData["005"][index - 1]
            }}
          </td>
        </tr>

        <tr>
          <td
                  :colspan="index === 0 ? 8 : 6"
                  v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
                  :class="[index && 'redLineTd']"
                  :key="index + '|004'"
          >
            {{
            index === 0
            ? "小便(ml)"
            : typesViewData["004"] && typesViewData["004"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|008'"
          >
            {{
              index === 0
                ? "血压(mmHg)"
                : typesViewData["008"] && typesViewData["008"][index - 1]
            }}
          </td>
        </tr>
        <tr >
          <td
                  :colspan="index === 0 ? 8 : 6"
                  v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
                  :class="[index && 'redLineTd']"
                  :key="index + '|030'"
          >
            {{
            index === 0
            ? "身高(cm)"
            : typesViewData["030"] && typesViewData["030"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
                  :colspan="index === 0 ? 8 : 6"
                  v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
                  :class="[index && 'redLineTd']"
                  :key="index + '|009'"
          >
            {{
            index === 0
            ? "体重(kg)"
            : typesViewData["009"] && typesViewData["009"][index - 1]
            }}
          </td>
        </tr>

        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|006'"
          >
            {{
              index === 0
                ? "入量"
                : typesViewData["006"] && typesViewData["006"][index - 1]
            }}
          </td>
        </tr>
        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|011'"
          >
            {{
              index === 0
                ? "出量"
                : typesViewData["011"] && typesViewData["011"][index - 1]
            }}
          </td>
        </tr>


        <tr>
          <td
            :colspan="index === 0 ? 8 : 6"
            v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7]"
            :class="[index && 'redLineTd']"
            :key="index + '|010'"
          >
            {{
              index === 0
                ? "过敏药物"
                : typesViewData["010"] && typesViewData["010"][index - 1]
            }}
          </td>
        </tr>
      </tbody>
    </table>
    <div style="text-align: center">
      <div style="font-size: 20px; font-weight: bold">
        {{ `第${info.pageNo}页` }}
      </div>
    </div>
  </div>
</template>

<script>
import * as d3 from 'd3'
import dayjs from 'dayjs'
import { getKeyMap, SectionToChinese } from './utils'
import {getChartData} from "@/api/medical-advice/nursing-manage";
import { getFormatDatetime } from "@/utils/date"

export default {
  props: {
    patientInfo: Object,
    queryParam: Object,
  },
  data () {
    return {
      marginTop: 0,
      keyMap: getKeyMap(),
      info: {
        age: 0,
        beginDate: '',
        potNo: '',
        hospDate: 0,
        admissDate:'',
        bedNo:'',
        inDate: 0,
        inDiagName: null,
        name: '',
        dept: '',
        sex: '',
        pageNo: '1',
        operaDays:[]
      },
      xyList: [],
      typesInfo: [],
      typesViewData: {},
      breathData: [],
      tdList: new Array(42).fill(0),
      comKey: 1,
      symbolTextArr: [],
      array42:[],
    }
  },
  computed: {
    // 日期
    inHospitalTime () {
      const initday = dayjs(this.info.beginDate)
      console.log('initday',initday)
      return [
        null, // 文案天
        initday.format('YYYY-MM-DD'),
        initday.add(1, 'day').format('MM-DD'),
        initday.add(2, 'day').format('MM-DD'),
        initday.add(3, 'day').format('MM-DD'),
        initday.add(4, 'day').format('MM-DD'),
        initday.add(5, 'day').format('MM-DD'),
        initday.add(6, 'day').format('MM-DD')
      ]
    },
    // 住院天数
    inHospitalDays () {
      const initday = this.info.hospDays || 0
      return [
        null, // 文案天
        initday + 1,
        initday + 2,
        initday + 3,
        initday + 4,
        initday + 5,
        initday + 6,
        initday + 7
      ]
    },
    // 手术天数
    surgeryDays () {
      const initday = this.info.operaDays
      if (initday.length <=0) {
        return new Array(8).fill(null)
      } else {
        return  initday
      }
    }
  },
  mounted () {
    for (let i = 0; i < 43; i++) {
      this.array42.push(i)
    }
    console.log('this.queryParam',this.queryParam)
    this.initData()
    console.log('this.info',this.info)
    const marginTop =
      (Math.round(this.$refs.topTd[0].getBoundingClientRect().height) - 18) *
        10 +
      28
    this.marginTop = marginTop
    // setTimeout(() => {
    //   this.$emit('done')
    // })
  },
  methods: {
    SectionToChinese,
    getSymbolTextArr (index) {
      const current = this.symbolTextArr.find(i => i.x === index)
      if (current) {
        return current.y
      } else {
        return ''
      }
    },
    temperatureConverter (c) {
      const value = (c * 9) / 5 + 32
      return value.toFixed(1)
    },
    initData () {
      // this.info = dataModel.grParamBOS
      this.info.pageNo = this.queryParam.week
      this.info.beginDate =this.queryParam.startRecTime
      this.info.hospDays = (Number(this.queryParam.week)-1)*7
      // this.rowsInfo = dataModel.rows || []
      // this.typesInfo = dataModel.types || []
      let param = {
        inpatientNo:this.patientInfo.inpatientNo,
        admissTimes:this.patientInfo.admissTimes,
        week:this.queryParam.week,
        startRecTime:this.queryParam.startRecTime,
        endRecTime:this.queryParam.endRecTime,
        mbFlag:this.queryParam.checkBoxFlag.mbFlag,
        hxFlag:this.queryParam.checkBoxFlag.hxFlag,
        xyFlag:this.queryParam.checkBoxFlag.xyFlag,
        wcyRqFlag:this.queryParam.checkBoxFlag.wcyRqFlag,
      }
      getChartData(param).then((res)=>{
        console.log('resChar', res)
        this.rowsInfo = res.rows
        this.typesInfo = res.types
        this.info.operaDays = res.operaDays
        this.init()
      })
    },
    init () {
      //800 758
      var width = 690
      var height = 682
      // SVG画布边缘与图表内容的距离
      var padding = { top: 50, right: 0, bottom: 50, left: 50 }
      // 创建一个分组用来组合要画的图表元素
      var main = d3
        .select('.container svg')
        .append('g')
        .classed('main', true)
        .attr('transform', 'translate(' + 80 + ',' + 80 + ')')
      // 模拟数据 体温
      var dataset = getTypeData('003', this.rowsInfo)
      console.log(dataset, '腋表')
      var datasetAnus = getTypeData('015', this.rowsInfo)
      console.log(datasetAnus, '肛表【黑空圆】')
      var datasetHeartrate = getTypeData('014', this.rowsInfo)
      console.log(datasetHeartrate, '心率【红空圆】')
      var datasetPulse = getTypeData('002', this.rowsInfo)
      console.log(datasetPulse, '脉搏【红实圆】')
      var symbolTextArr = getTypeData('012', this.rowsInfo, false)
      this.symbolTextArr = symbolTextArr
      console.log(symbolTextArr, '【特殊标记】')
      // 口表【黑实圆】
      var datasetPain = getTypeData('001', this.rowsInfo)
      this.breathData = datasetPain
      console.log(datasetPain, '口表【黑实圆】')
      // const circleNode = document.createElement('circle')
      // circleNode.setAttribute('cx', '179.2439024390244')
      // circleNode.setAttribute('cy', '582')
      // circleNode.setAttribute('r', '4')
      // circleNode.setAttribute('stroke', '#000000')
      // circleNode.setAttribute('stroke-width', '1')
      // circleNode.setAttribute('fill', '#FFFFFF')
      // document.querySelector('.main').appendChild(circleNode)
      // 创建x轴的比例尺(线性比例尺)
      var xScale = d3.scaleLinear()
        .domain([0, 41])
        .range([9, width - padding.left - padding.right +75])
      // 创建y轴的比例尺(线性比例尺)

      /* var yScale = d3.scale.linear()
                        .domain([0, d3.max(dataset,function(d) {
                            return d.y;
                        })])
                        .range([height - padding.top - padding.bottom, 0]); */
      // 体温
      var yScale = d3.scaleLinear()
              .domain([33, 42])
              .range([height - padding.top - padding.bottom , -56])
      // 脉搏
      var yScale1 = d3.scaleLinear()
              .domain([20, 200])
              .range([height - padding.top - padding.bottom , -55])
      // 呼吸
      var yScale2 = d3.scaleLinear()
        .domain([0, 40])
        .range([height - padding.top + 22, -55])

      // 创建x轴
      var xAxis = d3.axisBottom()
        .scale(xScale)
      // 创建y轴
      var yAxis = d3.axisLeft()
        .scale(yScale)
      var yAxis1 = d3.axisLeft()
        .scale(yScale1)
      var yAxis2 = d3.axisLeft()
        .scale(yScale2)

      // 添加SVG元素并与x轴进行“绑定”
      main
        .append('g')
        .attr('class', 'axis')
        .attr(
          'transform',
          'translate(0,' + (height - padding.top - padding.bottom) + ')'
        )
        .call(xAxis)

      // 添加SVG元素并与y轴进行“绑定”
      main
        .append('g')
        .attr('class', 'axis')
        .call(yAxis)
      main
        .append('g')
        .attr('class', 'axis')
        .call(yAxis1)
      main
        .append('g')
        .attr('class', 'axis')
        .call(yAxis2)

      // 添加折线
      var line = d3.line()
        .x(function (d) {
          return xScale(d.x)
        })
        .y(function (d) {
          return yScale(d.y)
        })
      var line1 = d3
        .line()
        .x(function (d) {
          return xScale(d.x)
        })
        .y(function (d) {
          return yScale1(d.y)
        })
      var line2 = d3
        .line()
        .x(function (d) {
          return xScale(d.x)
        })
        .y(function (d) {
          return yScale(d.y)
        })
        // .interpolate('linear')
      // 选择线条的类型

      // 添加path元素，并通过line()计算出值来赋值
      main
        .append('path')
        .attr('class', 'line tiwenline')
        .attr('d', line(dataset))
      main
        .append('path')
        .attr('class', 'line')
        .attr('d', line(datasetAnus))
      main
        .append('path')
        .attr('class', 'line')
        .attr('d', line2(datasetPain))
      main
        .append('path')
        .attr('class', 'line redColor')
        .attr('d', line1(datasetHeartrate))
      main
        .append('path')
        .attr('class', 'line redColor')
        .attr('d', line1(datasetPulse))
      // main.append('path').attr('class', 'line').attr('d', line3(dataset))

      // 添加点

      /* 黑实圆--start */
      // main
      //   .selectAll('rect')
      //   .data(dataset_mouth)
      //   .enter()
      //   .append('circle')
      //   .attr('cx', function (d) {
      //     return xScale(d.x)
      //   })
      //   .attr('cy', function (d) {
      //     return yScale(d.y)
      //   })
      //   .attr('r', 4)
      //   .attr('fill', function (d, i) {
      //     return 'black'
      //   })
      /* 黑实圆--end */

      /* 黑空圆--start */
      main
        .selectAll('rect')
        .data(datasetAnus)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return xScale(d.x)
        })
        .attr('cy', function (d) {
          return yScale(d.y)
        })
        .attr('r', 4)
        .attr('stroke', '#000000')
        .attr('stroke-width', 1)
        .attr('fill', '#FFFFFF')
      /* 黑空圆--end */

      /* 红空圆--start */
      main
        .selectAll('rect')
        .data(datasetHeartrate)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return xScale(d.x)
        })
        .attr('cy', function (d) {
          return yScale1(d.y)
        })
        .attr('r', 4)
        .attr('stroke', '#EE0000')
        .attr('stroke-width', 1)
        .attr('fill', '#FFFFFF')
      /* 红空圆--end */

      /* 红实圆--start */
      main
        .selectAll('rect')
        .data(datasetPulse)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return xScale(d.x)
        })
        .attr('cy', function (d) {
          return yScale1(d.y)
        })
        .attr('r', 4)
        .attr('fill', '#EE0000')
        // .on('mouseover', function (d) {
        //   // (1)取得提示显示的位置
        //   var xPosition = parseFloat(d3.select(this).attr('cx')) + 698
        //   var yPosition = parseFloat(d3.select(this).attr('cy')) + 24
        //
        //   // (2)创建提示条SVG
        //   d3.select('.container svg')
        //     .append('text')
        //     .attr('id', 'tooltip') // 设置id便于移除提示
        //     .attr('x', xPosition)
        //     .attr('y', yPosition)
        //     .attr('text-anchor', 'middle')
        //     .attr('font-family', 'sans-setif')
        //     .attr('font-size', '11px')
        //     .attr('font-weight', 'bold')
        //     .attr('fill', 'white')
        //     .text(d.value)
        // })
      // (3)移除提示条SVG

      /* 红实圆--end */
      /* 黑实圆--start */
      main
        .selectAll('rect')
        .data(datasetPain)
        .enter()
        .append('circle')
        .attr('cx', function (d) {
          return xScale(d.x)
        })
        .attr('cy', function (d) {
          return yScale(d.y)
        })
        .attr('r', 4)
        .attr('stroke', '#000000')
        .attr('fill', '#000000')
      /* 黑实圆--end */
      this.drawx(main, dataset, xScale, yScale)
      this.initTypes()
      // this.hoverEvent(main)
    },
    drawx (main, dataset, xScale, yScale) {
      /* 【叉形】--start */
      main
        .selectAll('rect')
        .data(dataset)
        .enter()
        .append('line')
        .attr('x1', function (d) {
          return xScale(d.x) - 4
        })
        .attr('y1', function (d) {
          return yScale(d.y) - 4
        })
        .attr('x2', function (d) {
          return xScale(d.x) + 4
        })
        .attr('y2', function (d) {
          return yScale(d.y) + 4
        })
        .attr('stroke', function (d, i) {
          return 'blue'
        })

      main
        .selectAll('rect')
        .data(dataset)
        .enter()
        .append('line')
        .attr('x1', function (d) {
          return xScale(d.x) + 4
        })
        .attr('y1', function (d) {
          return yScale(d.y) - 4
        })
        .attr('x2', function (d) {
          return xScale(d.x) -4
        })
        .attr('y2', function (d) {
          return yScale(d.y) + 4
        })
        .attr('stroke', function (d,i) {
          return 'blue'
        })
      /* 体温【叉形】--end */
    },
    hoverEvent (main) {
      ///* 鼠标悬停直线--start
      //         var dataset_line = [{x: 0,y: 0}]
      //         main.selectAll('rect')
      //           .data(dataset_line)
      //           .enter()
      //           .append('line')
      //           .attr({
      //             'x1':100,'y1':-56,
      //             'x2':100,'y2':582
      //           })
      //           .attr('stroke', function(d, i) {
      //             return 'black';
      //           });
            //  鼠标悬停直线--end */
      document.querySelector('.lineColor').style.stroke = 'red'
      const recordeNode = document.createElement('div')
      recordeNode.setAttribute('class', 'recorde-text')
      document.querySelector('.recorde td').append(recordeNode)
      const allTrtd = document.querySelectorAll('.temperatureChart tr td');
      [...allTrtd].map(ele => {
        ele.setAttribute('title', ele.innerText)
      })
      /* 鼠标悬停提示框 */
      var tooltip = d3
        .select('body')
        .append('div')
        .attr('class', 'tooltip')
        .style('opacity', 0.0)

      main
        .on('mouseover', function (d) {
          console.log(d3.event, 'dinfo')
          console.log(this, d, this.data, 'this dinfo')
          /*
                    鼠标移入时，
                    （1）通过 selection.html() 来更改提示框的文字
                    （2）通过更改样式 left 和 top 来设定提示框的位置
                    （3）设定提示框的透明度为1.0（完全不透明）
                    */
          tooltip
            .html('呼吸：19次/分<br/>录入信息：2017-11-02<br/>姓名：张三')
            .style('left', d3.event.pageX + 'px')
            .style('top', d3.event.pageY + 20 + 'px')
            .style('opacity', 1.0)
          console.log(d3.event.target)
        })
        .on('mousemove', function (d) {
          /* 鼠标移动时，更改样式 left 和 top 来改变提示框的位置 */
          tooltip
            .style('left', d3.event.pageX + 'px')
            .style('top', d3.event.pageY + 20 + 'px')
          // console.log(d3.event.target);
        })
        .on('mouseout', function (d) {
          /* 鼠标移出时，将透明度设定为0.0（完全透明） */

          tooltip.style('opacity', 0.0)
        })
    },
    initTypes () {
      const keyMap = {}
      this.typesInfo.map(item => {
        const key = item.typeCode
        if (keyMap[key]) {
          keyMap[key].push(item.typeValue)
        } else {
          keyMap[key] = [item.typeValue]
        }
      })
      this.typesViewData = keyMap
      console.log('this.typesViewData',this.typesViewData)
    }
  }
}

function getTypeData (type, allData = [], isNumber = true) {
  return allData
    .map((rowBOSItem, index) => {
      const rowBOS = rowBOSItem.rowBOS
      const cur =
        rowBOS.find(item => {
          return item.typeCode === type
        }) || {}
      return { x: index, y: (isNumber ? +cur.typeValue : cur.typeValue) || '' }
    })
    .filter(item => {
      return item.y !== ''
    })
}
</script>

<style  scoped>
  .table_wrap {
    line-height: normal;
  }
  table {
    font-weight: normal;
    border-collapse: collapse;
    font-size: 8px;
    text-align: center;
    width: 100%;
    table-layout: fixed;
    border: 2px #2f4f4f solid;
  }
  td {
    border: 1px solid #ccc;
    width: 12px;
    height: 11px;
  }
  .redLineTd {
    border-right: 1px solid #ff6e71;
  }
  .recorde-text {
    width: 13px;
    height: 8px;
    color: #ff0000;
    font-size: 10px;
    position: relative;
    top: -4px;
  }
  .table_wrap {
    position: relative;
    margin: 0 auto;
    width: 835px;
  }
  .container {
    /* 高度最好动态计算，不然很容易错位*/

    margin: 30px auto;
    margin-top: 28px;
    width: 805px;
    height: 758px;
    position: absolute;
    top: 142px;
    left: 28px;
  }
  .temperature_mark td p {
    position: relative;
    top: 0;
    margin-top: 58px;
  }
  .num_wrapper {
    width: 35px;
    height: 636px;
    position: relative;
  }
  .pain_wrapper {
    position: absolute;
    width: 100%;
    height: 70px;
    right: 0;
    bottom: -3px;
    border: 1px solid #ccc;
  }
  .zeroline {
    fill: none;
    stroke: red;
    stroke-width: 0.5px;
    stroke-dasharray: 5 5;
  }
  .zerolinetext {
    fill: red;
  }
  .overlay {
    fill: none;
    stroke: none;
    pointer-events: all;
  }
  .tooltip {
    font-family: "宋体";
    font-size: 10px;
    line-height: 16px;
    color: #736269;
    width: auto;
    height: auto;
    padding: 4px;
    position: absolute;
    text-align: left;
    border: 1px solid #736269;
    background-color: #e7e9f3;
    border-radius: 2px;
    background: linear-gradient(#fefdff, #e5e5f1);
    /* 标准的语法（必须放在最后） */

  }

</style>
<style >
  .table_wrap {
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .table_wrap .tick,
  .table_wrap .domain {
    display: none;
  }
  .table_wrap .tbale-label {
    font-weight: 700;
  }
  .table_wrap .focusLine {
    fill: none;
    stroke: red;
    stroke-width: 0.5px;
  }
  .table_wrap .focusText {
    color: red;
  }
  .table_wrap .breath_td_odd {
    vertical-align: top;
    font-size: 10px;
  }
  .table_wrap .breath_td_even {
    vertical-align: bottom;
    font-size: 10px;
  }
  .table_wrap .line {
    fill: none;
    stroke: black;
    stroke-width: 2px;
  }
  .table_wrap .line.tiwenline {
    stroke: blue;
    fill: none;
  }

  .table_wrap .line.redColor{
    stroke: red;
    fill: none;
  }
  .table_wrap .axis path,
  .table_wrap .axis line,
  .table_wrap .line {
    stroke: #000;
    fill: none;
  }
  .table_wrap .legend {
    display: flex;
  }
  .table_wrap .legend .legend-text {
    display: flex;
  }
  .table_wrap .legend .legend-item {
    margin-right: 20px;
  }

</style>
