<style scoped>
  .left-div>div:first-child{
    height: 80%;
    width: 80%;
  }

  .left-div>div:first-child>div:nth-child(n){
    display: flex;justify-content: space-around;width: 100%;
  }

  .left-div>div:first-child>div:last-child{
    margin-top: 50px;text-align: center;
  }

  .left-div>div:first-child>div:nth-child(n)>div:nth-child(n){
    padding: 10px;width: 23%;position: relative;
  }
  .left-div>div:first-child>div:nth-child(n)>div:nth-child(n)>div:nth-child(1){
    position: absolute;top: 4px;right: 8px;color: #fff;
  }
  .left-div>div:first-child>div:nth-child(n)>div:nth-child(n)>div:nth-child(2){
    width: 100%;font-size: 1.5vh;
  }
  .left-div>div:first-child>div:nth-child(n)>div:nth-child(n)>div:nth-child(3){
    text-align: right;font-size: 4vh;justify-content: flex-end;display: flex; padding-top: 30%;
  }

  .right-top-div>div:nth-child(1){
    height: 10%;
  }

  .right-top-div>div:nth-child(2){
    height: 90%;
  }

  .right-top-div>div:nth-child(2)>div:nth-child(1){
    height: 100%;
  }

  .right-bottom-div>div:first-child{
    height: 25px;display: flex;justify-content: space-between;
  }

  .right-bottom-div-panel-label{
    width: 100%;display: flex;justify-content: space-between;align-items: center;
  }

  .right-bottom-div-panel-label>div:nth-child(2){
    border-radius:50%;margin-right: 20px;background: red;color:#fff;width: 20px;height:20px;display: flex;justify-content: center;align-items: center;
  }

  .right-bottom-div-panel-grid{
    overflow: auto;width: 100%;
  }
</style>

