<template>
  <div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
    <div v-if="!onlyRead" class="btnBox">
      <el-button v-print="printObj" size="small">打印</el-button>
      <el-button type="primary" size="small" @click="handleSaveTable">保存</el-button>
      <el-button type="danger" size="small" @click="handleDelete">删除</el-button>
    </div>
    <div id="threeFunc" style="width: 840px;padding-right: 8px">
      <div class="flex j-c">
        <img width="450" src="@/assets/img/xianganlogo.png">
      </div>
      <p style="color:#000000;font-size:32px;text-align:center;margin: 16px 0">
        青少年儿童屈光发育档案
      </p>
      <div class="operation-record-table">
        <el-table :data="headData" :span-method="headSpanMethod" border style="width: 820px;">
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '姓名'">
                <div class="width-100 center">
                  <el-input v-model="dataForm.patientName" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '身高'">
                <div class="width-100 center">
                  <el-input v-model="dataForm.patientSg" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '是否戴镜'">
                <div style="display:flex;">
                  <el-select v-model="dataForm.sfDj" placeholder="" style="width: 80%">
                    <el-option
                      v-for="item in scope.row.mirrorList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '姓名'">
                <div class="width-100 center">
                  性别
                </div>
              </div>
              <div v-if="scope.row.name == '身高'">
                <div class="width-100 center">
                  体重
                </div>
              </div>
              <div v-if="scope.row.name == '是否戴镜'">
                <div class="width-100 center">
                  戴镜习惯
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '姓名'">
                <div class="width-100 center">
                  <el-input v-model="dataForm.patientSex" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '身高'">
                <div class="width-100 center">
                  <el-input v-model="dataForm.patientTz" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '是否戴镜'">
                <div style="display:flex;">
                  <el-select v-model="dataForm.djXg" placeholder="" style="width: 80%">
                    <el-option
                      v-for="item in scope.row.mirrorHabit"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '姓名'">
                <div class="width-100 center">
                  出生日期
                </div>
              </div>
              <div v-if="scope.row.name == '身高'">
                <div class="width-100 center">
                  何时发现视力下降
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '姓名'">
                <div class="width-140 center">
                  <el-date-picker
                    v-model="dataForm.patientBirth"
                    type="date"
                    placeholder="选择日期"
                  />
                </div>
              </div>
              <div v-if="scope.row.name == '身高'">
                <div class="width-100 center">
                  <el-input v-model="dataForm.slHsXj" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 820px">
          <el-table-column label="" width="" align="center" :resizable="false">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false" prop="type">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '戴镜类型'">
                <el-select v-model="dataForm.djLx" placeholder="" style="width: 80%">
                  <el-option
                    v-for="item in scope.row.mirrorType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
              <div v-if="scope.row.name == '旧镜参数'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jjCsOd" placeholder="">
                    <template slot="prepend">OD:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '父母是否近视'">
                <el-select v-model="dataForm.fmSfJs" placeholder="" style="width: 80%">
                  <el-option
                    v-for="item in scope.row.shortsighte"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
              <div v-if="scope.row.name == '户外活动时间'">
                <el-select v-model="dataForm.hwHdSj" placeholder="" style="width: 80%">
                  <el-option
                    v-for="item in scope.row.outTime"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
              <div v-if="scope.row.name == '备注'">
                <div class="center">
                  <el-input v-model="dataForm.beiZhu" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '项目'">
                <div class="width-180 center">
                  OD
                </div>
              </div>
              <div v-if="scope.row.name == '裸眼/旧镜视力'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jjslOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '是否散瞳'">
                <div>
                  <el-select v-model="dataForm.sfstOd" placeholder="" style="width: 80%">
                    <el-option
                      v-for="item in scope.row.mydriasis"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </div>
              </div>
              <div v-if="scope.row.name == '主觉验光'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.zjygOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '眼位'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.ywOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '眼压/mmHg'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.yyOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '角膜曲率/D'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jmqlOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '角膜厚度/μm'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jmhdOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '处方'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.cfOd" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '建议'">
                <el-select v-model="dataForm.jianYi" placeholder="" style="width: 80%">
                  <el-option
                    v-for="item in scope.row.suggest"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
              <div v-if="scope.row.name == '眼轴/眼底照/地形图'">
                <div class="center">
                  <el-input v-model="dataForm.yzOd" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="" width="" :resizable="false">
            <template slot-scope="scope">
              <div v-if="scope.row.name == '旧镜参数'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jjCsOs" placeholder="">
                    <template slot="prepend">OS:</template>
                  </el-input>
                </div>
              </div>
              <div v-if="scope.row.name == '项目'">
                <div class="width-180 center">
                  OS
                </div>
              </div>
              <div v-if="scope.row.name == '裸眼/旧镜视力'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jjslOs" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '主觉验光'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.zjygOs" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '眼位'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.ywOs" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '眼压/mmHg'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.yyOs" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '角膜曲率/D'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jmqlOs" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '角膜厚度/μm'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.jmhdOs" placeholder="" />
                </div>
              </div>
              <div v-if="scope.row.name == '处方'">
                <div class="width-180 center">
                  <el-input v-model="dataForm.cfOs" placeholder="" />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isSearch: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    caseId: {
      type: String,
      default: ''
    },
    onlyRead: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      printObj: {
        id: 'threeFunc',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>  #printId { width: 100%; !important; }  .el-input__prefix { display: none } <style>'
      },
      dataForm: {
        id: '',
        patientId: '',
        patientName: '',
        patientSex: '',
        patientSg: '',
        patientTz: '',
        patientBirth: '',
        beiZhu: '',
        cfOd: '',
        cfOs: '', // 处方
        djXg: '', // 戴镜习惯
        djLx: '', // 戴镜类型
        fmSfJs: '', // 父母是否近视
        hwHdSj: '', // 户外活动时间
        jianYi: '', // 建议
        jjCsOd: '', // 旧镜参数
        jjCsOs: '', // 旧镜参数
        jjslOd: '', // 旧镜视力
        jjslOs: '', // 旧镜视力
        jmdxtOd: '', // 角膜地形图
        jmdxtOs: '', // 角膜地形图
        jmhdOd: '', // 角膜厚度
        jmhdOs: '', // 角膜厚度
        jmqlOd: '', // 角膜曲率
        jmqlOs: '', // 角膜曲率
        lyslOd: '', // 裸眼视力
        lyslOs: '', // 裸眼视力
        sfDj: '', // 是否戴镜
        sfstOd: '', // 是否散瞳
        sfstOs: '', // 是否散瞳
        slHsXj: '', // 视力何时下降
        ydzOd: '', // 眼底照
        ydzOs: '', // 眼底照
        ywOd: '', // 眼位
        ywOs: '', // 眼位
        yyOd: '', // 眼压
        yyOs: '', // 眼压
        yzOd: '', // 眼轴
        yzOs: '', // 眼轴
        zjygOd: '', // 主觉验光
        zjygOs: '' // 主觉验光
      },
      headData: [
        {
          name: '个人基础信息'
        },
        {
          name: '姓名'
        }, {
          name: '身高'
        }, {
          name: '是否戴镜',
          mirrorList: [{
            name: '是',
            id: '1'
          }, {
            name: '否',
            id: '2'
          }],
          mirrorHabit: [
            {
              name: '好',
              id: '1'
            }, {
              name: '一般',
              id: '2'
            }, {
              name: '差',
              id: '3'
            }]
        }],
      tableData: [
        {
          name: '戴镜类型',
          mirrorType: [
            {
              name: '框架',
              id: '1'
            },
            {
              name: 'OK镜',
              id: '2'
            }, {
              name: 'RGP',
              id: '3'
            }, {
              name: '软镜',
              id: '4'
            }
          ]
        },
        {
          name: '旧镜参数'
        }, {
          name: '父母是否近视',
          shortsighte: [
            {
              name: '父亲',
              id: '1'
            }, {
              name: '母亲',
              id: '2'
            }, {
              name: '父亲和母亲',
              id: '3'
            }, {
              name: '均无',
              id: '4'
            }
          ]
        }, {
          name: '户外活动时间',
          outTime: [
            {
              name: '\<1h',
              id: '1'
            }, {
              name: '1h-2h',
              id: '2'
            }, {
              name: '\>2h',
              id: '3'
            }
          ]
        }, {
          name: '备注'
        }, {
          name: '综合检查信息'
        }, {
          name: '项目'
        }, {
          name: '裸眼/旧镜视力'
        }, {
          name: '是否散瞳',
          mydriasis: [
            {
              name: '未散瞳',
              id: '1'
            }, {
              name: '美多丽',
              id: '2'
            }, {
              name: '阿托品',
              id: '3'
            }, {
              name: '其他',
              id: '4'
            }
          ]
        }, {
          name: '主觉验光'
        }, {
          name: '眼位'
        }, {
          name: '眼压/mmHg'
        }, {
          name: '角膜曲率/D'
        }, {
          name: '角膜厚度/μm'
        }, {
          name: '处方'
        }, {
          name: '建议',
          suggest: [
            {
              name: '框架',
              id: '1'
            }, {
              name: 'OK镜',
              id: '2'
            }, {
              name: 'RGP',
              id: '3'
            }, {
              name: '软镜',
              id: '4'
            }, {
              name: '其他',
              id: '5'
            }
          ]
        }, {
          name: '眼轴/眼底照/地形图'
        }]
    }
  },
  mounted() {
    // this.originTableData = JSON.parse(JSON.stringify(this.tableData))
    // this.originHeadData = JSON.parse(JSON.stringify(this.headData))
    this.getPatientData()
  },
  methods: {
    async queryForm() {
      const { data: res } = await this.$http.get(
        '/qgfyda/getQgfyda',
        {
          params: {
            patientId: this.patientId,
            caseId: this.caseId
          }
        }
      )
      if (res.code === 0) {
        this.dataForm = res.data
      } else {
        this.$message.error(res.msg)
      }
    },
    async getPatientData() {
      const { data: res } = await this.$http.get(
        '/patient/view/getPatientData',
        {
          params: {
            patientId: this.patientId
          }
        }
      )
      if (res.code === 0) {
        const data = res.data
        this.dataForm.patientName = data.patientName
        this.dataForm.patientSex = data.patientSex
        this.dataForm.patientBirth = data.patientBirthday
      } else {
        this.$message.error(res.msg)
      }
    },
    handleDelete() {
      this.$emit('del')
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 5) {
          return {
            rowspan: 1,
            colspan: 3
          }
        }
      } else if (columnIndex === 1) {
        if (rowIndex === 0 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4 || rowIndex === 8 || rowIndex === 15 || rowIndex === 16) {
          return {
            rowspan: 1,
            colspan: 2
          }
        } else if (rowIndex === 5) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else if (columnIndex === 2) {
        if (rowIndex === 0 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4 || rowIndex === 5 || rowIndex === 8 || rowIndex === 15 || rowIndex === 16) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    headSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 1,
            colspan: 6
          }
        }
      } else if (columnIndex === 1 || columnIndex === 3) {
        if (rowIndex === 3) {
          return {
            rowspan: 1,
            colspan: 2
          }
        }
      } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        if (rowIndex === 0) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    handlePrint() {
      this.printPage('threeFunc')
    },
    handleSaveTable() {
      this.$http.post('/qgfyda/saveQgfyda', this.dataForm).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.queryForm()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss">
#threeFunc {
  .el-input__suffix, .el-input__prefix {
    display: none;
  }
  .width-100 {
    .el-input {
      width: 100px;
    }
  }
  .width-140 {
    .el-input {
      width: 125px;
    }
  }
}
.flex{
  display: flex;
}
.j-c{
  justify-content: center;
}
.operation-record-table{
  .el-input__inner {
    border: none;
    height: 26px !important;
    line-height: 26px !important;
    text-align: center;
  }
  .el-input-group__append, .el-input-group__prepend{
    background-color: transparent;
    color: #606266;
    border: none;
  }
  .el-table__header-wrapper{
    display: none;
  }
}

