<template>
  <div class="infoContainer">
    <div v-if="foreList.length" style="padding: 6px">
      <el-table
        max-height="450"
        :data="foreList"
        style="width:100%;margin: 8px 8px 0 0"
      >
        <el-table-column
          align="center"
          type="index"
          width="30"
        />
        <el-table-column
          align="center"
          prop="name"
          label="项目"
          width="120"
        />
        <el-table-column
          align="center"
          label="OD"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px">结膜：充血</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 2">
                <span style="margin-right: 16px">结膜：分泌物</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 3">
                <span style="margin-right: 16px">视盘：视神经</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 4">
                <span style="margin-right: 16px">视盘：CDR</span>{{ scope.row.odValue }}
              </span>
              <span v-else-if="scope.row.sort === 5">
                <div v-if="scope.row.eyeType === 'OD'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">等效球镜：{{ scope.row.odSe }}</p>
                </div>
              </span>
              <span v-else-if="scope.row.sort === 6">
                <div v-if="scope.row.eyeType === 'OD'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">矫正视力VA：{{ scope.row.odVa }}</p>
                </div>
              </span>
              <span v-else>
                {{ scope.row.odValue }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="OS"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px">结膜：充血</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 2">
                <span style="margin-right: 16px">结膜：分泌物</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 3">
                <span style="margin-right: 16px">视盘：视神经</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 4">
                <span style="margin-right: 16px">视盘：CDR</span>{{ scope.row.osValue }}
              </span>
              <span v-else-if="scope.row.sort === 5">
                <div v-if="scope.row.eyeType === 'OS'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">等效球镜：{{ scope.row.odSe }}</p>
                </div>
              </span>
              <span v-else-if="scope.row.sort === 6">
                <div v-if="scope.row.eyeType === 'OS'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">矫正视力VA：{{ scope.row.odVa }}</p>
                </div>
              </span>
              <span v-else>
                {{ scope.row.osValue }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="OU"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.sort === 1">
                <span style="margin-right: 16px" />{{ scope.row.ouValue }}
              </span>
              <span v-else-if="scope.row.sort === 5">
                <div v-if="scope.row.eyeType === 'OU'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">等效球镜：{{ scope.row.odSe }}</p>
                </div>
              </span>
              <span v-else-if="scope.row.sort === 6">
                <div v-if="scope.row.eyeType === 'OU'">
                  <p style="margin-right: 16px">球镜 DS：{{ scope.row.odSph }}</p>
                  <p style="margin-right: 16px">柱镜 DC：{{ scope.row.odCyl }}</p>
                  <p style="margin-right: 16px">轴位 Axis：{{ scope.row.odAx }}</p>
                  <p style="margin-right: 16px">矫正视力VA：{{ scope.row.odVa }}</p>
                </div>
              </span>
              <span v-else>
                {{ scope.row.ouValue }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="130">
          <template slot-scope="scope">
            <span
              class="cell-cursor"
              style="margin-left: 5px;"
              :class="scope.$index === 0 ? 'table-column-disable' : ''"
              @click="handleMove(scope, 'up', foreList)"
            >上移</span>
            <span
              class="cell-cursor"
              style="margin-left: 5px;"
              :class="scope.$index === foreList.length - 1 ? 'table-column-disable' : ''"
              @click="handleMove(scope, 'down', foreList)"
            >下移</span>
            <span
              class="cell-cursor"
              style="margin-left: 5px;color: #FF4D4F"
              @click="handleDel(scope.$index, foreList)"
            >
              删除
              <!--            <i class="el-icon-delete"></i>-->
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    <div v-if="afterList.length">-->
    <!--      <el-table-->
    <!--        max-height="450"-->
    <!--        :data="afterList"-->
    <!--        style="width:100%;margin: 8px 8px 0 0"-->
    <!--      >-->
    <!--        <el-table-column-->
    <!--          align="center"-->
    <!--          label="OD"-->
    <!--          width="140"-->
    <!--        >-->
    <!--          <template slot-scope="scope">-->
    <!--            <div>-->
    <!--              <span v-if="scope.row.sort === 1">-->
    <!--                {{ scope.row.odValue }}-->
    <!--              </span>-->
    <!--              <span v-if="!scope.row.sort">{{ scope.row.name }}</span>-->
    <!--              <span v-if="scope.row.sort === 2">-->
    <!--                <span style="margin-right: 16px">结膜：充血</span>{{ scope.row.odValue }}-->
    <!--              </span>-->
    <!--              <span v-if="scope.row.sort === 3">-->
    <!--                <span style="margin-right: 16px">结膜：分泌物</span>{{ scope.row.odValue }}-->
    <!--              </span>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column-->
    <!--          align="center"-->
    <!--          label="OS"-->
    <!--          width="140"-->
    <!--        >-->
    <!--          <template slot-scope="scope">-->
    <!--            <div>-->
    <!--              <span v-if="scope.row.sort === 1">-->
    <!--                {{ scope.row.osValue }}-->
    <!--              </span>-->
    <!--              <span v-if="!scope.row.sort">{{ scope.row.name }}</span>-->
    <!--              <span v-if="scope.row.sort === 2">-->
    <!--                <span style="margin-right: 16px">结膜：充血</span>{{ scope.row.osValue }}-->
    <!--              </span>-->
    <!--              <span v-if="scope.row.sort === 3">-->
    <!--                <span style="margin-right: 16px">结膜：分泌物</span>{{ scope.row.osValue }}-->
    <!--              </span>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--        <el-table-column label="操作" align="center">-->
    <!--          <template slot-scope="scope">-->
    <!--            <span-->
    <!--              class="cell-cursor"-->
    <!--              style="margin-left: 5px;"-->
    <!--              :class="scope.$index === 0 ? 'table-column-disable' : ''"-->
    <!--              @click="handleMove(scope, 'up', afterList)"-->
    <!--            >上移</span>-->
    <!--            <span-->
    <!--              class="cell-cursor"-->
    <!--              style="margin-left: 5px;"-->
    <!--              :class="scope.$index === afterList.length - 1 ? 'table-column-disable' : ''"-->
    <!--              @click="handleMove(scope, 'down', afterList)"-->
    <!--            >下移</span>-->
    <!--            <span-->
    <!--              class="cell-cursor"-->
    <!--              style="margin-left: 5px;color: #FF4D4F"-->
    <!--              @click="handleDel(scope.$index, afterList)"-->
    <!--            >-->
    <!--              删除-->
    <!--              &lt;!&ndash;            <i class="el-icon-delete"></i>&ndash;&gt;-->
    <!--            </span>-->
    <!--          </template>-->
    <!--        </el-table-column>-->
    <!--      </el-table>-->
    <!--    </div>-->
    <div style="width: 100%;margin-top: 16px;display: flex;justify-content: space-between">
      <el-button style="width: 48%;" type="primary" size="small" @click="addExamine">引入专科检查</el-button>
      <el-button style="width: 48%" size="small">复制</el-button>
    </div>
  </div>
</template>

<script>
import dialogjs from '@/mixins/dialog'
import eventBus from '@/page-subspecialty/utils/eventBus'

export default {
  components: {
  },
  mixins: [dialogjs],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    },
    foreList: {
      type: Array,
      default() {
        return []
      }
    },
    afterList: {
      type: Array,
      default() {
        return []
      }
    },
    sourceData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      setPlanList: [],
      addFollowList: [],
      patientInfoHeadHeight: '',
      crfSelectVisible: false
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    addData() {

    },
    // 上下移动
    handleMove(scope, moveType, list) {
      const { $index } = scope
      if (moveType === 'up') {
        if ($index === 0) return
        const isUp = list[$index - 1]
        list.splice($index - 1, 1)
        list.splice($index, 0, isUp)
      } else {
        if ($index === list.length - 1) return
        const isDown = list[$index + 1]
        list.splice($index + 1, 1)
        list.splice($index, 0, isDown)
      }
    },
    // 删除
    handleDel(index, list) {
      list = list.splice(index, 1)
    },
    // 引入专科检查
    addExamine() {
      eventBus.$emit('sendDataToExamine', this.foreList)
    }
  }
}
</script>
<style lang="scss" >

</style>

<style lang="scss" scoped>
.infoContainer {
  width: 650px;
  height: 100%;
  overflow-y: auto;
  .cell-cursor {
    cursor: pointer;
    color: #1e79ff;
  }
  .table-column-disable {
    color: #dddd;
  }
}
</style>
