<template>
  <div class="druglist">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>医共体名称：</span>
          <div class="input">
            <el-select size="mini" placeholder="请选择" :clearable="doctorBodyList.length > 1"
                       v-model="searchData.orgId" @change="searchData.cascader = [];getCascaderB($event)">
              <el-option v-for="(item) in doctorBodyList" :key="item.value"
                         :label="item.label" :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span v-if="cascaderProp.level === 2">医疗机构 / 科室名称：</span>
          <span v-if="cascaderProp.level === 1">医疗机构：</span>
          <div class="input">
            <el-cascader v-if="searchData.orgId" style="width: 100%" size="mini" clearable collapse-tags
                         :props="cascaderProp" :options="cascaderList" filterable :show-all-levels="false"
                         v-model="searchData.cascader"
            />
            <div v-else class="el-select el-select--mini">
              <div class="el-input el-input--mini el-input--suffix">
                <input class="el-input__inner" type="text" readonly="readonly" autocomplete="off" placeholder="请选择">
              </div>
            </div>
          </div>
        </div>

        <div class="screening-item flex-vertical-center-l">
          <span>映射状态：</span>
          <div class="input">
            <el-select size="mini" placeholder="请选择" v-model="searchData.isMapping" clearable>
              <el-option :value="0" label="未映射"></el-option>
              <el-option :value="1" label="已映射"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>机构药品：</span>
          <div class="input">
            <el-input size="mini" placeholder="请输入药品名称" v-model="searchData.matName" @keydown.enter.native="search()"></el-input>
          </div>
        </div>

        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button size="mini" @click="clearFilter()">清空</el-button>
        <el-button size="mini" @click="$router.back()">返回</el-button>
        <template v-if="editing">
          <el-button type="warning" size="mini" @click="saveEdit()">保存</el-button>
          <el-button size="mini" @click="stopEdit()">取消</el-button>
        </template>
        <el-button v-else type="success" size="mini" @click="startEdit()">编辑</el-button>
      </div>
    </div>

    <!-- 底部表格数据 -->
    <div class="table">
      <div class="today-table">
        <div class="table-container">
          <el-table :data="tableData" v-loading="loading" stripe style="width: 100%" border height="100%"
                    @select="selectEditRow($event)" @select-all="selectEditRow">
            <!--<el-table-column prop="id" label="序号" width="100"></el-table-column>-->
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="医共体" prop="orgDrugs.appName" width="200" align="center"></el-table-column>
            <el-table-column label="医疗机构" prop="orgDrugs.jgmc" align="center"></el-table-column>
            <el-table-column label="机构药品">
              <el-table-column label="名称" prop="orgDrugs.name" align="center"></el-table-column>
              <el-table-column label="规格" prop="orgDrugs.gg" width="200" align="center"></el-table-column>
              <el-table-column label="单位" prop="orgDrugs.dw" width="200" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="映射状态" width="200" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.orgDrugs.isMapping === 1" type="success" size="mini">已映射</el-tag>
                <el-tag v-else type="danger" size="mini">未映射</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="系统药品">
              <el-table-column label="名称" align="center">
                <template slot-scope="scope">
                  <el-select v-if="editing" size="mini" clearable
                             :loading="editData[scope.$index].loading" :placeholder="editData[scope.$index].placeholder"
                             filterable remote :remote-method="matSearchRemoteMethod"
                             v-model="editData[scope.$index].matDrugId" @change="updateEditRow(scope.$index, $event)"
                             @focus="focusEditRow(scope.$index)"
                  >
                    <el-option v-for="option in editData[scope.$index].options" :key="option.value"
                               :label="option.label" :value="option.value"
                    />
                  </el-select>
                  <div v-else>{{ scope.row.name }}</div>
                </template>
              </el-table-column>
              <el-table-column label="单位" width="200" align="center">
                <template slot-scope="scope">
                  <el-input v-if="editing" size="mini" v-model="editData[scope.$index].matDrugDw"></el-input>
                  <div v-else>{{ scope.row.dw }}</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-vertical-center-r today-page">
          <div>
            <template v-if="!loading">
              <span>机构药品：共<el-tag type="info" size="mini" style="margin: 0 4px;">{{ statistics.total }}</el-tag>味，</span>
              <span>已映射<el-tag type="success" size="mini" style="margin: 0 4px;">{{ statistics.isMapping }}</el-tag>味，</span>
              <span>未映射<el-tag type="danger" size="mini" style="margin: 0 4px;">{{ statistics.noMapping }}</el-tag>味</span>
            </template>
          </div>
          <el-pagination
            background
            layout=" prev, pager, next, jumper, total"
            :total="total"
            :page-size="limit"
            @current-change="sizeC($event)"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import popup from '@/components/Propup.vue';