<template>
  <div style="height: 100%;display: flex;min-width: 1120px;position: relative;">
    <div class="left-div">
      <div>
        <div v-for="i in 3" :key="i" :style="{marginTop:i>1?'10px':''}">
          <div @click="pageClick(item)" :style="{background:item.title?'#78a3f9':'#f2f2f2',cursor:item.title?'pointer':''}" v-for="(item,index) in indexPageItemList.slice((i-1)*4,i*4)" :key="index.toString()+i">
            <div @click="delPageItem($event,item)">✖</div>
            <div :style="{color:item.title?'#fff':'#f2f2f2'}">
              {{ item.title ? item.title : '&nbsp;' }}
            </div>
            <div :style="{color:item.title?'#fff':'#f2f2f2'}">
              <Icon :type="item.icon"/>
            </div>
          </div>
        </div>
        <div>
          <Page :page-size="12" :current="1" :total="25" simple/>
        </div>
      </div>
    </div>
    <div class="right-div">
      <div class="right-top-div">
        <div>产品资讯</div>
        <div>
          <div>
            <Carousel style="height: 100%;cursor: pointer;" autoplay :autoplay-speed="3000" v-model="carouselValue"
                      loop>
              <CarouselItem style="height: 100%;" v-for="(item,index) in advertList" :key="index">
                <div class="demo-carousel" :style="{backgroundImage: 'url('+`${item.src}`+')'}"></div>
              </CarouselItem>
            </Carousel>
          </div>
        </div>
      </div>
      <div class="right-bottom-div" :class="openFlag?'right-bottom-div-open':''" id="right-bottom">
        <div><div>待办中心</div><Icon style="cursor: pointer;font-weight: bold;" :type="openFlag?'md-remove':'md-square-outline'" @click="closeOrOpen"/></div>
        <Collapse v-model="collapseValue" accordion>
          <Panel name="1">
            <div class="right-bottom-div-panel-label">
              <div>待审中心</div>
              <div v-if="options1.data.length>0">
                {{options1.data.length}}
              </div>
            </div>
            <div class="right-bottom-div-panel-grid" :style="{maxHeight:rightBottomHeight-114 - 32 - 20 - 27 +'px'}" slot="content">
              <vxe-grid :auto-resize="true" stripe ref="grid2" :height="rightBottomHeight-114 - 32 - 20 - 27" v-bind="options1"></vxe-grid>
            </div>
          </Panel>
          <Panel name="2">
            <div class="right-bottom-div-panel-label">
              <div>库存待办</div>
              <div v-if="options2.data.length>0">
                {{options2.data.length}}
              </div>
            </div>
            <div class="right-bottom-div-panel-grid" :style="{maxHeight:rightBottomHeight-114 - 32 - 20 - 27 +'px'}"  slot="content">
              <vxe-grid :auto-resize="true" stripe ref="grid2" :height="rightBottomHeight-114 - 32 - 20 - 27" v-bind="options2"></vxe-grid>
            </div>
          </Panel>
          <Panel name="3">
            <div class="right-bottom-div-panel-label">
              <div>推送信息</div>
              <div v-if="options3.data.filter(it=>it.status === 0).length>0">
                {{options3.data.filter(it=>it.status === 0).length}}
              </div>
            </div>
            <div class="right-bottom-div-panel-grid" :style="{maxHeight:rightBottomHeight-114 - 32 - 20 - 27 +'px'}" slot="content">
              <vxe-grid :auto-resize="true" stripe ref="grid2" :height="rightBottomHeight-114 - 32 - 20 - 27" v-bind="options3"></vxe-grid>
            </div>
          </Panel>
        </Collapse>
      </div>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
  name: 'home',
  data() {
    return {
      openFlag:false,
      options2: {
        border: true,
        columnKey: true,
        highlightCurrentRow: true,
        columns: [
          // {showOverflow: 'tooltip', title: '序号',width:50, field: 'seq', type: 'seq', align: 'center', visible: true},
          { showOverflow: 'tooltip', title: '类型', width: 100, field: 'typeName', align: 'center', visible: true },
          { showOverflow: 'tooltip', title: '单号', field: 'no', minWidth: 40, align: 'center', visible: true },
          { showOverflow: 'tooltip', title: '其他信息', minWidth: 60, field: 'otherInfo', align: 'center', visible: true },
          { title: '操作', minWidth: 120, align: 'center', cellRender: { name: 'btn-2' } },

        ],
        data: [
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '入库待办', no: 'FSJ1001548115', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
        ]
      },
      options1: {
        border: true,
        columnKey: true,
        highlightCurrentRow: true,
        columns: [
          // {showOverflow: 'tooltip', title: '序号',width:50, field: 'seq', type: 'seq', align: 'center', visible: true},
          { showOverflow: 'tooltip', title: '类型', width: 100, field: 'typeName', align: 'center', visible: true },
          { showOverflow: 'tooltip', title: '单号', filters:[{ data: '' }],filterMethod:this.customFilter,filterRender:{ name:'input' },field: 'no', minWidth: 60, align: 'center', visible: true },
          { showOverflow: 'tooltip', title: '其他信息', minWidth: 60, field: 'otherInfo', align: 'center', visible: true },
          { title: '操作', minWidth: 120, align: 'center', cellRender: { name: 'btn-1' } },

        ],
        data: [
          { typeName: '销售订单', no: '001', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据' },
          { typeName: '销售订单', no: '002', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '003', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '004', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '005', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '006', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '007', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '008', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '009', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '010', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '011', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '012', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '013', otherInfo: '张三的单据' },
          { typeName: '销售订单', no: '014', otherInfo: '张三的单据' },
        ]
      },
      options3: {
        border: true,
        columnKey: true,
        highlightCurrentRow: true,
        columns: [
          // {showOverflow: 'tooltip', title: '序号',width:50, field: 'seq', type: 'seq', align: 'center', visible: true},
          { showOverflow: 'tooltip', title: '类型', width: 100, field: 'typeName', align: 'center', visible: true },
          { showOverflow: 'tooltip', title: '其他信息', minWidth: 60, field: 'otherInfo', align: 'center', visible: true },
          {
            showOverflow: 'tooltip',
            filters: [{ label: '已处理', value: 1, checked: false }, { label: '未处理', value: 0, checked: true }],
            title: '处理状态',
            minWidth: 60,
            field: 'status',
            align: 'center',
            visible: true,
            cellRender: { name: 'deal-status' }
          },
          { title: '操作', width: 80, align: 'center', cellRender: { name: 'btn-3' } },

        ],
        data: [
          { typeName: '销售订单', otherInfo: '张三的单据张三的单据张三的单据张三的单据张三的单据', status: 1 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 1 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 1 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 1 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 1 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 1 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
          { typeName: '销售订单', otherInfo: '张三的单据', status: 0 },
        ]
      },
      collapseValue: null,
      carouselValue: 1,
      rightBottomHeight: 0,
      advertList: [
        { src: 'http://www.dongkesoft.com/public/upload/admin/20190606/8431d0da53d35ce6d0457f9c13fdccf7.png' },
        { src: 'http://www.dongkesoft.com/public/upload/admin/20190516/dab228757ce72a9a41b3288185b02a03.png' },
        { src: 'http://www.dongkesoft.com/public/upload/admin/20190605/eda331e09616e558044689587dcd714f.png' },
        { src: 'http://www.dongkesoft.com/public/upload/admin/20190606/239a570a99254cc5276995c5f32fb511.png' },
        { src: 'http://www.dongkesoft.com/public/upload/admin/20190605/60baf15f9d45aa69ae2f4b43252e24c7.png' },
      ],
      indexPageItemList: [
        { id: 1, name: 'aaa', title: '员工档案',icon:'md-contacts' },
        { id: 2, name: 'aaa', title: '销售订单',icon:'md-albums' },
        { id: 3, name: 'aaa', title: '库存信息',icon:'md-cube' },
        { id: 4, name: 'aaa', title: '往来账款',icon:'logo-usd' },
        { id: 5, name: 'aaa', title: '经销商管理',icon:'md-home' },
        { id: 6, name: 'aaa', title: '客户信息',icon:'md-person' },
        { id: 7, name: 'aaa', title: '单据审批',icon:'md-create' },
        { id: 8, name: 'aaa', title: '库存冻结',icon:'md-lock' },
        { id: 9, name: 'aaa', title: '销售单',icon:'md-pricetag' },
        { id: 10, name: 'aaa', title: '发货单',icon:'md-send' },
        { id: 11, name: 'aaa', title: '预约单',icon:'md-time' },
        { id: 12, name: 'aaa', title: '销售报表',icon:'md-clipboard' },
        { id: 13, name: 'aaa', title: '退货入库',icon:'md-return-left' },
        { id: 14, name: 'aaa', title: '我的退货',icon:'md-contacts' },
        { id: 15, name: 'aaa', title: '退货申请',icon:'md-contacts' },
        { id: 15, name: 'aaa', title: '客户报备',icon:'md-contacts' },
      ]
    }
  },

  mounted() {
    const _this = this
    const erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('right-bottom'), element => {
      _this.$nextTick(() => {
        // console.log('element', document.getElementById("right-bottom").offsetHeight)
        this.rightBottomHeight = document.getElementById('right-bottom').offsetHeight
      })
    })
  },
  methods: {
    delPageItem(e,item){
      e.stopPropagation()
      console.log('删除',item)

    },
    pageClick(item){
      console.log('跳转',item)
    },
    closeOrOpen(){
      this.openFlag = !this.openFlag
    },
    customFilter(val){
      let key = val.column.property
      let searchText = val.option.data
      return val.row[key].indexOf(searchText) !== -1
    },
    initVxeRender() {
      this.$VXETable.renderer.mixin(
        {
          'btn-1': {
            renderDefault(h, renderOpts, params) {
              let { row, column } = params
              return [
                <div style="display:flex;justify-content: center;">
                  <vxe-button type="text" status="primary" content="查看"></vxe-button>
                  <vxe-button type="text" status="success" content="审批"></vxe-button>
                </div>
              ]
            }
          },
          'btn-2': {
            renderDefault(h, renderOpts, params) {
              let { row, column } = params
              return [
                <div style="display:flex;justify-content: center;">
                  <vxe-button type="text" status="primary" content="查看"></vxe-button>
                  <vxe-button type="text" status="success" content="处理"></vxe-button>
                </div>
              ]
            }
          },
          'btn-3': {
            renderDefault(h, renderOpts, params) {
              let { row, column } = params
              return row['status'] === 1 ? [
                <div style="display:flex;justify-content: center;">
                  <vxe-button type="text" status="info" disabled content="已处理"></vxe-button>
                </div>
              ] : [
                <div style="display:flex;justify-content: center;">
                  <vxe-button type="text" status="success" content="处理"></vxe-button>
                </div>
              ]
            }
          },
          'deal-status': {
            renderDefault(h, renderOpts, params) {
              let { row, column } = params
              return row[column.property] === 1 ? [
                <div style="display:flex;justify-content: center;color:#2d8cf0;">
                  已处理
                </div>] : [
                <div style="display:flex;justify-content: center;color:#ed4014;">
                  未处理
                </div>
              ]
            }
          }
        }
      )
    }
  },
  created() {
    this.initVxeRender()
    // console.log('看看是啥',this.$store.state.user)
  }

}
</script>

