<template>
  <div class="edit-option">
    <!-- 左侧信息展示 -->
    <div class="option-left">
      <div class="msg-row" style="margin: 0 0 10px 0;font-weight: bold;">
        <div class="msg-col" style="flex: 0.32;font-size: 16px;">操作人：{{decoctInfo.operator}}</div>
        <div class="msg-col" style="font-size: 16px;">操作时间：{{decoctInfo.operatingTime}}</div>
      </div>
      <div class="common-title">就诊信息</div>
      <div class="msg-row">
        <div class="msg-col" style="flex: 0.66;">患者：{{detailInfo.name}}，{{detailInfo.sex}}，{{detailInfo.age}}岁</div>
        <div class="msg-col">电话：{{detailInfo.contactNumber}}</div>
        <div class="msg-col">就诊医院：{{detailInfo.medicalName}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col" style="flex: 0.66;">门诊/住院：
          <span v-if="detailInfo.preMzZy==1">门诊</span>
          <span v-else-if="detailInfo.preMzZy==2">住院</span>
        </div>
        <div class="msg-col">科室/病区：{{detailInfo.department}}</div>
        <div class="msg-col">病床：{{detailInfo.bedNo}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col" style="flex: 0.66;">开方医生：{{detailInfo.doctor}}</div>
        <div class="msg-col">临床诊断：{{detailInfo.disName}}</div>
        <div class="msg-col"></div>
      </div>
      <div class="common-title mt-20">
        <span>处方信息</span>
        <span style="margin-left: 20px;">处方号：{{detailInfo.preNo}}</span>
      </div>
      <div class="msg-row">
        <div class="msg-col" style="min-width:150px">处方类型：
          <span v-if="detailInfo.type==1">中药处方</span>
          <span v-else-if="detailInfo.type==2">中药制剂</span>
        </div>
        <div class="msg-col">处方状态：
          <span v-if="detailInfo.state==1">配药</span>
          <span v-else-if="detailInfo.state==2">煎药</span>
          <span v-else-if="detailInfo.state==3">发药</span>
          <span v-else-if="detailInfo.state==4">配送</span>
        </div>
        <div class="msg-col">总金额：{{detailInfo.prescriptionTotleSum}}元</div>
      </div>
      <div class="msg-row">
        <div class="msg-col" style="max-width: 90px;">剂型：
          <span v-if="detailInfo.dosageForm==1">汤剂</span>
          <span v-else-if="detailInfo.dosageForm==2">膏剂</span>
          <span v-else-if="detailInfo.dosageForm==3">丸剂</span>
          <span v-else-if="detailInfo.dosageForm==4">丹剂</span>
        </div>
        <div class="msg-col" style="max-width: 70px;">剂数：{{detailInfo.number}}</div>
        <div class="msg-col">频次：{{detailInfo.frequency}}</div>
        <div class="msg-col">处方用法：{{detailInfo.prescriptionusage}}</div>
        <div class="msg-col">服药时间：{{detailInfo.medicationTime}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col" style="min-width:150px">煎药方式：{{detailInfo.decoctingMethod}}{{detailInfo.concentration}}</div>
        <div class="msg-col">是否代煎：
          <span v-if="detailInfo.isBehalf==1">是</span>
          <span v-else-if="detailInfo.isBehalf==0">否</span>
        </div>
        <div class="msg-col">是否配送：{{detailInfo.takingMethod}}</div>
        <div class="msg-col">收货人：{{detailInfo.consignee}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col" style="min-width:150px">收货电话：{{detailInfo.contactNumber}}</div>
        <div class="msg-col" style="flex: 3.1;">收货地址：{{detailInfo.address}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col">嘱托：{{detailInfo.entrust}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col">开方医生备注：{{ detailInfo.extendedTxt }}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col">药师备注：{{ detailInfo.pharmacistsremarks }}</div>
      </div>
      <!-- 药品信息表格 -->
      <div class="msg-row">
        <div class="msg-col">
          <el-table border :data="tableData" style="width: 100%;">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="{scope, $index}">
                <span>{{ $index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="药品名称" prop="matName" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="药品规格" prop="ypggCenter" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="单位" prop="matUnitName" width="50" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="用法" prop="matUsageName" width="90" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="剂量" prop="matDose" width="50" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="零售价(元)" prop="matXsj" width="90" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="产地" prop="matOrigin" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="小计(元)" prop="subtotalMoney" width="80" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 右侧表单信息 -->
    <div class="option-right">
      <div class="common-title">浸泡信息</div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>浸泡水量：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.soakingWaterValue" type="number"></el-input>
          <span>ml</span>
        </div>
        <div class="msg-col flex-center">
          <span>浸泡时间：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.soakingTime" type="number"></el-input>
          <span>min</span>
        </div>
      </div>
      <div class="common-title mt-20">煎煮信息</div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>煎药方案：</span>
          <el-select disabled style="flex:1;" size="mini"v-model="decoctInfo.schemeId">
            <el-option :label="item.schemeName" :value="item.id" v-for="item in schemeOptions" :key="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>压力模式：</span>
          <el-select disabled size="mini" style="flex:1" v-model="decoctInfo.pressurePattern">
            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in patternOptions" :key="item.dictCode"></el-option>
          </el-select>
        </div>
        <div class="msg-col flex-center">
          <span>剂型：</span>
          <el-select disabled size="mini" style="flex:1" v-model="decoctInfo.dosageForm">
            <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in typeOptions" :key="item.dictCode"></el-option>
          </el-select>
        </div>
      </div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>前煮时间：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.decoctTime" type="number"></el-input>
          <span>min</span>
        </div>
        <div class="msg-col flex-center">
          <span>先煎时间：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.preDecoctTime" type="number"></el-input>
          <span>min</span>
        </div>
      </div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>一煎时间：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.firstDecoctTime" type="number"></el-input>
          <span>min</span>
        </div>
        <div class="msg-col flex-center">
          <span>二煎时间：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.secondDecoctTime" type="number"></el-input>
          <span>min</span>
        </div>
      </div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>后下时间：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.backDownTime" type="number"></el-input>
          <span>min</span>
        </div>
        <div class="msg-col flex-center"></div>
      </div>
      <div class="msg-row">
        <div class="msg-col">开始时间：{{decoctInfo.startTime}}</div>
        <div class="msg-col">完成时间：{{decoctInfo.endTime}}</div>
      </div>
      <div class="msg-row">
        <div class="msg-col">
          <div>设备编号：{{decoctInfo.deviceCode}}</div>
          <div>开始浓缩药量：
            <span v-if="decoctInfo.startConcentrationDose">{{decoctInfo.startConcentrationDose}}ml</span>
          </div>
          <div>结束浓缩药量：
            <span v-if="decoctInfo.endConcentrationDose">{{decoctInfo.endConcentrationDose}}ml</span>
          </div>
          <div>操作人员：{{decoctInfo.operator}}</div>
          <div>操作时间：{{decoctInfo.operatingTime}}</div>
        </div>
        <div class="msg-col">
          <el-image
            style="width: 90px; height: 90px;margin-right: 10px;"
            :src="item"
            :preview-src-list="decoctInfo.images"
            v-for="(item,index) in decoctInfo.images"
            :key="index"
          ></el-image>
        </div>
      </div>
      <div class="common-title mt-20">包装信息</div>
      <div class="msg-row">
        <div class="msg-col flex-center">
          <span>包装量：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.packageDose" type="number"></el-input>
          <span>ml</span>
        </div>
        <div class="msg-col flex-center">
          <span>包数：</span>
          <el-input disabled size="mini" style="flex:1" v-model="decoctInfo.packageNumber" type="number"></el-input>
          <span>包</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSchemeList } from "@/api/decoct/scheme";
import { getRecipeDetail, getDecoctInfo } from "@/api/decoct/recipe";
export default {
  props: {
    id: [Number, String]
  },
  data() {
    return {
      detailInfo: {},
      decoctInfo: {},
      tableData: [],
      loading: false,
      typeOptions: [], // 剂型
      schemeOptions: [],  // 煎药方案
      patternOptions: []  // 压力模式
    };
  },
  methods: {
    openDialog() {
      this.getDetail()
      this.getDecoctDetail()
      this.getSchemeList()
      this.getDicts("dosage_form").then((response) => {
        this.typeOptions = response.data;
      });
      this.getDicts("pressure_pattern").then((response) => {
        this.patternOptions = response.data;
      });
    },
    // 详情
    getDetail() {
      this.loading = true;
      getRecipeDetail({id: this.id}).then((response) => {
        this.detailInfo = response.data
        this.tableData = response.data.oralPreItemList
        this.loading = false;
      });
    },
    // 处方信息
    getDecoctDetail() {
      this.loading = true;
      getDecoctInfo({id: this.id}).then((response) => {
        this.decoctInfo = response.data
        this.loading = false;
      });
    },
    // 煎药方案列表
    getSchemeList() {
      getSchemeList().then((response) => {
        this.schemeOptions = response.rows
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-option {
  height: 650px;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .mt-20 {
    margin-top: 20px;
  }
  .option-left {
    flex: 0 0 60%;
    margin-right: 20px;
    height: 100%;
    overflow: auto;
  }

  .option-right {
    flex: 1;
  }
  .common-title {
    font-size: 16px;
    font-weight: bold;
    // color: #30b08f;
  }

  .msg-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 10px;
    .msg-col {
      flex: 1;
      margin-right: 10px;
      font-size: 14px;
    }

    .msg-col:last-child {
      margin-right: 0;
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
