<template>
  <div class="page_doctorAdvice">
    <div class="box">
      <div class="info">
        <div class="photo">
          <img :src="patient.avatar" alt />
        </div>
        <div class="infoRight">
          <div class="rightTop">
            <span class="name">{{ patient.name }}</span>
            <span>{{ patient.sex }}</span
            >&ensp;|
            <span>{{ patient.age }}岁</span>
          </div>
          <div class="rightBottom">
            <p class="num">
              [透析号：
              <span>{{ patient.dialysis_no }}</span
              >]
            </p>
            <div class="imgList">
              <img src="../../assets/images/b1.png" alt v-show="yiShow" />
              <img src="../../assets/images/b2.png" alt v-show="meiShow" />
              <img src="../../assets/images/b3.png" alt v-show="bingShow" />
              <img src="../../assets/images/b4.png" alt v-show="aiShow" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <el-input
        placeholder="请输入标题"
        prefix-icon="el-icon-search"
        v-model="searchVal"
        v-on:input="watchNum"
      ></el-input>
    </div>
    <div class="time">
      <van-cell @click="showPopup(1)">
        {{ startTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          @cancel="show1 = false"
          @confirm="chooseStartTime"
        />
      </van-popup>
      <div class="line">-</div>
      <van-cell @click="showPopup(2)">
        {{ endTime }}
        <van-icon name="arrow-down" />
      </van-cell>
      <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          @cancel="show2 = false"
          @confirm="chooseEndTime"
        />
      </van-popup>
    </div>
    <div class="statOrder">
      <div
        class="statOrderOne"
        v-for="(item, index) in this.doctorContent"
        :key="item.id"
      >
        <van-swipe-cell>
          <van-cell :border="false" icon="arrow-down">
            <template>
              <div class="custom-title">{{ RecordTime(item.record_time) }}</div>
            </template>
            <van-icon
              slot="right-icon"
              name="ellipsis"
              style="line-height: inherit;"
              @click="onClick(2)"
            />
          </van-cell>
          <template slot="right">
            <van-button
              square
              type="danger"
              text="删除"
              @click="toDeleteCouseManage(item.id, item.org_id, index)"
            />
          </template>
        </van-swipe-cell>
        <van-action-sheet
          v-model="show3"
          :actions="actions"
          cancel-text="取消"
          @select="toDeleteCouseManagetwo(item.id)"
        ></van-action-sheet>
        <div class="msg">
          <span>{{ item.title }}</span>
          <p>
            <span v-html="item.content"></span>
          </p>
          <div class="doctorAll">
            <div class="doctor">
              <span>开嘱医生:</span>
              <span class="marginLeft">{{ item.user_name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="add">
      <img src="../../assets/images/add4.png" alt />
    </div>
  </div>
</template>

<script>
const moment = require("moment");
import {
  getCourseManagement,
  toDeleteCouseManage,
  toSeacherCourseManagement
} from "@/api/patient/patient";
import { uParseTime } from "@/utils/tools";
export default {
  data() {
    return {
      searchVal: "",
      startTime: moment(new Date()).format("YYYY-MM-DD"),
      endTime: moment(new Date()).format("YYYY-MM-DD"),
      show1: false,
      show2: false,
      currentDate1: new Date(),
      currentDate2: new Date(),
      show3: false,
      actions: [{ name: "编辑" }, { name: "删除" }],
      patient: {
        name: "",
        age: "",
        dialysis_no: "",
        sex: "",
        avatar: ""
      },
      doctorContent: [],
      yiShow: false,
      meiShow: false,
      bingShow: false,
      aiShow: false
    };
  },
  methods: {
    showPopup(index) {
      if (index === 1) {
        this.show1 = true;
      } else if (index === 2) {
        this.show2 = true;
      }
    },
    chooseStartTime(value) {
      this.startTime = moment(value).format("YYYY-MM-DD");
      var patientid = this.$route.query.patientid;

      var orgid = this.$route.query.orgid;

      this.getCourseManagement(patientid, orgid, this.startTime);
      this.show1 = false;
    },
    chooseEndTime(value) {
      this.endTime = moment(value).format("YYYY-MM-DD");
      var patientid = this.$route.query.patientid;

      var orgid = this.$route.query.orgid;

      this.getCourseManagement(patientid, orgid, this.endTime);
      this.show2 = false;
    },
    onClick(index) {
      if (index === 1) {
        this.show3 = true;
      } else if (index === 2) {
        this.show3 = true;
      }
    },
    getCourseManagement(patientid, orgid) {
      getCourseManagement(patientid, orgid, this.startTime, this.endTime).then(
        response => {
          if (response.data.state === 1) {
            var patientCourse = response.data.data.patientCourse;

            this.doctorContent = patientCourse;
            var patients = response.data.data.patients;

            this.patient.name = patients.name;
            this.patient.age = patients.age;
            this.patient.dialysis_no = patients.dialysis_no;
            this.patient.avatar = patients.avatar;
            var infectious = response.data.data.infectious;
            for (let index = 0; index < infectious.length; index++) {
              if (infectious[index].disease_id === 2) {
                this.yiShow = true;
              }

              if (infectious[index].disease_id === 3) {
                this.bingShow = true;
              }

              if (infectious[index].disease_id === 4) {
                this.aiShow = true;
              }

              if (infectious[index].disease_id === 6) {
                this.meiShow = true;
              }
            }

            if (patients.gender === 1) {
              this.patient.sex === "男";
            }
            if (patients.gender === 2) {
              this.patient.sex === "女";
            }
          }
        }
      );
    },
    RecordTime(time) {
      // return uParseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      return uParseTime(time, "{y}-{m}-{d}");
    },
    toDeleteCouseManage(id, orgid, index) {
      this.$confirm("确认要删除吗?删除后信息将无法恢复", "删除提示!", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        toDeleteCouseManage(id, orgid).then(response => {
          if (response.data.state === 1) {
            var msg = response.data.data.msg;

            this.doctorContent.splice(index, 1);
          }
        });
      });
    },
    toDeleteCouseManagetwo(id) {
      console.log("id", id);
    },
    watchNum() {
      var patientid = this.$route.query.patientid;

      var orgid = this.$route.query.orgid;
      toSeacherCourseManagement(patientid, orgid, this.searchVal).then(
        response => {
          if (response.data.state === 1) {
            var patientCourse = response.data.data.patientCourse;

            this.doctorContent = patientCourse;
          }
        }
      );
    }
  },
  created() {
    var patientid = this.$route.query.patientid;
    var orgid = this.$route.query.orgid;
    this.getCourseManagement(patientid, orgid);
  }
};
</script>

<style lang="scss">
.page_doctorAdvice {
  overflow: hidden;
  height: 100%;
  overflow-y: auto;
  .box {
    width: 100%;
    height: 9.1875rem;
    background: #fcfcfc;
    padding-top: 1.25rem;
    box-sizing: border-box;
  }
  .info {
    width: 21.375rem;
    height: 6.1875rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    margin: 0 auto;
    box-shadow: 0px 2px 12px 0px #f5f5f5;
    .photo {
      float: left;
      width: 3.75rem;
      height: 3.75rem;
      margin: 1.125rem 1rem 0 1.125rem;
      img {
        width: 100%;
      }
    }
    .infoRight {
      float: left;
      padding-top: 1.625rem;
      box-sizing: border-box;
      .rightTop {
        margin-bottom: 0.75rem;
      }
      .name {
        font-size: 1.0625rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-right: 1rem;
      }
      span {
        font-size: 0.875rem;
        color: rgba(60, 60, 60, 1);
      }
      .rightBottom {
        height: 1.4375rem;
        line-height: 1.4375rem;
        .num {
          float: left;
          font-size: 0.875rem;
          color: rgba(60, 60, 60, 1);
        }
        .imgList {
          float: left;
          margin-left: 0.875rem;
          img {
            width: 1.4375rem;
            height: 1.4375rem;
            margin: 0 0.125rem;
          }
        }
      }
    }
  }
  .search {
    width: 21.375rem;
    height: 2.125rem;
    background: rgba(244, 244, 244, 1);
    border-radius: 17px;
    margin: 0 auto;
    .el-input__inner {
      height: 2.125rem;
      line-height: 2.125rem;
      border: none;
      background: rgba(244, 244, 244, 1);
      border-radius: 17px;
      padding-left: 2.5rem;
      color: rgba(155, 155, 155, 1);
      font-size: 0.9375rem;
    }
    .el-input__prefix {
      margin-top: 0.0625rem;
      font-size: 1.25rem;
    }
    .el-input__icon {
      line-height: 2.125rem;
    }
  }
  .time {
    color: #9b9b9b;
    margin-left: 1rem;
    margin-top: 0.75rem;
    width: 342px;
    // height:2.125rem;
    overflow: hidden;
    .van-cell {
      width: 8.5rem;
      height: 2.125rem;
      line-height: 2.125rem;
      background: #f4f4f4;
      border-radius: 17px;
      margin-bottom: 0.75rem;
      padding: 0 1rem;
      font-size: 0.875rem;
      float: left;
      .van-icon-arrow-down {
        float: right;
        line-height: 2.125rem;
      }
    }
    .line {
      float: left;
      line-height: 2.125rem;
    }
  }
  .statOrder {
    width: 21.5625rem;
    margin: 0 auto;
    .statOrderOne {
      // margin-bottom: 1.25rem;
      border-top: 1px dashed #e6e6e6;
      border-bottom: 1px dashed #e6e6e6;
    }
    .van-cell {
      padding: 0.625rem 0.375rem;
    }
    .van-cell__value {
      span {
        float: right;
        width: 4.5625rem;
        height: 1.875rem;
        background: rgba(81, 119, 238, 0.2);
        border-radius: 15px;
        color: #5177ee;
        text-align: center;
        line-height: 1.875rem;
        margin-left: 8.75rem;
      }
    }
    // .edit {
    //   float: right;
    //   width: 4.5625rem;
    //   height: 1.875rem;
    //   background: rgba(81, 119, 238, 0.2);
    //   border-radius: 15px;
    //   color: #5177ee;
    //   text-align: center;
    //   line-height: 1.875rem;
    //   margin-left: 8.75rem;
    // }
    // .title {
    //   border-top: 1px solid #e6e6e6;
    //   display: flex;
    //   height: 3.125rem;
    //   align-items: center;
    // }
    // .el-icon-arrow-down {
    //   margin-left: 0.5rem;
    // }
    // .year {
    //   margin-left: 0.625rem;
    //   font-size: 0.9375rem;
    //   font-weight: 600;
    //   color: rgba(0, 0, 0, 1);
    // }
    .msg {
      font-size: 0.75rem;
      color: rgba(60, 60, 60, 1);
      font-weight: 600;
      // padding-top: 0.75rem;
      padding-bottom: 1rem;
      // border-top: 1px dashed #e6e6e6;
      span {
        margin-left: 0.375rem;
      }
      p {
        font-size: 0.875rem;
        margin: 0.625rem 0;
        line-height: 1rem;
        color: rgba(0, 0, 0, 1);
      }
    }
    .doctorAll {
      display: flex;
      justify-content: space-between;
      margin-top: 0.25rem;
      font-size: 0.75rem;
      font-weight: 400;
      .doctor {
        float: left;
      }
      span {
        color: rgba(155, 155, 155, 1);
      }
      .marginLeft {
        margin-left: 0.375rem;
      }
    }

    .el-collapse-item__content {
      padding-bottom: 1rem;
    }
    .el-collapse {
      border-top: none;
    }
    .none {
      padding-bottom: 0;
    }
  }
  .add {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 9px 0px rgba(7, 30, 102, 0.15);
    border-radius: 50%;
    position: fixed;
    right: 1.125rem;
    bottom: 4.25rem;
    img {
      width: 100%;
    }
  }
}
</style>
