<template>
  <div style="display: flex;">
    <el-card style="width:18%;margin-right:18px;border-radius:6px;overflow-y: auto;">
      <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="id"
        @node-click="handleNodeClick"
        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>
          <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">
        <div style="float: left; font-size: 14px;color: #606266;padding-top:10px;font-weight: 700;">{{ listQuery.orgName }}</div>
        <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="50" />
        <el-table-column label="医院药品名称" prop="">
                <template slot-scope="scope">
                    <drug-info :info="scope.row"></drug-info>
                </template>
            </el-table-column>
        <el-table-column label="药品编码" prop="drugListId" width="380" />
        <el-table-column label="医院价格" prop="purcPric" width="100" />
        <!-- <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="convrat" />
        <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>{{ 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="80">
          <template slot-scope="scope">
            <div>
              <el-button type="text"   @click="handlePrice(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="getData"
      />
    </div>
    <el-dialog title="调价申请" :visible.sync="dialogPrice" width="55%">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="80px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="药品编码" prop="drugListId">
              <el-input
                v-model.trim="temp.drugListId"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="药品名称" prop="drugName">
              <el-input
                v-model.trim="temp.drugName"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="剂型" prop="dosformName">
              <el-input
                v-model.trim="temp.dosformName"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="规格" prop="specName">
              <el-input
                v-model.trim="temp.specName"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装单位" prop="pacUnt">
              <el-input
                v-model.trim="temp.pacUnt"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产企业" prop="prodentpName">
              <el-input
                v-model.trim="temp.prodentpName"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="当前价格" prop="pricInit">
              <el-input
                v-model.trim="temp.pricInit"
                readonly
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调整价格" prop="pricCurr">
              <el-input
                v-model.trim="temp.pricCurr"
                placeholder="请输入调整后价格"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="申请原因" prop="appyRea">
            <el-input
              type="textarea"
              v-model.trim="temp.appyRea"
              placeholder="请输入调价原因"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="上传文件" prop="fileId" :rulesR="rulesR.uploadRequired" >
            <yl-upload
              :fileId="temp.fileId"
              @getUpload="getUpload"
              urlName="acco"
            >
              <template v-slot:dec>只能上传pdf文件</template>
            </yl-upload>
          </el-form-item>
        </el-row>
        

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPrice = false">取消</el-button>
        <el-button type="primary" @click="commitData()" :loading="ccLoad"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ylPagination from "@/components/yl-pagination";
import drugInfo from "@/views/components/drug-info";
import {
  PricChg,
  getALLOrgTree,
  QueryHospDrugListTJ,
} 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,
      orgId:null,
      data: [],
      defaultProps: {
        children: "child",
        label: "orgName"
      },
      listQuery: {
        current: 1,
        size: 10,
        drugName: "",
        orgId:"",
        orgName:"",
      },
      listLoading: false,
      list: [],
      total: 0,
      tableLoading: false,
      supLoading: false,
      tableData: [],
      crspFlgOption: [
        { value: "0", name: "未对码" },
        { value: "1", name: "已对码" }
      ],
      dialogPrice: false,
      ccLoad: false,
      temp: {
        drugListId: "",
        drugName: "",
        dosformName: "",
        specName: "",
        pacUnt: "",
        prodentpName: "",
        pricInit: "",
        pricCurr: "",
        appyRea: "",
        fileId:""
      },
      rules: {
        pricCurr: [
          {
            required: true,
            message: "调整价格不能为空",
            trigger: "blur"
          },
          {
            pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "请输入数字，最多两位小数",
            trigger: "blur"
          }
        ],
        appyRea: [
          {
            required: true,
            message: "申请原因不能为空",
            trigger: "blur"
          }
        ],
        num: [
          {
            required: true,
            message: "请输入转换比",
            trigger: "change"
          }
        ]
      },
      selectDrguData: [],
      form: {
        splerData: []
      }
    };
  },
  methods: {
    tabClick(tab){
        if(tab.label == "按机构"){
            this.getData();
            this.defaultProps.label = 'orgName'
        }else if(tab.label == "按分类"){
            // this.getData4();
            // this.defaultProps.label = 'orgGrpName'
            // this.listQuery.type = 'grp';
        }
    },
    // 上传文件
    getUpload(id) {
      this.temp.fileId = id;
      if (id) {
        this.$refs.dataForm.clearValidate("fileId");
      } else {
        this.$refs.dataForm.validateField("fileId");
      }
    },
    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;
    },
    // 搜索获取医院药品列表
    getHospDrug(type) {
      if (type == "search") {
        this.listQuery.current = 1;
      }
      this.listLoading = true;
      this.listQuery.orgId = this.orgId 
      QueryHospDrugListTJ(this.listQuery)
        .then(res => {
          if(res.data){
            this.list = res.data.records;
            this.total = res.data.total;
            this.listLoading = false;
          }else{
            this.list = []
            this.listLoading = false;
          }
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 点击获取医院药品列表
    handleNodeClick(data) {
      console.log(data)
      this.listLoading = true;
      this.orgId = data.orgId
      this.listQuery.orgId = data.orgId 
      this.listQuery.orgName = data.orgName 
      QueryHospDrugListTJ(this.listQuery)
        .then(res => {
          console.log(res.data, "医院目录");
          if(res.data){
            this.list = res.data.records;
            this.total = res.data.total;
            this.listLoading = false;
          }else{
            this.list = []
            this.listLoading = false;
          }
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    // 获取医院列表
    getData(type) {
      this.data = [];
      this.listLoading = true;
      getALLOrgTree({orgId:"1"})
        .then(res => {
          // this.listQuery.hospId = res.data[0].hospId;
          this.data = res.data
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },

    reset(type) {
      if (type === "drug") {
        this.$refs.listQuery.resetFields();
        this.getHospDrug();
      }
    },
    // 更新目录
    handleUpdate() {
      this.getHospDrug();
    },
    // 申请调价
 
    handlePrice(row) {
      this.dialogPrice = true;
      this.temp.drugListId = row.drugListId;
      this.temp.drugName = row.drugName;
      this.temp.dosformName = row.dosformName;
      this.temp.specName = row.specName;
      this.temp.pacUnt = row.pacUnt;
      this.temp.prodentpName = row.prodentpName;
      this.temp.pricInit = row.purcPric ? row.purcPric:0;
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields();
      });
    },
    // 调价申请 确认
    commitData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.ccLoad = true;
          let data = {
            drugListId: this.temp.drugListId,
            pricInit:this.temp.pricInit,
            pricCurr: this.temp.pricCurr,
            appyRea: this.temp.appyRea,
            hospId:this.orgId,
            fileId:this.temp.fileId
          };
          PricChg(data).then(res => {
            if(res.success === true) {
              this.$message({
                message: '调价已申请',
                type: 'success'
              });
              this.ccLoad = false;
              this.dialogPrice = false;
              this.getHospDrug();
            }
          }).catch(err => {
              this.ccLoad = 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>
@/api/consumCataManage-sup/index