#operation-record {
  .btnBox{
    display: flex;
    justify-content: flex-end;
  }
  .el-table--border{
    border-right: 1px solid #EBEEF5;
  }
  .operation-record-table {
    //width: 100%;
    width: 840px !important;
    padding-right: 8px;
    .operation-text {
      font-weight: 700;
    }
    .text {
      font-weight: 700;
    }
    .sign {
      cursor: pointer;
      color: #46a1ff;
      font-weight: 400;
    }
    .el-input__inner {
      border: none;
      height: 26px !important;
      line-height: 26px !important;
      text-align: center;
    }
    .el-input__inner {
      border-bottom: 1px solid #ccc;
      border-radius: 0;
      padding: 0;
    }
    .el-input__prefix {
      display: none;
    }
  }
  .center {
    text-align: center;
  }
  .left {
    text-align: left;
  }

  .width-50 {
    .el-input {
      width: 50px;
    }
  }
  .width-70 {
    .el-input {
      width: 70px;
    }
  }
  .width-100 {
    .el-input {
      width: 100px;
    }
  }
  .width-120 {
    .el-input {
      width: 120px;
    }
  }
  .width-180 {
    .el-input {
      width: 180px;
    }
  }
  .width-240 {
    .el-input {
      width: 240px;
    }
  }

  //.el-date-editor.el-input,
  //.el-date-editor.el-input__inner {
  //  width: 140px;
  //}
  //.el-input__suffix {
  //  top: -7px;
  //}
  //.el-checkbox__input.is-checked + .el-checkbox__label {
  //  color: #606266;
  //}
  //.el-checkbox__input.is-checked .el-checkbox__inner,
  //.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  //  background: #767676;
  //  border-color: #767676;
  //}
  //.el-checkbox__inner:hover,
  //.el-checkbox__inner {
  //  border-color: #767676;
  //}
  //.el-radio__input.is-checked + .el-radio__label {
  //  color: #606266;
  //}
  //.el-radio__input.is-checked .el-radio__inner {
  //  background: #767676;
  //  border-color: #767676;
  //}
  //.el-radio {
  //  margin-right: 8px;
  //  display: block;
  //}
  //.el-radio__inner {
  //  border: 1px solid #767676 !important;
  //}
  //.el-radio__inner:hover {
  //  border-color: #767676;
  //}
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background: none !important;
  }
  .has-gutter {
    display: none;
    .cell {
      font-weight: 700;
    }
    .el-table__cell {
      background: #ced4d9;
    }
  }
  .el-table__header-wrapper{
    display: none;
  }
}
</style>
