<template>
  <div class="radiotherapy-con" v-loading="status">
    <div class="radiotherapy-con-left">
      <div class="plans">
        <h3>放射治疗</h3>
        <div class="remark">切换查看不同方案放疗单</div>
        <div class="dynamicTag-con">
          <el-select v-model="dynamicTag" size="small" @change="handleRowClick" placeholder="请选择">
            <el-option
              v-for="(item,index) in rationInfo.dynamicTags"
              :key="index"
              :label="item.scheme"
              :value="item.scheme">
            </el-option>
          </el-select>
        </div>
        <div class="radiation-type-con">
          <div class="radiation-type-item" @click="changeType('radiationType')" :class="{'radiation-type-active':activeName === 'radiationType'}">放射治疗单</div>
          <div class="radiation-type-item" @click="changeType('afterRadiationType')" :class="{'radiation-type-active':activeName !== 'radiationType'}">后装放射治疗单</div>
        </div>
      </div>
    </div>
    <div class="radiotherapy-con-center">
      <div class="type-scrollbar">
        <template v-if="activeName === 'radiationType'">
          <el-scrollbar style="height:100%">
            <radiationPrint
              :radiotherapyOrder="radiotherapyOrder"
              :TDList="radiotherapyOrder.treatmentPlanList"
              :EFInfoList="radiotherapyOrder.exposureFieldInformationList"
              :imgList="radiotherapyOrder.imageVerificationFrequency"
              :curImgs="splitArr(radiotherapyOrder.partImageUrl)"
              :imgVRList="radiotherapyOrder.imageVerificationRecordList"
              :siteTRList="radiotherapyOrder.siteTreatmentRecordsList"
              :userInfo="rationInfo.userInfo"
              :doctorSignature="radiotherapyOrder.doctorSignature"
              :doctorSignatureTime="radiotherapyOrder.doctorSignatureTime"
              :physicsTeacherSignature="radiotherapyOrder.physicsTeacherSignature"
              :physicsTeacherSignatureTime="radiotherapyOrder.physicsTeacherSignatureTime"
              :radiationInDate="radiationInDate"
              ref="infoPage"
            />
          </el-scrollbar>
        </template>
        <template v-else>
          <el-scrollbar style="height:100%">
            <radiationNextPrint
              :radiationNextInfo="afterOrderInfo"
              :userInfo="rationInfo.userInfo"
              ref="infoNextPage"
            ></radiationNextPrint>
          </el-scrollbar>
        </template>
      </div>
    </div>
    <div class="radiotherapy-con-right">
      <!-- <el-button class="radiotherapy-print" @click="handlePrint" type="primary">打印</el-button> -->
    </div>
  </div>
</template>

