<template>
  <div class="coldfood">
    <div class="search-wrapper">
      <el-form
        :inline="true"
        :model="searchForm"
        class="search_form"
        style="text-align: left; margin-bottom: 10px"
      >
        <el-form-item label="姓名" label-width="200">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入姓名"
            @keyup.enter.native="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            v-model="searchForm.phone"
            placeholder="请输入手机号码"
            @keyup.enter.native="onSubmit"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="居住地址">
          <el-select
            v-model="searchForm.areaCode"
            clearable
            placeholder="请输入居住地址"
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态码">
          <el-select
            v-model="searchForm.stateCode"
            clearable
            placeholder="请输入状态码"
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in reviewStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-wrapper1">
      <table-template
        :tableData="tableData"
        :tableColumns="tableColumns"
        :loading="loading"
        :pagination="pagination"
        @Jump="jumpPage"
      >
        <template #state>
          <el-table-column label="状态描述">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.stateCode == '0'
                    ? ''
                    : scope.row.stateCode == '002'
                    ? 'danger'
                    : 'success'
                "
                >{{ scope.row.state }}</el-tag
              >
            </template>
          </el-table-column>
        </template>
        <el-table-column fixed="right" label="操作" width="380" align="left">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" round @click="view(scope.row)"
              >查看</el-button
            >
            <el-button
              type="warning"
              size="mini"
              round
              @click="getRecord(scope.row)"
              >记录</el-button
            >
            <el-button
              v-if="scope.row.stateCode == '0'"
              type="success"
              size="mini"
              round
              @click="auditHandle(scope.row, '0')"
              >通过</el-button
            >
            <el-button
              type="danger"
              size="mini"
              round
              v-if="scope.row.stateCode == '0'"
              @click="auditHandle(scope.row, '1')"
              >拒绝</el-button
            >

            <!-- 公示期的单子可以暂停公示 -->
            <!-- <el-button
              v-if="scope.row.state === 2"
              type="warning"
              size="mini"
              round
              @click="pause(scope.row.talentCode)"
              >暂停公示</el-button
            > -->
            <!-- 暂停公示的单子可以恢复公示 -->
            <!-- <el-button
              v-if="scope.row.state === 4"
              type="success"
              size="mini"
              round
              @click="recover(scope.row.talentCode)"
              >恢复公示</el-button
            > -->
            <!-- 审核通过后的单子都可以拉入黑名单撤销 -->
            <!-- <el-button
              v-if="
                scope.row.state === 2 ||
                scope.row.state === 3 ||
                scope.row.state === 4
              "
              type="danger"
              size="mini"
              round
              @click="blacklist(scope.row.talentCode)"
              >撤销</el-button
            > -->
            <!-- 审核通过后的单子都可以打印-->
            <!-- <el-button
              size="mini"
              round
              @click="print(scope.row.talentCode, scope.row)"
              >打印</el-button
            > -->
          </template>
        </el-table-column>
      </table-template>
    </div>
    <!-- 表格end -->

    <!-- 拒绝对话框 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialog"
      width="30%"
      class="auditDialog"
      :before-close="cancelBtn"
    >
      <!-- 通过0  拒绝1 -->
      <div v-if="flag == 1">
        <span>确定拒绝该家庭码的申请吗？确定的话请输入拒绝原因</span>
        <!-- <div style="margin-top: 15px">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入拒绝原因"
            v-model="auditData.record"
          >
          </el-input>
        </div> -->
      </div>
      <div v-else>
        <span
          >确定通过该家庭码的申请吗？确定的话请<span style="color: red"
            >选择通过状态</span
          >和输入说明</span
        >
      </div>
      <div>
        <el-form
          :model="auditData"
          label-width="80px"
          ref="auditForm"
          :rules="auditRules"
        >
          <el-form-item
            label="状态码"
            prop="stateCode"
            require
            v-if="flag == 0"
          >
            <el-select
              v-model="auditData.stateCode"
              placeholder="请选择通过状态"
            >
              <el-option
                v-for="item in passOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="说明" prop="record" require>
            <el-input
              type="textarea"
              placeholder="请输入说明"
              v-model="auditData.record"
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="confirmBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="家庭详情"
      :visible.sync="viewShow"
      width="800px"
      :close-on-press-escape="false"
      @close="showEdu = false"
    >
      <div class="content">
        <!-- 开始 -->
        <div class="applicant">
          <div class="title">申请人信息</div>
          <div class="cell">
            <p class="label">家庭码</p>
            <p class="value">{{ viewDetail.familyCode }}</p>
          </div>
          <div class="cell">
            <p class="label">姓名</p>
            <p class="value">{{ viewDetail.name }}</p>
          </div>
          <div class="cell">
            <p class="label">身份证号</p>
            <p class="value">{{ viewDetail.idCard }}</p>
          </div>
          <div class="cell">
            <p class="label">手机号</p>
            <p class="value">{{ viewDetail.phone }}</p>
          </div>
          <div class="cell">
            <p class="label">户籍地址</p>
            <p class="value">{{ viewDetail.domicile }}</p>
          </div>
          <div class="cell">
            <p class="label">现居地址</p>
            <p class="value">{{ viewDetail.area }}</p>
          </div>
          <div class="cell">
            <p class="label">现居详细地址</p>
            <p class="value">{{ viewDetail.address }}</p>
          </div>
          <div class="cell">
            <p class="label">工作单位</p>
            <p class="value">{{ viewDetail.workUnit }}</p>
          </div>
          <div class="cell">
            <p class="label">婚姻状况</p>
            <p class="value">{{ viewDetail.marriageState }}</p>
          </div>

          <div class="cell" v-if="viewDetail.weddingDate">
            <p class="label">结婚日期</p>
            <p class="value">{{ viewDetail.weddingDate }}</p>
          </div>
          <div class="cell">
            <p class="label">是否有孩子</p>
            <p class="value">{{ viewDetail.haveChildren }}</p>
          </div>
          <div class="cell" v-if="viewDetail.marriagePicture?.length > 0">
            <p class="label">
              {{ viewDetail.marriageCode == "0440" ? "离婚" : "结婚" }}证照片
            </p>
            <p class="value">
              <el-image
                v-for="(item, index) in viewDetail.marriagePicture"
                :key="index"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item.picture"
                :z-index="7777777"
                :preview-src-list="[item.picture]"
              >
              </el-image>
            </p>
          </div>
          <div class="cell">
            <p class="label">身份证（正，反）照</p>
            <p class="value">
              <el-image
                v-for="(item, index) in viewDetail.idCardPicture"
                :key="index"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item.picture"
                :z-index="7777777"
                :preview-src-list="[item.picture]"
              >
              </el-image>
            </p>
          </div>
          <div class="cell" v-if="viewDetail.birthCertificate?.length > 0">
            <p class="label">生育登记证明</p>
            <p class="value">
              <el-image
                v-for="(item, index) in viewDetail.birthCertificate"
                :key="index"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item.picture"
                :z-index="7777777"
                :preview-src-list="[item.picture]"
              >
              </el-image>
            </p>
          </div>
        </div>
        <div class="partner" v-if="viewDetail.partnerVO">
          <div class="title">丈夫/妻子信息</div>
          <div class="cell">
            <p class="label">姓名</p>
            <p class="value">{{ viewDetail.partnerVO.name }}</p>
          </div>
          <div class="cell">
            <p class="label">身份证号</p>
            <p class="value">{{ viewDetail.partnerVO.idCard }}</p>
          </div>
          <div class="cell">
            <p class="label">手机号</p>
            <p class="value">{{ viewDetail.partnerVO.phone }}</p>
          </div>
          <div class="cell">
            <p class="label">户籍地址</p>
            <p class="value">{{ viewDetail.partnerVO.domicile }}</p>
          </div>
          <div class="cell">
            <p class="label">现居地址</p>
            <p class="value">{{ viewDetail.partnerVO.area }}</p>
          </div>
          <div class="cell">
            <p class="label">现居详细地址</p>
            <p class="value">{{ viewDetail.partnerVO.address }}</p>
          </div>
          <div class="cell">
            <p class="label">工作地址</p>
            <p class="value">{{ viewDetail.partnerVO.workUnit }}</p>
          </div>
          <div class="cell" v-if="viewDetail.partnerVO.marriagePicture?.length">
            <p class="label">结婚证照片</p>
            <p class="value">
              <el-image
                v-for="(item, index) in viewDetail.partnerVO.marriagePicture"
                :key="index"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item.picture"
                :z-index="7777777"
                :preview-src-list="[item.picture]"
              >
              </el-image>
            </p>
          </div>
          <div class="cell">
            <p class="label">丈夫/妻子身份证（正，反）照</p>
            <p class="value">
              <el-image
                v-for="(item, index) in viewDetail.partnerVO.idCardPicture"
                :key="index"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item.picture"
                :z-index="7777777"
                :preview-src-list="[item.picture]"
              >
              </el-image>
            </p>
          </div>
          <div
            class="cell"
            v-if="viewDetail.partnerVO.birthCertificate?.length > 0"
          >
            <p class="label">生育登记证明</p>
            <p class="value">
              <el-image
                v-for="(item, index) in viewDetail.partnerVO.birthCertificate"
                :key="index"
                style="width: 100px; height: 100px; margin-right: 10px"
                :src="item.picture"
                :z-index="7777777"
                :preview-src-list="[item.picture]"
              >
              </el-image>
            </p>
          </div>
        </div>
        <div class="children" v-if="viewDetail.childrenVOList?.length > 0">
          <div
            class="card"
            v-for="(item, index) in viewDetail.childrenVOList"
            :key="index"
          >
            <div class="title">子女信息{{ index + 1 }}</div>
            <div class="cell">
              <p class="label">姓名</p>
              <p class="value">{{ item.name }}</p>
            </div>
            <div class="cell">
              <p class="label">身份证号</p>
              <p class="value">{{ item.idCard }}</p>
            </div>
            <div class="cell">
              <p class="label">孩次</p>
              <p class="value">{{ item.childOrder }}</p>
            </div>
            <div class="cell">
              <p class="label">性别</p>
              <p class="value">{{ item.sex }}</p>
            </div>
            <div class="cell">
              <p class="label">类别</p>
              <p class="value">{{ item.type }}</p>
            </div>
            <div class="cell">
              <p class="label">出生年月</p>
              <p class="value">{{ item.birthDate }}</p>
            </div>
            <div class="cell">
              <p class="label">身份证明</p>
              <p class="value">
                {{ item.identification == 1 ? "身份证" : "户口本" }}
              </p>
            </div>
            <div class="cell" v-if="item.identification == 1">
              <p class="label">身份证照片</p>
              <p class="value">
                <el-image
                  v-for="(item, index) in item.pictureVOList.filter(
                    (picture) => picture.pictureType == 1
                  )"
                  :key="index"
                  style="width: 100px; height: 100px; margin-right: 10px"
                  :src="item.picture"
                  :z-index="7777777"
                  :preview-src-list="[item.picture]"
                >
                </el-image>
              </p>
            </div>
            <div class="cell">
              <p class="label">出生医学证明</p>
              <p class="value">
                <el-image
                  v-for="(item, index) in item.pictureVOList.filter(
                    (picture) => picture.pictureType == 2
                  )"
                  :key="index"
                  style="width: 100px; height: 100px; margin-right: 10px"
                  :src="item.picture"
                  :z-index="7777777"
                  :preview-src-list="[item.picture]"
                >
                </el-image>
              </p>
            </div>
            <div class="cell" v-if="item.type == '收养'">
              <p class="label">收养证明</p>
              <p class="value">
                <el-image
                  v-for="(item, index) in item.pictureVOList.filter(
                    (picture) => picture.pictureType == 3
                  )"
                  :key="index"
                  style="width: 100px; height: 100px; margin-right: 10px"
                  :src="item.picture"
                  :z-index="7777777"
                  :preview-src-list="[item.picture]"
                >
                </el-image>
              </p>
            </div>
            <div class="cell" v-if="item.identification == 2">
              <p class="label">户口本（孩子页）</p>
              <p class="value">
                <el-image
                  v-for="(item, index) in item.pictureVOList.filter(
                    (picture) => picture.pictureType == 4
                  )"
                  :key="index"
                  style="width: 100px; height: 100px; margin-right: 10px"
                  :src="item.picture"
                  :z-index="7777777"
                  :preview-src-list="[item.picture]"
                >
                </el-image>
              </p>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- 申请的单子有通过拒绝-->
        <!-- <el-button type="danger" size="mini" round @click="deny(viewRow)"
          >拒绝
        </el-button> -->
        <!-- 通过 -->
        <!-- <el-button type="success" size="mini" round @click="pass(viewRow)"
          >通过
        </el-button> -->
      </span>
    </el-dialog>
    <el-dialog
      title="操作记录"
      :visible.sync="recordShow"
      width="800px"
      :close-on-press-escape="false"
    >
      <div class="content">
        <template v-if="record && record.length > 0">
          <div
            class="cell"
            :key="index"
            v-for="(item, index) in record"
            style="font-size: 16px"
          >
            <p class="label" style="margin-right: 30px">
              {{ item?.state }}
              <span v-if="item?.record" style="color: red; font-size: 16px"
                >({{ item?.record }})</span
              >
            </p>
            <div class="info">
              <p class="item">操作人：{{ item?.departName }}</p>
              <p class="item">操作时间：{{ item?.createTime }}</p>
            </div>
          </div>
        </template>
        <p v-else>暂无记录~</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableTemplate from "@/components/Table";
