<template>
  <div :class="['patiens-msg',styles]">
    <!-- <h4>主诊断</h4> -->

    <p :class="[styles]">
      <span>病名：</span>
      <!-- <el-input v-model="name" size="mini" placeholder="请输入"></el-input> -->
      <el-select
        size="mini"
        v-model="name"
        @change="cNameChange()"
        filterable
        remote
        placeholder="中医病名"
        :filter-method="filterMethod"
        clearable
      >
        <el-option
          :label="item.disname"
          :value="item.disname"
          v-for="(item,index) in cDiseaseNameL"
          :key="index"
        ></el-option>
      </el-select>
    </p>
    <p :class="[styles]">
      <span>证型：</span>

      <el-autocomplete
        size="mini"
        v-model="syndrome"
        :fetch-suggestions="searchZhengxing"
        :trigger-on-focus="true"
        @select="selectZX($event)"
        ref="zhengxing"
        :id="'zhengxing'"
        placeholder="请输入"
      ></el-autocomplete>
    </p>
    <p :class="[styles]">
      <span>治法：</span>
      <el-select
        size="mini"
        v-model="therapy"
        ref="zhifa"
        filterable
        placeholder="请输入"
        no-data-text="无匹配数据,请修改证型"
      >
        <el-option :label="item" :value="item" v-for="(item,index) in therapyList" :key="index"></el-option>
      </el-select>
    </p>
  </div>
</template>

<script>
import {
  getCDiseaseName,
  getXDiseaseName,
  getCCardType
} from "@/api/knowledge.js";
import { addDiagnosisData } from "@/api/diagnosis.js";
import { addRecipeFrom } from "@/api/dataAnalysis.js";
import { mapGetters } from "vuex";
export default {
  props: {
    patiensMsg: {
      type: Object,
      default: () => {
        return {};
      }
    },
    direction: {
      type: String,
      default: "horizontal" //  vertical
    }
  },
  watch: {
    patiensMsg: {
      immediate: true,
      deep: true,
      handler: function() {
        if (this.isInit) return;
        if (!this.patiensMsg) return;
        this.name = this.patiensMsg.maindiagnosis.namemedicine || "";
        this.zy_dise_id = this.patiensMsg.maindiagnosis.disid;
        this.syndrome = this.patiensMsg.maindiagnosis.syndrometypes || "";
        this.zhengxingid = this.patiensMsg.maindiagnosis.symptomid || "";
        this.therapy = this.patiensMsg.maindiagnosis.treatment || "";

        this.getCDiseaseName(this.name, "");
        this.getCCardType(this.syndrome, "");
        this.isInit = true;
      }
    },
    direction: {
      immediate: true,
      deep: true,
      handler: function() {
        if (this.direction == "horizontal") {
          this.styles = "direction";
        } else {
          this.styles = "";
        }
      }
    }
  },
  data() {
    return {
      name: "", // 病名
      zy_dise_id: "", // 病名id
      syndrome: "", // 证型
      zhengxingid: "", // 证型id
      therapy: "", // 治法
      cDiseaseNameL: [], // 病名列表
      cCardTypeL: [], // 证型列表
      therapyList: [], //治法列表

      isInit: false,
      styles: ""
    };
  },
  computed: {
    ...mapGetters(["getPatiensInfo", "getOutpatientDiagnosis"])
  },
  methods: {
    // 获取中医诊断信息
    getDiamsg() {
      this.saveDiagnosisData();
      return {
        disid: this.zy_dise_id,
        symptomid: this.zhengxingid,
        treatment: this.therapy
      };
    },
    filterMethod(e) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(e)) {
        this.getCDiseaseName(e, "1");
      } else {
        this.getCDiseaseName(e, "");
      }
    },
    cNameChange() {
      // let id = ''
      this.cDiseaseNameL.forEach(item => {
        if (item.disname == this.name) {
          // id = item.disid
          this.zy_dise_id = item.disid;
        }
      });

      this.syndrome = "";
      this.zhengxingid = "";
      this.therapy = "";
      if (this.name === "") return;
      this.getCCardType(this.zy_dise_id);
      setTimeout(() => {
        this.$refs.zhengxing.focus();
      }, 200);
    },
    // 获取内容参数
    getParams() {
      return {
        // 病名及id
        namemedicine: this.name,
        disid: this.zy_dise_id,
        //   证型及id
        symptomid: this.zhengxingid,
        syndrometypes: this.syndrome,
        //   治法
        treatment: this.therapy
      };
    },
    // 赋值内容参数
    setParams(data) {
      this.name = data.namemedicine;
      this.zy_dise_id = data.disid;
      this.zhengxingid = data.symptomid;
      this.syndrome = data.syndrometypes;
      this.therapy = data.treatment;
      this.getCDiseaseName(this.name, "");
      this.getCCardType(this.syndrome, "");
    },

    // 主诊断证型搜索
    async searchZhengxing(key, cb) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(key)) {
        await this.getCCardType(this.zy_dise_id, "", key, "1");
      } else {
        await this.getCCardType(this.zy_dise_id, "", key, "");
      }

      if (this.cCardTypeL.length > 0) {
        let resault = [];
        this.cCardTypeL.forEach(item => {
          let obj = {
            value: item.symname,
            id: item.symid,
            therapys: item.therapys
          };
          resault.push(obj);
        });
        cb(resault);
      } else {
        cb([]);
      }
    },
    selectZX(e) {
      this.syndrome = e.value;
      this.zhengxingid = e.id;
      this.therapyList = e.therapys;
      this.$refs.zhifa.focus();
    },
    // 获取中医病名数据
    async getCDiseaseName(key, serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 9999,
        serchtype,
        keyword: key
      };
      let res = await getCDiseaseName(params);
      if (res.code == 0) {
        this.cDiseaseNameL = res.data.diseases;
      }
    },
    // 获取中医证型
    async getCCardType(id, key = "", serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 9999,
        disid: serchtype == 1 ? "" : id,
        serchtype,
        keyword: key
      };
      let res = await getCCardType(params);

      if (res.code == 0) {
        this.cCardTypeL = res.data.sysptoms;
        res.data.sysptoms.forEach(item => {
          if (item.symid == this.zhengxingid) {
            this.therapyList = e.therapys;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.patiens-msg {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;

  p {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    margin-bottom: 5px;

    span {
      width: 70px;
      margin-bottom: 5px;
    }

    span::before {
      content: "*";
      color: red;
    }
  }
}

.direction {
  display: flex;
  align-items: center !important;
  flex-direction: row !important;
}
::v-deep {
  .el-select,
  .el-input,
  .el-autocomplete {
    flex: 1;
  }
}
</style>

<style lang="scss" scoped>
.patiens-msg p span {
  width: auto;
  margin-bottom: 0;
}

.direction p {
  margin-bottom: 0;
  margin-right: 15px;
}
</style>