<template>
  <div class="app-container">
    <el-form
      @submit.native.prevent
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px">
      <div class="query-box">
        <div class="query-box__left">
          <el-form-item label="" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入药品名称" clearable size="small" @keyup.enter.native="handleQuery"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(1)" v-hasPermi="['drugs:drugs:add']">新增药品</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(2)" v-hasPermi="['drugs:drugs:add']">新增规格</el-button>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(3)" v-hasPermi="['drugs:drugs:add']">新增价格</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>

    <div class="list-box">
      <div class="list-box__left">
        <el-table size="mini" v-loading="loading" :data="drugsList" @selection-change="handleSelectionChange" border :row-class-name="tableRowClassNameYP" @row-click="rowClickYP" class="el-table__row1">
          <el-table-column width="65" label="序号" align="center" type="index"/>
          <el-table-column label="药品字典名称" align="center" prop="name" />
          <el-table-column label="药品分类" align="center" prop="drugsType">
            <template slot-scope="scope">
              <dict-tag
                :options="drugsTypeOptions"
                :value="scope.row.drugsType"
              />
            </template>
          </el-table-column>
          <el-table-column label="标准编码" align="center" prop="code" />
          <el-table-column label="数据状态" align="center" prop="del">
            <template slot-scope="scope">
              <dict-tag :options="delArr" :value="scope.row.del" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" style="width: 40px" @click="handleUpdate(scope.row, 1)" v-hasPermi="['drugs:drugs:edit']" v-if="scope.row.del != 1">修改</el-button>
              <el-button size="mini" type="primary" style="width: 40px" @click="handleDelete(scope.row)" v-hasPermi="['drugs:drugs:remove']" v-if="scope.row.del != 1">作废</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>

      <div class="list-box__right">
        <el-table
          size="mini"
          v-loading="loading"
          :data="specsList"
          border
          :row-class-name="tableRowClassNameJG"
          @row-click="rowClickJG"
          class="el-table__row2"
        >
          <el-table-column
            width="48"
            label="序号"
            align="center"
            type="index"
          />
          <!-- <el-table-column label="id" align="center" prop="id" /> -->
          <el-table-column label="药品名称" align="center" prop="drugsName" />
          <el-table-column label="药品规格" align="center" prop="name" />
          <el-table-column label="中药类型" align="center" prop="type">
            <template slot-scope="scope">
              <dict-tag :options="typeOptions" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column label="数据状态" align="center" prop="del">
            <template slot-scope="scope">
              <dict-tag :options="delArr" :value="scope.row.del" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="140px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                style="width: 40px"
                @click="handleUpdate(scope.row, 2)"
                v-hasPermi="['drugs:specs:edit']"
                v-if="scope.row.del != 1"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="primary"
                style="width: 40px"
                @click="handleDeleteSpecs(scope.row)"
                v-hasPermi="['drugs:specs:remove']"
                v-if="scope.row.del != 1"
                >作废</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalSpecs > 0"
          :total="totalSpecs"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          :page.sync="pageSpecs"
          :limit="5"
          @pagination="getListSpecs(drugsId)"
        />

        <el-table
          size="mini"
          v-loading="loading"
          :data="priceList"
          style="margin-top: 100px"
          border
        >
          <el-table-column
            width="48"
            align="center"
            label="序号"
            type="index"
          />
          <!-- <el-table-column label="药品名称" align="center" prop="drugsName" />
          <el-table-column label="药品规格" align="center" prop="specsName" />
          <el-table-column label="重要类型" align="center" prop="specsName" /> -->
          <el-table-column
            label="产地名称"
            align="center"
            prop="placeName"
          />
          <el-table-column label="状态" align="center" prop="state">
            <template slot-scope="scope">
              {{ scope.row.state == "1" ? "启用" : "禁用" }}
            </template>
          </el-table-column>
          <el-table-column
            label="批发价"
            align="center"
            prop="wholesale"
          />
          <el-table-column
            label="零售价"
            align="center"
            prop="retail"
          />
          <el-table-column label="数据状态" align="center" prop="del">
            <template slot-scope="scope">
              <dict-tag :options="delArr" :value="scope.row.del" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="160"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                style="width: 40px"
                @click="handleUpdate(scope.row, 3)"
                v-hasPermi="['drugs:price:edit']"
                v-if="scope.row.del != 1"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="primary"
                style="width: 40px"
                v-hasPermi="['drugs:price:remove']"
                @click="handleDisable(scope.row)"
              >
                {{ scope.row.state == "1" ? "禁用" : "启用" }}</el-button
              >
              <el-button
                size="mini"
                type="primary"
                style="width: 40px"
                @click="handleDeletePlace(scope.row)"
                v-hasPermi="['drugs:price:remove']"
                v-if="scope.row.del != 1"
                >作废</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="totalPrice > 0"
          :total="totalPrice"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          :page.sync="pagePrice"
          @pagination="getListPrice(secondId)"
          :limit="5"
        />
      </div>
    </div>

    <!-- 添加或修改药品信息对话框(药品、规格) -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1100px"
      append-to-body
    >
      <div v-if="form">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="top"
          :validate-on-rule-change="true"
        >
          <div v-if="addState === 1">
            <h3 class="H3">药品信息</h3>

            <!-- 新增药品 -->
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item
                  label="药品名称"
                  prop="name"
                  label-position="top"
                  :rules="[{ required: true, message: '请输入药品名称' }]"
                >
                  <el-input
                    v-model="form.name"
                    placeholder="请输入药品名称"
                    @input="handleChangeName($event, 1)"
                  /> </el-form-item
              ></el-col>
              <el-col :span="8">
                <el-form-item
                  label="药品拼音码"
                  prop="params.pyq"
                  v-if="form.params !== undefined"
                >
                  <el-input v-model="form.params.pyq" disabled /> </el-form-item
              ></el-col>
              <el-col :span="8">
                <el-form-item
                  label="药品五笔码"
                  prop="params.wb"
                  v-if="form.params !== undefined"
                >
                  <el-input v-model="form.params.wb" disabled /> </el-form-item
              ></el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item
                  label="药品分类"
                  prop="drugsType"
                  :rules="[{ required: true, message: '请选择药品分类' }]"
                >
                  <el-select
                    v-model="form.drugsType"
                    placeholder="请选择药品分类"
                  >
                    <el-option
                      v-for="dict in drugsTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="毒理分类"
                  prop="poisonType"
                  :rules="[{ required: true, message: '请选择毒理分类' }]"
                >
                  <el-select
                    v-model="form.poisonType"
                    placeholder="请选择毒理分类"
                  >
                    <el-option
                      v-for="dict in poisonTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="价值分类"
                  prop="costType"
                  :rules="[{ required: true, message: '请选择价值分类' }]"
                >
                  <el-select
                    v-model="form.costType"
                    placeholder="请选择价值分类"
                  >
                    <el-option
                      v-for="dict in costTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="标准编码" prop="code">
                  <el-input v-model="form.code" placeholder="请输入标准编码" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="医保编码" prop="insuranceCode">
                  <el-input
                    v-model="form.insuranceCode"
                    placeholder="请输入医保编码"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-row>
                  <el-form-item
                    label="药品别名"
                    style="width: 300px"
                    prop="aliasName"
                  >
                    <el-col :span="21"
                      ><el-input
                        v-model="form.aliasName"
                        placeholder="请输入药品别名"
                    /></el-col>
                  </el-form-item>
                </el-row>
              </el-col>
            </el-row>
          </div>

          <div
            class="H3"
            style="
              display: flex;
              align-items: center;
              height: 65px;
              margin: 20px 0;
            "
            v-if="(addState === 1 || addState === 2) && form.drugsSpecs"
          >
            <h3>规格信息</h3>
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="addDrugsSpecs"
              v-if="addState === 1"
              >新增规格</el-button
            >
          </div>

          <!-- 新增规格、价格 -->
          <div
            v-if="
              (addState === 1 || addState === 2) &&
              form &&
              form.drugsSpecs &&
              form.drugsSpecs.length > 0
            "
          >
            <div v-for="(item, index) in form.drugsSpecs" :key="index">
              <div
                v-if="index >= 1"
                class="H3"
                style="
                  display: flex;
                  align-items: center;
                  height: 65px;
                  margin: 80px 0 20px 0;
                "
              >
                <h3>规格信息</h3>
                <el-button
                  type="danger"
                  style="margin-left: 10px"
                  @click="removeDrugsSpecs(index)"
                  >删除规格</el-button
                >
              </div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="药品名称">
                    <el-input
                      v-model="form.name"
                      disabled
                      placeholder="请输入药品名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="规格名称"
                    :prop="'drugsSpecs.' + index + '.name'"
                    :rules="[{ required: true, message: '请输入规格名称' }]"
                  >
                    <el-input
                      v-model="item.name"
                      placeholder="请输入规格名称"
                      @input="handleChangeName($event, 2, index)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="中药类型"
                    :prop="'drugsSpecs.' + index + '.type'"
                    :rules="[{ required: true, message: '请选择中药类型' }]"
                  >
                    <el-select
                      v-model="item.type"
                      placeholder="请选择中药类型"
                      @change="changeFn"
                    >
                      <el-option
                        v-for="dict in typeOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <!-- <el-form-item
                    label="包装量"
                    :prop="'drugsSpecs.' + index + '.packing'"
                    :rules="[{ required: true, message: '请输入包装量' }]"
                  > -->
                  <el-form-item
                    label="包装量"
                  >
                    <el-input
                      @input="changeFn"
                      v-model="item.packing"
                      placeholder="请输入包装量"
                      clearable
                      size="small"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="包装单位"
                    :prop="'drugsSpecs.' + index + '.packingUnit'"
                    :rules="[{ required: true, message: '请选择包装单位' }]"
                  >
                    <el-select
                      v-model="item.packingUnit"
                      placeholder="请选择包装单位"
                      @change="changeFn"
                    >
                      <el-option
                        v-for="dict in packingUnitOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="最小单位"
                    :prop="'drugsSpecs.' + index + '.minUnit'"
                    :rules="[{ required: true, message: '请选择最小单位' }]"
                  >
                    <el-select
                      v-model="item.minUnit"
                      placeholder="请选择最小单位"
                      @change="changeFn"
                    >
                      <el-option
                        v-for="dict in packingUnitOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="剂型" prop="dosageForm">
                    <el-select
                      v-model="item.dosageForm"
                      placeholder="请选择剂型"
                      @change="changeFn"
                    >
                      <el-option
                        v-for="dict in dosageFormOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="剂量" prop="dosageSize">
                    <el-row :span="24">
                      <el-col :span="17">
                        <el-input
                          v-model="item.dosageSize"
                          placeholder="请输入剂量"
                          @input="changeFn"
                        />
                      </el-col>
                      <el-col :span="4" style="margin-left: 10px">
                        <el-select
                          v-model="item.dosageSizeUnit"
                          placeholder="单位"
                          style="width: 80px"
                          @change="changeFn"
                        >
                          <el-option
                            v-for="dict in packingUnitOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                          ></el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="管理模式"
                    :prop="'drugsSpecs.' + index + '.manageMode'"
                    :rules="[{ required: true, message: '请选择管理单位' }]"
                  >
                    <el-select
                      v-model="item.manageMode"
                      placeholder="请选择管理模式"
                      @change="changeFn"
                    >
                      <el-option
                        v-for="dict in manageModeArr"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option></el-select
                  ></el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item
                    label="账簿类型"
                    :prop="'drugsSpecs.' + index + '.accType'"
                    :rules="[{ required: true, message: '请选择账簿类型' }]"
                  >
                    <el-select
                      v-model="item.accType"
                      placeholder="请选择账簿类型"
                      @change="changeFn"
                    >
                      <el-option
                        v-for="dict in accTypeOption"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="药品五笔码"
                    prop="params.wb"
                    v-if="item.params !== undefined"
                  >
                    <el-input v-model="item.params.wb" disabled />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="规格拼音码"
                    prop="params.pyq"
                    v-if="item.params !== undefined"
                  >
                    <el-input v-model="item.params.pyq" disabled />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="24">
                <el-col :span="8">
                  <el-row>
                    <el-form-item
                      label="规格别名"
                      style="width: 300px"
                      :prop="'drugsSpecs.' + index + '.aliasName'"
                    >
                      <el-col :span="21"
                        ><el-input
                          v-model="item.aliasName"
                          placeholder="请输入规格别名"
                      /></el-col>
                    </el-form-item>
                  </el-row>
                </el-col>
              </el-row>

              <div
                class="H3"
                style="
                  display: flex;
                  align-items: center;
                  height: 65px;
                  margin: 20px 0;
                "
              >
                <h3>价格信息</h3>
                <el-button
                  type="primary"
                  style="margin-left: 10px"
                  @click="addDrugsSpecsPrices(index)"
                  >新增价格</el-button
                >
              </div>

              <el-table size="mini" :data="item.drugsSpecsPrices" style="width: 100%">
                <el-table-column
                  size="mini"
                  type="index"
                  label="序号"
                  align="center"
                  width="65"
                >
                </el-table-column>
                <el-table-column
                  prop="specsName"
                  label="规格名称"
                  align="center"
                >
                  <template>
                    <el-input v-model="form.drugsSpecs[index].name" disabled size="mini" style="width:100%">
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="placeName"
                  label="产地名称"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.placeName"
                      placeholder="请选择产地"
                      size="mini" style="width:100%"
                    >
                      <el-option
                        v-for="item in placeArr"
                        :key="item.id"
                        :value="item.name"
                        :label="item.name"
                      ></el-option>
                    </el-select>
                    <!-- <el-input
                      v-model="scope.row.placeName"
                      placeholder="请输入产地"
                    >
                    </el-input> -->
                  </template>
                </el-table-column>
                <el-table-column
                  prop="wholesale"
                  label="批发价"
                  align="center"
                  size="mini" style="width:100%"
                >
                  <template slot-scope="scope">
                    <el-input-number
                    size="mini"
                    controls-position="right"
                      v-model="scope.row.wholesale"
                      placeholder="请输入批发价"
                      style="width:100%"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="retail"
                  label="零售价"
                  align="center"
                  size="mini" style="width:100%"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.retail"
                      placeholder="请输入零售价"
                    >
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="markupRate"
                  label="加价率"
                  align="center"
                  size="mini" style="width:100%"
                >
                  <template slot-scope="scope">
                    <el-input-number
                      v-model="scope.row.markupRate"
                      placeholder="请输入加价率"
                      :max="100"
                      :min="0"
                      size="mini"
                      controls-position="right"
                      style="width:100%"
                    >
                    </el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="gift"
                  label="赠品"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row.gift"
                      placeholder="请选择是否有赠品"
                  size="mini" style="width:100%"
                    >
                      <el-option value="Y" label="是"></el-option>
                      <el-option value="N" label="否"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="approvalCode"
                  label="批准号"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.approvalCode"
                      placeholder="请输入批准号"
                    >
                    </el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="removeDrugsSpecsPrices(index, scope)"
                      v-hasPermi="['drugs:price:remove']"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div
            v-if="
              addState === 3 &&
              form.drugsSpecs &&
              form.drugsSpecs.length > 0 &&
              form.drugsSpecs[0].drugsSpecsPrices &&
              form.drugsSpecs[0].drugsSpecsPrices.length > 0
            "
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item
                  label="产地名称"
                  :prop="'drugsSpecs.0.drugsSpecsPrices.0.placeName'"
                  :rules="[{ required: true, message: '请输入产地名称' }]"
                >
                  <!-- <el-input
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].placeName"
                    placeholder="请输入产地名称"
                    @input="changeFn"
                  /> -->
                  <el-select
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].placeName"
                    placeholder="请选择产地"
                    style="width: 160px"
                  >
                    <el-option
                      v-for="item in placeArr"
                      :key="item.id"
                      :value="item.name"
                      :label="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="批发价" prop="wholesale">
                  <el-input
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].wholesale"
                    placeholder="请输入批发价"
                    @input="changeFn"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="零售价"
                  :prop="'drugsSpecs.0.drugsSpecsPrices.0.retail'"
                  :rules="[{ required: true, message: '请输入零售价' }]"
                >
                  <el-input
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].retail"
                    placeholder="请输入零售价"
                    @input="changeFn"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="加价率" prop="markupRate">
                  <el-input-number
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].markupRate"
                    placeholder="请输入加价率"
                    @input="changeFn"
                    :max="100"
                    :min="0"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="赠品" prop="gift">
                  <!-- <el-input
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].gift"
                    placeholder="请输入赠品"
                    @input="changeFn"
                  /> -->

                  <el-select
                    v-model="form.drugsSpecs[0].drugsSpecsPrices[0].gift"
                    placeholder="请选择是否有赠品"
                  >
                    <el-option value="Y" label="是"></el-option>
                    <el-option value="N" label="否"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="批准文号" prop="approvalCode">
                  <el-input
                    v-model="
                      form.drugsSpecs[0].drugsSpecsPrices[0].approvalCode
                    "
                    placeholder="请输入批准文号"
                    @input="changeFn"
                  size="mini" style="width:100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listDrugs,
  getDrugs,
  delDrugs,
  addDrugs,
  updateDrugs,
  exportDrugs,
} from "@/api/drugs/drugs";

