<template>
  <div>
    <p-modal
      title="监管码扫描"
      :visible="modelVal"
      :dialogStyle="{ top: '50px' }"
      :draggable="true"
      :width="'98%'"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :footer="null"
    >
      <div style="overflow-x: auto; width: 100%">
        <p-grid-form ref="gridItems" :items="gridItems" :labelCol="{ span: 5 }" :span="4" @submit="hanlderIsLock">
        </p-grid-form>
        <p-grid-form ref="showFormItems" :items="showFormItems" :labelCol="{ span: 5 }" :span="4"> </p-grid-form>
      </div>
      <a-row>
        <div>
          <a-col :span="12" class="left-a">
            <p-grid-form :items="leftItems" ref="leftItems" :labelCol="{ span: 5 }" :span="4"> </p-grid-form>
            <p-table
              :id="$route.meta.menuId + '_48817'"
              ref="tableA"
              :columns="columns"
              :has-row-count="true"
              row-key="taskRqcId"
              :data-source.sync="tableA"
              :rowClassName="rowClassName"
              :selectedRowKeys.sync="scanlist"
              @clickRow="clickRowTrue"
              dragle
              auto-width
              :scroll="{ y: 200, x: 200 }"
              :rowSelectType="false"
              border
            >
            </p-table>
          </a-col>
        </div>

        <div>
          <a-col :span="2" class="left-a" style="overflow-x: auto; winth: 100%">
            <a-button style="margin: 10px" @click="radioBtn">重新选择规则</a-button>
            <div label="packLevel">
              <a-radio-group @change="radioPack" v-model="packLevel" :disabled="radioDisabled">
                <a-radio value="0" style="margin: 10px"> 大包装 </a-radio>
                <a-radio value="1" style="margin: 10px"> 中包装 </a-radio>
                <a-radio value="2" style="margin: 10px"> 小包装 </a-radio>
              </a-radio-group>
            </div>
          </a-col>
        </div>

        <div>
          <a-col :span="10" class="left-a">
            <p-grid-form
              ref="rightItems"
              :items="rightItems"
              :labelCol="{ span: 5 }"
              :span="4"
              @submit="hanlderSubmit"
              style="margin: 20px"
            >
            </p-grid-form>
            <p-spin :spinning="loadding">
              <p-table
                :id="$route.meta.menuId + '_12935'"
                ref="tableB"
                :columns="tableColumns"
                :has-row-count="true"
                dragle
                auto-width
                :data-source.sync="tableB"
                :pagination="false"
                rowKey="supervisionCode"
                :scroll="{ y: 200, x: 200 }"
                style="margin-top: 20px"
                :rowSelectType="false"
                border
              >
                <template slot="operation" slot-scope="text, record">
                  <a @click="del(record)">删除</a>
                </template>
              </p-table>
              <a-pagination
                show-size-changer
                :total="page.totalCount"
                :show-total="(total) => `共 ${total} 条`"
                @showSizeChange="onShowSizeChange"
                @change="pageChange"
              />
            </p-spin>
          </a-col>
        </div>
      </a-row>
    </p-modal>
    <workerLogin
      :loginVisible="loginVisible"
      :isSupervisedData="isSupervisedData"
      @loginResult="loginResult"
      @handleCancel="handleCancels"
    ></workerLogin>
  </div>
</template>
<script>
import { setFormItems, showFormItems } from "../config/scanCode/gridform";
import { leftItems, tableColumnsConfig } from "../config/scanCode/lefttable";
import { rightItems, tableColumns } from "../config/scanCode/righttable";
import { addSupervisionCode, findCodesByBill, findCodesByAllRefBillLineId, delIds, deleteCodesByBill } from "../api";
import workerLogin from "./workerLogin.vue";

