<template>
  <div class="content-main-manage">
    <div class="content-top">
      <div class="content-top-title">当前组织信息</div>
      <div class="btn-container">
        <Button icon="ios-add" class="common-add-btn common-add-btn-left" @click="addClick('平级')">新增平级组织</Button>
        <Button icon="ios-add" class="common-add-btn" @click="addClick('下级')" :disabled="childDisabled">新增下级组织</Button>
      </div>
    </div>
    <Form class="common-form common-form-list" ref="currentOrganList" :model="currentOrganList" :rules="ruleValidate" :label-width="120" inline>
      <FormItem label="序号" prop="orgOrder" style="width:48%">
        <div v-show="!isSaveNumber" class="form-item-save">
          <div class="form-item-init">{{currentOrganList.orgOrder}}</div>
          <i class='iconfont icon-bianji1' @click="editIconNumber('edit')"></i>
        </div>
        <div v-show="isSaveNumber" class="form-item-save">
          <InputNumber placeholder="请输入1~99，序号越小显示越靠前" :max="99" :min="1" v-model.trim="currentOrganList.orgOrder"></InputNumber>
          <i class='iconfont icon-baocun2' @click="editIconNumber('save')"></i>
        </div>
      </FormItem>
      <FormItem label="组织名称" prop="orgName" style="width:48%">
        <div v-show="!isSaveName" class="form-item-save">
          <div class="form-item-init">{{currentOrganList.orgName}}</div>
          <i class='iconfont icon-bianji1' @click="editIconName('edit')"></i>
        </div>
        <div v-show="isSaveName" class="form-item-save">
          <Input placeholder="" v-model.trim="currentOrganList.orgName" maxlength="20" show-word-limit />
          <i class='iconfont icon-baocun2' @click="editIconName('save')"></i>
        </div>
      </FormItem>
      <FormItem label="负责人" prop="orgLeader" style="width:48%">
         <div v-show="!isSaveLeader" class="form-item-save">
          <div class="form-item-init">{{currentOrganList.orgLeader}}</div>
          <i class='iconfont icon-bianji1' @click="editIconLeader('edit')"></i>
        </div>
        <div v-show="isSaveLeader" class="form-item-save">
         <Input placeholder="" v-model="currentOrganList.orgLeader" maxlength="10" show-word-limit/>
          <i class='iconfont icon-baocun2' @click="editIconLeader('save')"></i>
        </div>
      </FormItem>
      <FormItem label="启用状态" prop="enabled" style="width:48%;">
        <div>
           <i-switch true-color="#57C44F" :true-value="1" :false-value="0" v-model="currentOrganList.isEnabled" @mousedown.native="changeSwitch(currentOrganList)">
        </i-switch>
        </div>
      </FormItem>
      <FormItem label="当前组织用户数" prop="equipmentStatus" style="width:48%">
        <span class="form-item-bot-left" @click="pageJump(currentOrganList)">{{currentOrganList.curOrgUserCount || 0}}</span>
      </FormItem>
      <FormItem label="次级组织总数" prop="equipmentStatus" style="width:48%">
        <span class="form-item-bot-right">{{currentOrganList.childOrgCount || 0}}个</span>
      </FormItem>
    </Form>
    <div class="content-top">
      <div class="content-top-title">次级组织信息</div>
    </div>
    <div class="search-list">
      <div class="search-left">
        <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
          <FormItem label="" prop="isEnabled">
            <Select v-model="tableParams.isEnabled" placeholder="启用状态">
              <Option v-for="item in enabledData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="" prop="orgUserNum">
            <Select v-model="tableParams.orgUserNum" placeholder="组织用户数">
              <Option v-for="item in userData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="">
            <DatePicker type="datetimerange" :value="dateRange" format="yyyy-MM-dd HH:mm:ss" placeholder="更新时间范围" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changePicker"></DatePicker>
          </FormItem>
          <FormItem label="" prop="keywords">
            <Input placeholder="输入负责人关键字查询" clearable search v-model="tableParams.keywords" />
          </FormItem>
          <FormItem label="" >
            <Button type="primary" class="common-btn-search" @click="searchClick">
              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
            </Button> 
            <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
              <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
            </Button>   
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="manage-main-center">
      <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
        <template slot="loading">
            <Loading-animation></Loading-animation>
        </template>
         <template slot-scope="{ row }" slot="action">
           <Tooltip content="编辑" placement="top">
              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
           </Tooltip>
            <!-- <Tooltip content="删除" placement="top">
              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
           </Tooltip> -->
        </template>
      </Table>
    </div>
    <div class="common-page">
      <div class="common-page-total">
        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
      </div>
      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
    </div>
    <Modal
      v-model="showModal"
      :title="title"
      width="36"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      @on-visible-change="modalChange"
      class-name="common-modal">
      <Form class="common-form common-form-modal" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
				<FormItem label="上级节点：" >
          <span>{{orgTitle}}</span>
				</FormItem>
				<FormItem label="序号：" prop="orgOrder">
          <InputNumber :max="99" :min="1" v-model="formOption.orgOrder" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
        </FormItem>
        <FormItem label="组织名称：" prop="orgName">
          <Input v-model.trim="formOption.orgName" maxlength="20" show-word-limit />
        </FormItem>
         <FormItem label="负责人：" prop="orgLeader">
          <Input v-model="formOption.orgLeader" maxlength="10" show-word-limit />
        </FormItem>
         <FormItem label="启用状态：" prop="isEnabled" v-if="title == '新增组织'">
          <i-switch true-color="#57C44F" v-model="formOption.isEnabled" disabled></i-switch>
          <span style="color: #718EBD;margin-left:6px">关</span>
          <span style="color: #718EBD;margin-left:12px">（所有新增状态均为关闭，需在列表打开）</span>
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk('formOption')">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      :title="commonTitle"
      width="35"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon"></i>
      <span class="modal-text">{{modalTitle}}</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
  </div>
