<template>
  <div>

    <el-card class="el-card">
      <el-form v-if="queryList && queryList.length > 0 && showSearch" :model="filterQuery" label-width="100px">
        <el-row style=" display:flex;  flex-wrap: wrap; ">
          <template v-for="(item, index) in queryList">
            <el-form-item v-if="item.columnType == 'input' && 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 == 'select' && executeEval(row,item.expression,true)"
                          :label="item.columnDesc+`:`"
            >
              <el-select v-model="filterQuery[item.columnName]"
                         :placeholder="item.columnDesc"
                         :disabled="executeEval(null,item.disabledFuc,false)"
                         clearable
              >
                <el-option
                  v-for="dict in item.lableRuleObj"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </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
                :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"
                />
              </el-select>
            </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>
          </template>
        </el-row>
      </el-form>

      <div class="top-right-btn">
        <el-button-group style="display:flex;">
          <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="onSubmitFind">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="newDistributionForm()" :loading="loading">
            导入收费项目
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="newDistributionForm()" :loading="loading">
            下载收费项目
          </el-button>

        </el-button-group>
      </div>

      <el-divider style="margin: 15px"></el-divider>

      <el-table v-loading="loading" :data="list" style="width: 100%" highlight-current-row="true" border
                @current-change="(row) => executeFuc(row,'0',tableObj.handleChangeFuc)"
                :default-sort="defaultSort" @sort-change="handleSortChange"
      >
        <template v-for="(item, index) in tableHeader">
          <el-table-column
            v-if="item.columnType == 'id' && executeEval(row,item.expression,true)"
            type="index" :label="item.columnDesc"
          ></el-table-column>
          <el-table-column
            v-if="item.columnType == 'selection'"
            type="selection"
            :width="item.width"
            :selectable="(row,number) => executeFuc(row,'3',item.clickFuc)"
          ></el-table-column>

          <el-table-column
            v-if="item.columnType == 'radio' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="radioCheck"><span></span></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'laber' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template slot-scope="scope">
              <span :style="{color: executeFuc(scope.row,'4',item.lableRuleObj[scope.row[item.columnName]])}"
              >{{ item.lableRuleObj[scope.row[item.columnName]] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'eltag' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template slot-scope="scope">
              <el-tag
                :type="executeFuc(scope.row,'4',item,item.lableRuleObj?item.lableRuleObj[scope.row[item.columnName]]:scope.row[item.columnName])"
              >
                <span>{{
                    item.lableRuleObj ? item.lableRuleObj[scope.row[item.columnName]] : scope.row[item.columnName]
                  }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'button' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :width="item.width"
            :key="item.columnName"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button v-for="(buttonItem, buttonIndex) in item.buttonRulObj"
                         :type="buttonItem.type"
                         :size="buttonItem.size"
                         :style="buttonItem.style"
                         :key="buttonItem"
                         v-if="executeEval(scope.row,buttonItem.hasPermi,true)"
                         :disabled="executeEval(scope.row,buttonItem.disabledFuc,false)"
                         @click.native.stop="executeFuc(scope.row,'1',buttonItem.clickFuc)"
              >{{ buttonItem.name }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.columnType == 'text' && executeEval(row,item.expression,true)"
            :prop="item.columnName"
            :label="item.columnDesc"
            :sortable="item.sort"
            :width="item.width"
            :show-overflow-tooltip="item.tooltip"
            :key="item.columnName"
          >
            <template slot-scope="scope">
              <span :style="{color: executeFuc(scope.row,'4',item,scope.row[item.columnName])}"
              >{{ scope.row[item.columnName] }}</span>
            </template>
          </el-table-column>
        </template>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="filterQuery.page"
        :limit.sync="filterQuery.limit"
        @pagination="getList"
      ></pagination>
    </el-card>

    <el-dialog
      title="中药饮品详情"
      :visible.sync="newSpDistributionVisible"
      width="80%"
      v-if="newSpDistributionVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <drugPiecesDetail
      :rowData="rowData"
      >

      </drugPiecesDetail>
    </el-dialog>

  </div>
</template>
<script>
import { delReceive } from '@/api/thrsys/thrOrderReceive'
import {
  getHead, executeFuc
} from '@/utils/customConfig'
import { drugList, deleteDrug } from '@/api/thrsys/medicalSupplies'
import drugPiecesDetail from './drugPiecesDetail'

export default {

  data() {
    return {
      defaultSort: { prop: 'createTime', order: 'desc' },
      showSearch: true,
      filterQuery: {
        medCatalogCode: '',
        herbName: '',
        page: 1,
        limit: 10
      },
      total: 0,
      tableHeader: [],
      queryList: [],
      fromList: [],
      fList: [],

      thirdSys: [],
      thirdSysDetail: null,
      busTypes: [],
      originTypes: [],
      list: [],
      detailList: [],
      uploadFileUrl: null,
      fileList: [],
      closeConfirm: false,
      loading: false,
      newSpDistributionVisible: false,
      rowData: null,
    }
  },

  methods: {
    onReset() {
      this.$router.push({
        path: ''
      })
      this.filterQuery = {
        medCatalogCode: '',
        herbName: '',
        page: 1,
        limit: 10
      }
      this.getList()
    },

    onSubmitFind() {
      this.filterQuery.page = 1
      this.getList()
    },
    getList() {
      drugList(this.filterQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.list = response.data.list || []
            this.total = response.data.total || 0
          } else {
            this.$message.error(response.message)
          }
        })
        .catch(() => {
          this.list = []
          this.total = 0
        })
    },

    handleDetail(_this,row) {
      _this.rowData = row
      _this.newSpDistributionVisible = true
    },
    hideSearch() {
      this.showSearch = !this.showSearch
    },
    deleteClick(_this,row) {
      _this.$confirm("此操作将永久删除该药品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDrug(row).then(res => {
            if (res.code == 20000){
              _this.$message.success("success")
              _this.getList()
            }else {
              _this.$message.error("删除失败")
            }
          })
        })
        .catch(() => {
        });
    },

    handleCurrentChange(val) {
      this.filterQuery.page = val.page
      this.getList()
    },
    closeDialog() {
      this.newSpDistributionVisible = false
      this.getList()
      this.detailList = []
    },
    executeFuc(row, type, clickFuc, value) {
      return executeFuc(this, row, type, clickFuc, value)
    },
    executeEval(row, expression, defaultRet) {
      if (expression) {
        return eval(expression)
      }
      return defaultRet
    }
  },
  components: {
    drugPiecesDetail
  },
  mounted() {
  },
  created() {
    this.getList()
    getHead('drugPieces.vue-1', '1').then((re) => {
      // 处理返回的数据
      this.tableHeader = re.data.tableList
      this.queryList = re.data.queryList;
      this.fromList = re.data.fromList;

      console.log("kjkljlkjlkk",this.fromList)
    })

  }
}
</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 25%;
}

.text {
  font-size: 13px;
  font-family: "Microsoft YaHei";
}


.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>