export default {
  components: { workerLogin },

  props: {
    value: {
      type: Boolean,
      default: false,
    },
    scanTable: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      loadding: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0,
      },
      modelVal: false,
      gridItems: setFormItems,
      showFormItems: showFormItems,
      leftItems: leftItems(this),
      columns: tableColumnsConfig,
      rightItems: rightItems(this),
      tableColumns: tableColumns,
      tableAIndex: 0,
      tableA: [],
      tableB: [],
      scanlist: [],
      packLevel: "0",
      selectRow: {},
      loginVisible: false,
      radioDisabled: true,
      rows: {},
      stage: 0,
      isSupervisedData: {},
    };
  },
  created() {},
  mounted() {
    //   this.$refs[refName][0].focus()
  },
  watch: {
    value(bool) {
      console.log(bool);
      if (bool) {
        this.modelVal = bool;
        this.$nextTick(() => {
          this.$refs.rightItems.form.focusByName("supervisionCode");
          console.log();
        });
        this.tableA = [];
        this.tableB = [];
        if (this.scanTable.length == 0) {
          this.$message.error("该单所有商品，无需扫描药品追溯码");
          this.$emit("successScanCode", true);
        } else if (this.scanTable) {
          this.tableA = [...this.scanTable];
          this.$nextTick(() => {
            this.$refs.gridItems.form.setFieldsValue(this.tableA[0]);
            this.$refs.gridItems.form.setFieldsValue({ refBillId: this.tableA[0].rcvHeaderId });
            this.$refs.gridItems.form.setFieldsValue({ refBillLineId: this.tableA[0].rcvLineId });
            console.log(this.scanTable);
            this.clickRowTrue(null, null, this.tableA[0]);
            this.billNum();
            // 数量 < 大包装数 (规格取小包装数)
            let res = this.tableA[0];
            this.$nextTick(() => {
              if (+res.pieceQty < +res.maxSu) {
                this.packLevel = "2";
              } else {
                this.packLevel = "0";
              }
            });
          });
        }
      }
    },
  },
  computed: {
    rowIndex() {
      return this.tableAIndex;
    },
  },
  methods: {
    onDelAll() {
      let self = this
      this.$confirm({
        title: '确定要全部删除吗?',
        onOk() {
          deleteCodesByBill([self.tableA[self.tableAIndex].rcvLineId]).then(res => {
            if (res.success) {
              self.clickRow(null, null, self.tableA[self.tableAIndex], true);
              self.$message.success('操作成功')
            } else {
              self.$message.error(res.message)
            }
          })
        }
      })
    },
    pageChange(pageNum, pageSize) {
      this.page.pageNum = pageNum;
      this.page.pageSize = pageSize;
      this.getTableBInfo(this.tableA[this.rowIndex], true);
    },
    onShowSizeChange(current, pageSize) {
      this.page.pageNum = current;
      this.page.pageSize = pageSize;
      this.getTableBInfo(this.tableA[this.rowIndex], true);
    },
    async getTableBInfo(row, type) {
      let otherSelectBillList = this.tableA.map((i) => {
        return { refBillId: i.refBillId, refBillLineId: i.rcvLineId };
      });
      this.loadding = true;
      try {
        let res = await findCodesByAllRefBillLineId({
          refBillId: row.rcvHeaderId,
          refBillLineId: row.rcvLineId,
          otherSelectBillList,
          ...this.page,
        });
        this.loadding = false;
        if (res.success) {
          let { maxScanedQty, middleScanedQty, minScanedQty, isUnLock } = res.data;
          if (isUnLock) {
            this.$message.warning("此商品已全部扫描完成");
            this.modelVal = false;
            this.tableAIndex = 0;
            this.$emit("successScanCode", true);
            //   billComplete
            this.$emit("input", false);
            return
          }
          console.log(res, "=====");
          //   this.$refs.leftItems.form.setFieldsValue({ maxSu: 0, middleSu: 0, minSu: 0 })
          this.tableB = res.data?.superviseCodesModal;

          //  返回已扫监管码数据
          // if ( this.tableB?.length!=0) {
          //   this.$emit('detail',this.tableB)
          // }

          this.page.totalCount = parseInt(res.data.totalCount) || 0;
          this.billNum();
          console.log(this.tableB);
          this.$refs.leftItems.form.setFieldsValue({
            maxScanedQty: parseInt(maxScanedQty),
            middleScanedQty: parseInt(middleScanedQty),
            minScanedQty: parseInt(minScanedQty),
          });
          let val = +this.packLevel;
          this.radioCheck(val);

          const num = this.$refs.leftItems.form.getFieldsValue().customBillNum

          
          // if (res.data.billComplete && type) {
          //   this.$message.warning("此商品已全部扫描完成");
          //   this.modelVal = false;
          //   this.tableAIndex = 0;
          //   this.$emit("successScanCode", true);
          //   //   billComplete
          //   this.$emit("input", false);
          // }
        } else {
          this.$exception(res);
        }
      } catch (error) {
        this.loadding = false;
        this.$exception(error);
      }
    },
    del(text) {
      let that = this;
      console.log(text);
      this.$confirm({
        title: "确定是否要删除?",
        content: "",
        async onOk() {
          that.loadding = true;
          let res = await delIds([text.id]);
          that.loadding = false;
          if (res.success) {
            that.$message.success("删除成功");
            // that.remoteParams = { ...that.remoteParams }

            if (text.packLevel == "0") {
              that.$nextTick(() => {
                that.$refs.leftItems.form.setFieldsValue({
                  maxScanedQty: +that.$refs.leftItems.form.getFieldsValue().maxScanedQty - 1,
                });
              });
            } else if (text.packLevel == "1") {
              that.$nextTick(() => {
                that.$refs.leftItems.form.setFieldsValue({
                  middleScanedQty: +that.$refs.leftItems.form.getFieldsValue().middleScanedQty - 1,
                });
              });
            } else if (text.packLevel == "2") {
              that.$nextTick(() => {
                that.$refs.leftItems.form.setFieldsValue({
                  minScanedQty: +that.$refs.leftItems.form.getFieldsValue().minScanedQty - 1,
                });
              });
            }
            console.log(that.tableA, that.tableAIndex, "4444444444444");

            that.clickRow(null, null, that.tableA[that.tableAIndex], true);
          } else {
            that.$exception(res);
          }
        },
        onCancel() {},
      });
    },
    rowClassName(record) {
      if (this.rowIndex > this.tableA.length) return;
      return record.taskRqcId == this.tableA[this.rowIndex]?.taskRqcId ? "clickRowStyl" : "";
    },
    handleCancel(e) {
      this.modelVal = false;
      this.tableAIndex = 0;
      this.$emit("input", false);
      this.tableB = [];
      // this.destroyOnClose = true
    },
    handleCancels() {
      this.loginVisible = false;
    },
    loginResult(data, value) {
      this.loginVisible = false;
      this.$message.success("解锁成功!");
      this.tableAIndex = 0;
      this.modelVal = false; //关闭监管码弹窗
      this.$emit("input", false);
      this.loginVisible = data
      const params = {
        stage: this.stage,
        creator: data.userId,
        creatorName: data.username,
        refBillId: this.scanTable[0].rcvHeaderId,
        unlock: 1,
        // 是否解锁插入
        isUnlock: 1,
      };
      addSupervisionCode(params).then((res) => {
        if (!res.success) {
          this.$message.error(message);
          return;
        }
        this.$message.success("解锁成功!");
        this.tableAIndex = 0;
        this.modelVal = false; //关闭监管码弹窗
      });
    },
    // 解锁
    hanlderIsLock(e, form) {
      e.preventDefault();
      this.loginVisible = true;
      let warehouse = this.$store.state.user.warehouse;
      this.isSupervisedData = {
        specialWorkType: "入库监管码解锁",
        warehouseId: warehouse.warehouseId,
      };
    },
    //剩余数量
    getNum() {
      var num = this.$refs.leftItems.form.getFieldsValue().customBillNum;
      console.log(num,'num');
      if (num == 0) {
        this.$refs.leftItems.form.setFieldsValue({
          customBillNum: 0,
        });
        this.$message.warning("此商品已全部扫描完成");
        this.tableAIndex = 0;
        this.modelVal = false;
        return;
      }
    },
    //回车事件

    hanlderSubmit(e, form) {
      e.preventDefault();
      let code = this.$refs.rightItems.form.getFieldsValue().supervisionCode;
      let testCode = /^\d{20}$/.test(code);
      if (!testCode) {
        this.$message.warning(this.$lang("请检查药品追溯码,格式必须长度为20位"));
        this.$refs.rightItems.form.resetFields(); //监管码输入异常需要清空输入框
        return;
      }
      var a = 0;
      console.log(this.tableB);
      this.tableB &&
        this.tableB.forEach((t) => {
          if (t.supervisionCode == code) {
            a = 1;
            this.$message.warning(this.$lang("请检查药品追溯码,该条码已经存在"));
            this.$refs.rightItems.form.resetFields(); //监管码输入异常需要清空输入框
            this.getNum();
          }
        });
      if (a == 1) return;
      console.log(this.tableA, this.rowIndex);

      this.selectRow.packLevel = this.packLevel;
      let packLevel = this.selectRow.packLevel;
      let result = this.$refs.leftItems.form.getFieldsValue();
      // let { maxSu,maxScanedQty, middleSu, middleScanedQty, minSu, minScanedQty } = ref
      let maxSu = +result.maxSu || 0;
      let maxScanedQty = +result.maxScanedQty || 0;
      let middleSu = +result.middleSu || 0;
      let middleScanedQty = +result.middleScanedQty || 0;
      let minScanedQty = +result.minScanedQty || 0;
      let minSu = +result.minSu || 1;
      let map = {
        0: maxSu || 0,
        1: middleSu || 0,
        2: minSu || 0,
      };

      if ((maxSu == 0 || !maxSu) && packLevel == 0) {
        this.$message.warning(this.$lang("大包装数量为空,请维护!"));
        return;
      }
      if ((middleSu == 0 || !middleSu) && packLevel == 1) {
        this.$message.warning(this.$lang("中包装数量为空,请维护!"));
        return;
      }
      if ((minSu == 0 || !minSu) && packLevel == 2) {
        this.$message.warning(this.$lang("小包装数量为空,请维护!"));
        return;
      }

      let total = this.selectRow.pieceQty - (maxSu * maxScanedQty + middleSu * middleScanedQty + minScanedQty * minSu);
      let info = this.$refs.leftItems.form.getFieldsValue().customBillNum;
      console.log(this.selectRow, total, map[packLevel]);

      if (info != 0 && Math.abs(info) < map[packLevel]) {
        this.$message.warning("包装数大于商品数量,请重新选择包装!");
        return;
      }
      //   return
      let forItem = this.$refs.showFormItems.form.getFieldsValue();
      const params = { supervisionCode: code, ...this.selectRow, ...forItem };
      console.log(this.selectRow);
      params.refBillId = this.selectRow.rcvHeaderId;
      params.refBillLineId = this.selectRow.rcvLineId;
      params.businessType = 0;
      if (this.selectRow.packLevel == "0") {
        params.packSize = this.selectRow.maxSu;
      } else if (this.selectRow.packLevel == "1") {
        params.packSize = this.selectRow.middleSu;
      } else if (this.selectRow.packLevel == "2") {
        params.packSize = this.selectRow.minSu;
      }

      // 扫码阶段：0=入库质检 1=PC拣货 2=PC内复核 3=PC外复核 4=补录 5=PDA拣货 6=PDA内复核 7=PDA外复核
      params.stage = this.stage;
      params.billType = this.selectRow.rcvType;
      let otherSelectBillList = this.tableA.map((i) => {
        return { refBillId: i.refBillId, refBillLineId: i.rcvLineId };
      });
      params.otherSelectBillList = otherSelectBillList;

      this.loadding = true;
      addSupervisionCode(params).then((res) => {
        this.loadding = false;
        this.$refs.rightItems.form.resetFields();
        if (!res.success) {
          this.$exception(res);
          return;
        }
        this.$message.success("扫描成功!");
        if (!res.data) {
          return;
        }
        // this.$refs.leftItems.form.setFieldsValue({
        //   superviseCodesModal: [],
        // });
        // this.$message.success(res.message)
        this.billNum();
        var num = this.$refs.leftItems.form.getFieldsValue().customBillNum;
        // if (num == 0 || num < 0) {
        //   this.$refs.leftItems.form.setFieldsValue({
        //     customBillNum: 0
        //   })
        //   console.log('aaa')
        //   this.$message.warning('此商品已全部扫描完成')
        //   this.modelVal = false
        //   this.tableAIndex = 0
        //   this.$emit('successScanCode', true)
        //   //   billComplete
        //   this.$emit('input', false)
        //   return
        // } else {
        //0大包装，1中包装，2小包装
        if (res.data.billComplete) {
          this.$message.warning("此商品已全部扫描完成");
          this.modelVal = false;
          this.tableAIndex = 0;
          this.$emit("successScanCode", true);
          //   billComplete
          this.$emit("input", false);
          this.modelVal = false; //关闭监管码弹窗
          return;
        }

        if (num == 1) {
          // 当前行商品已经扫描完成
          this.tableAIndex += 1;
          if (this.tableAIndex < this.tableA.length) {
            this.$message.warning(`第${this.tableAIndex}行商品已扫描完成！`);
            console.log(this.tableA[this.tableAIndex]);
            this.clickRow(null, null, this.tableA[this.tableAIndex]);
            return;
          }
        }
        if (this.packLevel == "0") {
          this.$nextTick(() => {
            this.$refs.leftItems.form.setFieldsValue({
              maxScanedQty: +this.$refs.leftItems.form.getFieldsValue().maxScanedQty + 1,
            });
          });
        } else if (this.packLevel == "1") {
          this.$nextTick(() => {
            this.$refs.leftItems.form.setFieldsValue({
              middleScanedQty: +this.$refs.leftItems.form.getFieldsValue().middleScanedQty + 1,
            });
          });
        } else if (this.packLevel == "2") {
          this.$nextTick(() => {
            this.$refs.leftItems.form.setFieldsValue({
              minScanedQty: +this.$refs.leftItems.form.getFieldsValue().minScanedQty + 1,
            });
          });
        }

        if (num == 1) {
          this.clickRow(null, null, this.tableA[this.tableAIndex - 1], true);
        } else {
          this.clickRow(null, null, this.tableA[this.tableAIndex], true);
        }
        //   this.$refs.tableB.createRow(0, {
        //     supervisionCode: code,
        //     itemName: this.selectRow.itemName
        //   })
        //取左边table的长度，判断当前index是否是最后一条
        //最后一条时剩余数量为0，自动关闭弹框
        var index = this.tableA.length;
        let that = this;
        console.log(this.rows);
        // if (this.rows._row_count == index) {
        //   setTimeout(() => {
        //     let customBillNum2 = that.$refs.leftItems.form.getFieldsValue().customBillNum
        //     // 监测剩余数量,0自动关闭弹框
        //     if (customBillNum2 == 0) {
        //       that.$refs.leftItems.form.setFieldsValue({
        //         customBillNum: 0
        //       })
        //       that.$message.warning('此商品已全部扫描完成')
        //       that.modelVal = false
        //       that.tableAIndex = 0
        //       that.$emit('successScanCode', true)
        //       that.$emit('input', false)
        //       return
        //     }
        //   }, 2000)
        // }
        // }
      });
    },

    async clickRow(selectedRowKeys, key, row, bool) {
      this.tableAIndex =
        this.tableA.findIndex((item) => item.taskRqcId == key) >= 0
          ? this.tableA.findIndex((item) => item.taskRqcId == key)
          : this.tableAIndex;
      if (this.tableAIndex == this.tableA.length) {
        this.tableAIndex = this.tableAIndex - 1 
      }
      this.$refs.tableA.reload(); //更新高亮
      this.rows = row;
      this.$nextTick(() => {
        let val = +this.packLevel;
        //删除和添加时不重新赋值
        !bool && this.$refs.leftItems.form.setFieldsValue(this.rows) && this.radioCheck(val);
        console.log(row, "row");
        this.$refs.showFormItems.form.setFieldsValue(row);
      });
      this.selectRow = row;

      this.getTableBInfo(row, true);
    },

    async clickRowTrue(selectedRowKeys, key, row) {
      //   let ref = this.$refs.showFormItems.form.getFieldsValue()
      //   this.$refs.leftItems.form.setFieldsValue(ref)
      this.tableAIndex =
        this.tableA.findIndex((item) => item.taskRqcId == key) >= 0
          ? this.tableA.findIndex((item) => item.taskRqcId == key)
          : this.tableAIndex;
      this.$refs.tableA.reload(); //更新高亮
      this.rows = row;
      this.$nextTick(() => {
        let val = +this.packLevel;
        //删除和添加时不重新赋值
        this.$refs.leftItems.form.setFieldsValue(this.rows);
        this.radioCheck(val);
        console.log(row, "row");
        this.$refs.showFormItems.form.setFieldsValue(row);
      });
      this.selectRow = row;
      
      this.$nextTick(() => {
        if (+row.pieceQty < +row.maxSu) {
          this.packLevel = "2";
        } else {
          this.packLevel = "0";
        }
      })

      this.getTableBInfo(row, true);
    },
    //规则
    radioPack(p1) {
      //（数量 pieceQty /大包装数 maxSu） +  数量 pieceQty % 大包装数 maxSu
      //（数量 pieceQty /中包装数 middleSu +  数量 pieceQty % 中包装数 middleSu
      if (p1.target.value) {
        this.radioDisabled = true;
      }
      let val = +this.packLevel;
      this.radioCheck(val);
      //   this.billNum()
    },
    //单选框校验规则
    radioCheck(val) {
      //大包装
      //应扫 shouldScanQty （数量 pieceQty /包装数 maxSu） +  数量 pieceQty % 包装数 maxSu
      //剩余 customBillNum (应扫-（应扫大包装 + 应扫中包装 + 应扫小包装）)
      this.$nextTick(() => {
        let ref = this.$refs.showFormItems.form.getFieldsValue();
        let result = this.$refs.leftItems.form.getFieldsValue();
        console.log(ref);
        console.log(this.selectRow);
        if (!this.selectRow) return;
        // let { maxSu,maxScanedQty, middleSu, middleScanedQty, minSu, minScanedQty } = ref
        let maxSu = +result.maxSu || 0;
        let maxScanedQty = +result.maxScanedQty || 0;
        let middleSu = +result.middleSu || 0;
        let middleScanedQty = +result.middleScanedQty || 0;
        let minScanedQty = +result.minScanedQty || 0;
        let minSu = +result.minSu || 1;
        let total = this.selectRow.pieceQty - (maxSu * maxScanedQty + middleSu * middleScanedQty + minScanedQty * minSu);
        console.log(total,'total');
        if (val == 0 && !maxSu) {
          this.$message.warn("商品无该包装规格数据，请联系管理员完善商品基础数据");
          return;
        }
        if (val == 1 && !middleSu) {
          this.$message.warn("商品无该包装规格数据，请联系管理员完善商品基础数据");
          return;
        }
        if (val == 2 && !minSu) {
          this.$message.warn("商品无该包装规格数据，请联系管理员完善商品基础数据");
          return;
        }
       
        let info = this.selectRow.receiveQty - (maxSu * maxScanedQty + middleSu * middleScanedQty + minScanedQty * minSu) - this.selectRow.rejectQty

        this.$refs.leftItems.form.setFieldsValue({
          shouldScanQty: this.selectRow.pieceQty,
          customBillNum: info,
        });
        // if (val == 0 && maxSu) {
        //   a = parseInt(total / maxSu) + (total % maxSu);
        //   console.log("剩余", a);
        //   this.$refs.leftItems.form.setFieldsValue({
        //     shouldScanQty: parseInt(total / maxSu) + (total % maxSu) + maxScanedQty + middleScanedQty + minScanedQty,
        //     customBillNum: a,
        //   });
        // } else if (val == 1 && middleSu) {
        //   a = parseInt(total / middleSu) + (total % middleSu);
        //   console.log("剩余", a);
        //   this.$refs.leftItems.form.setFieldsValue({
        //     shouldScanQty:
        //       parseInt(total / middleSu) + (total % middleSu) + maxScanedQty + middleScanedQty + minScanedQty,
        //     customBillNum: a,
        //   });
        // } else if (val == 2 && minSu) {
        //   a = parseInt(total / minSu) + (total % minSu);
        //   console.log("剩余", a);
        //   this.$refs.leftItems.form.setFieldsValue({
        //     // shouldScanQty: a + maxScanedQty + minScanedQty + middleScanedQty,
        //     shouldScanQty: parseInt(total / minSu) + (total % minSu) + maxScanedQty + middleScanedQty + minScanedQty,
        //     customBillNum: a,
        //   });
        // }
      });
    },
    // 剩余数量取值
    billNum() {
      let val = +this.packLevel;
      this.radioCheck(val);
    },
    //重新选择规则
    radioBtn() {
      this.radioDisabled = false;
    },
  },
};
</script>
<style lang="less" scoped>
.left-a {
  border: 1px solid #dcdfe6;
  height: 400px;
}

/deep/.clickRowStyl {
  td {
    background-color: #00b4ed !important;
  }
}
/deep/.p-table tr.active > td {
  background: #00b4ed !important;
}
</style>