</template>
<script>
const defaultFrom = {parentOrgId: '',orgLevel:null,orgOrder:null,orgName: '',orgLeader: '',isEnabled:0}
export default {
  name: "OrganizationIndex",
  components:{
  },
  props: {
    stationData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    levelNum: {
      type: Number,
    },
    currentOrgId: [String,Number]
  },
  data() {
    return {
      currentOrganList: {},
      currentParams: {},
      ruleValidate: {
        orgOrder: [{
            required: true,
            type: 'number',
            message: '请输入序号',
            trigger: 'blur'
        }],
        orgName: [{
            required: true,
            message: '请输入组织名称',
            trigger: 'blur'
        }],
      },
      formOption: {},
      isSaveNumber: false,
      isSaveName: false,
      isSaveLeader: false,
      showModal: false,
      enabledData: [
         {
          value: '-1',
          label: '启用状态'
        },
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '关闭'
        },
      ],
      userData: [
         {
          value: '-1',
          label: '组织用户数'
        },
        {
          value: '1',
          label: '有'
        },
        {
          value: '0',
          label: '无'
        },
      ],
      tableParams: {
        parentOrgId: '',
        isEnabled: '',
        orgUserNum: '',
        beginUpdateTime: '',
        endUpdateTime: '',
        keywords: '',
        pageNum: 1,
        pageSize: 6
      },
      dateRange: [],
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      rowObj: {},
      loading: true,
      isClickOrg: true,
      isClickOrgId: null,
      columns: [
          {
            title: '序号',
            key: 'orgOrder',
            align: 'center'
          },
          {
            title: '组织名称',
            key: 'orgName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '负责人',
            key: 'orgLeader',
            align: 'center'
          },
          {
            title: '当前组织用户数',
            key: 'curOrgUserCount',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '次级组织总数',
            key: 'childOrgCount',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '更新时间',
            align: 'center',
            key: 'updateTime',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '启用状态',
            key: 'isEnabled',
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h('div', [                             
                h('i-switch', {
                  props: { value: params.row.isEnabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
                  },
                  nativeOn:{
                      "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
                        this.rowObj =  params.row
                        this.isClickOrg = false
                        if (params.row.isEnabled == 1) {
                          this.commonTitle = '确认关闭'
                          this.activeColor = '#E92E2E'
                          this.activeClass = 'icon-guanbi'
                          this.modalTitle = '关闭后线路下所有站点将同时关闭，线路及站点统计数据不可见。'
                          this.modalStatus = true         
                        } else {
                          this.commonTitle = '确认启用'
                          this.activeColor = '#57C44F'
                          this.activeClass = 'icon-qiyong'
                          this.modalTitle = '启用后此线路统计数据将在各管理模块及前端显示页面生效。'
                          this.modalStatus = true
                        }
                      },
                    }
                }),
              ])
            }
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 80,
        }
      ],
      modalStatus: false,
      childDisabled: false,
      title: '新增组织',
      commonTitle: "",
      activeColor: '#E92E2E',
      activeClass: '',
      modalTitle: '',
      formOption: {parentOrgId: '',orgLevel: null,orgOrder:null,orgName: '',orgLeader: '',isEnabled:0},
      orgTitle: '',
      isOrgAdd: '',// 判断是新增平级还是下级
      disabledLevel: 0,
      currentTreeId: null,
    };
  },
  watch: {
    levelNum: {
    　handler(newValue) {
        this.disabledLevel = newValue
        if (this.disabledLevel>=5) {
        this.childDisabled = true
        } else {
          this.childDisabled = false
        }
      }
   },
  },
  mounted() {
  },
  methods: {
    pageJump (currentOrgObj) {
      let menuNameArr = []
      menuNameArr = ['系统设置','用户管理']
      sessionStorage.setItem('routname', '/MainPage/UserManagement')
      sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
      this.$router.push({ name: 'UserManagement', params: { orgId:currentOrgObj.orgId }})
    },
    editIconNumber (title) {
      if (title == 'edit') {
        this.isSaveNumber = true
      } else {
        let params = this.currentOrganList
        this.$nextTick(()=> {
          this.$refs.currentOrganList.validateField('orgOrder',(valid)=> {
            if (!valid) {
               this.$post('metroapi/org/editSysOrg', params).then(res=>{
                if (res.httpCode == 1 ){
                  this.isSaveNumber = false
                  this.$emit('changeTree',this.currentOrganList.orgId,'isTopEditOrg')
                  this.$Message.info(res.msg)
                } else {
                  this.$Message.info(res.msg)
                }
              })
            }
          })
        })
     }
    },
    editIconName (title) {
      if (title == 'edit') {
        this.isSaveName = true
      } else {
          let params = this.currentOrganList
          this.$nextTick(()=> {
            this.$refs.currentOrganList.validateField('orgName',(valid)=> {
              if (!valid) {
                this.$post('metroapi/org/editSysOrg', params).then(res=>{
                  if (res.httpCode == 1 ){
                    this.isSaveName = false
                    this.$emit('changeTree',this.currentOrganList.orgId,'isTopEditOrg')
                    this.$Message.info(res.msg)
                  } else {
                    this.$Message.info(res.msg)
                  }
                })
              }
            })
          })
      }
    },
    editIconLeader (title) {
      if (title == 'edit') {
        this.isSaveLeader = true
      } else {
          let params = this.currentOrganList
          this.$post('metroapi/org/editSysOrg', params).then(res=>{
            if (res.httpCode == 1 ){
              this.isSaveLeader = false
              this.$emit('changeTree',this.currentOrganList.orgId,'isTopEditOrg')
              this.$Message.info(res.msg)
            } else {
              this.$Message.info(res.msg)
            }
          })
      }
    },
    changeSwitch (curObj) {
      this.isClickOrgId = curObj.orgId
      this.isClickOrg = true
        if (curObj.isEnabled == 1) {
          this.commonTitle = '确认关闭'
          this.activeColor = '#E92E2E'
          this.activeClass = 'icon-guanbi'
          this.modalTitle = '关闭后，组织下所有子节点将同时关闭；组织及下属组织用户状态将全部关闭。请谨慎操作。'
          this.modalStatus = true         
        } else {
          this.commonTitle = '确认启用'
          this.activeColor = '#57C44F'
          this.activeClass = 'icon-qiyong'
          this.modalTitle = '启用组织后，组织下子节点仍为关闭状态，请在列表中手动开启。'
          this.modalStatus = true
        }
    },
    changePicker (date) {
      this.tableParams.beginUpdateTime = date[0]
      this.tableParams.endUpdateTime = date[1]
    },
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    // 获取当前组织信息
    getOrgData (currentOrgId,text) {
      this.currentTreeId = currentOrgId
      this.$get('metroapi/org/viewSysOrg', {sysOrgId:currentOrgId}).then(res=>{
        if ( res.httpCode == 1 ){
          this.currentOrganList = res.data
          // 编辑当前信息(不是表格里的当前信息) 不走表格接口 text = = 'isTopEditOrg'
          if (text != 'isTopEditOrg') {
            this.getTableData(currentOrgId)
          }
        } else {
          this.$Message.info(res.msg)
        }
      })   
    },
     // 获取表格数据
    getTableData (nodeId) {
      this.tableParams.parentOrgId = nodeId ? nodeId : this.currentTreeId
      let params = JSON.parse(JSON.stringify(this.tableParams))
      params.orgUserNum = params.orgUserNum == '-1' ? '' : params.orgUserNum
      params.isEnabled = params.isEnabled == '-1'?'': params.isEnabled
      this.loading = true
      this.$get('metroapi/org/querySysOrgPage', params).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            } 
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    },
    searchClick () {
      this.tableParams.pageNum = 1
      this.getTableData()
    },
    resetClick (name) {
     this.dateRange = []
     this.tableParams.beginUpdateTime = ''
     this.tableParams.endUpdateTime = ''
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    },
    addClick (text) {
      this.isOrgAdd = text
      this.title = '新增组织'
      if (this.currentOrganList.orgLevel == 2) {
        this.orgTitle = text == '平级' ? this.stationData[0].title : this.currentOrganList.orgName
      } else {
        this.orgTitle = text == '平级' ? this.currentOrganList.parentOrgName : this.currentOrganList.orgName
      }
      if(text == '平级') {
        this.formOption = JSON.parse(JSON.stringify(defaultFrom))
        this.formOption.orgLevel = this.currentOrganList.orgLevel
        this.formOption.parentOrgId = this.currentOrganList.parentOrgId ? this.currentOrganList.parentOrgId : ''
        this.showModal = true
      } else {
        this.formOption.orgLevel = this.currentOrganList.orgLevel + 1
        this.formOption.parentOrgId = this.currentOrganList.orgId
      }
      this.showModal = true
    },
    editClick (row) {
      this.rowObj = row
      this.formOption = JSON.parse(JSON.stringify(row));
      this.orgTitle = this.formOption.parentOrgName
      this.title = '编辑组织'
      this.showModal = true
    },
    delClick (row) {
      this.rowObj = row
      let params = {
        sysOrgId: row.orgId
      }
      this.$get('metroapi/org/delSysOrg',params).then(res=>{
        if (res.httpCode == 1 ){
          let orgId = row.parentOrgId 
          this.$emit('changeTree',orgId)
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    modalChange (modalStatus) {
      if (!modalStatus) {
        this.$refs.formOption.resetFields();
      }
    },
    modalOk (formName) {
      let params = JSON.parse(JSON.stringify(this.formOption))
      if (this.title == '新增组织') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/org/addSysOrg', params).then(res=>{
              if ( res.httpCode == 1 ){
                let orgId = null 
                if (this.isOrgAdd == '平级') {
                  orgId = this.currentOrganList.orgId
                } else {
                  orgId = params.parentOrgId
                }
                this.showModal = false
                this.$emit('changeTree',orgId)
                this.$Message.info(res.msg)
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/org/editSysOrg', params).then(res=>{
              if (res.httpCode == 1 ){
                this.showModal = false
                this.$emit('changeTree',this.rowObj.parentOrgId)
                this.$Message.info(res.msg)
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      }
    },
    modalCancel () {
      this.showModal = false
    }, 
    commonOk () {
      if (this.commonTitle == '确认启用') {
        let params = {
          enabled: 1
        }
        if (this.isClickOrg) {
          params.sysOrgId = this.isClickOrgId
        } else {
          params.sysOrgId = this.rowObj.orgId
        }
        this.getEnabledStatus(params)
      } else if (this.commonTitle == '确认关闭') {
        let params = {
          enabled:0
        }
         if (this.isClickOrg) {
          params.sysOrgId = this.isClickOrgId
        } else {
          params.sysOrgId = this.rowObj.orgId
        }
        this.getEnabledStatus(params)
      }
    },
    commonCancel () {
      this.modalStatus = false
    },
    // 启用 关闭/接口
    getEnabledStatus (params) {
      this.$get('metroapi/org/enableSysOrg',params).then(res=>{
        if (res.httpCode == 1 ){
          if (params.enabled == 0) {
            if (this.isClickOrg) {
             this.currentOrganList.isEnabled = 0
            } else {
              this.rowObj.isEnabled = 0
            }
          } else {
            if (this.isClickOrg) {
             this.currentOrganList.isEnabled = 1
            } else {
              this.rowObj.isEnabled = 1
            }
          }
          this.modalStatus = false
        } else {
          if (this.isClickOrg) {
            this.currentOrganList.isEnabled = 0
          } else {
            this.rowObj.isEnabled = 0
          }
          this.$Message.info(res.msg)
        }
      })
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  position: relative;
  height: 100%;
}
.content-top { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #173B77;
  padding-bottom: 10px;
}
.content-top-title {
  font-size: 16px;
  font-weight: bold;
  color: #0185EA;
  padding-left: 8px;
  border-left: 3px solid #0185EA;
  height: 18px;
  line-height: 18px;
}
.common-add-btn-left {
  margin-right: 26px;
}
>>> .common-form-list {
  margin-top: 20px;
}
>>> .common-form-list .ivu-form-item{
  margin-bottom: 24px;
}
>>> .common-form-list .ivu-form-item-content {
  display: flex;
}
>>> .common-form-list .iconfont {
  margin-left: 18px;
  color: #259FF8;
  cursor: pointer;
}
.form-item-bot-left {
  color: #0180E1;
  text-decoration: underline;
  cursor: pointer;
}
.form-item-bot-right {
  color: #0180E1;
}
.form-item-save {
  width: 100%;
  display: flex;
  height: 32px;
}
.form-item-init {
  border: 1px solid #133263;
  border-radius: 4px;
  width: 100%;
  padding-left: 7PX;
}
.search-list {
  display: flex;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 150px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
   >>> .ivu-input {
     width: 180px;
     height: 32px;
   }
   >>> .ivu-date-picker-editor .ivu-input {
     width: 330px;
   }
   >>> .ivu-input-prefix, >>> .ivu-input-suffix {
     height: 32px;
     line-height: 32px;
   }
   >>> .ivu-input-icon {
     height: 32px;
     line-height: 32px;
   }
   >>> .date-picker-main .ivu-date-picker-header {
    border-bottom: 0.0052083333rem solid #204384;
 }
}
.btn-container {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}
.common-form {
  display: flex;
  flex-wrap: wrap;
}
.common-form-modal {
  display: flex;
  flex-direction: column;
}
.manage-main-center {
  width: 100%;
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 51px;
 }
 >>> .common-table .ivu-table td {
  height: 51px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 51px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 550px);
 }
 >>> .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .app-table .ivu-table-tip {
  height: calc(100vh - 550px);
 }
 >>> .common-table .ivu-table-tip table {
 display: none;
}
 >>> .modal-table {
   overflow: auto !important;
 }
 >>> .modal-table .ivu-spin-fix {
   height: 200px;
 }
  >>> .modal-table .ivu-table-tip {
   height: 200px;
 }
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
.ivu-btn.disabled, .ivu-btn.disabled.active, .ivu-btn.disabled:active, .ivu-btn.disabled:focus, .ivu-btn.disabled:hover, .ivu-btn[disabled], .ivu-btn[disabled].active, .ivu-btn[disabled]:active, .ivu-btn[disabled]:focus, .ivu-btn[disabled]:hover, fieldset[disabled] .ivu-btn, fieldset[disabled] .ivu-btn.active, fieldset[disabled] .ivu-btn:active, fieldset[disabled] .ivu-btn:focus, fieldset[disabled] .ivu-btn:hover {
  color: #e7e7e7;
  background-color: #a3a3a3;
  border-color: #a3a3a3;
}
/* 对话框里的input里的placeholder样式修改 */
/deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholde, /deep/ .ivu-input-number-input::-webkit-input-placeholderr{    /* Mozilla Firefox 4 to 18 */
 color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
</style>