<template>
  <div class="recipe">
    <!-- 顶部筛选 -->
    <div class="screening">
      <!-- <div class="screening-title flex-vertical-center-l">
                <span></span>
                <div>筛选</div>
      </div>-->
      <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">
              <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 class="screening-item flex-vertical-center-l">
                        <span>就诊卡号：</span>
                        <div class="input">
                            <el-input size="mini" v-model="form.card" 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()"
                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>
          <!-- <div class="screening-item flex-vertical-center-l">
                    <span>身份证号：</span>
                    <div class="input">
                        <el-input v-model="form.idCard" placeholder="请输入"></el-input>
                    </div>

          </div>-->

          <!-- <div class="screen-btn flex-center">
                    <img src="../../assets/search.png" alt="" @click="search()">
          </div>-->
          <!-- <div class="screen-btn screen-yellow flex-center">
                    <img src="../../assets/delete.png" alt="" @click="clearFilter()">
          </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="today-table">
        <!-- stripe -->
        <el-table
          :data="tableData"
          style="width: 100%"
          @cell-mouse-leave="ghid=''"
          @cell-mouse-enter="enterM"
          :row-style="setRowStyle"
          height="100%"
        >
          <el-table-column prop="id" label="序号" width="50"></el-table-column>
          <el-table-column prop="state" label="状态" width="60">
            <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="70"></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="100">
            <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="80"></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="200">
            <template slot-scope="scope">
              <div
                class="flex-center flex-wrap"
                v-if="scope.row.revierwstate==2 || scope.row.revierwstate==3"
              >
                <div
                  class="find-detail find-fill"
                  v-if="showAudit"
                  @click="$router.push({path:`/index/recipeauditd?pid=${scope.row.patientprescriptionId}`})"
                >审核</div>
              </div>
              <div class="flex-center flex-wrap" v-else>
                <div
                  class="find-detail find-fill"
                  v-if="showAudit"
                  @click="$router.push({path:`/index/recipeauditd?pid=${scope.row.patientprescriptionId}&type=find`})"
                >查看</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>
  </div>
</template>
<script>
import Propup from "@/components/Propup.vue";
import { getRecipeList1 } from "@/api/business.js";
import {
  doctorBodySelect,
  medicalInstitution,
  getDoctorSelect
} from "@/api/city.js";
export default {
  components: {
    Propup
  },
  data() {
    return {
      showDialog: false,
      form: {
        disname: "",
        phone: "",
        icCard: "",
        card: "",
        yigongti: "",
        jigou: "",
        name: "",
        state: "",
        date: "",
        date1: "",
        doctor: ""
      },
      page: 1,
      limit: 10,
      total: 0,

      tableData: [],
      msg: {},
      doctorBody: [], // 医共体选择
      jigouList: [], // 医疗机构选择
      doctorList: [], // 医生选择
      showAudit: true,
      ghid: ""
    };
  },
  created() {
    this.getRecipeList();
    this.doctorBodySelect();
  },
  methods: {
    setRowStyle({ row, rowIndex }) {
      if (row.code == this.ghid) {
        return {
          background: "#5386F6"
        };
      }
    },
    // 表格鼠标悬浮事件
    enterM(row, column, cell, event) {
      // console.log(row, 'row');
      // console.log(column, 'col');
      // console.log(cell, 'cell');
      // console.log(event, 'e');
      this.ghid = row.code;
    },
    // 搜索按钮点击
    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();
    },
    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
      );
    },
    // 获取处方列表
    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,
        revierwstate: 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 getRecipeList1(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.showAudit =
          res.Data.ButtonRight.indexOf("4-1-outPatientReview") != -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() {
      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;
      }
    }
  }
};
</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: 5px;
  height: 68vh;

  .tips {
    font-size: 16px;
    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: 86%;
  }

  .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;
    background: #ffae45;
  }

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

  .find-fill1 {
    background: #ff6245 !important;
    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;
}
</style>
<style lang="scss" scoped>
@import "~@/style/media/business/recipeAudit.scss";
</style>