<template>
  <div class="page_doctorAdvice">
    <div class="box">
      <div class="info">
        <div class="photo">
          <img src="../../assets/images/one.jpg" alt />
        </div>
        <div class="infoRight">
          <div class="rightTop">
            <span class="name">小小包</span>
            <span>男</span>&ensp;|
            <span>34岁</span>
          </div>
          <div class="rightBottom">
            <p class="num">
              [透析号：
              <span>001</span>]
            </p>
            <div class="imgList">
              <img src="../../assets/images/b1.png" alt />
              <img src="../../assets/images/b2.png" alt />
              <img src="../../assets/images/b3.png" alt />
              <img src="../../assets/images/b4.png" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="search">
      <el-input
        placeholder="输入医嘱内容"
        prefix-icon="el-icon-search"
        v-model="searchVal"
      ></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>
      <van-cell @click="showPopup(3)">
        {{ projectVal }}
        <van-icon name="arrow-down" />
      </van-cell>

      <van-popup v-model="show3" position="bottom" :style="{ height: '50%' }">
        <van-picker
          :columns="columns"
          show-toolbar
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <div class="statOrder">
      <el-collapse accordion @change="change">
        <div v-for="item in this.checkRecord" :key="item.id">
          <van-swipe-cell>
            <van-cell :border="false">
              <template>
                <div class="custom-title">
                  {{ RecordTime(item.inspect_date) }}
                </div>
              </template>
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <van-icon
                slot="right-icon"
                name="ellipsis"
                style="line-height: inherit;"
                @click="
                  onClick(1, item.inspect_date, item.patient_id, item.org_id)
                "
              />
            </van-cell>
            <template slot="right">
              <van-button square type="danger" text="删除" />
            </template>
          </van-swipe-cell>

          <van-action-sheet
            v-model="show4"
            :actions="actions"
            cancel-text="取消"
            @select="ckeckAll"
          ></van-action-sheet>

          <div class="msg">
            <div class="msgTitle">
              <ul>
                <li></li>
                <li></li>
              </ul>
            </div>
          </div>
        </div>
      </el-collapse>
    </div>
    <div class="add">
      <img src="../../assets/images/add3.png" alt />
    </div>
  </div>
</template>

<script>
const moment = require("moment");
import { getcheckPatientData } 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,
      show3: false,
      currentDate1: new Date(),
      currentDate2: new Date(),
      projectVal: "检查项目",
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      show4: false,
      actions: [{ name: "查看所有检查" }, { name: "删除" }],
      checkRecord: [],
      inspect_date: "",
      patientid: "",
      orgid: ""
    };
  },
  methods: {
    change() {
      this.isShow = !this.isShow;
    },
    showPopup(index) {
      if (index === 1) {
        this.show1 = true;
      } else if (index === 2) {
        this.show2 = true;
      } else if (index === 3) {
        this.show3 = true;
      }
    },
    chooseStartTime(value) {
      this.startTime = moment(value).format("YYYY-MM-DD");
      this.show1 = false;
      var patientid = this.$route.query.patientid;
      var orgid = this.$route.query.orgid;
      this.getcheckPatientData(patientid, orgid, this.startTime);
    },
    chooseEndTime(value) {
      this.endTime = moment(value).format("YYYY-MM-DD");
      this.show2 = false;
      var patientid = this.$route.query.patientid;
      var orgid = this.$route.query.orgid;
      this.getcheckPatientData(patientid, orgid, this.endTime);
    },
    onCancel() {
      this.show3 = false;
    },
    onConfirm(value) {
      this.projectVal = value;
      this.show3 = false;
    },
    onClick(index, date, patientid, orgid) {
      this.inspect_date = date;
      this.patientid = patientid;
      this.orgid = orgid;
      if (index === 1) {
        this.show4 = true;
      } else if (index === 2) {
        this.show4 = true;
      }
    },
    ckeckAll(item, index) {
      if (index === 0) {
        this.$router.push(
          "/allCheck?inspect_date=" +
            this.inspect_date +
            "&patientid=" +
            this.patientid +
            "&orgid=" +
            this.orgid
        );
      }
    },
    RecordTime(time) {
      // return uParseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
      return uParseTime(time, "{y}-{m}-{d}");
    },
    getcheckPatientData(patientid, orgid, startTime, endTime) {
      getcheckPatientData(patientid, orgid, this.startTime, this.endTime).then(
        response => {
          if (response.data.state === 1) {
            var checkpatientdata = response.data.data.checkpatientdata;
            this.checkRecord = checkpatientdata;
            console.log("checkpatientdata", checkpatientdata);
            // var checkdata = response.data.data.checkdata;
            //  console.log("checkdata", checkdata);
          }
        }
      );
    }
  },
  created() {
    var patientid = this.$route.query.patientid;
    console.log("patientid", patientid);
    var orgid = this.$route.query.orgid;
    console.log("机构id", orgid);
    this.getcheckPatientData(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;
    border-bottom: 1px dashed #e6e6e6;
    border-top: 1px dashed #e6e6e6;
    .van-cell {
      padding: 10px 6px;
    }
    .msgTitle {
      height: 1.875rem;
      line-height: 1.875rem;
      padding-left: 1.25rem;
      font-weight: bold;
      // margin-top: 0.625rem;
      // border-bottom: 1px solid #e6e6e6;
      // border-top: 1px solid #e6e6e6;
    }
    .msgDetail {
      padding-bottom: 0.625rem;
    }
    // .date {
    //   font-size: 0.9375rem;
    //   font-weight: 600;
    //   color: rgba(0, 0, 0, 1);
    //   margin-top: 1.25rem;
    // }
    // .packUp {
    //   width: 1.875rem;
    //   height: 3rem;
    //   font-size: 0.9375rem;
    //   color: rgba(155, 155, 155, 1);
    // }
    // .packUp1 {
    //   width: 1.875rem;
    //   height: 3rem;
    //   font-size: 0.9375rem;
    //   color: rgba(155, 155, 155, 1);
    //   visibility: hidden;
    // }
    // .tendency {
    //   width: 4.5625rem;
    //   height: 1.875rem;
    //   background: rgba(255, 95, 24, 0.2);
    //   border-radius: 15px;
    //   font-size: 0.875rem;
    //   line-height: 1.875rem;
    //   text-align: center;
    //   color: rgba(255, 95, 24, 1);
    //   margin-left: 1.875rem;
    // }
    // .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: 0.625rem;
    // }
    // .el-icon-arrow-right {
    //   display: none;
    // }
    // .el-icon-arrow-down {
    //   margin-left: 0.5rem;
    // }
    // .el-icon-arrow-up {
    //   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.875rem;
      color: rgba(0, 0, 0, 1);
      padding-bottom: 1rem;
      p {
        padding-top: 0.625rem;
        line-height: 1rem;
        span {
          color: #9e9e9e;
        }
        i {
          float: right;
          font-size: 1.25rem;
        }
        .el-icon-top {
          color: #ef4a4a;
        }
        .el-icon-bottom {
          color: #59abfe;
        }
      }
    }

    .el-collapse-item__content {
      padding-bottom: 1rem;
    }
    .el-collapse {
      border-top: none;
    }
    .none {
      padding-bottom: 0;
    }
    .el-divider--horizontal {
      margin: 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>
