<template>
  <div class="recipe">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div style="flex:1">
        <div class="screening-form flex-vertical-center-l flex-wrap">
          <div class="screening-item flex-vertical-center-l">
            <span>就诊日期：</span>
            <div class="input flex-vertical-center-l" style="width:390px;">
              <el-date-picker
                size="mini"
                v-model="form.date"
                type="datetime"
                placeholder="开始时间"
                align="right"
              ></el-date-picker>-
              <el-date-picker
                size="mini"
                v-model="form.date1"
                type="datetime"
                placeholder="结束时间"
                align="right"
              ></el-date-picker>
              <!-- <el-date-picker type="date" placeholder="开始时间" v-model="form.date" style="width: 100%;">
                        </el-date-picker>-
                        <el-date-picker type="date" placeholder="结束时间" v-model="form.date1" style="width: 100%;">
              </el-date-picker>-->
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>支付状态：</span>
            <div class="input">
              <el-select size="mini" placeholder="请选择支付状态" v-model="form.state">
                <el-option label="已支付" value="1"></el-option>
                <el-option label="未支付" value="0"></el-option>
                <el-option label="已作废" value="2"></el-option>
              </el-select>
            </div>
          </div>

          <div class="screening-item flex-vertical-center-l">
            <span>病人姓名：</span>
            <div class="input">
              <el-input size="mini" v-model="form.name" placeholder="请输入病人姓名"></el-input>
            </div>
          </div>
        </div>
        <div class="screening-form flex-vertical-center-l flex-wrap">
          <div class="screening-item flex-vertical-center-l">
            <span>医共体：</span>
            <div class="input">
              <el-select
                size="mini"
                @change="medicalInstitution(form.yigongti)"
                placeholder="请选择医共体"
                v-model="form.yigongti"
              >
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in doctorBody"
                  :key="index"
                ></el-option>
                <!-- <el-option label="黑十字会" value="1"></el-option> -->
              </el-select>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>医疗机构：</span>
            <div class="input">
              <el-select
                size="mini"
                placeholder="请选择"
                v-model="form.jigou"
                @change="getDoctorSelect()"
              >
                <el-option
                  :label="item.name"
                  :value="item.pid"
                  v-for="(item,index) in jigouList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="screening-item flex-vertical-center-l">
            <span>开方医生：</span>
            <div class="input">
              <el-select size="mini" placeholder="请选择" v-model="form.doctor">
                <el-option
                  :label="item.userName"
                  :value="item.userPid"
                  v-for="(item,index) in doctorList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </div>

          <el-button type="primary" size="mini" @click="search()">搜索</el-button>
          <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
        </div>
      </div>
    </div>

    <!-- 底部数据展示 -->
    <div class="today-data">
      <!-- <div class=" flex-vertical-between">
                <div class="today-title flex-vertical-center-l">
                    <span></span>
                    <div>处方列表</div>
                </div>
                
      </div>-->
      <div class="tips">
        已支付金额：
        <span>{{msg.isPrice}}元</span> 未支付金额：
        <span>{{msg.notPrice}}元</span>
        总金额：
        <span>{{msg.awaysPrice}}元</span>
      </div>

      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" height="100%">
          <el-table-column prop="id" label="序号" width="50"></el-table-column>
          <el-table-column prop="state" label="状态" width="70">
            <template
              slot-scope="scope"
            >{{scope.row.paystate==0?'未支付':scope.row.paystate==1?'已支付':scope.row.paystate==2?'已作废':'已作废'}}</template>
          </el-table-column>
          <el-table-column prop="revierwstate" label="审核状态" width="80">
            <template
              slot-scope="scope"
            >{{scope.row.revierwstate==0?'通过':scope.row.revierwstate==1?'未通过':scope.row.revierwstate==2?'审核中':scope.row.revierwstate==3?'再审核':''}}</template>
          </el-table-column>
          <el-table-column prop="recordstime" label="就诊日期"></el-table-column>
          <el-table-column prop="name" label="姓名" width="85"></el-table-column>
          <el-table-column prop="disease" label="诊断">
            <template slot-scope="scope">
              {{scope.row.namemedicine?scope.row.namemedicine:scope.row.diagnosis}}
              <span
                v-if="scope.row.namemedicine"
              >-{{scope.row.syndrometypes}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="处方类型" width="95">
            <template
              slot-scope="scope"
            >{{scope.row.type=='0'?'中药处方':scope.row.type=='1'?'中药制剂':'适宜技术处方'}}</template>
          </el-table-column>

          <!-- <el-table-column prop="detail" label="明细" width="170">
          </el-table-column>-->
          <el-table-column prop="allPrice" label="处方金额" width="70"></el-table-column>
          <el-table-column prop="code" label="挂号ID"></el-table-column>
          <el-table-column prop="patientprescriptionId" label="处方ID"></el-table-column>
          <!-- <el-table-column prop="seeclinicnum" label="就诊卡号">
          </el-table-column>-->
          <el-table-column prop="price" label="操作" width="140">
            <template slot-scope="scope">
              <div class="flex-vertical-between flex-wrap">
                <div
                  class="find-detail find-fill"
                  @click="$router.push({path:'/index/prescribing?recipeID='+scope.row.patientprescriptionId})"
                  v-if="showZuan"
                >转方</div>
                <div v-if="showPay">
                  <div v-if="scope.row.revierwstate=='0'">
                    <div class="find-detail" @click="toPay(scope)" v-if="scope.row.paystate=='0'">支付</div>
                  </div>
                </div>
                <div
                  class="find-detail find-fill1"
                  @click="invalid(scope)"
                  :style="scope.row.paystate==2?'background:#C1C1C1; border: 1px solid #C1C1C1;':''"
                  v-if="scope.row.revierwstate==0 && scope.row.paystate==0"
                >{{scope.row.paystate==2?'已作废':'作废'}}</div>
                <div class="find-detail find-fill2" v-if="showFind" @click="openDetailPopup(scope)">
                  查看
                  <!-- $router.push({path:'/index/reciped?pid='+scope.row.patientprescriptionId}) -->
                </div>
                <div
                  class="find-detail find-fill2"
                  v-if="scope.row.revierwstate==1"
                  @click="editRecipt(scope)"
                >修改</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="today-page flex-vertical-center-r">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <Propup :showDialog="showDialog" @cancle="closePopup" title="支付" confimText>
      <div slot="body" class="pay-body">
        <!-- <div class="pay-item flex-center">
                    <span>病人姓名：</span>
                    <div class="input">
                        <el-input v-model="diaForm.name" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div class="pay-item flex-center">
                    <span>挂号：</span>
                    <div class="input">
                        <el-input v-model="diaForm.guahao" placeholder="请输入"></el-input>
                    </div>
                </div>
                <div class="pay-item flex-center">
                    <span>处方类型：</span>
                    <div class="input">
                        <el-input v-model="diaForm.type" placeholder="请输入"></el-input>
                    </div>
        </div>-->
        <div class="bottom-msg flex-vertical-between flex-wrap" v-if="msgPay.patientprescription">
          <div class="msg-item">
            <span class="span1">处方金额</span>
            <span class="span2">{{msgPay.patientprescription.thisRecipePrice}}元</span>
          </div>
          <div class="msg-item">
            <span class="span1">代煎金额</span>
            <span
              class="span2"
            >{{msgPay.patientprescription.friedfree?msgPay.patientprescription.friedfree:0}}元</span>
          </div>
          <div class="msg-item">
            <span class="span1">治疗费</span>
            <span class="span2">{{0}}元</span>
          </div>
          <div class="msg-item">
            <span class="span1">制膏费</span>
            <span
              class="span2"
            >{{msgPay.patientprescription.markfree?msgPay.patientprescription.markfree:0}}元</span>
          </div>
          <div class="msg-item">
            <span class="span1">调配费</span>
            <span
              class="span2"
            >{{msgPay.patientprescription.deploymentfree?msgPay.patientprescription.deploymentfree:0}}元</span>
          </div>
          <div class="msg-item">
            <span class="span1">配送费</span>
            <span
              class="span2"
            >{{msgPay.patientprescription.isdelivery?msgPay.patientprescription.isdelivery:0}}元</span>
          </div>
        </div>

        <div class="total-money flex-vertical-center-l" v-if="msgPay.total">
          <span>总金额</span>
          <div>{{msgPay.total.toFixed(2)}}元</div>
          <!-- <div>{{msgPay.patientprescription.allprice}}</div> -->
        </div>
        <div class="total-money flex-vertical-center-l">
          <span>支付方式</span>
          <p>微信</p>
        </div>
        <!-- 二维码 -->
        <div class="qr-code flex-center flex-column">
          <img :src="payMsg" alt />
          <span>使用微信扫一扫</span>
        </div>
      </div>
    </Propup>

    <!-- 详情弹窗 -->
    <div
      class="recipe-detail flex flex-col-center flex-row-center"
      v-if="showDetail"
      @click.self="closeDetailPopup"
    >
      <div class="recipe-pad">
        <div class id="reciped" v-if="recipeItem.type==0">
          <chinesepad :recipeData="chineseData"></chinesepad>
        </div>

        <div class id="reciped" v-if="recipeItem.type==1">
          <chineseMadepad :recipeData="chineseMadeData"></chineseMadepad>
        </div>

        <div class id="reciped" v-if="recipeItem.type==2">
          <suitPad :recipeData="suitData"></suitPad>
        </div>

        <div
          class="turn flex flex-col-center flex-row-center"
          @click="trunRecipe(recipeItem.patientprescriptionId)"
        >
          <span>转方</span>
        </div>

        <div class="print flex flex-col-center flex-row-center" v-print="'#reciped'">
          <span>打印</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Propup from "@/components/Propup.vue";
import chinesepad from "@/components/ui/chineseMedicinePad.vue";
import chineseMadepad from "@/components/ui/chineseMadePad.vue";
import suitPad from "@/components/ui/suitMadePad.vue";
import {
  getRecipeList,
  changeRecipeS,
  getRecipeDMsg,
  getWxPayCode,
  getOrderState
} from "@/api/business.js";
import {
  doctorBodySelect,
  medicalInstitution,
  getDoctorSelect
} from "@/api/city.js";
import { setInterval, clearInterval } from "timers";
import { mapMutations } from "vuex";
import {
  getChinesePadDetail,
  getChineseMadePad,
  getSuitMadePad
} from "@/api/standard";
export default {
  components: {
    Propup,
    chinesepad,
    chineseMadepad,
    suitPad
  },
  data() {
    return {
      showDialog: false,
      form: {
        disname: "",
        phone: "",
        icCard: "",
        card: "",
        yigongti: "",
        jigou: "",
        name: "",
        state: "",
        date: "",
        date1: "",
        doctor: ""
      },
      diaForm: {
        type: "",
        guahao: "",
        name: ""
      },
      page: 1,
      limit: 10,
      total: 0,

      tableData: [],
      msg: {},
      doctorBody: [], // 医共体选择
      jigouList: [], // 医疗机构选择
      doctorList: [], // 医生选择
      showZuan: true,
      showPay: true,
      showInvalid: true,
      showFind: true,
      payMsg: "",
      msgPay: {},
      timer: null,

      listTimer: null,
      suitData: {},
      chineseData: {},
      chineseMadeData: {},
      recipeItem: {}, // 点击的详情,.
      showDetail: false
    };
  },
  created() {
    this.getRecipeList();
    this.doctorBodySelect();

    this.listTimer = setInterval(() => {
      this.getRecipeList();
    }, 5000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.listTimer);
  },
  methods: {
    editRecipt(scope) {
      if (!scope.row.outpatientRecords) {
        this.$message.warning("当前处方已过期");
        return;
      }
      this.setPatients(scope.row.outpatientRecords);
      this.$router.push({
        path:
          "/index/prescribing?recipeID=" +
          scope.row.patientprescriptionId +
          "&recipeType=edit&recordsId=" +
          scope.row.recordsId
      });
    },

    closePopup() {
      clearInterval(this.timer);
      this.showDialog = false;
    },
    toPay(scope) {
      this.payMsg =
        process.env.VUE_APP_BASE_API +
        "outpatient/pay/WxNativepay?PID=" +
        scope.row.patientprescriptionId;
      // this.getWxPayCode(scope.row.patientprescriptionId)
      this.getRecipeDMsg(scope.row.patientprescriptionId);

      this.timer = setInterval(() => {
        this.getOrderState(scope.row.patientprescriptionId);
      }, 5000);
      this.showDialog = true;
    },
    // 搜索按钮点击
    search() {
      this.page = 1;
      this.getRecipeList();
    },
    // 清空按钮点击
    clearFilter() {
      this.form = {
        disname: "",
        phone: "",
        icCard: "",
        card: "",
        yigongti: "",
        jigou: "",
        name: "",
        state: "",
        date: "",
        date1: "",
        doctor: ""
      };
      this.jigouList = [];
      this.doctorList = [];
      this.page = 1;
      this.getRecipeList();
    },
    // 处方作废
    invalid(scope) {
      if (scope.row.paystate == 2) return;
      this.$confirm("确定要作废当前处方吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.changeRecipeS(scope.row.patientprescriptionId);
        })
        .catch(() => {});
    },
    sizeC(e) {
      this.page = e;
      this.getRecipeList();
    },
    formatTime(date) {
      if (date == "") return;
      let newDate = new Date(date);
      let year = newDate.getFullYear();
      let month =
        newDate.getMonth() + 1 < 10
          ? "0" + (newDate.getMonth() + 1)
          : newDate.getMonth() + 1;
      let day =
        newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate();

      let hour =
        newDate.getHours() < 10 ? "0" + newDate.getHours() : newDate.getHours();
      let min =
        newDate.getMinutes() < 10
          ? "0" + newDate.getMinutes()
          : newDate.getMinutes();
      let seconds =
        newDate.getSeconds() < 10
          ? "0" + newDate.getSeconds()
          : newDate.getSeconds();

      return (
        year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + seconds
      );
    },
    // 打开详情弹窗
    openDetailPopup(scope) {
      console.log(scope.row, "当前处方item");
      let item = scope.row;
      this.recipeItem = scope.row;
      if (item.type == 0) {
        this._getChinesePadDetail(item.patientprescriptionId);
      }

      if (item.type == 1) {
        this._getChineseMadePad(item.patientprescriptionId);
      }

      if (item.type == 2) {
        this._getSuitMadePad(item.patientprescriptionId);
      }
    },
    closeDetailPopup() {
      this.showDetail = false;
      this.recipeItem = {};
    },
    // 转方
    trunRecipe(id) {
      this.$router.push({
        path: "/index/prescribing?recipeID=" + id
      });
    },
    // 获取处方列表
    async getRecipeList() {
      let params = {
        diseaseName: this.form.disname,
        doctorId: this.form.doctor,
        endTime: this.formatTime(this.form.date1),
        idCard: this.form.icCard,
        organizationId: this.form.yigongti,
        patientName: this.form.name,
        phone: this.form.phone,
        paystate: this.form.state,
        seeclinicnum: this.form.card,
        startTime: this.formatTime(this.form.date),
        stitutionsId: this.form.jigou,
        page: this.page,
        limit: 10
      };
      let res = await getRecipeList(params);
      if (res.ResultCode == 0) {
        this.total = res.Data.TotalRecordCount;
        this.tableData = res.Data.Items;
        this.tableData.filter((item, index) => {
          if (this.page > 1) {
            if (index == 9) {
              return (item.id = this.page + String(0));
            }
            return (item.id = this.page - 1 + String(index + 1));
          } else {
            return (item.id = index + 1);
          }
        });

        this.showZuan = res.Data.ButtonRight.indexOf("add") != -1;
        this.showPay = res.Data.ButtonRight.indexOf("edit") != -1;
        this.showInvalid = res.Data.ButtonRight.indexOf("del") != -1;
        this.showFind = res.Data.ButtonRight.indexOf("view") != -1;

        this.msg = {
          awaysPrice: res.Data.awaysPrice,
          notPrice: res.Data.notPrice,
          isPrice: res.Data.isPrice
        };
      }
    },
    // 获取医共体选择器数据
    async doctorBodySelect() {
      let res = await doctorBodySelect();
      if (res.ResultCode == 0) {
        this.doctorBody = res.Data;
      }
    },
    async medicalInstitution(id) {
      let res = await medicalInstitution({
        organizationId: this.form.yigongti
      });
      if (res.ResultCode == 0) {
        this.jigouList = res.Data;
      }
    },
    // 开方医生
    async getDoctorSelect() {
      let res = await getDoctorSelect({
        stitutionsId: this.form.jigou
      });
      if (res.ResultCode == 0) {
        this.doctorList = res.Data;
      }
    },
    // 作废当前处方
    async changeRecipeS(id) {
      let params = {
        pid: id,
        paystate: "2"
      };
      const loading = this.$loading({
        lock: true,
        text: "正在修改",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await changeRecipeS(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success"
        });

        this.getRecipeList();
      }
    },
    // 获取当前处方详情
    async getRecipeDMsg(id) {
      let res = await getRecipeDMsg(id);
      if (res.ResultCode == 0) {
        this.msgPay = res.Data;
        this.msgPay.total =
          this.msgPay.patientprescription.thisRecipePrice +
          this.msgPay.patientprescription.markfree +
          this.msgPay.patientprescription.deploymentfree +
          this.msgPay.patientprescription.friedfree;
        if (res.Data.patientprescription.isdelivery == 0) {
          this.msgPay.total =
            this.msgPay.total + res.Data.patientprescription.deliveryfree;
        }
      }
    },
    // 获取订单支付状态
    async getOrderState(id) {
      let res = await getOrderState({
        PID: id
      });
      if (res.ResultCode == 0) {
        if (res.ResultInfo == "1") {
          // 已经支付
          clearInterval(this.timer);
          this.getRecipeList();
          this.showDialog = false;
          this.$message.success("支付成功");
          this.setPatients({});
          // this.$router.replace('/index/todaypatients')
        }
      }
    },
    // 中药处方笺数据
    async _getChinesePadDetail(id) {
      const loading = this.$loading({
        lock: true,
        text: "正在加载处方笺数据,请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await getChinesePadDetail({
        pid: id
      }).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.chineseData = res.Data;
        this.showDetail = true;
      }
    },
    // 中药制剂处方笺
    async _getChineseMadePad(id) {
      const loading = this.$loading({
        lock: true,
        text: "正在加载处方笺数据,请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await getChineseMadePad({
        pid: id
      }).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.chineseMadeData = res.Data;
        this.showDetail = true;
      }
    },
    // 适宜技术处方笺
    async _getSuitMadePad(id) {
      const loading = this.$loading({
        lock: true,
        text: "正在加载处方笺数据,请稍后",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await getSuitMadePad({
        pid: id
      }).catch(err => {
        loading.close();
      });

      if (res.ResultCode == 0) {
        loading.close();
        this.suitData = res.Data;
        this.showDetail = true;
      }
    },
    ...mapMutations({
      setPatients: "user/setPatiensInfo"
    })
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.today-data {
  padding: 5px 5px;
  background: #fff;
  border-radius: 5px;
  margin-top: 10px;
  height: 67vh;
  overflow: auto;

  .tips {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;

    span {
      color: #ff3a3a;
    }
  }

  .today-title {
    margin-bottom: 22px;

    span {
      display: inline-block;
      width: 3px;
      height: 14px;
      background: #5386f6;
      border-radius: 1px;
      margin-right: 14px;
    }

    div {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #5386f6;
    }
  }

  .jiandang {
    width: 112px;
    height: 54px;
    background: url("../../assets/jiandang.png") no-repeat;
    background-position: center;
    background-size: 100%;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
  }

  .today-table {
    margin-top: 18px;
    height: 79%;
  }

  .find-detail {
    width: 60px;
    height: 24px;
    border: 1px solid #ffae45;
    border-radius: 2px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    // margin: 0 auto;
    margin: 2.5px 0;
    background: #ffae45;
  }

  .find-fill {
    background: #5386f6 !important;
    color: #fff !important;
    border: 1px solid #5386f6;
  }

  .find-fill1 {
    background: #ff6245;
    color: #fff !important;
    border: 1px solid #ff6245;
  }

  .find-fill2 {
    background: #68a8ff !important;
    color: #fff !important;
    border: 1px solid #68a8ff;
  }

  .today-page {
    margin-top: 10px;
  }
}

.pay-body {
  .pay-item {
    margin-bottom: 20px;

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      display: inline-block;
      width: 80px;
      text-align: right;
    }

    .input {
      width: 260px;
    }
  }

  .bottom-msg {
    width: 360px;
    margin: 0 auto;

    .msg-item {
      margin-right: 20px;
      margin-bottom: 20px;

      .span1 {
        display: inline-block;
        width: 70px;
        // height: 16px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-right: 10px;
      }

      .span2 {
        height: 13px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .total-money {
    width: 360px;
    margin: 0 auto 10px;

    span {
      display: inline-block;
      width: 70px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 10px;
    }

    div {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ff3a3a;
    }

    p {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }

  .qr-code {
    img {
      width: 84px;
      height: 84px;
    }

    span {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }
}

.today-table::v-deep .el-table .cell {
  text-align: center;
}

.recipe-detail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 99;

  .recipe-pad {
    width: 420px;
    // max-height: 80vh;
    // background: red;
    position: relative;

    .turn {
      background: #5386f6;
      color: #fff;
      font-size: 14px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 50%;
      position: absolute;
      right: -50px;
      bottom: 50px;
    }

    .print {
      background: #fff;
      color: #5386f6;
      font-size: 14px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 50%;
      position: absolute;
      right: -50px;
      bottom: 0px;
    }
  }
}
</style>

<style lang="scss" scoped>
@import "~@/style/media/business/recipe.scss";
</style>