<template>
  <div class="content-main">
    <el-row>
      <el-form :inline="true" :model="formInline" class="search-bm-boder">
        <el-form-item label="药剂类型">
          <el-input
            clearable
            v-model="formInline.yjzl"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="药剂名称">
          <el-input
            clearable
            v-model="formInline.ypmc"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="search-button">
            <span class="search-line"></span>
            <el-button
              type="primary"
              size="small"
              class="iconfont iconchaxun"
              @click="doSearch"
              >查询</el-button
            >
            <el-button
              type="primary"
              @click="
                formInline = {};
                doSearch();
              "
              size="small"
              class="iconfont iconzhongzhi"
              >重置</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row></el-row>
    <el-row class="addBtnBg"> 企业名称:{{ this.$route.query.qymc }} </el-row>
    <el-row>
      <el-table
        :data="tableData"
        stripe
        v-loading="listLoading"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="70">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="cc"
          label="企业名称"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.qymc }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ypdm"
          label="编码"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.ypdm }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="yjzl"
          label="药剂类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.yjzl }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ypmc"
          label="药剂名称"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.ypmc }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="yjxt"
          label="药剂形态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.yjxt }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ypggxh"
          label="包装规格"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.ypggxh }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="sccj"
          label="生产厂家"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.sccj }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="pdsysl"
          label="库存(kg)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.pdsysl }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="detailSubmit(scope.row.ypid)"
              type="primary"
              size="small"
              class="operate_show_btn iconfont iconchakan2"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageForm.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      ></el-pagination>
    </el-row>

    <el-dialog :visible.sync="addDialog" title="药剂信息维护" width="48%">
      <!-- <el-form ref="dialogForm" :model="dialogForm" label-width="220px" :rules="rules"> -->
      <el-form ref="dialogForm" :model="dialogForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编码" prop="ypdm">
              <el-input
                v-model="dialogForm.ypdm"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="qymc">
              <el-input
                v-model="dialogForm.qymc"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药剂类型" prop="yjzl">
              <el-input
                v-model="dialogForm.yjzl"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药剂名称" prop="ypmc">
              <el-input
                v-model="dialogForm.ypmc"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="药剂形态" prop="yjxt">
              <el-input
                v-model="dialogForm.yjxt"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装规格" prop="ypggxh">
              <el-input
                v-model="dialogForm.ypggxh"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产厂家" prop="sccj">
              <el-input
                v-model="dialogForm.sccj"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存(kg)" prop="kcsl">
              <el-input
                v-model="dialogForm.pdsysl"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记人" prop="djrName">
              <el-input
                v-model="dialogForm.djrName"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核对人" prop="hdrName">
              <el-input
                v-model="dialogForm.hdrName"
                :disabled="disSign"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; margin: 20px 0">
          <el-button
            type="primary"
            icon="iconfont iconfanhui"
            @click="addDialog = false"
          >
            返回</el-button
          >
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPageList, detailsFn } from "@/api/jcxxwh/yjxx";
import { dateFormat } from "@/utils/index";
export default {
  data() {
    return {
      formInline: {},
      addDialog: false,
      disSign: false,
      dialogTitle: "add",
      dialogForm: {},
      listLoading: false,
      tableData: [],
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      options: [
        {
          value: 1,
          label: "未备案",
        },
        {
          value: 2,
          label: "待提交",
        },
        {
          value: 3,
          label: "待审核",
        },
        {
          value: 4,
          label: "已驳回",
        },
        {
          value: 5,
          label: "已备案",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    dateFormat: dateFormat,
    doSearch() {
      this.pageForm.page = 1;
      this.getList();
    },
    //获取列表
    getList() {
      this.listLoading = true;
      this.formInline.creatorCode = sessionStorage.userCode;
      this.formInline.tyshxydm = this.$route.query.tyshxydm;
      getPageList(this.pageForm, this.formInline)
        .then((res) => {
          var data = res && res.data;
          this.tableData = data.list;
          this.pageForm.total = data.total || 0;
          this.listLoading = false;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },

    //详情
    detailSubmit(id) {
      detailsFn(id).then((res) => {
        if (res.infoCode == 200) this.dialogForm = res.data;
        else this.$message.error(res.data);
      });
      this.disSign = true;
      this.addDialog = true;
    },

    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList();
    },
  },
};
</script>
<style scoped>
.h3 {
  text-align: center;
  font-size: 1em;
  line-height: 2.5;
  color: #fff;
  background-color: #49a2fa;
  margin-bottom: 20px;
}
</style>