import {addOrUpdateDrug, getDrugMap, getDrugMapList, searchMyDrug} from '@/api/business.js';
import {getMedSelect} from '@/api/system';
import {mapGetters} from 'vuex';

const TAG = -1;
let cache = new Map();
let skipWatch = false;
export default {
  components: {
    popup
  },
  data() {
    return {
      searchData: {
        pid: '',
        orgId: '',
        cascader: [],
      },
      doctorBodyList: [], // 医共体选择器数据
      cascaderList: [],
      cascaderProp: {
        level: 1,
        multiple: true,
        checkStrictly: true,
      },
      loading: false,
      tableData: [],
      statistics: {},
      page: 1,
      limit: 10,
      total: 0,

      editing: false,
      editIndex: -1,
      editData: [],
      selected: [],
    };
  },
  watch: {
    'searchData.cascader'(value = [], oldValue = []) {
      if (skipWatch) skipWatch = false;
      else {
        skipWatch = true;
        const vHas = value.some(item => item[0] === TAG);
        const oHas = oldValue.some(item => item[0] === TAG);
        if (vHas === oHas) {
          const _value = value.filter(item => item[0] !== TAG);
          if (_value.length === this.cascaderList.length - 1) {
            this.searchData.cascader = [[TAG], ...value];
          } else {
            this.searchData.cascader = _value;
          }
        } else if (vHas) {
          this.searchData.cascader = this.cascaderList.map(item => [item.value]);
        } else {
          this.searchData.cascader = [];
        }
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.load());
  },
  created() { this.load(); },
  destroyed() { cache.clear(); },
  methods: {
    async load() {
      this.searchData.pid = this.$route.query.pid;
      const loading = this.$loading({lock: true, text: '加载中...', spinner: 'el-icon-loading'});
      try {
        const {groupInfo} = await getDrugMap(this.searchData.pid);
        for (const {value, children} of groupInfo) cache.set(value, children);
        this.doctorBodyList = groupInfo;
        await this.clearFilter();
      } catch (e) {
        this.$message.error(e.message);
        this.$router.back();
      }
      loading.close();
    },
    async getCascaderB(id) {
      let list = cache.get(id);
      if (!Array.isArray(list) || !list.length) {
        list = await getMedSelect({organizationId: id}).then(res => res && +res.ResultCode === 0
            ? res.Data.map(item => ({
              children: [], leaf: false,
              label: item.name, value: item.pid,
            }))
            : [],
        ).catch(() => []);
        cache.set(id, list);
      }

      if (this.cascaderProp.level === 1) {
        this.cascaderList = list.map(({children, ...item}) => Object.assign(item, {leaf: true}));
        this.cascaderList.unshift({value: TAG, label: '全选'});
      } else if (this.cascaderProp.level === 2) {
        this.cascaderList = list;
      }
    },
    sizeC(e) {
      this.page = e;
      this.getDrugMapList();
    },
    search() {
      this.page = 1;
      this.getDrugMapList();
    },
    // 清空搜索条件
    async clearFilter() {
      this.searchData = {pid: this.$route.query.pid, orgId: '', cascader: []};
      if (this.doctorBodyList.length === 1) {
        this.searchData.orgId = this.doctorBodyList[0].value;
        await this.getCascaderB(this.searchData.orgId);
      }
      this.getDrugMapList().then();
    },
    // 获取药品列表
    async getDrugMapList() {
      this.stopEdit();
      this.selected = [];
      this.loading = true;
      try {
        const {cascader, ...searchData} = this.searchData;
        let params = {page: this.page, limit: this.limit, ...searchData};
        const stitutionsId = cascader.length ? cascader : this.cascaderList.map(item => [item.value]);
        params.stitutionsIds = stitutionsId.map(item => item[0]).filter(item => item !== TAG).join(',');
        let res = await getDrugMapList(params);
        if (res.ResultCode == 0) {
          this.tableData = res.Data.Items.map(item => Object.assign(item, {id: `${item.orgDrugs.appId}.${item.orgDrugs.jgdm}.${item.orgDrugs.drugId}`}));
          this.total = res.Data.TotalRecordCount;
          this.statistics = res.Data.count;
        } else throw {message: res.ResultInfo};
      } catch (e) {
        this.$message.error(e.message);
      }
      this.loading = false;
    },
    startEdit() {
      this.editing = true;
      this.editData = this.tableData.map(item => {
        return {
          id: item.id,
          orgId: item.orgDrugs.appId,
          jgDrugId: item.orgDrugs.drugId,
          jgDrugName: item.orgDrugs.name,
          matDrugId: item.matDrugId,
          matDrugName: item.name,
          matDrugDw: item.dw,

          loading: false,
          placeholder: item.name || '请输入药品名称搜索',
          options: item.matDrugId ? [{value: item.matDrugId, label: item.name, dw: item.dw}] : [],
        };
      });
    },
    stopEdit() {
      this.editing = false;
      this.editData = [];
    },
    async saveEdit() {
      try {
        const data = [];
        for (const {orgId, jgDrugId, matDrugId, matDrugName, matDrugDw} of this.editData) {
          if (matDrugId && !matDrugDw) throw `请补充完整系统药品单位`;
          data.push({orgId, jgDrugId, matDrugId, matDrugName, matDrugDw, isMapping: matDrugId ? 1 : 0});
        }
        await addOrUpdateDrug(data).then(res => { if (res.ResultCode !== 0) throw {message: res.ResultInfo};});
        this.getDrugMapList().then();
      } catch (e) {
        if (typeof e === 'string') this.$message.warning(e);
        else this.$message.error(e.message);
      }
    },
    selectEditRow(selection, row) {
      this.selected = selection.map(item => item.id);
      if (this.editing && selection.length > 1) this.syncEditRow(row);
    },
    focusEditRow(index, name = '') {
      this.editIndex = index;
      const item = this.editData[index];
      if (!item.loading && !item.options.length) {
        if (!name) {try {name = (item.matDrugName || item.jgDrugName).match(/[\u4E00-\u9FFF]+/g)[0];} catch (e) {name = '';}}
        this.matSearchRemoteMethod(name, index).then(options => { if (!options.length) this.matSearchRemoteMethod(' ', index); });
      }
    },
    syncEditRow(row) {
      const selection = this.selected.map(id => this.editData.find(item => item.id === id));
      if (row == null) row = selection.find(item => item.matDrugId);
      if (row == null) return;
      for (const item of selection) {
        item.matDrugId = row.matDrugId;
        item.matDrugName = row.matDrugName;
        item.matDrugDw = row.matDrugDw;
        item.options = row.options.map(item => Object.assign({}, item));
      }
    },
    updateEditRow(index, value) {
      const item = this.editData[index];
      if (value) {
        const option = item.options.find(item => item.value === value);
        item.matDrugName = option.label;
        item.matDrugDw = option.dw;
      } else {
        item.matDrugName = '';
        item.matDrugDw = '';
      }
      if (this.selected.includes(item.id)) this.syncEditRow(item);
    },
    async matSearchRemoteMethod(name, index) {
      if (index == null) index = this.editIndex;
      const item = this.editData[index];
      if (!name) item.options = item.matDrugId ? [{value: item.matDrugId, label: item.name}] : [];
      else {
        item.loading = true;
        item.options = await searchMyDrug({name: name.trim()}).then(res => {
          if (res.ResultCode === 0)
            return res.Data.map(item => ({value: item.drugId, label: item.name, dw: item.dw}));
        }).catch(() => []);
        item.loading = false;
      }
      return item.options;
    }
  },

  computed: {
    ...mapGetters(["getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.table {
  padding: 5px 5px;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
  height: 72vh;

  .flex-vertical-center-r {
    justify-content: space-between;
  }

  .table-btns {
    margin-bottom: 13px;

    div {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 7px;
    }

    .bg-yellow {
      background: #ffae45;
    }

    .bg-red {
      background: #ff6245;
    }
  }

  .table-container {
    height: 90%;
  }

  .today-table {
    height: 100%;

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
      }

      .bg-yellow {
        // width: 80px;
        height: 24px;
        background: #ffae45;
        margin-left: 21px;
        margin-right: 21px;
      }

      .bg-red {
        background: #ff6245;
      }
    }
  }
}

.hisName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.today-table::v-deep .el-table .cell {
  text-align: center;
}

.today-table::v-deep .el-table thead.is-group th {
  background: #f3fffb;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .table {
    height: 82vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .table {
    height: 81vh;

    .table-container {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .table {
    height: 73vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .table {
    height: 74vh;

    .table-container {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>