<template>
  <div>
    <el-card style="margin-top: -15px">
      <el-form :model="filterQuery" label-width="90px" v-if="showSearch">
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品编码:">
              <el-input v-model="filterQuery.unionCode" style="width: 100%" placeholder="请输入DI/医保编码/商品条码"
                        clearable="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品通用名:">
              <el-input v-model="filterQuery.cpmctymc" style="width: 100%" placeholder="请输入产品通用名"
                        clearable="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="规格型号:">
              <el-input v-model="filterQuery.ggxh" style="width: 100%" placeholder="请输入规格型号"
                        clearable="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="top-right-btn">
        <el-button-group style="display:flex;">
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        </el-button-group>
      </div>


      <el-table v-loading="loading" :data="list" style="width: 100%" border
                highlight-current-row>
        <!--        <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="处方编码" prop="prescribeCode" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column label="DI标识" prop="diCode" show-overflow-tooltip></el-table-column>
        <el-table-column label="生产企业" prop="manufactory" show-overflow-tooltip></el-table-column>
        <el-table-column label="产品通用名" prop="thrName" show-overflow-tooltip></el-table-column>
        <el-table-column label="规格型号" prop="ggxh" show-overflow-tooltip></el-table-column>
        <el-table-column label="注册/备案凭证" prop="zczbhhzbapzbh" show-overflow-tooltip></el-table-column>
        <el-table-column label="计量单位" prop="measureUnit" show-overflow-tooltip></el-table-column>
        <el-table-column label="金额" prop="amount" show-overflow-tooltip></el-table-column>
        <el-table-column label="数量" prop="measureCount" show-overflow-tooltip></el-table-column>
        <el-table-column width="60" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click.native.stop="handleModifyClick(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-card>

  </div>
</template>

<script>
import {skPrescribeDi} from "@/api/basic/sicker/skPersonApi";

export default {
  name: "skPrescribeDi",
  props: {
    perscribeData: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      filterQuery: {
        cpmctymc: null,
        unionCode: null,
        adNum: null,
        page: 1,
        limit: 10,
        ggxh: null,
      },
      total: 0,
      loading: false,
      list: [],
      showSearch: true,

    }
  },
  methods: {
    getList() {
      this.loading = true;
      this.filterQuery.adNum = this.perscribeData.adNum;
      skPrescribeDi(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },

    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
  },
  created() {
    this.getList();
  },

}
</script>

<style scoped>

</style>
