<template>
  <div class="todayPatiens">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <span></span>
        <div>信息</div>
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <p>*</p>
          <span>患者姓名：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="name"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p>*</p>
          <span>患者性别：</span>
          <div class="input">
            <el-select v-model="sex" placeholder="请选择">
              <el-option label="男" value="M"></el-option>
              <el-option label="女" value="F"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p>*</p>
          <span>出生日期：</span>
          <div class="input">
            <el-date-picker v-model="birthday" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p>*</p>
          <span>身份证号码：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="idCard"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>手机号码：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="phone"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>省：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:浙江省)" v-model="province"></el-input>
            <!-- <el-select v-model="province" placeholder="请选择" @change="provinceChange(1)">
                            <el-option :label="item.name" :value="item.code" v-for="(item,index) in provinceList"
                                :key="index">
                            </el-option>

            </el-select>-->
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>市：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:杭州市)" v-model="city"></el-input>
            <!-- <el-select v-model="city" placeholder="请选择" @change="provinceChange(2)">
                            <el-option :label="item.name" :value="item.code" v-for="(item,index) in cityList"
                                :key="index">
                            </el-option>

            </el-select>-->
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>区：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:西湖区)" v-model="area"></el-input>
            <!-- <el-select v-model="area" placeholder="请选择">
                            <el-option :label="item.name" :value="item.code" v-for="(item,index) in areaList"
                                :key="index">
                            </el-option>

            </el-select>-->
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>街道：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="street"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>详细地址：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="address"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>主诊断：</span>
          <div class="input">
            <el-select v-model="mainDia" placeholder="请选择">
              <el-option label="中医诊断" value="中医诊断"></el-option>
              <el-option label="西医诊断" value="西医诊断"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" v-if="mainDia=='中医诊断'">
          <p></p>
          <span>疾病名称：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:胃脘痛)" v-model="mainDisease"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" v-if="mainDia=='中医诊断'">
          <p></p>
          <span>证型名称：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:胃腑不和证)" v-model="mainCard"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" v-if="mainDia=='西医诊断'">
          <p></p>
          <span>西医诊断：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="mainMedicine"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>次诊断：</span>
          <div class="input">
            <div class="input">
              <el-select v-model="secondDia" placeholder="请选择">
                <el-option label="中医诊断" value="中医诊断"></el-option>
                <el-option label="西医诊断" value="西医诊断"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" v-if="secondDia=='中医诊断'">
          <p></p>
          <span>疾病名称：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:胃脘痛)" v-model="secondDisease"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" v-if="secondDia=='中医诊断'">
          <p></p>
          <span>证型名称：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例:胃腑不和证)" v-model="secondCard"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" v-if="secondDia=='西医诊断'">
          <p></p>
          <span>西医诊断：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="secondMedicine"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>主诉：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="mainSuit"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>现病史：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="hpi"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>既往史：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="history"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>中医四诊：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="four"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>体格检查：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="bodyCheck"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>辅助检查：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="assistCheck"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p>*</p>
          <span>门诊住院号：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入(例：001、002依次往后)" v-model="hosNumber"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p>*</p>
          <span>门诊住院标志：</span>
          <div class="input">
            <el-select v-model="hosSian" placeholder="请选择">
              <el-option label="门诊" value="门诊"></el-option>
              <el-option label="住院" value="住院"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>科室：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="department"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>病区：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="ward"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <p></p>
          <span>床位号：</span>
          <div class="input">
            <el-input type="text" placeholder="请输入" v-model="BedID"></el-input>
          </div>
        </div>

        <div class="buttom-btn" @click="submit">
          <button>提交</button>
        </div>
      </div>
    </div>
    <!-- 右侧信息展示 -->
    <div class="reciped">
      <div id="reciped" v-if="msg.name">
        <div class="title">处方明细</div>
        <div class="flex-vertical-center-l flex-wrap">
          <div class="flex-plane-center-l item">
            <div class="name">姓名：</div>
            <div>{{msg.name}}</div>
          </div>
          <div class="flex-plane-center-l item">
            <div class>性别：</div>
            <div>{{msg.sex}}</div>
          </div>

          <div class="flex-plane-center-l item">
            <div class>费别：</div>
            <div>自费</div>
          </div>

          <div class="flex-plane-center-l item">
            <div class>就诊科室：</div>
            <div>{{msg.department}}</div>
          </div>

          <div class="flex-plane-center-l item">
            <div class>开方时间：</div>
            <div>{{msg.prescriptionTime}}</div>
          </div>
        </div>

        <div class="title mr-t20">中药处方</div>
        <div class="flex-vertical-center-l flex-wrap">
          <div class="flex-plane-center-l item" v-for="(item,index) in msg.oralPre" :key="index">
            <div v-for="(item1,index1) in item.oralPreItemList" :key="index1">
              {{item1.matName}}
              <span v-if="item1.matDose">*{{item1.matDose}}</span>
              <span v-if="item1.matUnitName">（{{item1.matUnitName}}）</span>
            </div>
          </div>
        </div>
        <div class="title mr-t20">中药制剂</div>
        <div class="flex-vertical-center-l flex-wrap">
          <div class="flex-plane-center-l item" v-for="(item,index) in msg.solidPre" :key="index">
            <div v-for="(item1,index1) in item.solidPreList" :key="index1">
              {{item1.matName}}
              <span v-if="item1.matDose">*{{item1.matDose}}</span>
              <span v-if="item1.matUnitName">（{{item1.matUnitName}}）</span>
            </div>
          </div>
        </div>
        <div class="title mr-t20">适宜技术处方</div>
        <div class="flex-vertical-center-l flex-wrap">
          <div
            class="flex-plane-center-l item"
            v-for="(item,index) in msg.suitablePre"
            :key="index"
          >
            <div v-for="(item1,index1) in item.suitablePreList" :key="index1">
              {{item1.acupointName}}
              <span v-if="item1.acupointNumber">*{{item1.acupointNumber}}</span>
              <span v-if="item1.acupointOption">（{{item1.acupointOption}}）</span>
            </div>
          </div>
        </div>
        <div class="title mr-t20">费用明细</div>
        <div class="flex-vertical-center-l flex-wrap">
          <div
            v-for="(item,index) in msg.prescriptionCost.projectTypeList"
            :key="index"
            style="margin-right:20px;"
          >
            <div class="title mr-t20">处方({{index+1}})</div>
            <div class="item flex-plane-center-l">
              <div class="name">特殊调配费：</div>
              <div>{{item.specialCost?item.specialCost:0}}</div>
            </div>
            <div class="item flex-plane-center-l">
              <div class="name">代煎费：</div>
              <div>{{item.daijianCost?item.daijianCost:0}}</div>
            </div>
            <div class="item flex-plane-center-l">
              <div class="name">配送费：</div>
              <div>{{item.distributionCost?item.distributionCost:0}}</div>
            </div>
          </div>
        </div>
        <div class="flex-vertical-center-l flex-wrap">
          <div
            v-for="(item,index) in msg.prescriptionCost.prescriptionList"
            :key="index"
            style="margin-right:20px;"
          >
            <div class="title mr-t20">处方({{index+1}})</div>
            <div class="item flex-plane-center-l">
              <div class="name">处方总金额：</div>
              <div>{{item.preMonry?item.preMonry:0}}</div>
            </div>
            <div class="item flex-plane-center-l">
              <div class="name">处方类型：</div>
              <div>{{item.preType?item.preType:0}}</div>
            </div>
            <div class="buttom-btn">
              <button @click="paySuccess(item.preNo)">收费成功</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { getProver, getArea } from "@/api/city";
