<template>
  <div class="tcmd">
    <!-- <div class="back flex-center" @click="$router.back()">返回</div> -->
    <div style="margin-bottom:10px;">
      <el-button size="small" type="primary" @click="$router.back()">返回</el-button>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <!-- <div class="item flex-vertical-center-l">
                <span>疾病名称：</span>
                <div>疾病名称</div>
      </div>-->
      <div class="item flex-vertical-center-l">
        <span>中药名称：</span>
        <div>{{info.matname}}</div>
      </div>
      <div class="item flex-vertical-center-l">
        <span>别名：</span>
        <div>{{info.matsynonyms}}</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-vertical-center-l">
        <span>用法用量：</span>
        <div>{{info.matusage}}</div>
      </div>
      <div class="item flex-vertical-center-l">
        <span>用法禁忌：</span>
        <div>{{info.matsjj}}</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-vertical-center-l">
        <span>性味：</span>
        <div>{{info.matflavour}}</div>
      </div>
      <div class="item flex-vertical-center-l">
        <span>归经：</span>
        <div>{{info.matmeridian}}</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-vertical-center-l">
        <span>功效：</span>
        <div>{{info.matefficacy}}</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-vertical-center-l">
        <span>应用：</span>
        <div>{{info.matapplication}}</div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item flex-plane-center-l">
        <span>图片：</span>
        <div v-for="(item,index) in info.matphoto" :key="index">
          <img :src="item" alt />
        </div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item1 flex-plane-center-l">
        <span>相似中药鉴别使用：</span>
        <div>
          <div v-for="(item,index) in info.xiangsi" :key="index">
            <span
              class="mad-cy"
              v-for="(item1,index1) in item.relmats"
              :key="index1"
            >{{item1.matname}}{{index1==item.relmats.length-1?'':'、'}}</span>
            <div style="margin-bottom:10px;">{{item.differencedesc}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-vertical-center-l flex-wrap">
      <div class="item1 flex-plane-center-l">
        <span>常用药对：</span>
        <div>
          <div v-for="(item,index) in info.changyong" :key="index">
            <span
              class="mad-cy"
              v-for="(item1,index1) in item.relmats"
              :key="index1"
            >{{item1.matname}}{{index1==item.relmats.length-1?'':'、'}}</span>
            <div style="margin-bottom:10px;">{{item.differencedesc}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMedDetail } from "@/api/knowledge.js";
export default {
  data() {
    return {
      info: {}
    };
  },
  created() {
    this.getMedDetail();
  },
  methods: {
    async getMedDetail() {
      let res = await getMedDetail({
        matid: this.$route.query.matid
      });
      if (res.code == 0) {
        res.data.matphoto = res.data.matphoto ? res.data.matphoto.split(",") : [];
        res.data.xiangsi = res.data.relativedata.filter(item => {
          return item.relativetype == 1;
        });
        res.data.changyong = res.data.relativedata.filter(item => {
          return item.relativetype == 2;
        });
        this.info = res.data;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.tcmd {
  padding: 10px 10px;
  background: #ffffff;
  border-radius: 5px;

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

  .item {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15px;
    margin-right: 50px;

    span {
      width: 80px;
      display: inline-block;
      text-align-last: justify;
    }

    div {
      flex: 1;
    }

    img {
      width: 235px;
      height: 235px;
      //background: red;
      margin-right: 38px;
    }
  }

  .item1 {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15px;
    margin-right: 50px;

    div {
      flex: 1;
    }
  }

  .mad-cy {
    color: #5386f6;
    font-weight: bold;
  }
}
</style>