<template>
 <!-- Modal -->
 <a-modal v-model:visible="modalVisible" fullscreen :title="modalTitle" title-align="start" :footer="false"
       @cancel="handleClose">
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">基本信息</div>
      </div>
      <a-form :model="modalForm"   :rules="rules" ref="modalFormRef"  :auto-label-width="true" :disabled="modalSatus=='detail'">
        <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="avatar" label="药品名称：">
              <a-select :style="{width:'300px'}" allow-search placeholder="请选择药品名称" v-model="modalForm.product_name"
                  :loading="loading" @change="changeMedince" @search="handList" :disabled="modalSatus=='edit'">
                  <a-option size="large" style="max-width:400px" v-for="item in medinceList" :key="item.product_platform_id"
                    :value="item.product_platform_id" :label="item.product_name">
                  {{item.product_name }}
                  </a-option>
                </a-select>
  
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="avatar" label="药品规格：">
              <span v-if="modalForm.product_spec">{{modalForm.product_spec}} </span>
               <span v-else>选择药品后展示</span>
            </a-form-item>
          </a-col>
         
        </a-row>
         <a-row :gutter="24" >
          <a-col :span="12">
            <a-form-item field="idCard" label="药品编码：" >
                <div class="cardNum" v-if="modalForm.product_pharmacy_code">{{modalForm.product_pharmacy_code}}</div>
                <span v-else>选择药品后展示</span>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="idCard" label="药品库存：" >
              <div class="box" >
      
                <div class="cardNum" v-if="modalForm.stock || modalForm.stock===0 ">{{modalForm.stock}}</div>
                <span v-else>选择药品后展示</span>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
         <!--<a-row :gutter="24" >
          <a-col :span="12">
            <a-form-item field="idCard" label="药品价格：" >
                <div class="cardNum">{{modalForm.product_price}}元</div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="idCard" label="药品类型：" >
              <div class="box" >
                <div class="cardNum">{{formatProductType(modalForm.product_type)}}</div>
              </div>
            </a-form-item>
          </a-col>
        </a-row> -->
        <a-row :gutter="24" >
          <!-- <a-col :span="12">
            <a-form-item field="idCard" label="批准文号：" >
                <div class="cardNum">{{modalForm.license_number}}</div>
            </a-form-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-item field="avatar" label="生产厂家：">
              <span v-if="modalForm.manufacturer">{{modalForm.manufacturer}} </span>
              <span v-else>选择药品后展示</span>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- <a-row :gutter="24" >
         
          <a-col :span="12">
            <a-form-item field="idCard" label="处方平台编码：" >
                <div class="cardNum">{{modalForm.product_platform_code}}</div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="avatar" label="创建时间：">
              <span>{{modalForm.created_at}} </span>
            </a-form-item>
          </a-col>
        </a-row> -->

         <a-divider /> 
      <div class="titlebox">
          <div class="bar"></div>
          <div class="name">用法用量</div>
        </div>
        <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="packaging_unit" label="包装单位：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.packaging_unit" placeholder="请输入包装单位" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="single_use" label="单次服法：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.single_use" placeholder="请输入单次服法" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="single_unit" label="每次剂量：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.single_unit" placeholder="请输入每次剂量" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="frequency_use" label="使用频次：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.frequency_use" placeholder="请输入使用频次" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="available_days" label="用药天数：">
              <a-input-number :style="{ width: '200px' }" v-model="modalForm.available_days" :min="1"  placeholder="请输入用药天数" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item field="product_type"  label="药品类型：">
              <a-select :style="{width:'200px'}" v-model="modalForm.product_type" placeholder="请选择药品类型">
              <a-option :value="0">未知</a-option>
              <a-option :value="1" >中成药</a-option>
              <a-option :value="2">西药</a-option>
             </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider /> 
        <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">药品通用名称</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="common_name" label="药品通用名称：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.common_name"  placeholder="请输入药品通用名称" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-divider />
        <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">药品价格</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="product_price" label="药品价格（元）：">
              <a-input-number :style="{ width: '200px' }" v-model="modalForm.product_price" :min="0" placeholder="请输入药品价格" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-divider />
        <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">批准文号</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="license_number" label="批准文号：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.license_number"  placeholder="请输入批准文号" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-divider />
      <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">处方平台编码：</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="product_platform_code" label="处方平台编码：">
              <a-input :style="{ width: '200px' }" v-model="modalForm.product_platform_code"  placeholder="请输入处方平台编码" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-divider />

        <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">购买上限</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="prescription_num" label="购买上限：">
              <a-input-number :style="{ width: '200px' }" v-model="modalForm.prescription_num" :min="1" placeholder="请输入购买上限" />
            </a-form-item>
          </a-col>
        </a-row>
      <a-divider />
      <div class="titlebox" >
        <div class="bar"></div>
        <div class="name">药品备注</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;">
          <a-col :span="12">
            <a-form-item field="prescription_num" label="药品备注：">
              <a-textarea :auto-size="{minRows:2}"  allow-clear
                 v-model="modalForm.product_remarks"
                placeholder="请填写药品备注" :style="{ width: '400px' }"/>
            </a-form-item>
          </a-col>
        </a-row>
      <a-divider /> 
      </a-form>
       <div class="titlebox" v-if="modalSatus!='detail'">
        <div class="bar"></div>
        <div class="name">操作</div>
      </div>
      <a-row :gutter="24" style="margin-top: 35px;" v-if="modalSatus!='detail'">
        <a-col :span="24">
          <a-form-item field="" label="" no-style>
            <a-space >
              <a-button type="primary" v-has="'admin:sysMedinceList:onshelf'"   @click="handAdd" v-if="modalSatus=='add'">上架</a-button>
              <a-button type="primary" v-has="'admin:sysMedinceList:save'"  @click="handEdit" v-else>保存</a-button>
              <a-button type="primary" status="success" v-has="'admin:sysMedinceList:onshelfAgain'"  @click="handleEditStatus(1)" v-if="modalForm.product_status==2 && modalSatus=='edit'">重新上架</a-button>
              <a-button type="primary"  v-has="'admin:sysMedinceList:offshelf'" status="warning" @click="handleEditStatus(2)" v-if="modalSatus=='edit' && modalForm.product_status==1">下架</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row> 
    </a-modal>
