<template>
  <Mask :width="800" :height="720" :is-show="show" :top="100" @close="show=false" title="药品" :show-footer="true">
    <div class="search_content_wrapper">
      <div class="search_wrapper">
        <span>药品名称:</span>
        <el-input
            class="input"
            v-model="keyword"
            placeholder="请输入药品名称或者编号"
            @keydown.enter="search_social"
            clearable/>
        <el-button @click="search_social">搜索</el-button>
      </div>
      <div class="search_result">
        <div class="result_table" style="width: 100%; height: 100%;overflow: hidden">
          <el-scrollbar>
            <el-table v-loading="isloading" :data="search_result.list" style="width: 100%"
                      highlight-current-row @current-change="change_current_search_data_index"
                      :row-class-name="tableRowClassName">
              <el-table-column prop="name" label="名称" fixed width="180" show-overflow-tooltip/>
              <el-table-column :prop="type==1306?'json.reg_number' : 'json.approval_number'" fixed label="国药准字" width="180" v-if="type==1301 || type==1306" show-overflow-tooltip/>
              <el-table-column prop="producer" label="生产企业" width="180" v-if="type==1301 || type==1306" show-overflow-tooltip/>
              <el-table-column v-if="type==1301" prop="json.reg_specifications" label="注册规格" width="80"
                               show-overflow-tooltip/>
              <el-table-column v-if="type==1301" prop="json.min_packaging_unit" label="包装单位" width="80"
                               show-overflow-tooltip/>
              <el-table-column v-if="type==1301" prop="json.min_packaging_number" label="包装数量" width="80"
                               show-overflow-tooltip/>
              <el-table-column v-if="type==1301" prop="json.min_preparation_unit" label="制剂单位" width="80"
                               show-overflow-tooltip/>
              <el-table-column prop="code" label="医保编码" width="180" show-overflow-tooltip/>
              <el-table-column prop="enddate" label="有效期至" width="180" show-overflow-tooltip/>
            </el-table>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="bottom">
        <div class="page_btn_list">
          <el-pagination background layout="prev, pager, next" :page-count="search_result.total_page"
                         v-model:current-page="current_page" @current-change="change_page"/>
        </div>
        <div class="btn">
          <el-button type="primary" @click="confirm">确认</el-button>
          <el-button type="primary" @click="close">关闭</el-button>
        </div>
      </div>
    </template>
  </Mask>
</template>
<script setup lang="ts">
import {onMounted, ref, defineProps} from "vue";
import {post} from '@/utils/request.ts'
import Mask from "@/components/common/Mask.vue";

let current_search_data: any = null;
let keyword = ref('');
let produce = ref("");
let type = ref(0);
let current_page = ref(1)
const show = ref(false);

const emit = defineEmits(["confirm"])

let search_result = ref({
  total_page: 0,
  list: [],
  page: 1,
});


let tableRowClassName = (res: any) => {
  if (current_search_data != null && current_search_data.id == res.row.id) {
    return 'invalid';
  }
  return 'valid'
}

let change_page = (page: number) => {
  search_social()
}
const change_current_search_data_index = (val: any) => {
  current_search_data = JSON.parse(JSON.stringify(val));
  // proos.changeData(current_search_data)
}
const init = (_type: number, _name: string) => {
  type.value = _type;
  keyword.value = _name;
  show.value = true;
  if (keyword.value && keyword.value != ""){
    search_social()
  }

};
defineExpose({init});

function init_search_data() {
  isloading.value = false;
  current_search_data = null;
  // proos.changeData(null)
  search_result.value = {
    total_page: 0,
    list: [],
    page: 1,
  }
}

let confirm = () => {
  let jsondata = JSON.parse(current_search_data.data);
  let data = {
    id: null,
    type: null,
    name: jsondata?.name,
    commonName: jsondata?.common_name,
    hilistCode: jsondata.code,
    unitPrice: null,
    purchaseUnitPrice: null,
    producer: jsondata.producer,
    barcode: null,
    minPackagingNumber: jsondata.min_packaging_number,
    packagingUnit: jsondata.min_packaging_unit,
    minPackagingUnit: jsondata.min_preparation_unit,
    expiryTime: 10,
    approvalCode: jsondata.approval_number || jsondata.reg_number || '',
    medicineDosageUnit: jsondata.min_measure_unit,
    medicineDosageNum: jsondata.specification,
    extra: {
      regType: jsondata.reg_type,
      approvalNumber: jsondata.approval_number,
      category: jsondata.category
    }
  }
  emit('confirm', data)
  show.value = false;
}
let isloading = ref(false);
let search_social = () => {
  isloading.value = true;
  post("social/directory/search", {
    keyword: keyword.value,
    produce: produce.value,
    page: current_page.value,
    size: 20,
    type: type.value
  }, {catch_error: true}).then((res: any) => {
    init_search_data()
    let list = res.list;
    for (let i = 0; i < list.length; i++) {
      let end_datetime = list[i].enddate;
      //和当前时间比较
      if (new Date().getTime() < new Date(end_datetime).getTime() || end_datetime == "" || end_datetime == null) {
        let time_diff = new Date(end_datetime).getTime() - new Date().getTime();
        // list[i].data.is_valid = true
      } else {
        // list[i].data.is_valid = false
      }
      if (end_datetime == "" || end_datetime == null) {
        list[i].enddate = "长期有效";
      }

    }
    search_result.value = {
      total_page: res.total_page,
      list: list,
      page: 1,
    }
  }).catch(() => {
    isloading.value = false;
  })
}
const close = () => {
  show.value = false;
  keyword.value=''
}
</script>
<style scoped lang="scss">
.bottom {
  display: flex;
  padding: 0 24px;
  justify-content: space-between;
  margin-top: 20px;
}

.search_content_wrapper {
  height: 522px;
  background-color: #FFF;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;

  .search_wrapper {
    position: relative;
    width: 100%;
    display: flex;
    margin: 0 auto;
    height: 60px;

    span {
      position: relative;
      display: block;
      width: 100px;
      text-align: right;
      line-height: 40px;
    }

    .input {
      display: block;
      flex: 1;
    }


    button {
      width: 80px;
      line-height: 40px;
      color: #FFF;
      margin-left: 10px;
      height: 40px;
      background-color: #409EFF;
      border: none;
    }
  }

  .search_result {
    flex: 1;
    min-height: 0;
  }
}


:deep(.invalid) {
  color: #409EFF;
}

.search_result {
  width: 100%;
  height: 400px;
}
</style>