import {
  listPrice,
  addPrice,
  updatePrice,
  delPrice,
  getPrice,
} from "@/api/drugs/price";

import {
  listSpecs,
  addSpecs,
  updateSpecs,
  delSpecs,
  getSpecs,
} from "@/api/drugs/specs";

import { listPlace } from "@/api/drugs/place";

import { getInfo } from "@/api/medical/mechanism";

export default {
  name: "Drugs",
  data() {
    return {
      delArr: [],
      manageModeArr: [],
      dialogTableVisibleYP: false,
      dialogTableVisibleGG: false,
      gGIndex: null,
      row: "",
      drugsId: "",
      drugsSpecsId: "",
      addState: null,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //药品规格总条数
      totalSpecs: 0,
      pageSpecs: 1,
      //价格总条数
      totalPrice: 0,
      pagePrice: 1,
      // 药品信息表格数据
      drugsList: [],
      // 价格信息表格数据
      priceList: [],
      // 药品规格表格数据
      specsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 药品分类字典
      drugsTypeOptions: [],
      // 毒理分类字典
      poisonTypeOptions: [],
      // 价值分类字典
      costTypeOptions: [],
      // 剂型字典
      dosageFormOptions: [],
      //账簿类型
      accTypeOption: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        drugsType: null,
        poisonType: null,
        costType: null,
        code: null,
        insuranceCode: null,
        state: null,
      },
      // 中药类型字典
      typeOptions: [],
      // 包装单位字典
      packingUnitOptions: [],
      // 表单参数
      form: {
        name: "",
        params: {
          pyq: "",
          wb: "",
        },
        drugsType: "",
        poisonType: "",
        costType: "",
        code: "",
        insuranceCode: "",
        aliasName: "", //药品别名
        drugsSpecs: [
          {
            params: {
              pyq: "",
              wb: "",
            },
            drugsName: "",
            name: "",
            type: "",
            packing: "",
            packingUnit: "",
            minUnit: "",
            dosageForm: "",
            dosageSize: "",
            dosageSizeUnit: "",
            manageMode: "",
            accType: "",
            aliasName: "",
            drugsSpecsPrices: [
              {
                specsName: "",
                placeName: "",
                wholesale: null,
                retail: "",
                markupRate: "1.25",
                gift: "N",
              },
            ],
          },
        ],
      },
      formYP: {},
      formGG: {},
      // 表单校验
      rules: {
        // manageMode: [
        //   { required: true, message: "请选择管理模式", trigger: "blur" },
        // ],
      },
      // 规格查询id
      secondId: null,
      // 药品查询id
      firstId: null,
      rowIndex1: "",
      rowIndex2: "",
      placeArr: [],
    };
  },
  created() {
    this.getList();
    // this.getListPrice();
    this.getListPlace();
    this.getDicts("manage").then((response) => {
      this.manageModeArr = response.data;
    });
    this.getDicts("del_state").then((response) => {
      this.delArr = response.data;
    });
    this.getDicts("drugs_type").then((response) => {
      this.drugsTypeOptions = response.data;
    });
    this.getDicts("poison_type").then((response) => {
      this.poisonTypeOptions = response.data;
    });
    this.getDicts("cost_type").then((response) => {
      this.costTypeOptions = response.data;
    });
    this.getDicts("chinese_medicine_type").then((response) => {
      this.typeOptions = response.data;
    });
    this.getDicts("unit").then((response) => {
      this.packingUnitOptions = response.data;
    });
    this.getDicts("dosage_form").then((response) => {
      this.dosageFormOptions = response.data;
    });
    this.getDicts("acc_type").then((response) => {
      this.accTypeOption = response.data;
    });
  },
  methods: {
    test() {
      //console.log("input");
    },
    changeFn() {
      this.$forceUpdate();
    },

    /**获取产地**/
    getListPlace() {
      listPlace().then((res) => {
        //console.log(res);
        this.placeArr = res.rows;
      });
    },
    /** 查询药品信息列表 */
    getList() {
      this.loading = true;
      listDrugs(this.queryParams).then((response) => {
        this.drugsList = response.rows;
        this.total = response.total;
        this.loading = false;
        !this.drugsId ? this.getListSpecs(response.rows[0].id) : "";

        this.firstId = response.rows[0].id;
        this.drugsId = response.rows[0].id;
        this.row = response.rows[0];
        this.$nextTick(() => {
          $(".el-table__row1 .el-table__row")
          .eq(0).addClass('selectrow')
          .css({"background":"#17c7b1",'color':'#fff'})
        })
      });
    },
    /** 查询价格信息列表 */
    getListPrice(id) {
      this.loading = true;
      listPrice({ specsId: id, pageNum: this.pagePrice, pageSize: 5 }).then(
        (response) => {
          this.priceList = response.rows;
          this.totalPrice = response.total;
          this.loading = false;
        }
      );
    },
    /** 查询药品规格列表 */
    getListSpecs(id) {
      this.loading = true;
      listSpecs({ drugsId: id, pageNum: this.pageSpecs, pageSize: 5 }).then(
        (response) => {
          this.specsList = response.rows;
          this.totalSpecs = response.total;
          this.loading = false;
          this.getListPrice(response.rows[0].id);
          this.secondId = response.rows[0].id;
          this.drugsSpecsId = response.rows[0].id;
          this.$nextTick(() => {
            $(".el-table__row2 .el-table__row")
            .eq(0).addClass('selectrow')
            .css({"background":"#17c7b1",'color':'#fff'})
          })
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: "",
        params: {
          pyq: "",
          wb: "",
        },
        drugsType: "",
        poisonType: "",
        costType: "",
        code: "",
        insuranceCode: "",
        aliasName: "", //药品别名
        drugsSpecs: [
          {
            params: {
              pyq: "",
              wb: "",
            },
            drugsName: "",
            name: "",
            type: "",
            packing: "",
            packingUnit: "",
            minUnit: "",
            dosageForm: "",
            dosageSize: "",
            dosageSizeUnit: "",
            manageMode: "",
            accType: "",
            aliasName: "",
            drugsSpecsPrices: [
              {
                specsName: "",
                placeName: "",
                wholesale: null,
                retail: "",
                markupRate: "1.25",
                gift: "N",
              },
            ],
          },
        ],
      };
      // switch (this.addState) {
      //   case 1:
      //     this.form = {
      //       id: null,
      //       name: "",
      //       params: {
      //         pyq: "",
      //         wb: "",
      //       },
      //       drugsType: "",
      //       poisonType: "",
      //       costType: "",
      //       code: "",
      //       insuranceCode: "",
      //       aliasName: "", //药品别名
      //       drugsSpecs: [
      //         {
      //           params: {
      //             pyq: "",
      //             wb: "",
      //           },
      //           drugsName: "",
      //           name: "",
      //           type: "",
      //           packing: "",
      //           packingUnit: "",
      //           minUnit: "",
      //           manageMode: "",
      //           dosageForm: "",
      //           dosageSize: "",
      //           dosageSizeUnit: "",
      //           accType: "",
      //           aliasName: "",
      //           drugsSpecsPrices: [
      //             {
      //               specsName: "",
      //               placeName: "",
      //               wholesale: null,
      //               retail: "",
      //               markupRate: "1.25",
      //               gift: "N",
      //             },
      //           ],
      //         },
      //       ],
      //     };
      //     break;
      //   case 2:
      //     this.form.drugsSpecs = [
      //       {
      //         params: {
      //           pyq: "",
      //           wb: "",
      //         },
      //         drugsName: "",
      //         name: "",
      //         type: "",
      //         packing: "",
      //         packingUnit: "",
      //         minUnit: "",
      //         dosageForm: "",
      //         dosageSize: "",
      //         dosageSizeUnit: "",
      //         manageMode: "",
      //         accType: "",
      //         aliasName: "",
      //         drugsSpecsPrices: [
      //           {
      //             specsName: "",
      //             placeName: "",
      //             wholesale: null,
      //             retail: "",
      //             markupRate: "1.25",
      //             gift: "N",
      //           },
      //         ],
      //       },
      //     ];
      //     break;
      //   case 3:
      //     if (this.form.drugsSpecs && this.form.drugsSpecs.length > 0) {
      //       this.form.drugsSpecs[0].drugsSpecsPrices = [
      //         {
      //           specsName: "",
      //           placeName: "",
      //           wholesale: null,
      //           retail: "",
      //           markupRate: "1.25",
      //           gift: "N",
      //         },
      //       ];
      //     }
      //     break;
      // }
      this.resetForm("form");
    },
    resetYP() {
      this.formYP = {
        name: "",
      };
      this.resetForm("formYP");
    },
    resetGG() {
      this.formGG = {
        name: "",
      };
      this.resetForm("formGG");
    },
    tableRowClassNameYP({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    rowClickYP(row) {
      $(".el-table__row1 .el-table__row")
        .eq(row.index)
        .addClass('selectrow')
        .css({"background":"#17c7b1",'color':'#fff'})
        .siblings('tr')
        .removeClass('selectrow')
        .css({"background":"#fff",'color':'#606266'})
      this.rowIndex1 = row.index;
      this.getListSpecs(row.id);
      this.firstId = row.id;
      this.drugsId = row.id;
      this.row = row;
    },
    tableRowClassNameJG({ row, rowIndex }) {
      row.index = rowIndex;
    },
    rowClickJG(row) {
      $(".el-table__row2 .el-table__row")
        .eq(row.index)
        .addClass('selectrow')
        .css({"background":"#17c7b1",'color':'#fff'})
        .siblings('tr')
        .removeClass('selectrow')
        .css({"background":"#fff",'color':'#606266'})
      this.rowIndex2 = row.index;
      this.getListPrice(row.id);
      this.secondId = row.id;
      this.drugsSpecsId = row.id;
    },
    /** 禁用 **/
    handleDisable(row) {
      const id = row.id || this.ids;
      const parmes = {
        id,
        state: row.state == 1 ? (row.state = 2) : (row.state = 1),
      };
      updatePrice(parmes).then(() => {
        this.getListPrice(this.secondId);
        this.msgSuccess("修改成功");
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.drugsId = ''
      $(".el-table__row1").find('.el-table__row').removeClass('selectrow').css({"background":"#fff",'color':'#303133'})
      $(".el-table__row2").find('.el-table__row').removeClass('selectrow').css({"background":"#fff",'color':'#303133'})
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd(num) {
      this.reset();
      this.addState = num;
      this.open = true;
      if (num === 1) {
        this.title = "添加药品信息";
      } else if (num === 2) {
        this.form.name = this.row.name;
        this.title = "添加规格信息";
      } else {
        this.title = "添加价格信息";
      }
    },
    /** 修改按钮操作 */
    async handleUpdate(row, num) {
      //console.log("row", row);
      const id = row.id || this.ids;
      this.reset();
      this.addState = num;
      if (num === 1) {
        getDrugs(id).then((response) => {
          if (response) {
            this.form = response.data;
            console.log(this.form.drugsSpecs)
            this.open = true;
            this.firstId = id;
            this.title = "修改药品信息";
          }
        });
      } else if (num === 2) {
        getDrugs(this.firstId).then((response) => {
          if (response) {
            this.form = response.data;
            this.title = "修改药品信息";
            getSpecs(id).then((response) => {
              if (response) {
                this.form.drugsSpecs = [];
                //this.form.drugsSpecs[0] = response.data;
                this.$set(this.form.drugsSpecs, 0, response.data)
                this.open = true;
                this.secondId = id;
                this.title = "修改规格信息";
              }
            });
          }
        });
      } else if (num === 3) {
        getDrugs(this.firstId).then((response) => {
          if (response) {
            this.form = response.data;
            // this.title = "修改药品信息";
            getSpecs(this.secondId).then((response) => {
              if (response) {
                this.form.drugsSpecs[0] = response.data;
                // this.title = "修改规格信息";
                getPrice(id).then((response) => {
                  if (response) {
                    this.form.drugsSpecs[0].drugsSpecsPrices[0] = response.data;
                    // //console.log(response.data, "888777");
                    this.open = true;
                    this.title = "修改价格信息";
                  }
                });
              }
            });
          }
        });
      }
    },
    dialogFormVisibleYP() {
      this.$refs["formYP"].validate((valid) => {
        if (this.formYP.name) {
          //console.log(this.formYP.name);
          this.form.aliasName +=
            this.form.aliasName !== ""
              ? "," + this.formYP.name
              : this.formYP.name;
          this.dialogTableVisibleYP = false;
        } else {
          console.error("请填写别名");
        }
      });
    },
    dialogFormVisibleGG() {
      this.$refs["formGG"].validate((valid) => {
        //console.log(this.formGG.name);
        if (this.formGG.name) {
          this.form.drugsSpecs[this.gGIndex].aliasName +=
            this.form.drugsSpecs[this.gGIndex].aliasName !== ""
              ? "," + this.formGG.name
              : this.formGG.name;
          this.dialogTableVisibleGG = false;
        } else {
          console.error("请填写别名");
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //console.log(this.addState);
          var form = JSON.parse(JSON.stringify(this.form))
          form.aliasName = form.aliasName && form.aliasName.replaceAll('，', ',')
          form.drugsSpecs.forEach(v => {
            v.aliasName = v.aliasName && v.aliasName.replaceAll('，', ',')
          })
          if (this.addState === 1) {
            if (form.id != null) {
              updateDrugs(form).then((response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
                this.getListSpecs(this.drugsId);
                // this.getListPrice(this.drugsSpecsId);
              });
            } else {
              addDrugs(form).then((response) => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
                // this.getListPrice();
              });
            }
          } else if (this.addState === 2) {
            let params = {
              ...form.drugsSpecs[0],
              drugsId: this.drugsId,
            };
            if (form.id != null) {
              updateSpecs(params).then((response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                // this.getList();
                this.getListSpecs(this.drugsId);
              });
            } else {
              addSpecs(params).then((response) => {
                this.msgSuccess("新增成功");
                this.open = false;
                // this.getList();
                this.getListSpecs(this.drugsId);
              });
            }
          } else {
            let params = {
              ...form.drugsSpecs[0].drugsSpecsPrices[0],
              drugsId: this.drugsId,
              specsId: this.drugsSpecsId,
            };
            if (form.id != null) {
              updatePrice(params).then((response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                // this.getList();
                this.getListPrice(this.drugsSpecsId);
              });
            } else {
              addPrice(params).then((response) => {
                this.msgSuccess("新增成功");
                this.open = false;
                // this.getList();
                this.getListPrice(this.drugsSpecsId);
              });
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm("确定需要作废选中的数据吗", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // let params = {
          // id: row.id,
          // state: 1,
          // };
          delDrugs(row.id).then((res) => {
            this.getList();
          });
        })
        .catch(() => {});
    },
    handleDeleteSpecs(row) {
      const ids = row.id || this.ids;
      this.$confirm("确定需要作废选中的数据吗", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // let params = {
          // id: row.id,
          // state: 1,
          // };
          delSpecs(row.id).then((res) => {
            this.getListSpecs(this.drugsId);
          });
        })
        .catch(() => {});
    },
    handleDeletePlace(row) {
      //console.log(row);
      const ids = row.id || this.ids;
      this.$confirm("确定需要作废选中的数据吗", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })

        .then(() => {
          // let params = {
          // id: row.id,
          // state: 1,
          // };
          delPrice(row.id).then((res) => {
            this.getListPrice(this.drugsSpecsId);
          });
        })
        .catch(() => {
          //console.log(2323);
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有药品信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportDrugs(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    handleChangeName(e, num, index) {
      getInfo(e).then((res) => {
        if (res.code === 200 && num === 1) {
          this.$set(this.form.params, "pyq", res.data.pyq);
          this.$set(this.form.params, "wb", res.data.wb);
        } else {
          this.$set(this.form.drugsSpecs[index].params, "pyq", res.data.pyq);
          this.$set(this.form.drugsSpecs[index].params, "wb", res.data.wb);
          this.changeFn();
        }
      });
    },
    //医药别名新增
    addAlias() {
      // this.form.alias.push("");
      // this.formYP.name = '';
      this.resetYP();
      this.dialogTableVisibleYP = true;
    },
    //医药别名删除
    // removeAlias(index) {
    //   this.form.alias.splice(index, 1);
    // },
    //规格别名添加
    addSpecifications(index) {
      this.resetGG();
      this.dialogTableVisibleGG = true;
      this.gGIndex = index;
      // this.form.drugsSpecs[index].Specifications.push("");
    },
    //规格别名删除
    // removeSpecifications(index, ind) {
    //   this.form.drugsSpecs[index].Specifications.splice(ind, 1);
    // },
    //新增价格
    addDrugsSpecsPrices(index) {
      this.form.drugsSpecs[index].drugsSpecsPrices.push({
        specsName: "",
        placeName: "",
        wholesale: null,
        retail: "",
        markupRate: "1.25",
        gift: "N",
      });
    },
    //删除价格
    removeDrugsSpecsPrices(index, ind) {
      if (ind.$index >= 1) {
        this.form.drugsSpecs[index].drugsSpecsPrices.splice(ind.$index, 1);
      } else {
        alert("至少有一项");
      }
    },
    //新增规格
    addDrugsSpecs() {
      this.form.drugsSpecs.push({
        params: {
          pyq: "",
          wb: "",
        },
        drugsName: "",
        name: "",
        type: "",
        packing: "",
        packingUnit: "",
        minUnit: "",
        dosageForm: "",
        dosageSize: "",
        dosageSizeUnit: "",
        manageMode: "",
        accType: "",
        aliasName: "",
        drugsSpecsPrices: [
          {
            specsName: "",
            placeName: "",
            wholesale: null,
            retail: "",
            markupRate: "1.25",
            gift: "N",
          },
        ],
      });
    },
    //删除规格
    removeDrugsSpecs(index) {
      this.form.drugsSpecs.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.list-box {
  width: 100%;
  // overflow: hidden;
  min-width: 1180px;
  overflow-x: scroll;
  &__left {
    width: 48%;
    float: left;
    margin-right: 1%;
  }
  &__right {
    width: 51%;
    float: left;
  }
}
.cursor {
  cursor: pointer;
}
.el-input--medium .el-input__inner {
  width: 215px !important;
}
.el-select {
  width: 305px;
}
.H3 {
  color: #333;
  font-size: 24px;
  font-weight: 500;
  padding-bottom: 30px;
  border-bottom: 1px solid #ecf2f1;
}
</style>
<style>
.el-table--enable-row-hover .el-table__body tr.selectrow:hover > td { background: #17c7b1!important; color: #fff!important;}
</style>