// import { changeList } from '@/utils';
import {
  getList,
  get,
  getRecord,
  getType,
  getReviewState,
  familyAudit,
} from "@/api/talents";
// import { Message } from "element-ui";

export default {
  components: { TableTemplate },
  data() {
    return {
      auditDialog: false,

      refuseCode: "",

      // 居住地址
      options: [],
      // 状态吗
      reviewStateOptions: [],
      branchCode: "", // 管理后台给的code
      code: "",
      userName: "",
      searchForm: {
        name: "", // 姓名
        phone: "", // 联系方式
        areaCode: "", // 居住地址
        stateCode: "", // 状态
      },
      loading: false,

      // 审核状态
      auditData: {
        state: "",
        stateCode: "",
        record: "", //评语
        departName: "卫健委",
        familyCode: "",
        user: "",
      },
      // 人才类型
      tableData: [],
      tableColumns: [
        {
          key: "familyCode",
          label: "家庭码",
          width: 250,
        },
        {
          key: "name",
          label: "姓名",
          width: 250,
        },
        {
          key: "phone",
          label: "手机号",
          width: 250,
        },
        {
          key: "idCard",
          label: "证件",
          width: 250,
        },
        // {
        //   key: "area",
        //   label: "居住地址",
        //   width: 250,
        // },

        {
          key: "haveChildren",
          label: "是否有孩子",
          width: 250,
        },
        {
          key: "marriageState",
          label: "婚姻状况",
          width: 250,
        },
        {
          key: "state",
          label: "状态描述",
          width: 250,
          type: "slot",
        },
        // {
        //   key: "workUnit",
        //   label: "工作单位",
        //   width: 250,
        // },
        {
          key: "createTime",
          label: "创建时间",
          width: 250,
          fixed: "right",
        },
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      viewShow: false,
      viewDetail: {},
      record: [],
      recordShow: false,
      showEdu: false,
      eduList: [],
      // 查看对话框当前row
      viewRow: {},
      flag: 0,
      passOptions: [], //审核通过的状态
      auditRules: {
        stateCode: {
          required: true,
          message: "请选择审批状态",
          trigger: "blur",
        },
        record: {
          required: true,
          message: "请输入说明",
          trigger: "blur",
        },
      },
    };
  },
  watch: {
    $route() {
      //   if (this.$route) {
      //     this.userName = localStorage.getItem('userName');
      //     this.branchCode = this.$route.query.branchCode
      //       ? this.$route.query.branchCode
      //       : '';
      //     this.code = this.$route.query.code ? this.$route.query.code : '';
      //     this.searchForm.name = '';
      //     this.searchForm.phone = '';
      //     this.searchForm.typeCode = '';
      //     this.searchForm.state = '';
      //     this.searchForm.recordName = '';
      //     this.searchForm.unitName = '';
      //     this.init();
      //     this.initType();
      //     if (!this.branchCode) {
      //       this.initBranch();
      //     }
      //   }
      // },
    },
  },
  methods: {
    switechBranch(branchCode) {
      switch (branchCode) {
        case "5":
          return "镇江市区";
        case "17":
          return "丹阳市";
        case "18":
          return "句容市";
        case "19":
          return "扬中市";
      }
    },
    init() {
      this.tableData = [];
      this.loading = true;
      let params = {
        areaCode: this.searchForm.areaCode,
        name: this.searchForm.name,
        phone: this.searchForm.phone,
        stateCode: this.searchForm.stateCode,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
      };
      getList(params).then((res) => {
        this.loading = false;
        if (res.success) {
          console.log(res);
          this.pagination.total = res.data.total;
          if (res.data.total) {
            this.tableData = res.data.list;
          } else {
            this.tableData = [];
          }
        }
      });
    },
    initType() {
      getType().then((res) => {
        this.options = res.data.map((item) => {
          return {
            label: item.name,
            value: item.code,
          };
        });
      });
    },

    initReviewState() {
      getReviewState(0).then((res) => {
        this.reviewStateOptions = res.data.map((item) => {
          return {
            label: item.state,
            value: item.code,
          };
        });
      });
      getReviewState(1).then((res) => {
        let arr = [];
        res.data.forEach((item) => {
          if (item.state != "不符合") {
            arr.push({
              label: item.state,
              value: item.code,
            });
          }
        });
        this.passOptions = arr;
        console.log(this.passOptions, "pass");
      });
    },

    jumpPage() {
      this.init();
    },
    onSubmit() {
      this.pagination.currentPage = 1;
      this.init();
    },
    view(row) {
      let params = {
        code: row.familyCode,
      };
      get(params).then((res) => {
        this.viewDetail = res.data;
        this.viewRow = row;
        this.viewShow = true;
        this.viewDetail.marriagePicture = res.data.applicantPictureList.filter(
          (item) => item.pictureType == 2
        );
        this.viewDetail.idCardPicture = res.data.applicantPictureList.filter(
          (item) => item.pictureType == 1
        );
        this.viewDetail.birthCertificate = res.data.applicantPictureList.filter(
          (item) => item.pictureType == 3
        );
        //伴侣照片信息

        if (this.viewDetail.partnerVO) {
          this.viewDetail.partnerVO.idCardPicture =
            this.viewDetail.partnerVO.partnerPictureList.filter(
              (item) => item.pictureType == 1
            );
          // this.viewDetail.partnerVO.marriagePicture =
          //   this.viewDetail.partnerVO.partnerPictureList.filter(
          //     (item) => item.pictureType == 2
          //   );
          // this.viewDetail.partnerVO.birthCertificate =
          //   this.viewDetail.partnerVO.partnerPictureList.filter(
          //     (item) => item.pictureType == 3
          //   );
        }
      });
    },
    getRecord(row) {
      let params = {
        code: row.familyCode,
      };
      getRecord(params).then((res) => {
        console.log(res);
        this.record = res.data;
        this.recordShow = true;
      });
    },

    auditHandle(row, flag) {
      this.flag = flag;
      this.auditData.familyCode = row.familyCode;
      this.auditDialog = true;
    },

    // 拒绝对话框
    deny(talentCode) {
      this.flag = 0;
      this.auditDialog = true;
      this.refuseCode = talentCode;
    },
    cancelBtn() {
      this.auditData = {
        state: "",
        stateCode: "",
        record: "", //评语
        departName: "卫健委",
        familyCode: "",
        user: "",
      };
      this.auditDialog = false;
    },
    confirmBtn() {
      this.$refs.auditForm.validate((valid) => {
        if (valid) {
          if (this.flag == 0) {
            // 通过
            this.passOptions.forEach((el) => {
              if (el.value == this.auditData.stateCode) {
                this.auditData.state = el.label;
              }
            });

            this.auditData.user = localStorage.getItem("userName");
            if (this.auditData.stateCode) {
              familyAudit(this.auditData).then((res) => {
                if (res.code == 200) {
                  this.$message.success(res.msg || "审核成功");
                  this.auditDialog = false;
                  this.init();
                } else {
                  this.$message.success(res.msg || "审核失败");
                }
              });
            } else {
              this.$message.warning("请先选择审批状态");
            }
          } else {
            this.auditData.state = "不符合";
            this.auditData.stateCode = "002";
            familyAudit(this.auditData).then((res) => {
              if (res.code == 200) {
                console.log(res, 111);
                this.$message.success(res.msg || "审核成功");
                this.auditDialog = false;
                this.init();
              } else {
                this.$message.success(res.msg || "审核失败");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
  mounted() {},
  created() {
    this.userName = localStorage.getItem("userName");
    this.branchCode = this.$route.query.branchCode
      ? this.$route.query.branchCode
      : "";
    this.code = this.$route.query.code ? this.$route.query.code : "";
    this.init();
    this.initType();
    this.initReviewState();
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';

.table-wrapper1 {
  margin-top: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  max-height: calc(100vh - 320px);
  overflow: auto;
}

.el-form-item {
  margin-right: 5px;
}

.early, .warning {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-block;
}

.early {
  background: #FFD700;
}

.warning {
  background: red;
}

.content {
  max-height: 60vh;
  overflow-y: auto;
   .title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    background: #409EFF;
   }
  .cell {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;

    .label {
      width: 150px;
      color: #999;
      text-align: left;

      span {
        color: red;
        font-size: 12px;
      }
    }

    .value {
      color: #000;
      text-align: left;
    }

    .info {
      .item {
        width: 100%;
        text-align: left;
        color: #000;
        margin-bottom: 10px;
      }

      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 2px;
}

.state {
  display: flex;
  align-items: center;
}
</style>