<script>
import radiationPrint from './radiationPrint.vue'
import radiationNextPrint from './radiationNextPrint.vue'
import { cloneDeep } from "lodash";
import { Print } from "aegle-sp-components/src/utils//print";
export default {
  components: {
    radiationPrint,
    radiationNextPrint,
  },
  props: {
    rationInfo: {
      type: Object,
      required: true,
      default:() => {
        return {
        dynamicTags:[],
        status: false,
        userInfo: {},
        radiationStepsInfo: {
          radiotherapyOrder: {},
          afterOrderInfo: {}
        }
      }
      }
    },
    radiationInDate: {
      type: String
    },
    visible: {

    }
  },
  data() {
    return {
      activeName: 'radiationType',
      dynamicTag: '方案1',
      radiotherapyOrder: {},
      afterOrderInfo: {},
      status: null
    };
  },
  watch: {
    rationInfo: {
      handler (val) {
        this.radiotherapyOrder = cloneDeep(val.radiationStepsInfo.radiotherapyOrder)
        this.radiotherapyOrder.imageVerificationFrequency = this.radiotherapyOrder.imageVerificationFrequency ? Number(this.radiotherapyOrder.imageVerificationFrequency) : ''
        this.afterOrderInfo = cloneDeep(val.radiationStepsInfo.afterOrderInfo)
        this.status = cloneDeep(val.status)
      }
    },
    visible () {
      this.dynamicTag = '方案1';
      this.activeName = 'radiationType'
    }
  },
  created() {
    this.radiotherapyOrder = cloneDeep(this.rationInfo.radiationStepsInfo.radiotherapyOrder)
    this.radiotherapyOrder.imageVerificationFrequency = this.radiotherapyOrder.imageVerificationFrequency ? Number(this.radiotherapyOrder.imageVerificationFrequency) : ''
    this.afterOrderInfo = cloneDeep(this.rationInfo.radiationStepsInfo.afterOrderInfo)
    this.status = cloneDeep(this.rationInfo.status)
  },
  mounted() {

  },
  methods: {
    // 切换放射治疗单类型
    changeType (type) {
      this.activeName = type;
    },
    // 设置images为数组
    splitArr (url) {
      let list = []
      list = url ? url.split(',') :[]
      return list
    },
    // 打印页面
    handlePrint () {
      if (this.activeName === "radiationType") {
        Print(this.$refs.infoPage, {
          onStart: function() {
            // console.log('onStart', new Date())
          },
          onEnd: function() {
            // console.log('onEnd', new Date())
          }
        });
      } else {
        Print(this.$refs.infoNextPage, {
          onStart: function() {
            // console.log('onStart', new Date())
          },
          onEnd: function() {
            // console.log('onEnd', new Date())
          }
        });
      }
    },
    handleClick (val) {
      console.log(val)
    },
    handleRowClick (scheme) {
      this.status = true;
      this.$emit('handleGetOrderInfo',scheme)
    }
  }
};
</script>

<style scoped lang="less">
.radiotherapy-con {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  background: #F3F3F3;
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .radiotherapy-con-left {
    flex-shrink: 0;
    width: 190px;
    background-color: #fff;
    height: 100%;
    padding: 0 29px;
    box-sizing: border-box;
    h3 {
      font-size: 18px;
      font-family: 'PingFangSC, PingFangSC-Semibold';
      font-weight: 600;
      text-align: left;
      color: rgba(0,0,0,0.85);
      line-height: 22px;
      margin: 32px 0 7px 0;
    }
    .remark {
      height: 17px;
      font-size: 12px;
      font-family: 'PingFang, PingFang-SC';
      text-align: left;
      color: rgba(0,0,0,0.5);
      line-height: 17px;
    }
    .dynamicTag-con {
      margin-top: 23px;
    }
    .radiation-type-con {
      margin-top: 32px;
      .radiation-type-item {
        font-size: 14px;
        font-family: 'PingFang, PingFang-SC';
        text-align: left;
        color: rgba(0,0,0,0.85);
        line-height: 17px;
        margin-bottom: 20px;
        cursor: pointer;
        &:hover {
          font-weight: bold;
          color: #1890ff;
        }
      }
      .radiation-type-active {
        font-weight: bold;
        color: #1890ff;
      }
    }
  }
  .radiotherapy-con-center {
    flex: 1;
    height: 100%;
    .type-scrollbar {
      height: calc(100% - 64px);
      margin: 32px 0;
    }
  }
  .radiotherapy-con-right {
    position: relative;
    width: 130px;
    height: 100%;
    background-color: #fff;
    .radiotherapy-print {
      position: absolute;
      right: 32px;
      bottom: 32px;
      z-index: 10;
      padding: 0;
      width: 65px;
      height: 32px;
      line-height: 32px;
      background: #1890ff;
      border-radius: 4px;
      font-size: 14px;
      font-family:' PingFangSC, PingFangSC-Regular';
      font-weight: 400;
      text-align: center;
      color: #ffffff;
    }
    .tab-content {
      height: 100%;
    }
  }
  .plans{
    width: 100%;
    height: 100%;
    ul:nth-child(1){
      margin-top:0;
    }
    .tag-title {
      cursor: pointer;
      span {
        font-size: 14px;
        color: #303133;
      }
      .active {
        color: #409EFF;
        font-weight: bold;
      }
    }
  }
}
</style>
