<template>
  <div>
    <el-card>
      <el-form v-if="queryList && queryList.length > 0" :model="filterQuery" label-width="100px" >
        <el-row style=" display:flex;  flex-wrap: wrap; ">
          <template v-for="(item, index) in queryList">
            <div v-if="showSearch || item.isImport">
              <el-form-item
                v-if="item.columnType == 'input' && item.columnName !='queryName' && executeEval(row,item.expression,true)"
                :label="item.columnDesc+`:`" :key="item.id">
                <el-input
                  v-model="filterQuery[item.columnName]"
                  :placeholder="item.columnDesc"
                  :disabled="executeEval(null,item.disabledFuc,false)"
                  @keyup.enter.native="executeFuc($event,'5',item.clickFuc)"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="item.columnType == 'input' && item.columnName =='queryName' && executeEval(row,item.expression,true)"
                :label="item.columnDesc+`:`" :key="item.id">
                <el-autocomplete
                  class="inline-input"
                  style="width: 90%"
                  v-model="queryName"
                  :fetch-suggestions="queryProductName"
                  placeholder="请输入内容"
                  clearable
                  @select="handleSelect"
                  @clear="clearQueryProduct"
                ></el-autocomplete>
              </el-form-item>
              <el-form-item v-if="item.columnType == 'select' && executeEval(row,item.expression,true)"
                            :label="item.columnDesc+`:`">
                <el-select v-model="filterQuery[item.columnName]"
                           :placeholder="item.columnDesc"
                           @change="executeFuc($event,'5',item.checkRules)"
                           :disabled="executeEval(null,item.disabledFuc,false)"
                           clearable>
                  <el-option
                    v-for="dict in item.lableRuleObj"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                  <span style="float: left">{{ item.name }}</span>
                  <span v-if="item.isShowXx == '1'" style="float: right; color: #8492a6; font-size: 13px">{{
                      item.code
                    }}</span>
                </el-select>
              </el-form-item>
              <el-form-item v-if="item.columnType == 'selectServer' && executeEval(row,item.expression,true)"
                            :label="item.columnDesc+`:`">
                <el-select
                  v-model="filterQuery[item.columnName]"
                  :placeholder="item.columnDesc"
                  :disabled="executeEval(null,item.disabledFuc,false)"
                  filterable
                  remote
                  @change="executeFuc($event,'5',item.checkRules)"
                  :remote-method="(query) => executeFuc(query,'5',item.clickFuc)"
                  clearable>
                  <el-option
                    v-for="item in options[item.clickFuc]"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  />
                  <span style="float: left">{{ item.name }}</span>
                  <span v-if="item.isShowXx == '1'" style="float: right; color: #8492a6; font-size: 13px">{{
                      item.code
                    }}</span>
                </el-select>
              </el-form-item>
              <el-form-item v-if="item.columnType == 'datePicker' && executeEval(row,item.expression,true)"
                            :label="item.columnDesc+`:`">
                <el-date-picker
                  :picker-options="pickerOptions"
                  v-model="actDateRange"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item v-if="item.columnType == 'date' && executeEval(row,item.expression,true)"
                            :label="item.columnDesc+`:`">
                <el-date-picker
                  v-model="filterQuery[item.columnName]"
                  :style="`width:${item.width+'px'}`"
                  value-format="yyyy-MM-dd"
                  :disabled="executeEval(null,item.disabledFuc,false)"
                  type="date"
                  :placeholder="item.columnDesc"
                ></el-date-picker>
              </el-form-item>
            </div>
          </template>
        </el-row>
      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">高级查询</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <!--<el-button type="primary" icon="el-icon-plus" @click="chooseDrug">选入药品信息</el-button>-->
          <el-button type="primary" icon="el-icon-plus" @click="chooseHouseDrug">添加院内药品</el-button>
          <!--          <el-button type="primary" icon="el-icon-plus" @click="addDrug">新增药品信息</el-button>-->
        </el-button-group>
      </div>

      <el-table v-loading="loading" :data="list" style="width: 100%" :row-style="{height: '32px' }"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="药品标识码" prop="nameCode" width="160"></el-table-column>
        <!--<el-table-column label="收费项目编码" prop="payFeeCode" width="100"></el-table-column>-->
        <el-table-column label="药品通用名称" prop="cpmctymc" width="160"></el-table-column>
        <el-table-column label="制剂规格" prop="prepnSpec" width="90"></el-table-column>
        <el-table-column label="制剂单位" prop="prepnUnit" width="90"></el-table-column>
        <el-table-column label="包装规格" prop="bzgg" width="100"></el-table-column>
        <el-table-column label="包装单位" prop="packUnit" width="90"></el-table-column>
        <!--<el-table-column label="包装比例" prop="packRatio" width="90"></el-table-column>-->
        <el-table-column label="价格" prop="price" width="90"></el-table-column>
        <el-table-column label="批准文号" prop="zczbhhzbapzbh" width="90"></el-table-column>
        <el-table-column label="生产企业" prop="manufactory" width="90"></el-table-column>
        <el-table-column label="医保编码" prop="ybbm" width="90"></el-table-column>
        <el-table-column label="药品状态" prop="majorStatus" width="90">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.majorStatus) | statusFilterType">
              {{ statusMap[scope.row.majorStatus] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="editDrug(scope.row)"
            >编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native.stop="deleteDrug(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      >
      </pagination>


    </el-card>


  </div>
</template>

<script>
import {
  getUdiInfos,
  deletetUdiInfos,
} from '@/api/basic/product/udiRelevance'
import {
  getHead,executeFuc
} from "@/utils/customConfig";

export default {
  name: 'selectDrugDialog',
  data() {
    return {
      //界面配置
      tableHeader: [],
      queryList: [],
      fromList: [],
      executeFuc(row, type, clickFuc, value) {
        return executeFuc(this, row, type, clickFuc, value);
      },
      executeEval(row, expression, defaultRet) {
        if (expression) {
          return eval(expression);
        }
        return defaultRet;
      },

      showSearch: false,
      filterBadInv: true,
      query: {},
      list: [],
      mainIds: [],
      filterQuery: {
        productsType: 2,
        page: 1,
        limit: 20,
        addType: 1,
        keyWords:""
      },
      addDrugVisible: false,
      chooseDrugVisible: false,
      statusMap: {
        0: "停用",
        1: "在用"
      },
      fromName: '',
      rowData: {},
      //1：新增；2：编辑
      type: null,
      fromMap: {
        'add': '新增-药品信息',
        'edit': '编辑-药品信息',
      },
      loading: false,
      chooseHouseDrugVisible: false,
      uuid: "111",
      relId: "",
      isImport: false,
      pId: 0,
      thisData: {
        nameCode: null,
        cpmctymc: null,
        ggxh: null,
      },
      relevanceEdit: {
        id: null,
        thirdId: "",
        isDisable: null,
        isUseDy: false,
        isLock: null,
        isAdavence: null,
        allowNoBatch: null,
        allowNoExpire: null,
        allowNoProduct: null,
        allowNoSerial: null,
        pId: null,
      },
      total: 0

    }
  },
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        productsType: 2,
        page: 1,
        limit: 20,
        addType: 1,
        keyWords:""
      };
      this.getList();
    },
    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    onSubmit() {
      this.filterQuery.page = 1;
      this.getList()
    },
    addDrug() {
      this.fromName = 'add'
      this.type = 1
      this.rowData = null
      this.addDrugVisible = true
    },
    chooseDrug() {
      this.chooseDrugVisible = true

    },
    chooseHouseDrug(val) {
      this.defaultSys = null;
      this.uuid = val.uuid;
      this.relId = val.id;
      this.isImport = true;
      this.thisData = val;
      this.chooseHouseDrugVisible = true
    },
    getList() {
      getUdiInfos(this.filterQuery)
        .then((response) => {
          this.loading = false
          this.list = response.data.list || []
          this.mainIds = this.list.map(item => item.mainId);
          this.total = response.data.total || 0
        })
        .catch(() => {
          this.loading = false
          this.list = []
          this.total = 0
        })
    },
    deleteDrug(row) {
      this.$confirm("此操作将永久删除该药品信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let tquery = {
          id: row.id + "",
        };
        deletetUdiInfos(tquery).then(res => {
          if (res.code != 20000) {
            this.$message.error(res.message)
            this.getList()
          } else {
            this.$message.success("删除成功！")
            this.getList()
          }
        }).catch(() => {
          this.$message.error("删除错误")
        })
      })
    },
    editDrug(row) {
      this.fromName = 'edit'

      this.type = 2
      this.uuid = row.uuid;
      this.relId = row.id;
      this.isImport = false;
      this.thisData = row;
      this.pId = row.id;
      this.relevanceEdit = {
        id: row.id,
        isUseDy: row.isUseDy,
        isDisable: row.isDisable,
        isLock: row.isLock,
        isAdavence: row.isAdavence,
      };
      this.editFormat = JSON.parse(JSON.stringify(row));
      this.rowData = row
      this.addDrugVisible = true;
    },
    closeUdi() {

    },
    closeDialog() {
      this.addDrugVisible = false;
      this.chooseHouseDrugVisible = false;
      this.getList()
    }
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        0: "info",
        1: "success",
      };
      return statusMap[status];
    }
    ,
  },
  created() {
    getHead("drugMaintain-ypzdwh", "1").then((re) => {
      // 处理返回的数据
      this.tableObj = re.data;
      this.tableHeader = re.data.tableList;
      this.queryList = re.data.queryList;
      this.fromList = re.data.fromList;
    });
    this.getList()
  }
}
</script>

<style scoped>

</style>