</template>
<script setup>
import {ref,toRefs} from 'vue';
import {addSysMedince,editSysMedince,editMedinceStatus,getList,getMedinceDetail} from "@/api/medince/list";
import {formatProductType} from "@/utils/format"
import { Message } from '@arco-design/web-vue';
const props = defineProps({
  // 是否显示
  modalVisible: {
    type: Boolean,
    default: false,
  },
  modalTitle:{
     type: String,
  },
  modalSatus:{
    type: String
  },
  modalForm: {
    type: Object,
  },
});
const medinceList=ref([]);
const loading = ref(false);
const rules={
  product_platform_id: [{ required: true, message: '请输入药品名称' }],
  product_price: [{ required: true, message: '请输入药品价格' }],
  product_platform_code: [{ required: true, message: '请输入处方平台编码' }],
  license_number: [{ required: true, message: '请输入批准文号' }],
  product_type: [{ required: true, message: '请选择药品类型' }],
  common_name: [{ required: true, message: '请输入通用名称' }],
  product_remarks: [{ required: true, message: '请输入药品备注' }],
  packaging_unit: [{ required: true, message: '请输入包装单位' }],
  single_use: [{ required: true, message: '请输入单次服法' }],
  single_unit: [{ required: true, message: '请输入每次剂量' }],
  frequency_use: [{ required: true, message: '请输入使用频次' }],
  available_days: [{ required: true, message: '请输入用药天数' }],
  prescription_num: [{ required: true, message: '请输入购买上限' }]
};
const emits = defineEmits(['familyVisibleChange','freshList']);
const {modalVisible,modalForm,modalSatus} = toRefs(props);
// Akiraka 20230210 关闭弹窗
const handleClose = () => {
  emits('familyVisibleChange', false);
};
const handAdd=async()=>{
  delete modalForm.value.avatar;
  delete modalForm.value.product_id
  modalForm.value.product_status=1;
  const {code}=await addSysMedince(modalForm.value);
  if(code==200){
    Message.success("添加成功");
    handleClose(true);
    emits('freshList');
  }
}
const handEdit=async()=>{
  const {code}=await editSysMedince(modalForm.value.product_id,modalForm.value);
  if(code==200){
    Message.success("修改成功");
    handleClose(true);
    emits('freshList');
  }

};
const handleEditStatus=async(status)=>{
  const {code}=await editMedinceStatus(modalForm.value.product_id,{
    product_status: status
  });
  if(code==200){
    status==1?Message.success("上架成功"):Message.success("下架成功");
    handleClose(true);
    emits('freshList');
  }
}
 //详情
 const handleDetail = async (product_platform_id) => {
    const { code, data, message } = await getMedinceDetail(product_platform_id);

    if (code == 200) {
        Object.assign(modalForm, data);
        modalForm.value.stock=data.stock;
      }
    };
const handList= async(value)=>{
  loading.value=true;
  const {code,data}=await getList({
    product_name: value,
  });
  loading.value=false;
  if(code==200){
    medinceList.value=data;
  }
}
const changeMedince = (value) => {
    let arr = medinceList.value.filter((item) => item.product_platform_id == value);
    modalForm.value.product_platform_id = arr[0].product_platform_id;
    console.log(arr[0]);
    modalForm.value.product_spec=arr[0].product_spec;
    modalForm.value.product_pharmacy_code=arr[0].product_pharmacy_code;
    modalForm.value.manufacturer=arr[0].manufacturer;
    handleDetail(arr[0].product_platform_id)
  }
</script>
<style scoped>
  .cardNum {
    width: 150px;
  }
 .arco-form-item-layout-horizontal:first-child,
  .arco-form-item-layout-horizontal:nth-child(2) {
    align-items: center;
  }
  .cellbox{
    margin-top: 35px;
  }
  .cellbox .cell{
    width:50%;
    border-bottom:1px dashed #efefef;
    margin-bottom: 20px;
  }
  .cellbox .cell:first-child{
    border: none;
  }
 
  .box {
    display: flex;
    align-items: center;
  }

  .cert .arco-form-item-label-col {
    flex: 0 0 8px !important;
  }

</style>