<!--账单明细-->
<template>
  <div class="container">
    <div class="showprice">
      <p>+{{UserData.Price | getPrice}}</p>
      <p>{{statusTips[UserData.Status]}}</p>
    </div>
    <div class="zdinfo">
      <ul>
        <li>
          <div>业务账单</div>
          <div>{{UserData.OrderCode}}</div>
        </li>
        <li>
          <div>业务时间</div>
          <!-- <div>{{UserData.CreateTime }}</div> -->
          <div>{{UserData.CreateTime |compatibleDate}}</div>
        </li>
        <li>
          <div>场景</div>
          <div v-if="UserData.Type===3||UserData.Type===4">{{typeTips[UserData.Type]}}</div>
          <div v-else>{{typeTips[UserData.Type]}}-患者{{UserData.InterrogatorName}}</div>
        </li>
      </ul>
      <div class="med flex-center">
        <div>计算公式</div>
        <div>{{UserData.CalculationFormula}}</div>
      </div>
      <div class="zdtable">
        <dl>
          <li>
            <dt>编码</dt>
            <dt>项目</dt>
            <dt>单价</dt>
            <dt>数量</dt>
          </li>
          <li v-for="(item,index) in  DrugsJson" :key="index" v-if="UserData.Type==2">
            <dd>{{item.drugId}}</dd>
            <dd class="drugName">{{item.drugName}}</dd>
            <dd>{{item.retailPrice}}</dd>
            <dd>{{item.quantity}}</dd>
          </li>
          <li v-if=" UserData.Type==1">
            <dd></dd>
            <dd>{{typeTips[type]}}</dd>
            <dd>{{UserData.OrderPrice | getPrice}}</dd>
            <dd>1</dd>
          </li>

            <li v-if=" UserData.Type==3">
            <dd></dd>
            <dd>{{UserData.InterrogatorName}}</dd>
            <dd>{{UserData.Price | getPrice}}</dd>
            <dd>1</dd>
          </li>

            <li v-if=" UserData.Type==4">
            <dd></dd>
            <dd>{{UserData.InterrogatorName}}</dd>
            <dd>{{UserData.Price | getPrice}}</dd>
            <dd>1</dd>
          </li>

          <li v-if="UserData.Type===1 || UserData.Type===2">
            <dd></dd>
            <dd>优惠</dd>
            <dd>-{{UserData.DiscountPrice | getPrice}}</dd>
            <dd></dd>
          </li>
        </dl>
        <p>公式计算说明：{{UserData.CalculationExplain}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "profitInfo",
  data() {
    return {
      id: "",
      //状态
      statusTips: {
        1: "已入账",
        2: "待入账",
        3: "已取消",
        4: "已提现",
        5: "提现中",
        6: "已扣除"
      },
      //类型
      typeTips: {
        1: "在线问诊",
        2: "处方购药", 
        3: "下级利润",
        4: "销售额达标利润"
      },
      UserData: {},
      orderid: "",
      type: "",
      DrugsJson: [],
      showType1: false,
      showType2: false
    };
  },
  created() {
    this.orderid = this.$route.query.id;
    this.type = this.$route.query.type;
    this.GetDrugGuideArticles();
  },
  methods: {
    //医生收益数据
    GetDrugGuideArticles() {
      var obj = {
        type: this.type,
        id: this.orderid
      };
      this.LJ_LOADING();
      this.$http.GetDrugGuideArticles(obj).then(res => {
        this.$toast.clear();
        if (res.data.IsSuccess) {
          this.UserData = res.data.ResultObject;
          console.log(this.UserData.CalculationExplain);
          if (this.type == 2) {
            this.DrugsJson = JSON.parse(res.data.ResultObject.DrugsJson);
            this.showType2 = true;
          } else {
            this.showType1 = true;
          }
          // console.log(this.DrugsJson);
          // console.log(this.UserData);
        } else {
          this.$toast(res.data.ResultMsg);
        }
      });
    }
  }
};
</script>
<style scoped lang='less'>
@baseBlue: #478bfb;
@boxShadow: 0rem 0.01rem 0.1rem 0rem #00000026;
@graycolor: #999999;
.ellips2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.flex-col {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
.flex {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.container {
  .showprice {
    width: 7.5rem;
    height: 1.85rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    // box-shadow:@boxShadow ;
    p:first-child {
      color: @baseBlue;
      font-size: 0.8rem;
      margin: 0.1rem 0;
    }
    p:last-child {
      font-size: 0.35rem;
    }
  }
  .zdinfo {
    width: 7rem;
    margin: 0 auto;
    box-shadow: 0rem -0.1rem 0.2rem -0.1rem #00000026;
    > ul {
      li {
        .flex();
        border-top: 0.01rem solid #f2f2f2;
        > div {
          font-size: 0.32rem;
          height: 1.12rem;
          line-height: 1.12rem;
        }
        > div:first-child {
          text-align: left;
          width: 20%;
        }
        > div:last-child {
          width: 80%;
          text-align: right;
          font-size: 0.3rem;
          color: #999;
        }
      }
    }
    .med {
      > div:first-child {
        font-size: 0.32rem;
        text-align: left;
        margin: 0.15rem 0;
      }
      > div:last-child {
        color: @graycolor;
        font-size: 0.3rem;
        text-align: right;
      }
    }
    .zdtable {
      width: 6.2rem;
      margin: 0 auto;
      > p {
        color: #999999;
        font-size: 0.28rem;
        text-align: left;
      }
      dl {
        > li {
          //   height: 1.03rem;
          //   line-height: 1.03rem;
          border-bottom: 0.01rem solid #f2f2f2;
          padding: 0.3rem 0;
          // height: 1.2rem;
          // line-height: 1.2rem;
          .flex();
          dt,
          dd {
            height: 0.35rem;
            line-height: 0.35rem;
            font-size: 0.28rem;
            width: 20%;
            overflow: hidden;
          }
          .drugName {
            height: 0.64rem;
            .ellips2();
          }
          dt:nth-child(2),
          dd:nth-child(2) {
            width: 35%;
          }
        }
        li:last-child {
          border: none;
        }
      }
    }
  }
}

.flex-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>