<template>
<div class="main">
  <div class="head">
    <div class="iconBox">
    </div>
    <div class="label">
      <div class="name">
        <template v-for="(name,index) in rowData.nsTypeNames" :key="index">
          <template v-if="index != 0">、</template>{{name}}
        </template>
      </div>
      <div class="date_title">执行时间</div>
      <div class="exec_date">
        <template v-for="(date,index) in rowData.execDate" :key="date">
          <template v-if="index != 0">、</template>{{dateFormat(new Date(date),'mm月dd日')}}
        </template>
      </div>
    </div>
  </div>
  <div class="exec_area">执行区域:
    <template v-for="(name,index) in rowData.areaNames" :key="index">
      <template v-if="index != 0">、</template>{{name}}
    </template>
  </div>
  <div class="table">
    <div class="thead">
      <div class="th">序号</div>
      <div class="th">药物名称</div>
      <div class="th">药物配比/倍</div>
      <div class="th">药物用量ml</div>
    </div>
    <div class="tbody">
      <div v-for="(item,index) in rowData.drugList" :key="item.drugId" class="row">
        <div class="col">药物{{index + 1}}</div>
        <div class="col">{{item.drugName}}</div>
        <div class="col">1 : {{item.peibi}}</div>
        <div class="col">{{item.yongliang}} ml/g</div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {dateFormat} from "../../../utils/date_util";

const emits = defineEmits(["addNsRecord"])
const router = useRouter();
const route = useRoute()
const props = defineProps({
  rowData:{
    type:Object,
    required:true
  }
})

function edit(){
  emits("addNsRecord",props.rowData.id)
}
</script>

<style lang="scss" scoped>
@import "./table";
@import "../../../styles/index";
.main{
  @include wh(calc(100% - 9px),auto);
  border: 1px solid rgba(81,233,240,0.6);
  padding: 9px;
  box-sizing: border-box;
  margin-left: 9px;
  margin-top: 9px;
  .head{
    @include wh(calc(100%),61px);
    .iconBox{
      float: left;
      @include wh(61px,61px);
      background: #023D3C;
      border: 1px solid rgba(2,240,235,0.67);
      padding: 5px;
      box-sizing: border-box;
    }
    .label{
      float: right;
      @include wh(calc(100% - 61px - 6px),61px);
      @include ossBg("after_bg1.png");
      position: relative;
      .name{
        @include wh(auto,16px);
        @include LeftTop(26px,10px);
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
      }
      .date_title{
        @include wh(auto,12px);
        @include LeftTop(25px,32px);
        font-family: DOUYU;
        font-weight: normal;
        font-size: 16px;
        color: #FFF116;
      }
      .exec_date{
        @include wh(auto,12px);
        @include LeftTop(97px,32px);
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #00DCC6;
      }
      .edit-btn{
        position: absolute;
        top:10px;
        right:30px;
        color:#ffffff;
      }
    }
  }
  .exec_area{
    margin:9px 0px 9px 0px;
    @include wh(auto,16px);
    font-weight: normal;
    font-size: 16px;
    color: #FF5926;
  }
}
</style>