<style lang="less">
.left-div {
  width: 61.8%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #f2f2f2;
  position: relative;
  transition: .3s;
}

.right-div {
  width: 38.2%;
  padding: 0 10px;
  transition: .3s;
}

.right-top-div {
  height: 38.2%;
  padding: 10px;
  border-radius: 5px;
  background: #f2f2f2;
}

.right-bottom-div {
  padding: 10px;
  border-radius: 5px;
  background: #f2f2f2;
  margin-top: 10px;
  height: calc(~"100%" - ~"10px" - ~"38.2%");
  //transition: .2s;
}

.right-bottom-div-open {
  height: 100% !important;
  z-index: 10;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 0 !important;
}

.demo-carousel {
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

</style>

<style scoped>
/deep/ .ivu-carousel-list, /deep/ .ivu-carousel-track {
  height: 100%;
}

/deep/ .ivu-collapse-header {
  display: flex;
  align-items: center;
}

/deep/ .vxe-table--render-default .vxe-body--column.col--ellipsis,
/deep/ .vxe-table--render-default.vxe-editable .vxe-body--column,
/deep/ .vxe-table--render-default .vxe-footer--column.col--ellipsis,
/deep/ .vxe-table--render-default .vxe-header--column.col--ellipsis {
  height: max-content !important;
  padding: 2px 0 !important;
}


/deep/ .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
/deep/ .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
/deep/ .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
  padding: 3px 0 !important;
}
</style>
