<template>
  <div class="right-container">
    <div class="table">
      <div class="today-table">
        <div class="table-container">
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column label="药品信息" align="center">
              <el-table-column prop="name" label="药品名称" align="center">
                <template slot-scope="scope">{{ scope.row.orgDrugs[0].name }}</template>
              </el-table-column>
              <el-table-column prop="gg" label="药品规格" align="center">
                <template slot-scope="scope">{{ scope.row.orgDrugs[0].gg }}</template>
              </el-table-column>
              <el-table-column prop="cd" label="药品产地" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="用药权限信息" align="center">
              <el-table-column prop="name" label="超剂量" align="center">
                <template slot-scope="scope">
                  <el-checkbox :value="scope.row.checked1" @change="changeRow('checked1',scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="慎禁忌" align="center">
                <template slot-scope="scope">
                  <el-checkbox :value="scope.row.checked2" @change="changeRow('checked2',scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="配伍禁忌" align="center">
                <template slot-scope="scope">
                  <el-checkbox :value="scope.row.checked3" @change="changeRow('checked3',scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="饮食禁忌" align="center">
                <template slot-scope="scope">
                  <el-checkbox :value="scope.row.checked4" @change="changeRow('checked4',scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="病症禁忌" align="center">
                <template slot-scope="scope">
                  <el-checkbox :value="scope.row.checked5" @change="changeRow('checked5',scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="孕妇慎禁忌" align="center">
                <template slot-scope="scope">
                  <el-checkbox :value="scope.row.checked6" @change="changeRow('checked6',scope)"></el-checkbox>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex-vertical-center-r today-page">
          <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 { getDrugMapList } from "@/api/business.js";
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 15,
      total: 0
    };
  },
  created() {
    this.getDrugMapList();
  },
  methods: {
    sizeC(e) {
      this.page = e;
      this.getDrugMapList();
    },
    changeRow(key, scope) {
      let data = scope.row;
      data[key] = !data[key];
      this.tableData.forEach((item, index) => {
        if (item.id == data.id) {
          item = data;
          this.$set(this.tableData, index, data);
        }
      });

      this.$forceUpdate();
    },
    // 获取药品列表
    async getDrugMapList() {
      let params = {
        page: this.page,
        limit: this.limit,
        isMapping: 1,

        orgId: "9332a948-bacf-48ed-bafa-ebabef02df68"
      };
      let res = await getDrugMapList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;
        this.tableData.forEach((item, index) => {
          item.cd = "杭州";
          item.gg = "1g";
          item.checked1 = true;
          item.checked2 = true;
          item.checked3 = true;
          item.checked4 = true;
          item.checked5 = true;
          item.checked6 = true;
          item.id = index + 1;
        });

        this.$forceUpdate();
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/style/common.scss";
@import "@/style/base.scss";

.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;
    }
  }
}
</style>