<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="currentMenuList" :model="currentMenuList" :rules="ruleValidate" :label-width="120" inline>
      <FormItem label="序号" prop="displayOrder" style="width:48%">
        <div v-show="!isSaveNumber" class="form-item-save">
          <div class="form-item-init">{{currentMenuList.displayOrder}}</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="currentMenuList.displayOrder"></InputNumber>
          <i class='iconfont icon-baocun2' @click="editIconNumber('save')"></i>
        </div>
      </FormItem>
      <FormItem label="资源名称" prop="menuName" style="width:48%">
        <div v-show="!isSaveName" class="form-item-save">
          <div class="form-item-init">{{currentMenuList.menuName}}</div>
          <i class='iconfont icon-bianji1' @click="editIconName('edit')"></i>
        </div>
        <div v-show="isSaveName" class="form-item-save">
          <Input placeholder="" v-model.trim="currentMenuList.menuName" maxlength="20" show-word-limit />
          <i class='iconfont icon-baocun2' @click="editIconName('save')"></i>
        </div>
      </FormItem>
      <FormItem label="资源类型" prop="resourceType" style="width:48%">
         <div v-show="!isSaveResoType" class="form-item-save">
          <div class="form-item-init">{{currentMenuList.resourceTypeName}}</div>
          <i class='iconfont icon-bianji1' @click="editIconResourceType('edit')"></i>
        </div>
        <div v-show="isSaveResoType" class="form-item-save">
          <Select v-model="currentMenuList.resourceType" placeholder="资源类型">
              <Option v-for="item in resourceTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <i class='iconfont icon-baocun2' @click="editIconResourceType('save')"></i>
        </div>
      </FormItem>
      <FormItem label="启用状态" prop="isEnable" style="width:48%;">
        <div>
           <i-switch true-color="#57C44F" :true-value="1" :false-value="0" v-model="currentMenuList.isEnable" @mousedown.native="changeSwitch(currentMenuList)">
        </i-switch>
        </div>
      </FormItem>
      <FormItem label="URL" prop="linkUrl" style="width:48%">
         <div v-show="!isSaveUrl" class="form-item-save">
          <div class="form-item-init">{{currentMenuList.linkUrl}}</div>
          <i class='iconfont icon-bianji1' @click="editIconUrl('edit')"></i>
        </div>
        <div v-show="isSaveUrl" class="form-item-save">
          <Input placeholder="输入资源地址" v-model="currentMenuList.linkUrl" />
          <i class='iconfont icon-baocun2' @click="editIconUrl('save')"></i>
        </div>
      </FormItem>
      <FormItem label="更新时间" prop="equipmentStatus" style="width:48%">
        <span class="form-item-bot-right">{{currentMenuList.updateTime}}</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="resourceType">
            <Select v-model="tableParams.resourceType" placeholder="资源类型">
              <Option v-for="item in resourceTypeData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="" prop="isEnable">
            <Select v-model="tableParams.isEnable" placeholder="启用状态">
              <Option v-for="item in isEnableData" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </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>{{menuTitle}}</span>
				</FormItem>
				<FormItem label="序号：" prop="displayOrder">
          <InputNumber :max="99" :min="1" v-model="formOption.displayOrder" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
        </FormItem>
        <FormItem label="资源名称：" prop="menuName">
          <Input v-model.trim="formOption.menuName" maxlength="20" show-word-limit />
        </FormItem>
        <FormItem label="资源类型：" prop="resourceType">
          <Select v-model="formOption.resourceType" placeholder="资源类型">
              <Option v-for="item in resourceTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
           </Select>
        </FormItem>
         <FormItem label="图标：" prop="imageUrl">
          <Input v-model="formOption.imageUrl" maxlength="25" show-word-limit placeholder="请输入图标class名称"/>
          <!-- <div class="common-form-item-text">新增系统中不存在的资源，图标默认名称为icon-caidan</div>  -->
        </FormItem>
        <FormItem label="URL：" prop="linkUrl">
          <Input v-model="formOption.linkUrl" maxlength="25" show-word-limit placeholder="输入资源地址"/>
        </FormItem>
         <FormItem label="启用状态：" prop="isEnable" v-if="title == '新增资源'">
          <i-switch true-color="#57C44F" v-model="formOption.isEnable" 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="30"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle!='确认删除'"></i>
      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle=='确认删除'"></Icon>
      <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 = {parentMenuId: '',menuLevel:'',displayOrder:null,menuName: '',resourceType: '',imageUrl: '',linkUrl: '',isEnable:0}
