<!-- 库存管理 -->
<template>
  <div class="container">
    <div class="bar">
      <div class="item">
        <div class="left">
          <p>{{ titleData.directSum.stockSum.sumName }}</p>
          <p class="detail" @click="toDetail(0)">查看盘点记录</p>
        </div>
        <div class="center">
          <p>总金额</p>
          <p class="number">{{ titleData.directSum.stockSum.totalAmount }}</p>
        </div>
        <div class="right">
          <p>件数</p>
          <p class="number">{{ titleData.directSum.stockSum.tagCount }}</p>
        </div>
        <div class="right">
          <p>数量</p>
          <p class="number red">{{ titleData.directSum.stockSum.quantity }}</p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>{{ titleData.heatSum.stockSum.sumName }}</p>
          <p class="detail" @click="toDetail(1)">查看盘点记录</p>
        </div>
        <div class="center">
          <p>总金额</p>
          <p class="number">{{ titleData.heatSum.stockSum.totalAmount }}</p>
        </div>
        <div class="right">
          <p>件数</p>
          <p class="number">{{ titleData.heatSum.stockSum.tagCount }}</p>
        </div>
        <div class="right">
          <p>数量</p>
          <p class="number red">{{ titleData.heatSum.stockSum.quantity }}</p>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <p>{{ titleData.paperSum.stockSum.sumName }}</p>
          <p class="detail" @click="toDetail(2)">查看盘点记录</p>
        </div>
        <div class="center">
          <p>总金额</p>
          <p class="number">{{ titleData.paperSum.stockSum.totalAmount }}</p>
        </div>
        <div class="right">
          <p>件数</p>
          <p class="number">{{ titleData.paperSum.stockSum.tagCount }}</p>
        </div>
        <div class="right">
          <p>数量</p>
          <p class="number red">{{ titleData.paperSum.stockSum.quantity }}</p>
        </div>
      </div>
      <!--      <div class="item more" @click="$router.push('use_detail')">查看详情>></div>-->
    </div>
    <div class="info">
      <div class="info-item">
        <Collapse v-model="tabName">
          <Panel name="open">
            <div class="row">
              <div class="col" style="flex: none;width: 100px;">按用途查看</div>
              <div class="col">金额</div>
              <div class="col">件数</div>
              <div class="col">数量</div>
            </div>
            <div slot="content" class="info-content">
              <div
                class="row"
                v-for="(item, index) in titleData.directSum.stockSumItems"
                :key="index"
              >
                <div class="col" style="flex: none;width: 100px;">
                  {{ item.sumName }}
                </div>
                <div class="col">{{ item.totalAmount }}</div>
                <div class="col">{{ item.tagCount }}</div>
                <div class="col">{{ item.quantity }}</div>
              </div>
            </div>
          </Panel>
        </Collapse>
      </div>
      <div class="info-item">
        <Collapse v-model="tabName">
          <Panel name="open">
            <div class="row">
              <div class="col" style="flex: none;width: 100px;">按用途查看</div>
              <div class="col">金额</div>
              <div class="col">件数</div>
              <div class="col">数量</div>
            </div>
            <div slot="content" class="info-content">
              <div
                class="row"
                v-for="(item, index) in titleData.heatSum.stockSumItems"
                :key="index"
              >
                <div class="col" style="flex: none;width: 100px;">
                  {{ item.sumName }}
                </div>
                <div class="col">{{ item.totalAmount }}</div>
                <div class="col">{{ item.tagCount }}</div>
                <div class="col">{{ item.quantity }}</div>
              </div>
            </div>
          </Panel>
        </Collapse>
      </div>
      <div class="info-item">
        <Collapse v-model="tabName">
          <Panel name="open">
            <div class="row">
              <div class="col" style="flex: none;width: 100px;">按物料查看</div>
              <div class="col">金额</div>
              <div class="col">件数</div>
              <div class="col">数量</div>
            </div>
            <div slot="content" class="info-content">
              <div
                class="row"
                v-for="(item, index) in titleData.paperSum.stockSumItems"
                :key="index"
              >
                <div class="col" style="flex: none;width: 100px;">
                  {{ item.sumName }}
                </div>
                <div class="col">{{ item.totalAmount }}</div>
                <div class="col">{{ item.tagCount }}</div>
                <div class="col">{{ item.quantity }}</div>
              </div>
            </div>
          </Panel>
        </Collapse>
      </div>
    </div>
    <div class="table-filter">
      <div class="filter-item"></div>
      <!--属性（原来代码）-->
      <!--<div class="filter-item" v-for="(item, index) in tabs" :key="index">
        <Button
          :type="tabIndex === index ? 'primary' : 'default'"
          style="width: 90px;"
          @click="tabClick(index, item.value)">
          {{ item.text }}
        </Button>
      </div>-->
      <div style="float: right;">
        <!--        <div class="filter-item">-->
        <!--          <Button  style="width: 130px;background-color: black;color: white" @click="showArtificialInventoryRecord">查看人工盘点记录</Button>-->
        <!--        </div>-->
        <div class="filter-item">
          <Button type="error" style="width: 90px;" @click="toInventory"
            >发起盘点</Button
          >
        </div>
      </div>
      <div class="filter-item" style="float: right;">
        滞留：在库时间超过{{ delayPeriod || 0 }}天
      </div>
      <!--属性下拉框-->
      <div class="filter-item">
        <Dropdown trigger="click" placement="bottom-start">
          <Button type="primary">
            {{ typeName }}
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list" v-for="(item, index) in tabs" :key="index">
            <DropdownItem
              :type="tabIndex === index ? 'primary' : 'default'"
              style="width: 90px;"
              @click.native="tabClick(index, item.value, item.text)"
            >
              {{ item.text }}
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <!--用途下拉框-->
      <div class="filter-item">
        <Dropdown
          trigger="click"
          style="margin-left: 5px"
          placement="bottom-start"
        >
          <Button type="primary">
            {{ useName ? useName : '全部' }}
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu
            slot="list"
            v-for="(item, index) in itemData"
            :key="index"
          >
            <DropdownItem
              v-if="item"
              :type="itemIndex === index ? 'primary' : 'default'"
              style="min-width: 90px"
              @click.native="
                item === '全部' ? itemClick() : itemClick(index, item)
              "
            >
              {{ item }}
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="filter-item">
        <Checkbox v-model="params.isError" @on-change="errChange"
          >筛选异常</Checkbox
        >
      </div>
      <div class="filter-item" @keyup.enter="getList">
        <Input v-model="params.key" clearable placeholder="请输入关键字" />
      </div>
      <div class="filter-item" style="width: 160px;">
        <my-tree-select
          v-model="params.materialCategoryCode"
          :treeData="materialTreeData"
          placeholder="请选择物料类型"
        ></my-tree-select>
      </div>
      <div class="filter-item" style="width: 160px;">
        <Select v-model="params.stockHouseId" clearable>
          <Option
            v-for="item in stockList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="filter-item">
        <Button type="primary" style="width: 90px;" @click="search"
          >查询</Button
        >
      </div>
      <div class="filter-item">
        <Button
          type="primary"
          style="width: 90px;"
          @click="$router.push('store_warning')"
          >库存预警</Button
        >
      </div>
      <div class="filter-item">
        <Button type="primary" style="width: 90px;" @click="exportExcel"
          >导出Excel</Button
        >
      </div>
    </div>
    <div class="line" style="margin-bottom: 10px"></div>
    <!--用途（原来代码）-->
    <!--<div class="table-filter" style="height: auto;padding-bottom: 0">
    <div class="filter-item">
      <Button
        :type="itemIndex === '' ? 'primary' : 'default'"
        style="width: 90px;margin-bottom: 10px"
        @click="itemClick()">
        全部
      </Button>
    </div>
    <div class="filter-item" v-for="(item, index) in itemData" :key="index">
      <Button
        v-if="item"
        :type="itemIndex === index ? 'primary' : 'default'"
        style="min-width: 90px;margin-bottom: 10px"
        @click="itemClick(index, item)">
        {{ item }}
      </Button>
    </div>
  </div>-->
    <!-- 表格 -->
    <div class="table-content-wrap">
      <div class="table-content">
        <div
          v-if="data.length === 0"
          style="font-size: 16px;font-weight: bold;height: 100%;display: flex;justify-content: center;align-items: center"
        >
          暂无数据
        </div>
        <Collapse
          :value="item.storageDetails ? '1' : '0'"
          v-for="(item, index) in data"
          :key="index"
          @on-change="open(item)"
        >
          <Panel name="1">
            <div class="table-item">
              <div class="row">
                <div class="col">物料类型：{{ item.categoryName }}</div>
                <div class="col">物料编码：{{ item.materialCode }}</div>
                <div class="col">物料名称：{{ item.materialName }}</div>
                <div class="col"></div>
                <div class="col" style="flex: .2"></div>
                <div
                  class="col blue"
                  style="padding-right: 15px;display: flex;justify-content: space-between;flex: none;width: 140px;"
                >
                  <!--                <span @click="toHistory(0)">入库记录</span>-->
                  <!--                <span @click="toHistory(1)">出库记录</span>-->
                </div>
              </div>
              <div class="row">
                <div class="col">库存数量：{{ item.quantity }}</div>
                <div class="col">库存件数：{{ item.tagCount }}</div>
                <div class="col orange">
                  滞留数量：{{ item.retentionCount }}
                </div>
                <div class="col">安全库存：{{ item.saveQuantity }}</div>
                <div class="col" style="flex: .2"></div>
                <div class="col" style="flex: none;width: 140px;">
                  <Button
                    style="height: 30px;line-height: 1"
                    @click.stop="showInventory(item)"
                    >盘点记录</Button
                  >
                </div>
              </div>
              <div class="row">
                <div class="col">
                  {{
                    `一楼：${item.firstFloorQty}，四楼：${item.fourFloorQty}`
                  }}
                </div>
                <div class="col">
                  {{
                    `一楼：${item.firstFloorCount}，四楼：${item.fourFloorCount}`
                  }}
                </div>
                <div class="col"></div>
                <div class="col"></div>
                <div class="col" style="flex: .2"></div>
                <div class="col" style="flex: none;width: 140px;"></div>
              </div>
              <div class="row">
                <div class="col red">盘点结果：{{ item.checkResult }}</div>
                <div
                  class="col red"
                  style="text-decoration: underline;cursor: pointer"
                  @click.stop="openTag(item)"
                >
                  库存修正量：{{ item.stockEditCount }}
                </div>
                <div class="col">盘点人：{{ item.checkUser }}</div>
                <div class="col">盘点时间：{{ item.checkTime }}</div>
                <div class="col" style="flex: .2"></div>
                <div class="col" style="flex: none;width: 140px;"></div>
              </div>
            </div>
            <div slot="content" class="content">
              <Table
                :columns="columns"
                :data="item.storageDetails"
                max-height="250"
              ></Table>
            </div>
          </Panel>
        </Collapse>
        <!--查看人工盘点记录-->
        <artificial-inventory-record
          v-model="inventoryRecordShow"
        ></artificial-inventory-record>
      </div>
    </div>
    <!-- 分页 -->
    <div class="table-page">
      <Page
        :current="params.pageIndex"
        :total="params.total"
        :show-total="true"
        :page-size="20"
        show-elevator
        @on-change="changePage"
      />
    </div>
    <inventory-form
      v-model="inventoryShow"
      :formData="formData"
    ></inventory-form>
    <tag-form v-model="tagShow" :form-data="formData"></tag-form>
  </div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import {
  GetStockPageList,
  GetStockDetailSum,
  GetStockMaterialPurpose,
  GetStockTagDetailList
} from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import artificialInventoryRecord from './artificial-inventory-record'
import InventoryForm from './inventory-form'
import TagForm from './tag-form'
import MyTreeSelect from '_c/my-tree-select/my-tree-select'
import {
  GetMaterialCategoryZTree,
  GetMaterialSet,
  GetTechnologyTypList,
  GetStockHouse
} from '@/api/baseData'
export default {
  name: 'store',
  components: {
    MyTable,
    MyTreeSelect,
    artificialInventoryRecord,
    InventoryForm,
    TagForm
  },
  data () {
    return {
      delayPeriod: 0,
      typeName: '属性',
      useName: '用途',
      tabName: 'open',
      tabIndex: 0,
      itemIndex: '',
      tabs: [],
      materialTreeData: [],
      stockList: [],
      materialCategoryCode: '',
      key: '',
      filterData: {},
      formData: {},
      show: false,
      inventoryRecordShow: false,
      inventoryShow: false,
      tagShow: false,
      itemData: [],
      titleData: {
        directSum: {
          stockSum: {
            sumName: '直喷',
            totalAmount: 0,
            tagCount: 0,
            quantity: 0
          },
          stockSumItems: []
        },
        heatSum: {
          stockSum: {
            sumName: '热转',
            totalAmount: 0,
            tagCount: 0,
            quantity: 0
          },
          stockSumItems: []
        },
        paperSum: {
          stockSum: {
            sumName: '打纸',
            totalAmount: 0,
            tagCount: 0,
            quantity: 0
          },
          stockSumItems: []
        }
      },
      data: [],
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '物料标签值',
          key: 'rfid',
          tooltip: true,
          minWidth: 150
        },
        {
          title: '物料数量',
          key: 'quantity',
          minWidth: 150
        },
        {
          title: '入库时间',
          key: 'addStorageTime',
          minWidth: 150
        },
        {
          title: '在库时间',
          key: 'inStorageDay',
          minWidth: 150
        },
        {
          title: '所在仓库',
          key: 'stockHouseName',
          minWidth: 150
        },
        {
          title: '质检状态',
          key: 'quantityState',
          minWidth: 150,
          render: (h, params) => {
            return h(
              'span',
              params.row.quantityState === 0
                ? '未质检'
                : params.row.quantityState === 1
                ? '已质检'
                : params.row.quantityState === 2
                ? '无需质检'
                : ''
            )
          }
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 20,
        total: 0,
        isError: false
      }
    }
  },
  methods: {
    resize () {
      let scrollEl = document.getElementsByClassName('content-wrapper')[0]
      if (scrollEl) {
        scrollEl.scrollTop = 0
      } else {
        setTimeout(() => {
          this.resize()
        }, 500)
      }
    },
    errChange () {
      this.params.pageIndex = 1
      this.getList()
    },
    open (item) {
      if (!item.storageDetails) {
        GetStockTagDetailList({
          materialCode: item.materialCode
        }).then(res => {
          if (res.code === 0) {
            this.$set(item, 'storageDetails', res.result)
          }
        })
      }
    },
    openTag (item) {
      if (item.detailId) {
        this.formData = { ...item, detialId: item.detailId }
        this.tagShow = true
      }
    },
    /* 查看盘点记录 */
    toDetail (type) {
      this.$router.push({
        name: 'inventory_record_new',
        query: {
          technologyType: type
        }
      })
    },
    /* 显示盘点记录 */
    showInventory (item) {
      this.inventoryShow = true
      this.formData = { ...item }
    },
    showArtificialInventoryRecord () {
      this.inventoryRecordShow = true
      // this.$router.push('artificial-inventory-record')
    },
    toInventory () {
      this.$router.push('inventory')
    },
    tabClick (index = '', value, text) {
      if (text) {
        this.useName = '全部'
        this.typeName = text
        this.tabIndex = index
        this.itemIndex = ''
        this.params.technologyType = value
        this.getItemData()
        this.getList()
      } else {
        this.typeName = text
        this.tabIndex = index
        this.itemIndex = ''
        this.params.technologyType = value
        this.getItemData()
        this.getList()
      }
    },
    itemClick (index = '', item = '') {
      if (item) {
        this.typeName = '全部'
        this.useName = item
        this.itemIndex = index
        this.params.purpose = item
        this.getList()
      } else {
        this.useName = item
        this.itemIndex = index
        this.params.purpose = item
        this.getList()
      }
    },
    // 跳转对应记录列表 0入库记录 1出库记录
    toHistory (type) {
      if (type === 0) {
        this.$router.push({
          name: 'store_in_record'
        })
      } else if (type === 1) {
        this.$router.push({
          name: 'store_out_record'
        })
      }
    },
    // 获取控件宽度
    getComWidth (item) {
      if (item.name === 'Button') {
        return '80px'
      } else if (item.name === 'Input') {
        return '200px'
      }
    },
    cfm (type, formData) {
      if (type === 'add') {
        FacPriceAdd({
          ...formData,
          materialCode: formData.code
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      } else if (type === 'edit') {
        FacPriceChange({
          ...formData,
          factoryPriceId: formData.id
        }).then(res => {
          if (res.code === 0) {
            this.$Message.info(res.msg)
            this.getList()
          }
        })
      }
    },
    exportExcel () {
      if (this.data.length < 1) return this.$Message.error('数据为空！')
      let columns = [
        { title: '物料类型', key: 'categoryName' },
        { title: '物料编码', key: 'materialCode' },
        { title: '物料名称', key: 'materialName' },
        { title: '安全库存', key: 'saveQuantity' },
        { title: '库存数量', key: 'quantity' },
        { title: '库存件数', key: 'tagCount' },
        { title: '滞留数量', key: 'retentionCount' }
      ]
      GetStockPageList({
        ...this.params,
        pageIndex: 1,
        pageSize: 999999
      }).then(res => {
        if (res.code === 0) {
          let data = res.result.list
          exportExcel(columns, data, '库存管理')
        }
      })
    },
    // 检索条件事件处理
    eventHandle (option) {
      switch (option._evnet) {
        case 'search':
          this.params.pageIndex = 1
          this.params.key = option.key
          this.params.purContractState = option.purContractState
          this.getList()
          break
        case 'add':
          this.formType = 'add'
          this.show = true
          break
        case 'back':
          this.$router.go(-1)
          break
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    search () {
      this.params.pageIndex = 1
      // this.params.key = this.key
      // this.params.materialCategoryCode = this.materialCategoryCode
      this.getList()
    },
    getList () {
      GetStockPageList(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result.list
          this.params.total = res.result.totalCount
          this.resize()
        }
      })
    },
    handleData (data) {
      data.forEach(item => {
        item.title = item.name
        // item.expand = true
        if (item.children) {
          this.handleData(item.children)
        }
      })
    },
    getTree () {
      GetMaterialCategoryZTree().then(res => {
        if (res.code === 0) {
          this.materialTreeData = res.result
          this.handleData(this.materialTreeData)
        }
      })
    },
    getTitleData () {
      GetStockDetailSum().then(res => {
        console.log(res)
        if (res.code === 0) {
          this.titleData = res.result
        }
      })
    },
    getItemData () {
      GetStockMaterialPurpose({
        technologyType: this.tabIndex
      }).then(res => {
        if (res.code === 0) {
          this.itemData = res.result
          this.itemData.unshift('全部')
        }
      })
    },
    getTechnologyTypList () {
      GetTechnologyTypList().then(res => {
        if (res.code === 0) {
          this.tabs = res.result
          this.tabs.unshift({
            text: '全部',
            value: ''
          })
        }
      })
    },
    getMaterialSet () {
      GetMaterialSet().then(res => {
        if (res.code === 0) {
          this.delayPeriod = res.result.delayPeriod
        }
      })
    },
    getStockHouse () {
      GetStockHouse().then(res => {
        if (res.code === 0) {
          this.stockList = res.result.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
        }
      })
    }
  },
  mounted () {
    this.getList()
    this.getTree()
    this.getTitleData()
    this.getItemData()
    this.getTechnologyTypList()
    this.getMaterialSet()
    this.getStockHouse()
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .bar {
    display: flex;
    justify-content: space-between;
    .item {
      flex: 1;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      border-radius: 3px 3px 0 0;
      background-color: #ffffff;
      border: 1px solid #e6e6e6;
      &:last-child {
        margin-right: 0;
      }
      .left,
      .center,
      .right {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        .number {
          margin-top: 5px;
          font-size: 16px;
          font-weight: bold;
          color: #3f92f9;
          &.red {
            color: #db0020;
          }
        }
      }
      .left {
        width: 100px;
        font-size: 16px;
        font-weight: bold;
        .detail {
          font-size: 12px;
          font-weight: normal;
          cursor: pointer;
        }
      }
      .center {
        flex: 5;
      }
      .right {
        flex: 5;
        &:last-child {
          border-right: none;
        }
      }
      &.more {
        flex: none;
        margin-right: 0;
        padding: 0 20px;
        justify-content: center;
        width: 140px;
        background-color: #333333;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
  .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .info-item {
      margin-right: 20px;
      flex: 1;
      overflow: hidden;
      border: 1px solid #e6e6e6;
      background-color: #ffffff;
      &:last-child {
        margin-right: 0;
      }
      .ivu-collapse {
        border: none;
      }
      /deep/ .ivu-collapse-header {
        padding: 0;
        height: auto;
        line-height: 1.2;
        vertical-align: middle;
        .ivu-icon-ios-arrow-forward {
          display: none;
        }
      }
      .row {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        border-bottom: 1px solid #e6e6e6;
        .col {
          flex: 1;
          overflow: hidden;
          text-align: center;
          padding: 5px 3px;
          border-right: 1px solid #e6e6e6;
          display: flex;
          align-items: center;
          justify-content: center;
          &:first-child {
            flex: 2;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    .info-content {
      height: 200px;
      overflow: overlay;
    }
    /deep/ .ivu-collapse-content {
      padding: 0;
    }
    /deep/ .ivu-collapse-content-box {
      padding: 0;
    }
    /deep/ .ivu-collapse {
      border-top: none;
      border-radius: 0 0 3px 3px;
    }
    /deep/ .ivu-collapse-header {
      height: 30px;
      line-height: 30px;
      background: #d7d7d7;
      color: #000000;
      font-weight: bold;
    }
  }
  .table-filter {
    padding-bottom: 10px;
    line-height: 42px;
    overflow: hidden;
    .filter-item {
      margin-right: 10px;
      float: left;
      //&:last-child {
      //  margin-right: 0;
      //}
    }
  }
  .line {
    height: 1px;
    border-bottom: 1px solid #d7d7d7;
  }
  .table-content-wrap {
    flex: 1;
    overflow: hidden;
    .table-content {
      overflow: auto;
      height: 100%;
      .table-item {
        width: 100%;
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .col {
            padding: 0 5px;
            flex: 1;
            display: flex;
            align-items: center;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &.red {
              color: red;
            }
            &.orange {
              color: orange;
            }
            &.blue {
              color: #169bd5;
            }
          }
        }
      }
      .content {
        padding-left: 30px;
      }
    }
  }
  .table-page {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 43px;
    overflow: hidden;
  }
}
.table-content-wrap {
  /deep/ .ivu-collapse-header {
    min-width: 750px;
    display: flex;
    height: 120px !important;
    background-color: #ffffff;
    border-bottom: none !important;
  }
  /deep/ .ivu-icon-ios-arrow-forward {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .ivu-collapse-content-box {
    padding: 0;
    padding-bottom: 10px;
  }
  /deep/ .ivu-collapse {
    margin-bottom: 5px;
  }
}
::-webkit-scrollbar {
  //width: 0px; /*对垂直流动条有效*/
  //height: 0px; /*对水平流动条有效*/
  width: 5px; /*对垂直流动条有效*/
  height: 10px;
  background-color: #ffffff;
}
</style>
