<!-- @desc:首页工作台  @auth:洪旭东  @time:2022-05-02 10:28 -->
<template>
  <div class="main-div" style="background-color: #fff">
    <!--常用功能自定义弹窗 -->
    <DkModal
      @contextmenu.native.prevent
      @modalCancel="closeCommonUse"
      @modalOk="saveCommonUse"
      :loading="funcModalLoading"
      v-model="funcModal"
      width="1000"
      title="设置常用功能">
      <div style="width: 100%;display: flex;">
        <div class="modal-left-div" style="width: 50%;height: 600px;overflow: auto;padding-right: 5px;">
          <div v-for="(fItem,fIndex) in funcList" :key="fIndex" style="width: 100%">
            <Divider orientation="left">{{ fItem.meta.title }}</Divider>
            <div style="display: flex;width: 100%;flex-wrap: wrap;">
              <div v-for="(f2Item,f2Index) in fItem.children" :key="f2Index" :style="{marginTop:f2Index>4?'10px':'0'}"
                   style="position:relative;width: 20%;text-align: center;">
                <Checkbox @on-change="funcCheckBoxChange($event,f2Item)" :ref="'name-'+f2Item.menuUuid" class="ttt"
                          v-model="f2Item._checked">
                  <div style="width: 40px;height: 40px;position: relative;margin: auto">
                    <img
                      :src="require('@/assets/images/menu-image/' + (f2Item.meta.icon ? f2Item.meta.icon + '.png':'customer.png') )"
                      style="width: 40px;height: 40px;"/>
                  </div>
                  <div class="func-item-title">{{ f2Item.meta.title }}</div>
                </Checkbox>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-right-div" style="width: 50%;height: 600px;overflow: auto;padding-right: 5px;">
          <div style="height: 56px;display: flex;justify-content: center;align-items: center;">
            <div v-show="rightFuncList.length>0" class="clear-btn" @click="clearAll">全部清空</div>
          </div>
          <draggable v-if="rightFuncList.length>0" :animation="300" v-model="rightFuncList"
                     style="display: flex;width: 100%;flex-wrap: wrap;">
            <div v-for="(rfItem,rfIndex) in rightFuncList" class="draggable-div" :key="rfIndex"
                 style="position:relative;width: 20%;margin-bottom:10px;text-align: center;">
              <div style="width: 40px;height: 40px;position: relative;margin: auto">
                <img
                  :src="require('@/assets/images/menu-image/' +( rfItem.meta.icon ? rfItem.meta.icon + '.png':'customer.png') )"
                  style="width: 40px;height: 40px;"/>
                <div @click="funcCheckBoxChangeRight('name-'+rfItem.menuUuid)"
                     style="cursor:pointer;display:flex;justify-content:center;font-size:14px;align-items:center;position: absolute;top: -7px;right: -7px;padding: 2px;background-color: red;border: 1px solid #fff;border-radius: 50%;height: 20px;width:20px;color:#fff;font-weight: bold;">
                  <div style="width: 75%;height: 2px;background-color: #fff;"></div>
                </div>
              </div>
              <div class="func-item-title">{{ rfItem.meta.title }}</div>
            </div>
          </draggable>
          <div v-else style="width: 100%;text-align: center;">
            <div style="margin-top: 100px;">
              <Icon type="logo-dropbox" color="#b6b6b6" size="42"/>
              <span style="display: block;color:#b6b6b6;margin-top: 5px;">请从左侧勾选以选择常用功能</span>
            </div>
          </div>
        </div>
      </div>
    </DkModal>

    <div style="display: flex;justify-content: space-between">
      <!--左侧-->
      <div style="width: 80%">
        <!--    常用功能-->
        <Card class="card" style="margin-top: 0;height: 300px" @contextmenu.native.prevent>
          <p slot="title">
            常用功能
          </p>
          <Button slot="extra" icon="md-create" @click="openFuncModal">
            自定义
          </Button>
          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
            <div style="width: 25px;" v-if="homeCommonUseList && homeCommonUseList.length > 0">
              <Icon type="ios-arrow-dropleft" style="cursor: pointer" @click.native="scrollCommonUseCard('left')"
                    size="25"/>
            </div>
            <div class="common-use-scroll" style="width: calc(100% - 70px);overflow: hidden;">
              <div v-if="homeCommonUseList && homeCommonUseList.length>0" style="display:flex;width: max-content;">
                <div v-for="(hcuItem,hcuIndex) in homeCommonUseList" :key="hcuIndex"
                     style="width: 92px;text-align: center;">
                  <div @click="toPage(hcuItem)" style="cursor: pointer;">
                    <div>
                      <img style="width: 40px;height: 40px"
                           :src="require('@/assets/images/menu-image/' + hcuItem.menuTag.image )"/>
                    </div>
                    <div style="font-size: 13px">{{ hcuItem.menuName }}</div>
                  </div>
                </div>
              </div>

              <div v-else style="display:flex;width: max-content;">
                <div @click="openFuncModal"
                     style="cursor:pointer;border: 1px #d5d5d5 dashed;color:#b1b1b1;font-size:16px;height: 60px;width: 200px;background:#eaf9ff;border-radius: 10px;display: flex;align-items: center;justify-content: center;">
                  添加常用功能
                </div>
              </div>
            </div>
            <div style="width: 25px;" v-if="homeCommonUseList && homeCommonUseList.length > 0">
              <Icon type="ios-arrow-dropleft" style="transform: rotate(180deg);cursor: pointer;"
                    @click.native="scrollCommonUseCard('right')" size="25"/>
            </div>
          </div>
        </Card>

        <!--    待办-->
        <Card class="card card-upcoming" style="margin-top: 8px;height: 180px" @contextmenu.native.prevent>
          <div style="display: flex">
            <div style="font-size: 16px;font-weight:500;color:#17233d;margin-right: 40px">
              待办中心
            </div>
            <Tabs value="name1" v-model="detailModel" @on-click="detailTabsClick">
              <TabPane v-for="(item,index) in detailOptions" :key="index" :label="item.label"
                       :name="item.name"></TabPane>
            </Tabs>
          </div>
          <Tooltip style="cursor: pointer" slot="extra" :content="$v('refresh')" theme="light">
            <Button icon="md-refresh" shape="circle" class="circle-button" @click="refreshWaitCenter"></Button>
          </Tooltip>
          <div style="display: flex;align-items: center;">
            <div class="upcoming">
              <!--销售-->
              <div class="upcoming-card" v-if="saleFlag" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-order-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-number">
                      {{ orderCount }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      {{ $t('salePending') }}
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--库存-->
              <div class="upcoming-card" v-if="inventoryFlag" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-into-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-number">
                      {{ intoCount }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      {{ $t('intoPending') }}
                    </Row>
                  </Col>
                </Row>
              </div>
              <div class="upcoming-card" v-if="inventoryFlag" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-out-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-number">
                      {{ outCount }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      {{ $t('outPending') }}
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--资金-->
              <div class="upcoming-card" v-if="fundFlag" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-fund-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-number">
                      {{ fundCount }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      {{ $t('fundPending') }}
                    </Row>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </Card>

        <!-- 实时数据 -->
        <Card class="card card-upcoming" style="margin-top: 8px;height: 180px" @contextmenu.native.prevent>
          <div style="display: flex">
            <div style="font-size: 16px;font-weight:500;color:#17233d;margin-right: 40px">
              实时数据
            </div>
            <Select v-model="realTimeDataType" style="width:200px;margin: 0px 0px 10px 0px" ref="selCp"
                    @on-change="cpRealTimeDataType">
              <Option v-for="item in realTimeDataTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <Tooltip style="cursor: pointer" slot="extra" :content="$v('refresh')" theme="light">
            <Button icon="md-refresh" shape="circle" class="circle-button" @click="refreshRealTimeData "></Button>
          </Tooltip>
          <div style="display: flex;align-items: center;">
            <div class="upcoming">
              <!--销售订单-->
              <div class="upcoming-card" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-order-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 15px 0px 0px 5px">
                      {{ orderQty }} 单 {{ orderAmt }} 元
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      销售订单
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--出库订单-->
              <div class="upcoming-card" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-into-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 15px 0px 0px 5px">
                      {{ outQty }} 单 {{ outAmt }} 元
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      出库订单
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--退货订单-->
              <div class="upcoming-card" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-out-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 15px 0px 0px 5px">
                      {{ returnQty }} 单 {{ returnAmt }} 元
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      退货订单
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--新增客户-->
              <div class="upcoming-card" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-order-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 15px 0px 0px 5px">
                      {{ cusQty }} 单 {{ cusAmt }} 元
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      新增客户
                    </Row>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </Card>

        <!-- 经营概况 -->
        <Card class="card card-upcoming" style="margin-top: 8px;height: 280px" @contextmenu.native.prevent>
          <div style="display: flex">
            <div style="font-size: 16px;font-weight:500;color:#17233d;margin-right: 40px">
              经营概况
            </div>
            <DatePickerPop type="daterange" clearable size="small" :editable="true"
                           transfer v-model="accDate"
                           placement="bottom-end" @on-change="(val) => btnDatePickerOk(val)"
                           style="width:218px; margin: 0px 0px 10px 0px" :short-cut-flag="true"></DatePickerPop>
          </div>
          <Tooltip style="cursor: pointer" slot="extra" :content="$v('refresh')" theme="light">
            <Button icon="md-refresh" shape="circle" class="circle-button" @click="selectBusinessOverview "></Button>
          </Tooltip>
          <div style="display: flex;align-items: center;">
            <div class="upcoming">
              <!--库存资产-->
              <div class="upcoming-card" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-order-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 15px 0px 0px 5px">
                      ￥ {{ intAssets }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      库存资产(实时)
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--客户欠款-->
              <div class="upcoming-card" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="6" class="upcoming-card-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-out-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 15px 0px 0px 5px">
                      ￥ {{ receivableResidue }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card-text" style="margin: 5px 0px 0px 5px">
                      客户欠款(实时)
                    </Row>
                  </Col>
                </Row>
              </div>
              <!--销售利润-->
              <div class="upcoming-card1" @click="openDrawer($config.homeDrawType.waitAudit)">
                <Row>
                  <Col span="3" class="upcoming-card1-icon">
                    <img :src="require('@/assets/images/menu-image/' + 'web-into-pending.png')"
                         style="width: 40px;height: 40px;"/>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card1-text" style="margin: 15px 0px 0px 5px">
                      销售金额： ￥{{ receivable }} 销售成本： ￥{{ costAmt }}
                    </Row>
                  </Col>
                  <Col span="18">
                    <Row class="upcoming-card1-text" style="margin: 0px 0px 0px 55px">
                      销售利润： ￥{{ profit }} 利润率： {{ profitMargin }}%
                    </Row>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </Card>
      </div>
      <!--右侧-->
      <div style="width: 20%;margin-left: 8px">
        <!-- 产品公告 -->
        <Card class="card" style="margin-top: 0;height: 300px" @contextmenu.native.prevent>
          <p slot="title">
            产品公告
          </p>
          <Button slot="extra" icon="md-create" @click="moreProductAnnouncement">
            更多
          </Button>
        </Card>

        <!-- 走马灯 -->
        <Card class="card card-upcoming" style="margin-top: 8px;height: 367px" @contextmenu.native.prevent>
          <Carousel autoplay :height="350" :autoplay-speed="10000" :radius-dot="true" loop>
            <CarouselItem v-for="(item, index) in dataCarouselItems">
              <img :src="$config.imgUrl + item.annexPaths[0].url" style="width: 100%;height: 95%;cursor:pointer"
                   @click="showActivity(item)">
            </CarouselItem>
          </Carousel>
        </Card>

        <!-- 新手指导 -->
        <Card class="card" style="margin-top: 8px;height: 280px" @contextmenu.native.prevent>
          <p slot="title">
            新手指导
          </p>
          <Button slot="extra" icon="md-create" @click="beginnersGuide">
            快速掌握
          </Button>
          <div style="width:100%;text-align: center;">
            <img src="@/assets/images/dkic-code.png" style="width: 40%;height: 40%;">
          </div>
        </Card>
      </div>
    </div>
    <!--    底部留白-->
    <div style="width: 100%; height: 20px"></div>
  </div>
</template>

<script>
import funcIcon from '../../../assets/images/func-icon.png'
import draggable from "vuedraggable"
import {indexMixin} from '@/mixins'

export default {
  name: 'home',
  mixins: [indexMixin],
  components: {
    draggable,
  },
  data() {
    let self = this
    return {
      dataCarouselItems: [],
      // {path: "@/assets/images/icon_file.png", cIndex: 1}, //销售
      // {path: "@/assets/images/icon_file.png", cIndex: 2},//库存
      // {path: "@/assets/images/icon_file.png", cIndex: 3},//资金
      // ],
      drawType: self.$config.homeDrawType.waitAudit, // 首页抽屉类型
      approvalCount: null, // 待审条数
      unReadNoticeCount: null, // 未读公告条数
      waitApprovalRight: false,// 待审中心权限
      approveSplit: 0.6,
      funcIcon,
      /*****************常用功能*****************/
      funcModal: false,
      funcModalLoading: false,
      funcList: [],
      rightFuncList: [],
      homeCommonUseList: [],
      /*****************常用功能*****************/

      /*****************待办*****************/
      detailModel: 'sale',
      detailOptions: [
        {label: self.$t('sale'), name: 'sale'}, //销售
        {label: self.$t('inventory'), name: 'inventory'},//库存
        {label: self.$t('fund'), name: 'fund'},//资金
      ],
      saleFlag: true,
      inventoryFlag: false,
      fundFlag: false,
      fundCount: 0,
      outCount: 0,
      intoCount: 0,
      orderCount: 0,
      /*****************待办*****************/

      //公告
      managementTableData: [],
      //图表颜色
      colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      // 日期配置
      dateOptions: {
        shortcuts: [
          {
            text: '一月',
            value() {
              return self.getThisMonth(1)
            }
          },
          {
            text: '二月',
            value() {
              return self.getThisMonth(2)
            }
          },
          {
            text: '三月',
            value() {
              return self.getThisMonth(3)
            }
          },
          {
            text: '四月',
            value() {
              return self.getThisMonth(4)
            }
          },
          {
            text: '五月',
            value() {
              return self.getThisMonth(5)
            }
          },
          {
            text: '六月',
            value() {
              return self.getThisMonth(6)
            }
          },
          {
            text: '七月',
            value() {
              return self.getThisMonth(7)
            }
          },
          {
            text: '八月',
            value() {
              return self.getThisMonth(8)
            }
          },
          {
            text: '九月',
            value() {
              return self.getThisMonth(9)
            }
          },
          {
            text: '十月',
            value() {
              return self.getThisMonth(10)
            }
          },
          {
            text: '十一月',
            value() {
              return self.getThisMonth(11)
            }
          },
          {
            text: '十二月',
            value() {
              return self.getThisMonth(12)
            }
          },
          {
            text: '一季度',
            value() {
              return self.getThisQuarter(1)
            }
          },
          {
            text: '二季度',
            value() {
              return self.getThisQuarter(2)
            }
          },
          {
            text: '三季度',
            value() {
              return self.getThisQuarter(3)
            }
          },
          {
            text: '四季度',
            value() {
              return self.getThisQuarter(4)
            }
          },
        ]
      },
      // 抽屉
      drawerShow: false,
      // 抽屉标题
      drawerTitle: null,
      // 抽屉表格
      drawerTableData: [],
      // 抽屉表格列
      drawerTableColumn: [],
      // 业绩日期范围
      performanceDate: self.getThisMonth(),
      // 业务门店select v-model
      performanceStore: '全部门店',
      // 门店
      performanceStoreList: [
        {
          value: '全部门店',
          label: '全部门店'
        },
        {
          value: 'A门店',
          label: 'A门店'
        },
        {
          value: 'B门店',
          label: 'B门店'
        },
      ],
      // 销售简报页面类型
      salesReportType: 1,
      // 销售简报公司select v-model
      salesReportCompany: 'A公司',
      salesReportCompanyList: [
        {
          value: 'A公司',
          label: 'A公司'
        },
        {
          value: 'B公司',
          label: 'B公司'
        },
      ],
      // 销售简报人员 v-model
      salesReportStaff: 'A员工',
      // 销售简报人员List
      salesReportStaffList: [
        {
          value: 'A员工',
          label: 'A员工'
        },
        {
          value: 'B员工',
          label: 'B员工'
        },
      ],
      // 销售简报radio
      salesReportRadio: '销售情况',
      // 销售助手天数list
      salesHelperDaysList: [
        {
          value: '7',
          label: '7天'
        },
        {
          value: '15',
          label: '15天'
        },
        {
          value: '30',
          label: '30天'
        },
      ],
      // 销售助手天数1
      salesHelperDays1: '7',
      // 销售助手天数2
      salesHelperDays2: '15',
      // 销售助手天数3
      salesHelperDays3: '30',

      /***************** 实时数据 ******************/
      realTimeDataType: "经营日报",
      orderQty: 0,
      orderAmt: 0,
      outQty: 0,
      outAmt: 0,
      returnQty: 0,
      returnAmt: 0,
      cusQty: 0,
      cusAmt: 0,
      realTimeDataTypeList: [
        {"id": "经营日报", "name": "经营日报"},
        {"id": "经营月报", "name": "经营月报"}
      ],
      /***************** 实时数据 ******************/

      /***************** 经营概况 ******************/
      accDate: [new Date().addMonths(-1).format('yyyy-MM-dd'), new Date().format('yyyy-MM-dd')],
      accDateStart: new Date().addMonths(-1).format('yyyy-MM-dd'),
      accDateEnd: new Date().format('yyyy-MM-dd'),
      intAssets: 0,
      receivableResidue: 0,
      costAmt: 0,
      profitMargin: 0,
      receivable: 0,
      profit: 0,
      /***************** 经营概况 ******************/
    }
  },
  mounted() {
    // 监听页面，如果大小变化，抽屉关闭
    let self = this
    window.addEventListener('resize', function (e) {
      self.drawerShow = false;
    })
  },
  methods: {
    /****************************************常用功能****************************************/
    /**
     *   @desc   : 常用功能弹窗查询数据
     *   @date   : 2024/4/28 15:02
     *   @author : 寇珊珊
     */
    openFuncModal() {
      this.funcModal = true
      let hadMenuUuidList = this.homeCommonUseList.map(it => it.menuUuid)
      let rightFuncList = []
      this.funcList.forEach(it => {
        if (it.children && it.children.length > 0) {
          it.children.forEach(it2 => {
            this.$set(it2, '_checked', false)
            if (hadMenuUuidList.indexOf(it2.menuUuid) !== -1) {
              rightFuncList.push(Object.assign(it2, {displayNo: hadMenuUuidList.indexOf(it2.menuUuid)}))
              this.$set(it2, '_checked', true)
            }
          })
        }
      })
      this.rightFuncList = rightFuncList.sort((x, y) => {
        return x.displayNo - y.displayNo
      })
    },
    /**
     * @desc   : 关闭常用功能界面
     * @author : 周兴
     * @date   : 2022/8/22 14:38
     */
    closeCommonUse() {
      this.funcModal = false
    },
    /**
     * @desc   : 保存常用功能
     * @author : 周兴
     * @date   : 2022/8/22 14:25
     */
    saveCommonUse() {
      this.funcModalLoading = true
      let params = this.rightFuncList.map((it, index) => {
        return {userId: this.$store.state.user.id, displayNo: index, menuUuid: it.menuUuid, menuName: it.meta.title}
      })
      console.log("保存常用功能", params)
      let excute = this.excute(this.$service.appMenuService, this.$service.appMenuService.save, params)
      excute.then(res => {
        this.funcModalLoading = false
        this.funcModal = false
        if (res.code === this.$config.SUCCESS_CODE) {
          this.selectCommonUse()
        }
      })
      return excute;
    },
    /**
     * @desc   : 查询常用功能
     * @author : 周兴
     * @date   : 2022/8/22 14:16
     */
    selectCommonUse() {
      let params = {
        appCode: this.$config.appCode.WEB,
        staffId: this.$store.state.user.staffId,
      }
      this.excute(this.$service.appMenuService, this.$service.appMenuService.selectMenu, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.homeCommonUseList = res.data
        }
      })
    },
    toPage(menu) {
      this.$router.push({path: menu.menuTag.path})
    },
    /**
     * @desc   : 滚动菜单
     * @author : 周兴
     * @date   : 2022/8/30 18:53
     */
    scrollCommonUseCard(e) {
      for (let i = 0; i < 701; i++) {
        setTimeout(function () {
          if (e == 'left') {
            document.getElementsByClassName('common-use-scroll')[0].scrollLeft--
          } else {
            document.getElementsByClassName('common-use-scroll')[0].scrollLeft++
          }
        }, 100 + i)
      }
    },
    /**
     * @desc   : 获取常用功能的菜单
     * @author : 周兴
     * @date   : 2022/8/22 10:47
     */
    getCommonMenu() {
      if (this.$store.state.app.menuList && this.$store.state.app.menuList.length > 0) {
        let menuList = [...this.$store.state.app.menuList]
        let funcList = []
        menuList.forEach(it => {
          let funcItem = {}
          // 不包括首页
          if (it.name != 'home') {
            funcItem.name = it.name;
            funcItem.menuUuid = it.menuUuid;
            funcItem.parentUuid = it.parentUuid;
            funcItem.meta = it.meta;
          }
          // 查询子级
          if (it.children && it.children.length > 0) {
            let funcListChilds = this.getCommonChild(it.children);
            if (funcListChilds && funcListChilds.length > 0) {
              funcItem.children = funcListChilds;
              funcList.push(funcItem);
            }
          }
        })
        this.funcList = funcList;
      }
    },
    /**
     * @desc   : 获取子级的菜单
     * @author : 周兴
     * @date   : 2022/8/22 11:11
     */
    getCommonChild(children) {
      let funcList = []
      if (children && children.length > 0) {
        children.forEach(it => {
          // 说明要需要进行快捷的菜单
          let funcItem = {}
          funcItem.name = it.name;
          funcItem.meta = it.meta;
          funcItem.menuUuid = it.menuUuid;
          funcItem.parentUuid = it.parentUuid;
          funcList.push(funcItem);
          // 如果还有子级，需要去查询子级
          if (it.children && it.children.length > 0) {
            let funcListChilds = this.getCommonChild(it.children);
            if (funcListChilds && funcListChilds.length > 0) {
              funcListChilds.forEach(c => {
                if (c.parentUuid) {
                  let index = funcList.findIndex(item => c.parentUuid === item.menuUuid);
                  if (index >= 0) {
                    funcList.splice(index + 1, 0, c);
                  } else {
                    funcList.push(c);
                  }
                } else {
                  funcList.push(c);
                }
              })
            }
          }
        })
      }
      return funcList;
    },
    /**
     *   @desc   : 常用功能弹窗全部清空
     *   @date   : 2024/4/29 13:58
     *   @author : 寇珊珊
     */
    clearAll() {
      this.rightFuncList.forEach(it => {
        this.funcCheckBoxChangeRight('name-' + it.menuUuid)
      })
    },
    funcCheckBoxChangeRight(name) {
      this.$refs[name][0].$el.click()
    },
    /**
     *   @desc   : 常用功能弹窗左侧选择事件
     *   @date   : 2024/4/29 14:00
     *   @author : 寇珊珊
     */
    funcCheckBoxChange(flag, item) {
      // menuUuid
      if (flag) {
        this.rightFuncList.push(item)
      } else {
        this.rightFuncList = this.rightFuncList.filter(it => it.menuUuid !== item.menuUuid)
      }
    },
    /****************************************常用功能****************************************/

    /****************************************待办功能****************************************/
    /**
     *   @desc   : 待办切换
     *   @date   : 2024/4/28 17:01
     *   @author : 寇珊珊
     */
    detailTabsClick(val) {
      this.detailModel = val
      //销售
      if (val === 'sale') {
        this.saleFlag = true
        this.inventoryFlag = false
        this.fundFlag = false
      }
      //库存
      else if (val === 'inventory') {
        this.saleFlag = false
        this.inventoryFlag = true
        this.fundFlag = false
      }
      //资金
      else if (val === 'fund') {
        this.saleFlag = false
        this.inventoryFlag = false
        this.fundFlag = true
      }
      //查询待办个数
      this.selectPending()
    },
    /**
     *   @desc   : 刷新待办中心数据
     *   @date   : 2024/4/29 11:04
     *   @author : 寇珊珊
     */
    refreshWaitCenter() {
      //查询待办个数
      this.selectPending()
    },
    /**
     *   @desc   : 查询待办个数
     *   @date   : 2024/4/28 17:25
     *   @author : 寇珊珊
     */
    selectPending() {
      //订单
      if (this.detailModel === 'sale') {
        let params = {
          appCode: this.$config.appCode.WEB,
          orderStatusList: [this.$config.outStatus.daiChuKu, this.$config.outStatus.chuKuZhong],
        }
        this.excute(this.$service.orderService, this.$service.orderService.countOrderByCond, params).then(res => {
          if (res.code === this.$config.SUCCESS_CODE) {
            this.orderCount = res.data
          }
        })
      }
      //出入库
      else if (this.detailModel === 'inventory') {
        //入库
        let intoParams = {
          appCode: this.$config.appCode.WEB,
        }
        this.excute(this.$service.otherInboundService, this.$service.otherInboundService.selectWaitInboundCount, intoParams).then(res => {
          if (res.code === this.$config.SUCCESS_CODE) {
            this.intoCount = res.data
          }
        })
        //出库
        let outParams = {
          appCode: this.$config.appCode.WEB,
        }
        this.excute(this.$service.otherOutboundService, this.$service.otherOutboundService.selectWaitOutboundCount, outParams).then(res => {
          if (res.code === this.$config.SUCCESS_CODE) {
            this.outCount = res.data
          }
        })
      }
      //资金
      else if (this.detailModel === 'fund') {
        let params = {
          appCode: this.$config.appCode.WEB,
          amtResidueZeroFlg: true,
          accItemType: this.$config.fundType.yingShou,
        }
        this.excute(this.$service.accountService, this.$service.accountService.getReceivableAccountItemCount, params).then(res => {
          if (res.code === this.$config.SUCCESS_CODE) {
            this.fundCount = res.data
          }
        })
      }
    },
    /**
     * @desc   : 打开抽屉
     * @author : 洪旭东
     * @date   : 2022-05-02 17:27
     */
    openDrawer(type) {
      let drawer = document.getElementsByClassName('ivu-drawer-bottom')
      let leftSider = document.getElementsByClassName('left-sider')
      if (drawer && leftSider && drawer[0] && leftSider[0]) {
        // console.log(document.body.clientWidth, leftSider[0].getBoundingClientRect().width)
        drawer[0].style.width = (document.body.clientWidth - leftSider[0].getBoundingClientRect().width) + 'px'
      }
      if (type === this.$config.homeDrawType.notice) {
        // 获取未读公告
        this.selectManagement();
      }
      // let self = this;
      // switch (type){
      //   case self.$config.homeDrawType.waitAudit:
      //     this.drawerTitle = "待审中心";
      //     break;
      //   case self.$config.homeDrawType.notice:
      //     this.drawerTitle = "系统公告";
      //     break;
      // }
      this.drawType = type;
      this.drawerShow = true
    },
    /****************************************待办功能****************************************/

    /**
     * @desc   : 打开审批一览页面
     * @author : 周兴
     * @date   : 2022/9/2 14:15
     */
    openApprovalIndex() {
      this.$router.push('/approval/waiting-for-approval/index');
    },
    /**
     * @desc   : 过滤需要显示的菜单
     * @author : 周兴
     * @date   : 2022/8/22 9:49
     */
    filterShowMenu(arr, list) {
      arr.children = list.filter(it => it.meta && !it.meta.hideInMenu)
      arr.children.forEach(it => {
        // it.meta.url = '../../../assets/images/' +  (it.meta.image?it.meta.image:'func-icon.png');
        if (!it.meta.image) {
          it.meta.image = 'func-icon.png';
        }
        if (it.children && it.children.length > 0) {
          this.filterShowMenu(it, it.children)
        }
      })
      return arr
    },
    /**
     * @desc   : 切换销售简报模式
     * @author : 洪旭东
     * @date   : 2022-05-02 15:32
     */
    changeSalesReportModel() {
      this.salesReportType = this.salesReportType == 1 ? 2 : 1
    },
    /**
     * @desc   : 我的业绩目标
     * @author : 洪旭东
     * @date   : 2022-05-02 14:09
     */
    drawPerformance1() {
      let echarts = require('echarts')
      let echarts1 = echarts.init(document.getElementById('echarts1'))
      echarts1.setOption(
        {
          tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          title: {
            show: true,
            text: '报备客户'
          },
          series: [
            {
              center: ['50%', '80%'],
              axisLabel: {
                formatter: '{value}%'
              },
              axisTick: {
                splitNumber: 2
              },
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#3cd343']
                  ]
                }
              },
              pointer: {
                length: '60%',
                width: 4
              },
              itemStyle: {
                color: '#3cd343',
                borderColor: 'lightgreen',
              },
              splitNumber: 4,
              radius: '100%',
              startAngle: 180,
              endAngle: 0,
              name: '报备客户',
              type: 'gauge',
              process: {
                show: true
              },
              detail: {
                show: false,
                valueAnimation: true,
                // formatter: '{value}%'
              },
              data: [
                {value: 100, name: ''},
              ],
            }
          ]
        }
      )
    },
    /**
     * @desc   : 我的业绩目标
     * @author : 洪旭东
     * @date   : 2022-05-02 14:09
     */
    drawPerformance2() {
      let echarts = require('echarts')
      let echarts1 = echarts.init(document.getElementById('echarts2'))
      echarts1.setOption(
        {
          tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          title: {
            show: true,
            text: '订货额'
          },
          series: [
            {
              center: ['50%', '80%'],
              axisLabel: {
                formatter: '{value}%'
              },
              axisTick: {
                splitNumber: 2
              },
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#3cd343']
                  ]
                }
              },
              pointer: {
                length: '60%',
                width: 4
              },
              itemStyle: {
                color: '#3cd343',
                borderColor: 'lightgreen',
              },
              splitNumber: 4,
              radius: '100%',
              startAngle: 180,
              endAngle: 0,
              name: '订货额',
              type: 'gauge',
              process: {
                show: true
              },
              detail: {
                show: false,
                valueAnimation: true,
                // formatter: '{value}%'
              },
              data: [
                {value: 100, name: ''},
              ],
            }
          ]
        }
      )
    },
    /**
     * @desc   : 我的业绩目标
     * @author : 洪旭东
     * @date   : 2022-05-02 14:09
     */
    drawPerformance3() {
      let echarts = require('echarts')
      let echarts1 = echarts.init(document.getElementById('echarts3'))
      echarts1.setOption(
        {
          tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          title: {
            show: true,
            text: '回款额'
          },
          series: [
            {
              center: ['50%', '80%'],
              axisLabel: {
                formatter: '{value}%'
              },
              axisTick: {
                splitNumber: 2
              },
              axisLine: {
                lineStyle: {
                  color: [
                    [1, '#3cd343']
                  ]
                }
              },
              pointer: {
                length: '60%',
                width: 4
              },
              itemStyle: {
                color: '#3cd343',
                borderColor: 'lightgreen',
              },
              splitNumber: 4,
              radius: '100%',
              startAngle: 180,
              endAngle: 0,
              name: '回款额',
              type: 'gauge',
              process: {
                show: true
              },
              detail: {
                show: false,
                valueAnimation: true,
                // formatter: '{value}%'
              },
              data: [
                {value: 100, name: ''},
              ],
            }
          ]
        }
      )
    },
    /**
     * @desc   : 跳页
     * @author : 洪旭东
     * @date   : 2022-05-02 11:51
     */
    jumpTo() {
      this.$router.push('/sale/order')
    },
    getMonthDays(date) {
      date = date || new Date()
      const temp = new Date(date.getFullYear(), date.getMonth() + 1, 0)
      const days = temp.getDate()
      return days
    },
    /**
     * @desc   : 待办滚动
     * @author : 洪旭东
     * @date   : 2022-05-03 17:21
     */
    scrollUpcomingCard(e) {
      for (let i = 0; i < 701; i++) {
        setTimeout(function () {
          if (e == 'left') {
            document.getElementsByClassName('upcoming')[0].scrollLeft--
          } else {
            document.getElementsByClassName('upcoming')[0].scrollLeft++
          }
        }, 100 + i)
      }
    },
    getText(str) {
      let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, ""); //这里是去除标签
      return words.replace(/\s/g, "") //这里是去除空格
    },
    /**
     *   @desc   : 跳转到公告
     *   @date   : 2022/8/16 10:29
     *   @author : 寇珊珊
     */
    returnMessage() {
      this.$router.push('../../mst/notice-list/index')
    },
    /**
     *   @desc   : 跳转公告明细
     *   @date   : 2022/8/16 11:48
     *   @author : 寇珊珊
     */
    returnMessageDetail(value) {
      this.$router.push('../../mst/notice-list/detail/' + value.noticeId)
    },
    /**
     * @desc   : 获取待审中心条数
     * @author : 周兴
     * @date   : 2022/8/20 14:50
     */
    getApprovalCount() {
      // 参数设置
      let params = {
        cpId: this.$store.state.user.cpId,
        userId: this.$store.state.user.id,
        querys: Object.assign({treeFlag: true}, this.searchList)
      }
      waitingForApprovalService.getApprovalCount(params).then(res => {
        if (res.code === 200) {
          this.approvalCount = res.data;
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     *   @desc   : 查询公告
     *   @date   : 2022/8/16 9:50
     *   @author : 寇珊珊
     */
    selectManagement() {
      // 参数设置
      let params = {}
      if (this.$store.state.user.sysId != this.$config.sysType.SYS_HEGII) {
        params.cpId = this.$store.state.user.cpId
        params.sysId = this.$store.state.user.sysId
      }
      params.limit = 5; // 限制公告条数
      params.userId = this.$store.state.user.id
      // 查询公告分类接口
      noticeManagementService.getNotice(params).then(res => {
        if (res.code === 200) {
          this.managementTableData = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * @desc   : 获取未读公告数量
     * @author : 周兴
     * @date   : 2022/8/20 14:50
     */
    getUnreadNoticeCount() {
      // 参数设置
      let params = {}
      if (this.$store.state.user.sysId != this.$config.sysType.SYS_HEGII) {
        params.cpId = this.$store.state.user.cpId
        params.sysId = this.$store.state.user.sysId
      }
      params.userId = this.$store.state.user.id
      noticeManagementService.getUnreadNoticeCount(params).then(res => {
        if (res.code === 200) {
          this.unReadNoticeCount = res.data;
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * @desc   : 刷新实时数据
     * @author : 付斌
     * @date   : 2024-06-14 16:44
     */
    refreshRealTimeData() {
      // 查询实时数据
      this.selectRealTimeData()
    },
    /**
     * @desc   : 切换实时数据类型
     * @author : 付斌
     * @date   : 2024-06-14 16:43
     */
    cpRealTimeDataType() {
      // 查询实时数据
      this.selectRealTimeData()
    },
    /**
     * @desc   : 查询实时数据
     * @author : 付斌
     * @date   : 2024-06-14 15:13
     */
    selectRealTimeData() {
      let params = {
        realTimeDataType: this.realTimeDataType,
      }
      this.excute(this.$service.commonService, this.$service.commonService.getRealTimeData, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.orderQty = res.data.orderQty
          this.orderAmt = res.data.orderAmt
          this.outQty = res.data.outQty
          this.outAmt = res.data.outAmt
          this.returnQty = res.data.returnQty
          this.returnAmt = res.data.returnAmt
          this.cusQty = res.data.cusQty
          this.cusAmt = res.data.cusAmt
        }
      })
    },
    /**
     * @desc   : 查询轮播图
     * @author : 付斌
     * @date   : 2024-06-20 10:40
     */
    selectCarousel() {
      let params = {
        appCode: 'CP-WEB',
        flgBanner: true
      }
      this.excute(this.$service.outhActivityService, this.$service.outhActivityService.getActivity, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.dataCarouselItems = res.data
        }
      })
    },
    /**
     * @desc   : 打开轮播图活动
     * @author : 付斌
     * @date   : 2024-06-20 11:05
     */
    showActivity(item) {
      window.open(item.activityUrl)
    },
    /**
     * @desc   : 更多产品公告
     * @author : 付斌
     * @date   : 2024-06-20 11:25
     */
    moreProductAnnouncement() {
      alert('敬请期待')
    },
    /**
     * @desc   : 新手指导快速掌握
     * @author : 付斌
     * @date   : 2024-06-20 11:27
     */
    beginnersGuide() {
      this.open(this.$config.routeUrl['home']['beginnersGuide'])
    },
    /**
     * @desc   : 选择区间
     * @author : 付斌
     * @date   : 2024-07-02 14:48
     */
    btnDatePickerOk(date) {
      if (date && date.length > 1) {
        this.accDateStart = date[0]
        this.accDateEnd = date[1]
      } else {
        this.accDateStart = null
        this.accDateEnd = null
      }
      this.selectBusinessOverview()
    },
    /**
     * @desc   : 查询经营概况
     * @author : 付斌
     * @date   : 2024-06-20 10:40
     */
    selectBusinessOverview() {
      let querys = {
        accDateStart: this.accDateStart,
        accDateEnd: this.accDateEnd
      }
      let params = {
        querys: JSON.stringify(querys)
      }
      this.excute(this.$service.detailReportService, this.$service.detailReportService.getBusinessOverview, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.intAssets = res.data.intAssets[0].intAssets
          this.receivableResidue = res.data.receivableResidue[0].receivableResidue
          this.receivable = res.data.profitMargin[0].receivable
          this.costAmt = res.data.profitMargin[0].costAmt
          this.profit = res.data.profitMargin[0].profit
          this.profitMargin = res.data.profitMargin[0].profitMargin
        }
      })
    },
  },
  created() {
    this.routeObjName = 'appMenu'  // 设置路由名称
    this.getCommonMenu();   // 获取常用功能的菜单
    this.selectCommonUse();//查询常用功能
    this.selectPending();//获取代办事项个数
    this.selectRealTimeData();//查询实时数据
    this.selectCarousel();//查询轮播图
    this.selectBusinessOverview(); //经营概况
    // this.getApprovalCount();// 获取待审中心数据
    // this.getUnreadNoticeCount();// 获取未读公告条数
    this.waitApprovalRight = this.$libaray.checkButtonHasRight('wait-approval')
  },
}
</script>
<style lang="less" scoped>
.func-item-title {
  font-size: 12px;
  margin-top: 5px;
}

/deep/ .ivu-tabs-nav .ivu-tabs-tab {
  bottom: 5px;
  font-size: 14px !important;
}

/deep/ .ttt > .ivu-checkbox {
  position: absolute !important;
  z-index: 1;
  right: 24%;
  top: -8%;
}

.draggable-div[draggable=true] {
  //opacity: 0 !important;
}

.modal-left-div::-webkit-scrollbar {
  width: 5px;
}

.modal-left-div::-webkit-scrollbar-track {
  width: 5px !important;
  background: #dcdcdc;
  border-radius: 10px;
}

.modal-left-div::-webkit-scrollbar-thumb {
  width: 5px;
  background: #b6b6b6;
  border-radius: 10px;
}

//Card标签
.card {
  margin-top: 8px;
}

//圆形按钮
.circle-button {
  font-size: 20px !important;
  margin-left: 5px;
  margin-right: 5px;
}

//待办
.upcoming {
  width: 100%;
  display: -webkit-inline-box;
  overflow-x: auto;
  transition: scrollLeft 2s;
  padding-bottom: 10px;

  .upcoming-card {
    height: 100px;
    width: 200px;
    background-color: #f4f8ff;
    padding: 20px 10px 30px 10px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 15px;
    //margin-bottom: 10px;

    .upcoming-card-icon {
      //todo 2024年4月29日13:56:25  注释掉
      /*padding: 16px 0;*/
    }

    .upcoming-card-number {
      font-size: 26px;
      padding-left: 10px;
      font-weight: bolder;
    }

    .upcoming-card-text {
      font-size: 13px;
      font-weight: 500;
    }
  }

  .upcoming-card1 {
    height: 100px;
    width: 420px;
    background-color: #f4f8ff;
    padding: 20px 10px 30px 10px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 15px;
    //margin-bottom: 10px;

    .upcoming-card1-icon {
      //todo 2024年4月29日13:56:25  注释掉
      /*padding: 16px 0;*/
    }

    .upcoming-card1-number {
      font-size: 26px;
      padding-left: 10px;
      font-weight: bolder;
    }

    .upcoming-card1-text {
      font-size: 13px;
      font-weight: 500;
    }
  }
}

.upcoming::-webkit-scrollbar {
  width: 0;
}

.card-upcoming /deep/ .ivu-card-body {
  padding-bottom: 0 !important;

}

//图表
.echarts {
  width: 300px;
  height: 200px
}

// 销售简报radio数字
.sales-report-radio-number {
  position: relative;
  right: 50px;
}

// 销售简报radio选中的文字
.sales-report-radio-checked {
  font-weight: bolder;
}

// 销售简报右侧col
.sales-report-col {
  padding-right: 10px;
  padding-top: 10px;
}

// 销售简报card 个数 数字
.sales-report-card-number {
  color: grey;
}

// 销售简报card 钱数 数字
.sales-report-card-money {
  color: orange;
}

// 销售简报 简略模式card
.sales-report-simple-card {
  margin: 10px;
}

// 销售简报 简略模式 文字
.sales-report-simple-card-text {
  font-weight: bolder;
}

.sales-report-simple-card-text2 {
  color: grey;
}

.sales-report-simple-card-text3 {
  color: orange;
}

// 销售助手 card 外 col
.sales-helper-col {
  padding: 5px;
}

// 销售助手 card
.sales-helper-card {
  background-color: #f7f7f9;
  padding: 5px;
}

// 销售助手 card 第一行
.sales-helper-card-icon-title {
  display: flex;
  align-items: center;
}

// 销售助手 card 标题
.sales-helper-card-title {
  line-height: 34px;
  margin-left: 10px;
}

// 销售助手 card 内容 蓝色
.sales-helper-card-content {
  margin-top: 10px;
  color: #71a6ec;
}

// 销售助手 card 内容 灰色
.sales-helper-card-content2 {
  margin-top: 10px;
  color: grey;
}

// 底部抽屉
/deep/ .ivu-drawer-bottom {
  right: 0;
  bottom: 0;
  top: unset;
}

/deep/ .ivu-tabs-tab {
  bottom: 10px;
  font-size: 18px !important;
}

.ivu-row {
  display: flex;
}

/deep/ .ivu-list {
  height: 245px !important;
  overflow-y: auto;
}

/deep/ .ivu-list-item-meta-title {
  margin-bottom: 2px !important;
  font-size: 15px !important;
  cursor: pointer;
  text-decoration: underline;
}

/deep/ .ivu-list-item {
  padding: 10px 0 0 0 !important;
}

/deep/ .ivu-list-item-meta-content {
  width: 100%;
}

/deep/ .ivu-list-item-meta {
  margin-bottom: 6px !important;
}

/deep/ .ivu-list-item-meta-description {
  //width: 253px;
  font-size: 12px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/deep/ .ivu-checkbox-checked .ivu-checkbox-inner {
  background-color: #1B365D !important;
  border-color: #1B365D !important;
}

.clear-btn {
  border: #b6b6b6 1px dashed;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  height: 30px;
  background: #00aaed;
  border-radius: 5px;
  cursor: pointer;
  transition: .3s;
}

.clear-btn:hover {
  background: #4dcbff;
}
</style>
