<template>
  <div style="display: flex;">
    <el-card style="width:18%;margin-right:18px;border-radius:6px;">
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick" stretch>
          <el-tab-pane label="按分类" name="grp"></el-tab-pane>
          <el-tab-pane label="按机构" name="org"></el-tab-pane>
      </el-tabs>
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="hospId"
        @node-click="handleNodeClick"
        default-expand-all="true"
        style="margin-top:10px;"
      ></el-tree>
    </el-card>
    <div class="right-common-box">
      <el-form :model="listQuery" ref="listQuery" :inline="true">
        <el-form-item label="药品名称" prop="drugName" class="long">
          <el-input
            v-model="listQuery.drugName"
            placeholder="请输入药品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="对码状态" prop="stas">
          <el-select
            v-model="listQuery.stas"
            placeholder="请选择对码状态"
            clearable
          >
            <el-option
              v-for="item in crspFlgOption"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getHospDrug('search')"
            >查询</el-button
          >
          <el-button @click="reset('drug')">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="right-button">
        <el-button type="primary" icon="el-icon-refresh" @click="handleUpdate"
          >更新目录
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
        stripe
        border
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column fixed type="index" label="序号" width="60" />
        <el-table-column label="药品编码" prop="drugListId" width="80" />
        <el-table-column label="医院药品名称" prop="drugName" width="260">
          <template slot-scope="scope">
              <drug-info :info="scope.row"></drug-info>
          </template>
        </el-table-column>
        <el-table-column label="对码状态" prop="stas">
          <template #default="{ row }">
            <span v-if="row.stas == '0'" style="color:red;">未对码</span>
            <span v-if="row.stas == '1'" style="color:lawngreen;">已对码</span>
          </template>
        </el-table-column>
        <el-table-column label="转换比" prop="splerConvrat" />
        <el-table-column label="供应商药品名称" prop="splerDrugName" width="260">
          <template slot-scope="scope">
            <div class="drug-name" v-if="scope.row.splerDrugName">
              <el-tag>{{ scope.row.splerDrugName }}</el-tag>
              {{ "【" + scope.row.splerDosformName + "】" }}
              <el-tag v-if="scope.row.splerEssdrugType">{{  scope.row.splerEssdrugType === "0"? "非基药": scope.row.splerEssdrugType === "1"? "基药": scope.row.splerEssdrugType}}</el-tag><br />
              {{ "供应商厂家 【" + scope.row.splerProdentpName + "】" }}<br />
              {{ "供应商规格 【" +scope.row.splerSpecName +"*" +scope.row.convrat +scope.row.splerPrepunt +"/" +scope.row.splerPacUnt +"】"}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="供应商价格" prop="splerPurcPric" />
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <div>
              <el-button type="text" v-if="scope.row.stas == '0'"  @click="handleDui(scope.row)">对码</el-button>
              <el-button type="text" v-if="scope.row.stas == '1'"  @click="handleCanc(scope.row)">取消对码</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <yl-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getHospDrug"
      />
    </div>
    <el-dialog title="药品对码" :visible.sync="dialogDui" width="55%">
      <template>
        <h3 style="margin:10px 0;">选中药品信息：</h3>
        <el-table :data="selectDrguData" border style="width: 100%">
          <el-table-column fixed prop="drugName" label="药品名称" width="150">
          </el-table-column>
          <el-table-column prop="dosformName" label="剂型名称" width="120">
          </el-table-column>
          <el-table-column prop="prodentpName" label="生产企业">
          </el-table-column>
          <!-- <el-table-column prop="drugListId" label="药品编码" width="80">
          </el-table-column> -->
          <el-table-column prop="specName" label="规格" width="300">
            <template slot-scope="scope">
              <div class="drug-name">
                {{
                  "医院规格 【" +
                    scope.row.specName +
                    "*" +
                    scope.row.convrat +
                    scope.row.prepunt +
                    "/" +
                    scope.row.pacUnt +
                    "】"
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <h3 style="margin:10px 0;">供应商药品目录：</h3>
        <el-form :model="supQuery" ref="supQuery" :inline="true">
          <el-form-item label="药品名称" prop="splerDrugName" class="long">
            <el-input
              v-model="supQuery.splerDrugName"
              placeholder="请输入药品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="药品编码" prop="splerDrugListId" class="long">
            <el-input
              v-model="supQuery.splerDrugListId"
              placeholder="请输入药品编码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSup('search')"
              >查询</el-button
            >
            <el-button @click="reset('sup')">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form :model="form" ref="form" :rules="rules">
          <el-table
            :data="form.splerData"
            border
            style="width: 100%"
            v-loading="supLoading"
          >
            <el-table-column
              fixed
              prop="splerDrugName"
              label="药品名称"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="splerDosformName"
              label="剂型名称"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="splerProdentpName" label="生产企业">
            </el-table-column>
            <el-table-column
              prop="splerDrugListId"
              label="药品编码"
              width="120"
            >
            </el-table-column>
            <el-table-column prop="address" label="规格" width="250">
              <template slot-scope="scope">
                <div class="drug-name">
                  {{"供应商规格 【" +scope.row.splerSpecName +"*" +scope.row.splerPrepunt +"/" +scope.row.splerPacUnt +"】"}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="转换比" width="150">
              <template slot-scope="scope">
                <el-form-item :prop="'splerData.' + scope.$index + '.convrat'" :rules="{required: true,message: '输入转换比',trigger: 'change'}" >
                  <el-input v-model="scope.row.convrat" placeholder="请输入转换比"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="60">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row, scope.$index)"
                  type="text"
                  size="small"
                  >对码</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form>

        <!--分页-->
        <yl-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="supQuery.current"
          :limit.sync="supQuery.size"
          @pagination="searchSup"
        />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import drugInfo from "@/views/components/drug-info";
import {
  QueryHospList,
  QueryHospDrugList,
  QuerySplerDrugList,
  DrugMatch,
  CancMatch
} from "@/api/consumCataManage-sup/index";
import rulesR from "@/utils/rules";
import ylUpload from "@/components/yl-upload";
export default {
  components: {
    ylPagination,
    ylUpload,
    drugInfo
  },
  data() {
    return {
      activeName: 'org',
      rulesR,
      hospId:null,
      data: [],
      defaultProps: {
        children: "children",
        label: "hospName"
      },
      listQuery: {
        current: 1,
        size: 10,
        drugName: "",
        hospId: "",
        stas: ""
      },
      supQuery: {
        current: 1,
        size: 10,
        splerDrugName: "",
        splerDrugListId: "",
        hospId: ""
      },
      listLoading: false,
      list: [],
      total: 0,
      tableLoading: false,
      supLoading: false,
      tableData: [],
      crspFlgOption: [
        { value: "0", name: "未对码" },
        { value: "1", name: "已对码" }
      ],
      dialogDui: false,
      ccLoad: false,
      selectDrguData: [],
      form: {
        splerData: []
      }
    };
  },
  methods: {
    tabClick(tab){
        if(tab.label == "按机构"){
            this.getData();
            this.defaultProps.label = 'hospName'
        }else if(tab.label == "按分类"){
            // this.getData4();
            // this.defaultProps.label = 'orgGrpName'
            // this.listQuery.type = 'grp';
        }
    },
    // 搜索获取医院药品列表
    getHospDrug(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.listQuery.hospId = this.hospId;
      QueryHospDrugList(this.listQuery)
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 点击获取医院药品列表
    handleNodeClick(data) {
      this.listLoading = true;
      this.hospId = data.hospId;
      QueryHospDrugList({ hospId: data.hospId })
        .then(res => {
          this.list = res.data.records;
          this.total = res.data.total;
          this.listLoading = false;
          console.log(res, "医院目录");
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      this.listLoading = true;
      QueryHospList()
        .then(res => {
          this.listQuery.hospId = res.data[0].hospId;
          this.data = res.data
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    validateField(form, index) {
      let result = true;
      for (let item of this.$refs[form].fields) {
        if (item.prop.split(".")[1] == index) {
          this.$refs[form].validateField(item.prop, error => {
            if (error != "") {
              result = false;
            }
          });
        }
        if (!result) break;
      }
      return result;
    },
    reset(type) {
      if (type === "drug") {
        this.$refs.listQuery.resetFields();
        this.getHospDrug();
      } else {
        this.$refs.supQuery.resetFields();
        this.searchSup();
      }
    },
    // 更新目录
    handleUpdate() {
      this.getHospDrug();
    },

    // 对码弹窗获取供应商列表
    handleDui(row) {
      console.log(row, "选中药品");
      this.dialogDui = true;
      this.selectDrguData = [];
      this.selectDrguData.push(row);
      this.supLoading = true;
      QuerySplerDrugList({ hospId: row.hospId })
        .then(res => {
          this.form.splerData = res.data.records;
          this.total = res.data.total;
          this.supLoading = false;
        })
        .catch(err => {
          this.supLoading = false;
        });
    },
    // 对码操作
    handleClick(item, index) {
      let DrugMatchObj ={
        hospId:this.hospId,
        drugListId:this.selectDrguData[0].drugListId,
        splerDrugListId:item.splerDrugListId,
        convrat:item.convrat
      }
      
      if (!this.validateField("form", index)){
        return;
      } else {
        DrugMatch(DrugMatchObj).then(res=>{
          if(res.success === true) {
            this.dialogDui = false
            this.getHospDrug()
            this.$message({
              message: '对码成功',
              type: 'success'
            });
          }else{
            this.$message.error('对码失败');
          }
        })
      }
    },
    // 取消对码
    handleCanc (row) {
      this.$confirm('此操作会取消该药品对码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        CancMatch({hospId: this.hospId,drugListId:row.drugListId}).then(res=>{
          if(res.success) {
            this.getHospDrug()
            this.$message({
              type: 'success',
              message: '取消对码成功'
            })
          }
        })
      }).catch(() => {});
    },
    //搜索供应商列表
    searchSup() {
      this.supLoading = true;
      this.supQuery.hospId = this.hospId;
      QuerySplerDrugList(this.supQuery)
        .then(res => {
          this.form.splerData = res.data.records;
          this.total = res.data.total;
          this.supLoading = false;
        })
        .catch(err => {
          this.supLoading = false;
        });
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 12px;
}
::v-deep .el-tree-node__content {
  height: 35px;
}
::v-deep .el-input__suffix {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 15px;
}
::v-deep .long .el-form-item__content {
  width: 220px;
}
</style>
