<template>
  <div class="todayPatiens">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </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" placeholder="请选择" v-model="form.state">
              <el-option value label="全部"></el-option>
              <el-option value="0" label="待就诊"></el-option>
              <el-option value="1" label="已就诊"></el-option>
              <el-option value="2" label="已付款"></el-option>
              <!-- <el-option value="3" label="已退款"></el-option> -->
              <el-option value="4" label="已发药"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>姓名：</span>
          <div class="input">
            <el-input size="mini" type="text" placeholder="请输入" v-model="form.name"></el-input>
          </div>
        </div>
        <!-- <div class="screening-item flex-vertical-center-l">
                    <span>挂号：</span>
                    <div class="input">
                        <el-input type="text" placeholder="请输入" v-model="form.code"></el-input>
                    </div>
        </div>-->
        <!-- <div class="screening-item flex-vertical-center-l">
                    <span>联系方式：</span>
                    <div class="input">
                        <el-input type="text" placeholder="请输入" v-model="form.phone"></el-input>
                    </div>
        </div>-->
        <div class="screening-item flex-vertical-center-l">
          <span>身份证：</span>
          <div class="input">
            <el-input size="mini" type="text" placeholder="请输入" v-model="form.idCard"></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="clear()">
        </div>-->
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clear()">清空</el-button>
      </div>
    </div>

    <!-- 底部数据 -->
    <div class="today-data">
      <!-- <div class="today-title flex-vertical-center-l">
                <span></span>
                <div>就诊信息</div>
      </div>-->
      <div class="today-center flex-vertical-center-l">
        <!-- <div class="patiens-btn flex-vertical-center-l" >患者库
        </div>-->
        <div class="flex-vertical-center-l">
          <div class="today-accepts flex-vertical-center-l">
            <img src="../../assets/jiezhen.png" alt />
            <div class="today-ac-r">
              <div>今日接诊</div>
              <div>{{todayAccepts}}人</div>
            </div>
          </div>

          <div class="today-accepts flex-vertical-center-l">
            <img src="../../assets/jiuzhen.png" alt />
            <div class="today-ac-r">
              <div>已接诊</div>
              <div>{{isSee}}人</div>
            </div>
          </div>

          <div class="today-accepts flex-vertical-center-l">
            <img src="../../assets/fayao.png" alt />
            <div class="today-ac-r">
              <div>已发药</div>
              <div>{{sentMedicine}}人</div>
            </div>
          </div>
        </div>

        <el-button type="primary" size="mini" @click="$router.push({path:'/index/patienslist'})">患者库</el-button>
      </div>

      <div class="today-table">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height="100%"
          :row-style="tableRowClassName"
        >
          <!-- <el-table-column prop="code" label="挂号" width="200">
          </el-table-column>-->
          <el-table-column prop="createTime" width="148" label="挂号时间"></el-table-column>
          <el-table-column prop="departmentName" label="就诊科室" width="120"></el-table-column>
          <el-table-column prop="state" label="就诊状态" width="70">
            <template slot-scope="scope">
              <div
                class="jiuzhen-state"
                :style="scope.row.state==0?'color: #FF3A3A;':'color: #333333;'"
              >{{scope.row.state==0?'待就诊':scope.row.state==1?'已就诊':scope.row.state==2?'已付款':scope.row.state==3?'已退款':'已发药'}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="patientidSelsourceName" label="姓名" width="120"></el-table-column>
          <el-table-column prop="sex" label="性别" width="40">
            <template slot-scope="scope">{{scope.row.basisPatient.sex}}</template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="40">
            <template slot-scope="scope">{{scope.row.basisPatient.age}}</template>
          </el-table-column>
          <el-table-column prop="sex" label="身份证" width="154">
            <template slot-scope="scope">{{scope.row.basisPatient.idcard}}</template>
          </el-table-column>
          <el-table-column prop="address" label="患者地址">
            <template slot-scope="scope">{{scope.row.basisPatient.detailadress}}</template>
          </el-table-column>
          <el-table-column prop="state" label="操作" width="80">
            <template slot-scope="scope">
              <div
                class="find-detail find-fill"
                v-if="showJiuzhen?scope.row.state==0:false"
                @click="seeDoctors(scope)"
              >就诊</div>
              <!-- <div class="find-detail"
                                v-if="showFind?scope.row.state==1 ||scope.row.state==2 || scope.row.state==4:false"
                                @click="find(scope)">查看
              </div>-->
              <div
                class="find-detail"
                v-if="showFind?scope.row.state==1 ||scope.row.state==2 || scope.row.state==4:false"
                @click="seeDoctors(scope)"
              >就诊</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="today-page flex-center">
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>

    <pagePropup
      :showDialog="pregnancy"
      @confim="seeD()"
      @cancle="pregnancy=false"
      title="接诊"
      :confimText="radio==1?'保存':'下一步'"
    >
      <div slot="body" class="propup-body">
        <div class="form">
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">是否怀孕：</div>
            <div class="input">
              <el-radio-group v-model="radio">
                <el-radio :label="2">是</el-radio>
                <el-radio :label="1">否</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </pagePropup>
    <pagePropup :showDialog="pregnancy1" @confim="seeD1()" @cancle="pregnancy1=false" title>
      <div slot="body" class="propup-body">
        <div class="form">
          <div class="form-item flex-center">
            <span>*</span>
            <div class="item-title">是否哺乳：</div>
            <div class="input">
              <el-radio-group v-model="radio1">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </pagePropup>
  </div>
</template>
<script>
import pagePropup from "@/components/Propup.vue";
import { getList, seeDoctor, getTodayPButtonP } from "@/api/patients.js";
import { getDataByKey } from "@/api/system.js";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  components: {
    pagePropup
  },
  data() {
    return {
      pregnancy: false, // 是否怀孕弹窗
      radio: 1, // 是否怀孕结果
      pregnancy1: false, // 是否哺乳弹窗
      radio1: 2, // 是否哺乳结果
      form: {
        name: "",
        code: "",
        phone: "",
        idCard: "",
        state: ""
      },
      tableData: [],
      total: 0,
      limit: 10,
      page: 1,
      scope: {},
      todayAccepts: "0",
      isSee: "0",
      sentMedicine: "0",
      showFind: true, // 是否显示查看按钮
      showJiuzhen: true, //  是否显示接诊按钮

      routePath: "/index/diagnosis" // 配置跳转值
    };
  },
  created() {
    this.getList();
    this.getTodayPButtonP();

    setTimeout(() => {
      this.getDataByKey();
    }, 1000);
  },

  methods: {
    tableRowClassName(e) {
      let row = e.row;
      // let rowIndex = e.rowIndex
      // console.log(row)
      if (row.bg && row.bg == "green") {
        return {
          background: "#CBDAFC"
        };
      }
    },
    find(scope) {
      this.setIsSee(false);
      this.setPatients(scope.row);
      this.$router.push({
        path: this.routePath
      });
    },
    clear() {
      this.page = 1;
      this.form = {
        name: "",
        code: "",
        phone: "",
        idCard: "",
        state: ""
      };
      this.getList();
    },
    search() {
      this.page = 1;
      this.getList();
    },
    jiuzhen(scope) {
      this.setPatients(scope.row);

      this.$router.push({
        path: this.routePath
      });
    },
    sizeC(e) {
      console.log(e, "1");
      this.page = e;
      this.getList();
    },
    seeDoctors(scope) {
      this.scope = scope;
      // if (scope.row.sex == '男') {
      this.setPatients(scope.row);
      this.seeDoctor(this.scope);
console.log(this.$route.query, "this.$route.query",scope);
      if (this.$route.query && this.$route.query.isBack == "true") {
        this.$router.back();
      } else {
        this.$router.push({
          // path: '/index/diagnosis'
          path: this.routePath
        });
      }

      return;
      // }

      this.pregnancy = true;
    },
    seeD() {
      this.scope.row.isGravidity = this.radio;
      if (this.radio == 1) {
        this.setPatients(this.scope.row);
        this.seeDoctor(this.scope);
      } else {
        this.pregnancy1 = true;
      }
    },
    seeD1() {
      this.scope.row.isBreastFeeding = this.radio1;
      this.setPatients(this.scope.row);
      this.seeDoctor(this.scope);
    },
    // 获取时间
    getTime(time) {
      let D = null;
      if (time) {
        D = new Date(time);
      } else {
        D = new Date();
      }

      let year = D.getFullYear();
      let month = D.getMonth() + 1;
      let date = D.getDate();
      let hour = D.getHours();
      let min = D.getMinutes();
      let second = D.getSeconds();

      return (
        year + "-" + month + "-" + date + " " + hour + ":" + min + ":" + second
      );
    },
    async seeDoctor(scope) {
      let params = {
        recordsId: scope.row.pid
        // breastfeeding: this.radio1,

        // pregnancy: this.radio
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let res = await seeDoctor(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          message: "保存接诊记录成功",
          showClose: true,
          type: "success"
        });
        // setTimeout(() => {
        if (this.$route.query && this.$route.query.isBack == "true") {
          this.$router.back();
        } else {
          this.$router.push({
            // path: '/index/diagnosis'
            path: this.routePath
          });
          this.setIsSee(true);
        }
        // }, 2000)
      }
    },
    async getList() {
      let params = {
        page: this.page,
        limit: this.limit,
        code: this.form.code,
        patientidSelsourceName: this.form.name,
        phone: this.form.phone,
        idcard: this.form.idCard,
        state: this.form.state
      };
      let res = await getList(params);
      if (res.ResultCode == 0) {
        res.Data.Items.forEach((item, index) => {
          let nowTime = this.getTime();
          let ghTime = this.getTime(item.createTime);

          if (nowTime.split(" ")[0] === ghTime.split(" ")[0]) {
            //待就诊排序中超过中午12点的上午未就诊的患者背景颜色轻微加深，便于医生知道下午就诊从哪里开始。
            if (
              ghTime.split(" ")[1].split(":")[0] < 12 &&
              nowTime.split(" ")[1].split(":")[0] > 12 &&
              item.state == 0
            ) {
              item.bg = "green";
            }
          }
        });

        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.todayAccepts = res.Data.TodayAccepts;
        this.isSee = res.Data.isSee;
        this.sentMedicine = res.Data.sentMedicine;

        this.showFind = res.Data.ButtonRight.indexOf("view") != -1;
        this.showJiuzhen = res.Data.ButtonRight.indexOf("seeClinicToday") != -1;
      }
    },
    async getTodayPButtonP() {
      let res = await getTodayPButtonP();
    },
    // 获取页面跳转配置
    async getDataByKey() {
      let res = await getDataByKey({
        key: "diagnosisHomePage",
        organizationid: this.getuserinfo.organizationid
      });
      if (res.ResultCode == 0) {
        if (res.ResultInfo == "0") {
          this.routePath = "/index/emr";
        } else if (res.ResultInfo == "1") {
          this.routePath = "/index/dialectical";
        } else if (res.ResultInfo == "2") {
          this.routePath = "/index/prescribing";
        } else if (res.ResultInfo == "3") {
          this.routePath = "/index/doctorcaseBefore";
        }
      }
    },
    ...mapMutations({
      setPatients: "user/setPatiensInfo",
      setIsSee: "user/setIsSee"
    })
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.today-data {
  height: 73vh;
  padding: 5px 5px;
  background: #fff;
  border-radius: 5px;
  margin-top: 5px;

  .today-table {
    height: 80%;
  }

  .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;
    }
  }

  .today-center {
    margin-bottom: 5px;
    justify-content: space-between;

    .patiens-btn {
      cursor: pointer;
      width: 164px;
      height: 56px;
      background: url("../../assets/patiens-ku.png") no-repeat;
      background-size: 100%;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      padding: 0 15px;
      box-sizing: border-box;
      margin-right: 51px;
    }

    .today-accepts {
      // margin-right: 66px;
      margin-right: 30px;

      img {
        width: 36px;
        margin-right: 10px;
      }

      .today-ac-r {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;

        div:last-child {
          font-size: 16px;
          font-family: DIN Alternate;
          font-weight: bold;
          color: #333333;
          // margin-top: 12px;
          margin-left: 5px;
        }
      }
    }
  }

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

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

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

.propup-body {
  .form-item {
    margin-bottom: 20px;

    span {
      color: #ff3a3a;
      display: inline-block;
      width: 6px;
    }

    .item-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 20px;
    }

    .input {
      width: 260px;
      // height: 38px;

      .city {
        margin-right: 5px;
      }
    }
  }
}

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

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style lang="scss" scoped>
@import "../../style/media/patients/todayPatients.scss";
</style>