import {
  validataionSubmit,
  getValidationMsg,
  paySuccess
} from "@/api/business";

export default {
  components: {},
  data() {
    return {
      name: "", // 患者姓名
      sex: "", // 患者性别
      birthday: "", // 出生日期
      idCard: "", // 身份证号,
      phone: "", // 手机号
      province: "浙江省", // 省
      city: "杭州市", // 市
      area: "西湖区", // 区
      street: "", // 街道
      address: "", // 详细地址
      mainDia: "中医诊断", // 主诊断
      mainDisease: "胃脘痛", // 主诊断疾病名称
      mainCard: "胃腑不和证", // 主诊断 证型
      mainMedicine: "", // 主诊断西医诊断
      secondDia: "中医诊断", // 次诊断
      secondDisease: "胃脘痛", // 次诊断疾病名称
      secondCard: "胃腑不和证", // 次诊断 证型
      secondMedicine: "", // 次诊断西医诊断
      mainSuit: "", // 主诉
      hpi: "", // 现病史
      history: "", // 既往史
      four: "", // 中医四诊
      bodyCheck: "", // 体格检查
      assistCheck: "", // 辅助检查
      hosNumber: "001", // 住院号
      hosSian: "门诊", // 住院标志
      department: "", // 科室
      ward: "", // 病区
      BedID: "", // 床位号

      provinceList: [], // 省数据存储
      cityList: [], // 市数据存储
      areaList: [], // 区数据存储

      msg: {}
    };
  },
  created() {
    // this.getProver()
    this.dealMsg();
    let token = localStorage.getItem("token");
    if (token) {
      this.getValidationMsg();
    }
  },

  methods: {
    // 省选择
    provinceChange(type) {
      if (type == 1) {
        this.city = "";
        this.area = "";
        this.getArea(this.province);
      } else {
        this.area = "";
        this.getArea(this.city, 2);
      }
    },
    parseTime(time) {
      let D = new Date(time);
      let year = D.getFullYear();
      let month =
        D.getMonth() + 1 < 10 ? "0" + (D.getMonth() + 1) : D.getMonth() + 1;
      let date = D.getDate() < 10 ? "0" + D.getDate() : D.getDate();
      let hour = D.getHours() < 10 ? "0" + D.getHours() : D.getHours();
      let min = D.getMinutes() < 10 ? "0" + D.getMinutes() : D.getMinutes();
      let seconds = D.getSeconds() < 10 ? "0" + D.getSeconds() : D.getSeconds();

      return (
        year + "-" + month + "-" + date + " " + hour + ":" + min + ":" + seconds
      );
    },
    // 信息提交
    submit() {
      if (!this.name) {
        this.$message("请输入患者姓名");
        return;
      }
      if (!this.sex) {
        this.$message("请选择患者性别");
        return;
      }
      if (!this.birthday) {
        this.$message("请选择出生日期");
        return;
      }
      if (!this.idCard) {
        this.$message("请输入身份证号");
        return;
      }
      if (!this.hosNumber) {
        this.$message("请输入门诊住院号");
        return;
      }
      if (!this.hosSian) {
        this.$message("请选择住院标志");
        return;
      }

      this.validataionSubmit();
    },
    // 处理表单回显信息
    dealMsg() {
      let params = sessionStorage.getItem("valMsg");
      if (params) {
        let valMsg = JSON.parse(params);
        this.name = valMsg.patientName;
        this.sex = valMsg.patientGender;
        this.birthday = valMsg.patientBirthday;
        this.idCard = valMsg.patientCertificate;
        this.phone = valMsg.patientMobile;
        this.province = valMsg.patientCounty;
        this.city = valMsg.patientTown;
        this.area = valMsg.patientVillage;
        this.street = valMsg.patientStreet;
        this.address = valMsg.patientAddress;
        this.mainDia = valMsg.visitType;
        this.mainDisease = valMsg.disName;
        this.mainCard = valMsg.symName;
        this.mainMedicine = valMsg.westernDisease;
        this.secondDia = valMsg.secondaryDiagnosis[0].secondary_visitType;
        this.secondDisease = valMsg.secondaryDiagnosis[0].secondary_disName;
        this.secondCard = valMsg.secondaryDiagnosis[0].secondary_symName;
        this.secondMedicine =
          valMsg.secondaryDiagnosis[0].secondary_westernDisease;
        this.mainSuit = valMsg.patientContent;
        this.hpi = valMsg.nowDesc;
        this.history = valMsg.pastDesc;
        this.four = valMsg.fourDiagnosis;
        this.bodyCheck = valMsg.physical;
        this.assistCheck = valMsg.auxiliaryExam;
        this.hosNumber = valMsg.visitNo;
        this.hosSian = valMsg.preMzZy;
        this.department = valMsg.dept;
        this.ward = valMsg.ward;
        this.BedID = valMsg.bedNo;
      }
    },
    // 获取省数据
    async getProver() {
      let res = await getProver();
      if (res.ResultCode == 0) {
        this.provinceList = res.Data;
      }
    },
    // 获取市区
    async getArea(id, type = 1) {
      let res = await getArea(id);
      if (res.ResultCode == 0) {
        if (type == 1) {
          this.cityList = res.Data;
        } else {
          this.areaList = res.Data;
        }
      }
    },
    // 表单信息提交
    async validataionSubmit() {
      let params = {
        patientName: this.name,
        patientGender: this.sex,
        patientBirthday: this.parseTime(this.birthday),
        patientCertificate: this.idCard,
        patientMobile: this.phone,
        patientCounty: this.province,
        patientTown: this.city,
        patientVillage: this.area,
        patientStreet: this.street,
        patientAddress: this.address,
        visitType: this.mainDia,
        disName: this.mainDisease,
        symName: this.mainCard,
        westernDisease: this.mainMedicine,
        secondaryDiagnosis: [
          {
            secondary_disName: this.secondDisease,
            secondary_symName: this.secondCard,
            secondary_visitType: this.secondDia,
            secondary_westernDisease: this.secondMedicine
          }
        ],
        patientContent: this.mainSuit,
        nowDesc: this.hpi,
        pastDesc: this.history,
        fourDiagnosis: this.four,
        physical: this.bodyCheck,
        auxiliaryExam: this.assistCheck,
        visitNo: this.hosNumber,
        preMzZy: this.hosSian,
        dept: this.department,
        ward: this.ward,
        bedNo: this.BedID,

        appId_his: "YGT00001",
        YLJGID: "YLJG00001"
      };
      let res = await validataionSubmit(params);

      if (res.status) {
        sessionStorage.setItem("valMsg", JSON.stringify(params));
        localStorage.setItem("token", res.data.Authorization);
        this.setPatients({
          pid: res.data.token
        });
        window.location.href = res.data.url + "?from=validation";
      } else {
        this.$message.error(res.message);
      }
    },
    // 获取建议处方信息
    async getValidationMsg() {
      let params = {
        token: this.getPatiensInfo.pid
      };
      let res = await getValidationMsg(params);
      if (res.status) {
        this.msg = res.data;
      } else {
        this.$message.error(res.message);
      }
    },
    // 收费成功
    async paySuccess(preNo) {
      let params = {
        status: "70",
        preNo,
        appId: "YGT00001",
        insCode: "YLJG00001",
        timestamp: Date.parse(new Date())
      };
      let res = await paySuccess(params);
      if (res.status) {
        this.$message.success("操作成功");
      } else {
        this.$message.error(res.message);
      }
    },

    ...mapMutations({
      setPatients: "user/setPatiensInfo",
      setIsSee: "user/setIsSee"
    })
  },
  computed: {
    ...mapGetters(["getuserinfo", "getPatiensInfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "~@/style/common.scss";
@import "~@/style/base.scss";

.todayPatiens {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  .screening {
    width: 430px;
    height: 100vh;
    overflow: auto;
    box-sizing: border-box;

    .screening-form {
      span {
        display: inline-block;
        width: 120px;
      }

      p {
        color: red;
        width: 7px;
      }
    }
  }

  .reciped {
    flex: 1;
    padding: 33px 46px;
    background: #ffffff;
    border-radius: 5px;
    height: 100vh;
    box-sizing: border-box;
    overflow: auto;
    margin-left: 20px;

    .btns {
      margin-bottom: 34px;

      div {
        width: 74px;
        height: 36px;
        background: #5386f6;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-right: 19px;
        cursor: pointer;
      }

      .bg-yellow {
        background: #ffae45;
      }
    }

    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #5386f6;
      margin-bottom: 15px;
    }

    .item {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333;
      margin-bottom: 15px;
      margin-right: 20px;

      .name {
        width: 105px;
        text-align-last: justify;
      }
    }
  }

  .screen-btn {
    width: 50%;
    border-radius: 10px;
    color: #fff;
    margin: 0 auto 20px;
    cursor: pointer;
  }
}

.buttom-btn {
  margin-top: 20px;
  margin-bottom: 20px;

  button {
    width: 120px;
    height: 40px;
    font-size: 16px;
    border: 0;
    background: #5386f6;
    color: #fff;
  }
}

.screening ::v-deep.el-select {
  width: 100%;
}

.screening ::v-deep.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>