export default {
  name: "ResourceManagementIndex",
  components:{
  },
  props: {
    stationData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    levelNum: {
      type: Number,
    },
    currentmenuId: [String,Number]
  },
  data() {
    return {
      currentMenuList: {},
      currentParams: {},
      ruleValidate: {
        displayOrder: [{
            required: true,
            type: 'number',
            message: '请输入序号',
            trigger: 'blur'
        }],
        menuName: [{
            required: true,
            message: '请输入资源名称',
            trigger: 'blur'
        }],
        resourceType: [{
            required: true,
            type: 'number',
            message: '请选择资源类型',
            trigger: 'change'
        }],
      },
      isSaveNumber: false,
      isSaveName: false,
      isSaveResoType: false,
      isSaveUrl: false,
      showModal: false,
      isEnableData: [
         {
          value: '-1',
          label: '启用状态'
        },
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '关闭'
        },
      ],
      resourceTypeData: [
         {
          value: '-1',
          label: '资源类型'
        },
        {
          value: 1,
          label: '菜单'
        },
        {
          value: 2,
          label: '页面'
        },
      ],
      resourceTypeList: [
        {
          value: 1,
          label: '菜单'
        },
        {
          value: 2,
          label: '页面'
        },
      ],
      tableParams: {
        menuId: '',
        isEnable: '',
        resourceType: '',
        keywords: '',
        pageNum: 1,
        pageSize: 6
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      rowObj: {},
      loading: true,
      isClickOrg: true,
      isClickmenuId: null,
      columns: [
          {
            title: '序号',
            key: 'displayOrder',
            align: 'center'
          },
          {
            title: '资源名称',
            key: 'menuName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '资源类型',
            key: 'resourceTypeName',
            align: 'center',
            width: 100,
          },
          {
            title: '上级节点',
            key: 'parentMenuName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: 'URL',
            key: 'linkUrl',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '更新时间',
            align: 'center',
            key: 'updateTime',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '启用状态',
            key: 'isEnable',
            align: 'center',
            width: 120,
            render: (h, params) => {
              return h('div', [                             
                h('i-switch', {
                  props: { value: params.row.isEnable,'true-color': '#57C44F', trueValue:1,falseValue: 0
                  },
                  nativeOn:{
                      "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
                        this.rowObj =  params.row
                        this.isClickOrg = false
                        if (params.row.isEnable == 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: {parentMenuId: '',menuLevel:'',displayOrder:null,menuName: '',resourceType: '',imageUrl: '',linkUrl: '',isEnable:0},
      menuTitle: '',
      isMenuAdd: '',// 判断是新增平级还是下级
      disabledLevel: 0,
      currentTreeId: null,
    };
  },
  watch: {
    levelNum: {
    　handler(newValue) {
        this.disabledLevel = newValue
        if (this.disabledLevel >=4 ) {
        this.childDisabled = true
        } else {
          this.childDisabled = false
        }
      }
   },
  },
  mounted() {
  },
  methods: {
    editIconNumber (title) {
      if (title == 'edit') {
        this.isSaveNumber = true
      } else {
        let params = this.currentMenuList
        this.$nextTick(()=> {
          this.$refs.currentMenuList.validateField('displayOrder',(valid)=> {
            if (!valid) {
               this.$post('metroapi/menu/save', params).then(res=>{
                if (res.httpCode == 1 ){
                  this.isSaveNumber = false
                  this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
                  this.$Message.info(res.msg)
                } else {
                  this.$Message.info(res.msg)
                }
              })
            }
          })
        })
     }
    },
    editIconName (title) {
      if (title == 'edit') {
        this.isSaveName = true
      } else {
          let params = this.currentMenuList
          this.$nextTick(()=> {
            this.$refs.currentMenuList.validateField('menuName',(valid)=> {
              if (!valid) {
                this.$post('metroapi/menu/save', params).then(res=>{
                  if (res.httpCode == 1 ){
                    this.isSaveName = false
                    this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
                    this.$Message.info(res.msg)
                  } else {
                    this.$Message.info(res.msg)
                  }
                })
              }
            })
          })
      }
    },
    editIconResourceType (title) {
      if (title == 'edit') {
        this.isSaveResoType = true
      } else {
          let params = this.currentMenuList
          this.$nextTick(()=> {
            this.$refs.currentMenuList.validateField('resourceType',(valid)=> {
              if (!valid) {
                this.$post('metroapi/menu/save', params).then(res=>{
                  if (res.httpCode == 1 ){
                    this.isSaveResoType = false
                    this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
                    this.$Message.info(res.msg)
                  } else {
                    this.$Message.info(res.msg)
                  }
                })
              }
            })
          })
      }
    },
    editIconUrl (title) {
      if (title == 'edit') {
        this.isSaveUrl = true
      } else {
          let params = this.currentMenuList
          this.$post('metroapi/menu/save', params).then(res=>{
            if (res.httpCode == 1 ){
              this.isSaveUrl = false
              this.$emit('changeTree',this.currentMenuList.menuId,'isTopEditOrg')
              this.$Message.info(res.msg)
            } else {
              this.$Message.info(res.msg)
            }
          })
      }
    },
    changeSwitch (curObj) {
      this.isClickmenuId = curObj.menuId
      this.isClickOrg = true
        if (curObj.isEnable == 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
        }
    },
    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()
    },
    // 获取当前资源信息
    getMenuData (currentMenuId,text) {
      this.currentTreeId = currentMenuId
      this.$get('metroapi/menu/queryMenu', {menuId:currentMenuId}).then(res=>{
        if ( res.httpCode == 1 ){
          this.currentMenuList = res.data
          // 编辑当前信息(不是表格里的当前信息) 不走表格接口 text = = 'isTopEditOrg'
          if (text != 'isTopEditOrg') {
            this.getTableData(currentMenuId)
          }
        } else {
          this.$Message.info(res.msg)
        }
      })   
    },
     // 获取表格数据
    getTableData (nodeId) {
      this.tableParams.menuId = nodeId ? nodeId : this.currentTreeId
      let params = JSON.parse(JSON.stringify(this.tableParams))
      params.resourceType = params.resourceType == '-1' ? '' : params.resourceType
      params.isEnable = params.isEnable == '-1'?'': params.isEnable
      this.loading = true
      this.$get('metroapi/menu/queryMenu/secondary', 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.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    },
    addClick (text) {
      this.isMenuAdd = text
      this.title = '新增资源'
      if (this.currentMenuList.menuLevel == 2) {
        this.menuTitle = text == '平级' ? this.stationData[0].title : this.currentMenuList.menuName
      } else {
        this.menuTitle = text == '平级' ? this.currentMenuList.parentMenuName : this.currentMenuList.menuName
      }
      if(text == '平级') {
        this.formOption = JSON.parse(JSON.stringify(defaultFrom))
        this.formOption.menuLevel = this.currentMenuList.menuLevel
        this.formOption.parentMenuId = this.currentMenuList.parentMenuId ? this.currentMenuList.parentMenuId : ''
        this.showModal = true
      } else {
        this.formOption.menuLevel = this.currentMenuList.menuLevel + 1
        this.formOption.parentMenuId = this.currentMenuList.menuId
      }
      this.showModal = true
    },
    editClick (row) {
      this.rowObj = row
      this.formOption = JSON.parse(JSON.stringify(row));
      this.menuTitle = this.formOption.parentMenuName
      this.title = '编辑资源'
      this.showModal = true
    },
    delClick (row) {
      this.rowObj = row
      this.commonTitle = '确认删除'
      this.activeColor = '#E92E2E'
      this.activeClass = ''
      this.modalTitle = '删除关键资源可能导致系统崩溃，非专业人员请谨慎操作。'
      this.modalStatus = true
    },
    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/menu/save', params).then(res=>{
              if (res.httpCode == 1 ){
                this.showModal = false
                let menuId = null 
                if (this.isMenuAdd == '平级') {
                  menuId = this.currentMenuList.menuId
                } else {
                  menuId = params.parentMenuId
                }
                this.$emit('changeTree',menuId)
                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/menu/save', params).then(res=>{
              if (res.httpCode == 1 ){
                this.showModal = false
                this.$emit('changeTree',this.rowObj.parentMenuId)
                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 = {
          isEnable: 1
        }
        if (this.isClickOrg) {
          params.menuId = this.isClickmenuId
        } else {
          params.menuId = this.rowObj.menuId
        }
        this.getisEnableStatus(params)
      } else if (this.commonTitle == '确认关闭') {
        let params = {
          isEnable:0
        }
        if (this.isClickOrg) {
          params.menuId = this.isClickmenuId
        } else {
          params.menuId = this.rowObj.menuId
        }
        this.getisEnableStatus(params)
      } else if (this.commonTitle == '确认删除') {
        let params = {
          menuId:this.rowObj.menuId
        }
        this.delData(params)
      }
    },
    commonCancel () {
      this.modalStatus = false
    },
    // 启用 关闭/接口
    getisEnableStatus (params) {
      this.$post('metroapi/menu/update/enabled',params).then(res=>{
        if (res.httpCode == 1 ){
          if (params.isEnable == 0) {
            if (this.isClickOrg) {
             this.currentMenuList.isEnable = 0
            } else {
              this.rowObj.isEnable = 0
            }
          } else {
            if (this.isClickOrg) {
             this.currentMenuList.isEnable = 1
            } else {
              this.rowObj.isEnable = 1
            }
          }
          this.modalStatus = false
        } else {
          if (this.isClickOrg) {
            this.currentMenuList.isEnable = 0
          } else {
            this.rowObj.isEnable = 0
          }
          this.$Message.info(res.msg)
        }
      })
    },
    delData (params) {
      this.$get('metroapi/menu/delete', params).then(res=>{
        if (res.httpCode == 1 ){
          this.modalStatus = false
          this.$emit('changeTree',this.rowObj.parentMenuId)
          this.$Message.info(res.msg)
        } else {
          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;
}
.common-form-item-text {
  font-size: 11px;
  color: #85A3D4;
}
/* 对话框里的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>