<!-- 绩效指标数据KPI -->
<template>
  <div>
    <Row>
      <Col span="16">
        <Row align="middle" type="flex">
          <RadioGroup @on-change="handleDateType" v-model="dateType">
            <Radio :disabled="loading || exportLoading" :label="1">日</Radio>
            <Radio :disabled="loading || exportLoading" :label="2">周</Radio>
            <Radio :disabled="loading || exportLoading" :label="3">月</Radio>
          </RadioGroup>
          <DatePicker
            :clearable="false"
            :disabled="loading || exportLoading"
            :editable="false"
            format="yyyy-MM-dd"
            placeholder="日期查询"
            placement="bottom-end"
            style
            type="date"
            v-if="selectWay === 'selectByDay'"
            v-model="dateValue"
          ></DatePicker>
          <el-date-picker
            :clearable="false"
            :disabled="loading || exportLoading"
            :editable="false"
            :picker-options="{'firstDayOfWeek': 1}"
            class="weekStyle"
            format="yyyy 第 WW 周"
            placeholder="日期查询"
            style="width:166px; height:32px;"
            type="week"
            v-else-if="selectWay === 'selectByWeek'"
            v-model="dateValue"
          ></el-date-picker>
          <DatePicker
            :clearable="false"
            :disabled="loading || exportLoading"
            :editable="false"
            placeholder="日期查询"
            placement="bottom-end"
            style
            type="month"
            v-else-if="selectWay === 'selectByMonth'"
            v-model="dateValue"
          ></DatePicker>
          <Button
            :disabled="loading || exportLoading"
            :loading="loading"
            @click="doInitSearch"
            style="margin-left: 8px;"
            type="primary"
          >查询</Button>
          <Button
            :disabled="loading || exportLoading || dataStatus"
            @click="handleScreenIndex"
            style="margin-left:12px"
          >指标筛选</Button>
          <Modal
            :loading="screenIndexLoading"
            :mask-closable="false"
            :styles="{width: '800px'}"
            @on-ok="hangledSelectedIndex"
            class-name="cancle-hide"
            title="指标筛选"
            v-model="modalIndex1"
          >
            <Row :gutter="16" justify="space-between" type="flex">
              <Col span="15">
                <Tabs @on-click="handleTabClick" class="tabs-style1" value="0">
                  <TabPane
                    :key="index"
                    :label="tabItem.label"
                    :name="tabItem.name"
                    v-for="(tabItem,index) in tabsData"
                  >
                    <Scroll height="200">
                      <CheckboxGroup
                        @on-change="checkAllGroupChange"
                        v-model="tabItem.checkboxGroup"
                      >
                        <Checkbox
                          :key="index"
                          :label="item.label+'#'+item.value"
                          v-for="(item,index) in tabItem.checkboxData"
                        >{{ item.label }}</Checkbox>
                      </CheckboxGroup>
                      <div class="mt-set8">
                        <Checkbox
                          :value="tabItem.checkAll"
                          @click.prevent.native="handleCheckAll(index)"
                        >全选</Checkbox>
                      </div>
                    </Scroll>
                  </TabPane>
                </Tabs>
              </Col>
              <Col span="9">
                <h5 class="title_inner-style1">已选指标</h5>
                <div class="index-selected">
                  <Scroll height="200">
                    <Tag
                      :key="index"
                      :name="item"
                      @on-close="handleClose"
                      closable
                      color="primary"
                      type="border"
                      v-for="(item,index) in tagGroups"
                    >{{ item.split('#')[0] }}</Tag>
                  </Scroll>
                </div>
                <Button @click="handleDelAll" style="margin-top:8px">全部删除</Button>
              </Col>
            </Row>
          </Modal>

          <advancedSearch
            :autoLoad="isAdvanLoad"
            :clearable="isNoAgent"
            :disabled="loading || exportLoading"
            :orgType="otype"
            @invokeDoSearch="exeDosearch"
            @on-confirm="handleAdvanSearch"
            @on-select-admin-group="AdvanSearchGroup"
            @on-select-special-line="AdvanSearchCenter"
            @on-select-sub-center="AdvanSearchCenter"
          ></advancedSearch>
        </Row>
      </Col>

      <Col class-name="align-right" span="8">
        <Button @click="showImportData" class="mr-set6" v-permission:import>导入指标数据</Button>
        <Modal
          :mask-closable="false"
          :styles="{width: '450px'}"
          @on-ok="handleImportData"
          @on-visible-change="handleCloseIndex"
          class-name="cancle-hide"
          title="导入指标数据"
          v-model="modalIndex2"
        >
          <RadioGroup @on-change="handleDateType2" v-model="dateType2">
            <Radio :label="1">日</Radio>
            <Radio :label="2">周</Radio>
            <Radio :label="3">月</Radio>
          </RadioGroup>
          <Upload
            :before-upload="handleBeforeUpload"
            :format="['xlsx', 'xls']"
            action
            ref="upload"
            style="margin-top:16px;width:300px;"
            type="drag"
          >
            <div style="padding: 20px 0">
              <Icon size="52" style="color: #3399ff" type="ios-cloud-upload"></Icon>
              <p>点击或者拖拽上传</p>
              <Spin fix size="large" v-if="spinShow"></Spin>
            </div>
          </Upload>
          <Button @click="modelDownload">下载模板</Button>
        </Modal>

        <Poptip @on-ok="handleExport" class="align-left" confirm title="确定导出表格信息？">
          <Button :disabled="loading || dataStatus" :loading="exportLoading" v-permission:export>导出</Button>
        </Poptip>
      </Col>
    </Row>
    <br />
    <Table :columns="columnsDaily" :data="dataKpi" :loading="loading" border></Table>
    <Page
      :current.sync="searchForm.pageNum"
      :page-size="searchForm.pageSize"
      :total="total"
      @on-change="pageChange"
      class="mt-set16"
      show-total
    />
  </div>
</template>

<script>
import advancedSearch from '@/views/components/advanced-search'
import AchieveIndicatorLibAPI from '@api/common/achieveIndicatorLib'
import FileDownloadAPI from '@api/common/fileDownload'
import { downloadExcel } from '@lib/download'
import {
  format,
  startOfISOWeek,
  endOfISOWeek,
  subDays,
  subWeeks,
  subMonths
} from 'date-fns'
import cloneDeep from 'lodash/cloneDeep'
import commonadvSearch from '@/mixin/commonadvSearch'
import advanceSearchClear from '@/mixin/advanceSearchClear'
import store from '@/store'
export default {
  name: 'index-kpi',
  mixins: [commonadvSearch, advanceSearchClear],
  components: {
    advancedSearch
  },
  data () {
    return {
      loading: false,
      exportLoading: false,
      dateValue: subDays(new Date(store.state.app.systemTime), 1),
      showMore: false,
      modalIndex1: false,
      modalIndex2: false,
      dataStatus: false,
      spinShow: false,
      screenIndexLoading: false,
      dateType: 1,
      dateType2: 1,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      selectWay: 'selectByDay',
      tagGroups: [],
      tabpaneIdx: 0,
      selectedIndex: [],
      exportInfo: {},
      selectParams: {},
      tabsData: [
        {
          label: '工作效率',
          name: '0',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '知识技能',
          name: '1',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '服务质量',
          name: '2',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '风险控制',
          name: '3',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '考勤情况',
          name: '4',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '个人资历',
          name: '5',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        }
      ],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        type: 1
      },
      total: 0,
      columnsDaily: [
        {
          title: '日期',
          key: 'seldate',
          minWidth: 100
        },
        {
          title: '中心',
          key: 'usercenter',
          minWidth: 100
        },
        {
          title: '专线',
          key: 'userline',
          minWidth: 100
        },
        {
          title: '业务小组',
          key: 'usergroupname',
          minWidth: 120
        },
        {
          title: '座席',
          key: 'username',
          minWidth: 100
        },
        {
          title: '员工编号',
          key: 'usercode',
          minWidth: 100
        }
      ],
      dataKpi: [],
      indicatoridMul: [],
      indicatoridSingle: [],
      totalTag: [],
      fileName: ''
    }
  },
  watch: {
    dateType () {
      this.searchForm.type = this.dateType
    },
    dateValue () {
      if (this.dateValue) {
        this.searchForm.seldate = format(
          new Date(this.dateValue),
          this.$config.DATE_FORMAT
        )
      } else {
        this.searchForm.seldate = ''
      }
    }
  },
  mounted () {
    // this.exportInfo.seldate = format(new Date(store.state.app.systemTime), this.$config.DATE_FORMAT)
    // this.exportInfo.type = 1
    this.searchForm.seldate = format(
      subDays(new Date(store.state.app.systemTime), 1),
      this.$config.DATE_FORMAT
    )
  },
  methods: {
    doInitSearch () {
      this.searchForm.pageNum = 1
      this.doSearch()
    },
    // 查询
    doSearch () {
      if (this.stopSearch()) {
        this.dataKpi = []
        return
      }
      this.loading = true
      this.$nextTick(() => {
        console.log(this.searchForm)
        AchieveIndicatorLibAPI.getKpi({ ...this.searchForm })
          .then(({ data }) => {
            this.loading = false
            this.dataStatus = false
            if (data.status === 'success') {
              this.exportInfo.seldate = format(
                new Date(this.dateValue),
                this.$config.DATE_FORMAT
              )
              this.exportInfo.type = this.dateType
              if (this.paramsAdvance) {
                this.exportInfo.usercenter = this.removeAnnotation(
                  this.paramsAdvance.sc.id
                )
                if (this.paramsAdvance.sl) {
                  this.exportInfo.userline = this.removeAnnotation(
                    this.paramsAdvance.sl.id
                  )
                }
                if (this.paramsAdvance.ag) {
                  this.exportInfo.usergroupname = this.removeAnnotation(
                    this.paramsAdvance.ag.id
                  )
                }
              }
              let colNames
              const formData = cloneDeep(data.data.list)
              if (data.data.list.length === 0) {
                this.dataStatus = true
              }
              for (let i = 0, len = formData.length; i < len; i++) {
                if (this.dateType === 1) {
                  formData[i].seldate = format(
                    new Date(this.dateValue),
                    this.$config.DATE_FORMAT
                  )
                } else if (this.dateType === 2) {
                  formData[i].seldate =
                    format(
                      startOfISOWeek(this.dateValue),
                      this.$config.DATE_FORMAT
                    ) +
                    '至' +
                    format(
                      endOfISOWeek(this.dateValue),
                      this.$config.DATE_FORMAT
                    )
                } else if (this.dateType === 3) {
                  formData[i].seldate = format(
                    new Date(this.dateValue),
                    this.$config.MONTH_FORMAT
                  )
                }
                formData[i].usercenter = formData[i].map.usercenter
                formData[i].userline = formData[i].map.userline
                formData[i].usergroupname = formData[i].map.usergroupname
                if (formData[i].map.indicatorstr) {
                  if (formData[i].map.indicatorstr.indexOf(',') > -1) {
                    for (
                      let j = 0,
                        len2 = formData[i].map.indicatorstr.split(',').length;
                      j < len2;
                      j++
                    ) {
                      colNames =
                        'col' +
                        formData[i].map.indicatorstr.split(',')[j].split('#')[0]
                      formData[i][colNames] = formData[i].map.indicatorstr
                        .split(',')[j].split('#')[1]
                    }
                  } else {
                    colNames =
                      'col' + formData[i].map.indicatorstr.split('#')[0]
                    formData[i][colNames] = formData[i].map.indicatorstr.split(
                      '#'
                    )[1]
                  }
                }
              }
              this.total = data.data.total
              this.dataKpi = formData
            }
          })
          .catch(err => {
            console.error('err: ', err)
            this.loading = false
          })
      })
    },
    // 下载模板
    modelDownload () {
      FileDownloadAPI.download()
        .then(({ data, headers }) => {
          let fileName = decodeURIComponent(
            headers['content-disposition'].split(';')[1].split('filename=')[1]
          )
          downloadExcel(data, fileName)
        })
        .catch(err => {
          console.error('err: ', err)
        })
    },
    // 导出
    handleExport () {
      if (this.dataKpi.length === 0) {
        this.exportLoading = false
        this.$Message.destroy()
        this.$Message.warning('请先查询数据')
      } else {
        this.exportLoading = true
        AchieveIndicatorLibAPI.exportexcelkpi({ ...this.exportInfo })
          .then(({ data, headers }) => {
            this.exportLoading = false
            let fileName = decodeURIComponent(
              headers['content-disposition'].split(';')[1].split('filename=')[1]
            )
            downloadExcel(data, fileName)
          })
          .catch(err => {
            console.error('err: ', err)
            this.exportLoading = false
          })
      }
    },
    // 导入指标数据
    showImportData () {
      this.modalIndex2 = true
    },
    // 导入指标数据 - 确定
    handleImportData () {
      if (this.spinShow) return false
    },
    // 导入文件
    handleBeforeUpload (file) {
      console.log('file ', file)
      if (!new RegExp('.(xlsx|xls)$').test(file.name)) {
        this.$Message.destroy()
        this.$Message.warning('请上传xlsx或xls格式文件')
      } else {
        let reader = new FileReader()
        reader.onprogress = e => {
          this.spinShow = true
          console.log('progress', e)
        }
        reader.onerror = e => {
          // this.$refs.upload.fileList.pop()
        }
        reader.readAsDataURL(file)
        reader.onloadend = e => {
          console.log('file reader', reader)
          this.fileName = file.name
          file.url = reader.result

          let formData2 = new FormData()
          formData2.append('filename', file)
          formData2.append('type', this.dateType2)
          AchieveIndicatorLibAPI.importexcel(formData2)
            .then(({ data }) => {
              this.spinShow = false
              if (data.status === 'success') {
                this.$Message.destroy()
                this.$Message.success('导入成功!')
                this.$refs.upload.fileList.push(file)
              }
            })
            .catch(err => {
              console.error(err)
            })
        }
      }
      return false
    },
    // 日，周，月切换
    handleDateType (label) {
      this.dateType = parseInt(label)
      // this.exportInfo.type = parseInt(label)
      let len = this.columnsDaily.length
      if (len > 6) {
        for (let i = 6; i < len; i++) {
          this.columnsDaily.pop()
        }
      }
      console.log(this.indicatoridSingle, this.totalTag)
      this.indicatoridSingle = []
      this.totalTag = []
      this.indicatoridMul = []
      this.searchForm.indicatorids = ''
      this.exportInfo.indicatorids = ''
      this.tagGroups = []
      this.tabsData = [
        {
          label: '工作效率',
          name: '0',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '知识技能',
          name: '1',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '服务质量',
          name: '2',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '风险控制',
          name: '3',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '考勤情况',
          name: '4',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        },
        {
          label: '个人资历',
          name: '5',
          checkboxGroup: [],
          checkboxData: [],
          checkAll: false
        }
      ]
      if (label === 1) {
        this.selectWay = 'selectByDay'
        this.dateValue = format(
          subDays(new Date(store.state.app.systemTime), 1),
          this.$config.DATE_FORMAT
        )
        this.searchForm.seldate = format(
          new Date(this.dateValue),
          this.$config.DATE_FORMAT
        )
      } else if (label === 2) {
        this.selectWay = 'selectByWeek'
        this.dateValue = format(
          subWeeks(new Date(store.state.app.systemTime), 1),
          this.$config.DATE_FORMAT
        )
        this.searchForm.seldate = format(
          new Date(this.dateValue),
          this.$config.DATE_FORMAT
        )
      } else if (label === 3) {
        this.selectWay = 'selectByMonth'
        this.dateValue = format(
          subMonths(new Date(store.state.app.systemTime), 1),
          this.$config.MONTH_FORMAT
        )
        this.searchForm.seldate = format(
          new Date(this.dateValue),
          this.$config.MONTH_FORMAT
        )
      }
    },
    handleDateType2 (label) {
      this.dateType2 = parseInt(label)
    },
    // 指标筛选-初始化
    handleInitIndex () {
      this.$nextTick(() => {
        this.selectParams.datatype = this.dateType.toString()
        this.tabsData.map((item, index) => {
          let typecode = index + 1
          this.selectParams.typecode = typecode
          if (this.tabsData[index].checkboxData.length !== 0) {
            this.tabsData[index].checkboxData = []
          }
          AchieveIndicatorLibAPI.getlist({ ...this.selectParams })
            .then(({ data }) => {
              this.screenIndexLoading = false
              if (data.status === 'success') {
                for (let i = 0, len = data.data.length; i < len; i++) {
                  this.tabsData[index].checkboxData.push({
                    label: data.data[i].name,
                    value: data.data[i].uuid
                  })
                }
              }
            })
            .catch(err => {
              console.error('err: ', err)
              this.screenIndexLoading = true
            })
        })
      })
    },
    // 指标筛选-打开
    handleScreenIndex () {
      this.modalIndex1 = true
      this.screenIndexLoading = true
      this.handleInitIndex()

      if (this.tagGroups.length > 0) {
        let len = this.columnsDaily.length
        if (len > 6) {
          for (let i = 6; i < len; i++) {
            this.columnsDaily.pop()
          }
        }
        this.tagGroups.map((item, index) => {
          let colKey = 'col' + item.split('#')[1]
          this.columnsDaily.push({
            title: item.split('#')[0],
            key: colKey,
            width: 180
          })
        })
        this.doInitSearch()
      } else {
        let len = this.columnsDaily.length
        if (len > 6) {
          for (let i = 6; i < len; i++) {
            this.columnsDaily.pop()
          }
        }
      }
    },
    // 指标筛选 -确定
    hangledSelectedIndex () {
      if (this.tagGroups.length > 0) {
        let len = this.columnsDaily.length
        if (len > 6) {
          for (let i = 6; i < len; i++) {
            this.columnsDaily.pop()
          }
        }
        this.tagGroups.map((item, index) => {
          let colKey = 'col' + item.split('#')[1]
          this.columnsDaily.push({
            title: item.split('#')[0],
            key: colKey,
            width: 180
          })
        })
        this.doInitSearch()
      } else {
        let len = this.columnsDaily.length
        if (len > 6) {
          for (let i = 6; i < len; i++) {
            this.columnsDaily.pop()
          }
        }
      }
    },
    // tab切换事件
    handleTabClick (name) {
      this.tabpaneIdx = parseInt(name)
    },
    // 全选
    handleCheckAll (index) {
      this.tabsData[index].checkAll = !this.tabsData[index].checkAll
      if (this.tabsData[index].checkAll) {
        let boxData = this.tabsData[index].checkboxData.map((item, index) => {
          return item.label + '#' + item.value
        })
        this.tabsData[index].checkboxGroup = [].concat(boxData)
      } else {
        this.tabsData[index].checkboxGroup = []
      }
      // 获得所选项ID，传给后端
      let selectIndexs = this.tabsData[index].checkboxGroup
      for (let i = 0; i < this.tabpaneIdx; i++) {
        if (!this.indicatoridSingle[i]) {
          this.indicatoridSingle[i] = []
        }
        if (!this.totalTag[i]) {
          this.totalTag[i] = []
        }
      }
      this.indicatoridSingle[this.tabpaneIdx] = selectIndexs.map(item => {
        return item.split('#')[1]
      })
      this.indicatoridMul = [].concat.apply([], this.indicatoridSingle)
      this.searchForm.indicatorids = this.indicatoridMul.join(',')
      this.exportInfo.indicatorids = this.indicatoridMul.join(',')
      // 展示所选内容
      this.totalTag[this.tabpaneIdx] = this.tabsData[index].checkboxGroup
      this.tagGroups = [].concat.apply([], this.totalTag)
    },
    // 单个项选中
    checkAllGroupChange (data) {
      let index = this.tabpaneIdx
      let dataCount = this.tabsData[index].checkboxData.length

      // 判断全选按钮何时选中
      if (data.length === dataCount) {
        this.tabsData[index].checkAll = true
      } else if (data.length > 0) {
        this.tabsData[index].checkAll = false
      } else {
        this.tabsData[index].checkAll = false
      }

      for (let i = 0; i < this.tabpaneIdx; i++) {
        if (!this.indicatoridSingle[i]) {
          this.indicatoridSingle[i] = []
        }
        if (!this.totalTag[i]) {
          this.totalTag[i] = []
        }
      }
      // 获得所选项ID，传给后端
      let selectIndexs = this.tabsData[index].checkboxGroup
      this.indicatoridSingle[this.tabpaneIdx] = selectIndexs.map(item => {
        return item.split('#')[1]
      })
      this.indicatoridMul = [].concat.apply([], this.indicatoridSingle)
      this.searchForm.indicatorids = this.indicatoridMul.join(',')
      this.exportInfo.indicatorids = this.indicatoridMul.join(',')
      console.log(this.searchForm.indicatorids)
      // 展示所选内容
      this.totalTag[this.tabpaneIdx] = data
      this.tagGroups = [].concat.apply([], this.totalTag)
    },
    // 已选标签-单个删除
    handleClose (event, name) {
      // 左侧取消选中
      for (let i = 0, len = this.totalTag.length; i < len; i++) {
        for (let j = 0, len2 = this.totalTag[i].length; j < len2; j++) {
          if (this.totalTag[i][j] === name) {
            this.totalTag[i].splice(j, 1)
            this.indicatoridSingle[i].splice(j, 1)
            this.tabsData[i].checkAll = false
          }
        }
      }
      this.indicatoridMul = [].concat.apply([], this.indicatoridSingle)
      this.searchForm.indicatorids = this.indicatoridMul.join(',')
      this.exportInfo.indicatorids = this.indicatoridMul.join(',')
      // 已选内容删除
      for (let n = 0, len = this.tagGroups.length; n < len; n++) {
        if (this.tagGroups[n] === name) {
          this.tagGroups.splice(n, 1)
        }
      }
    },
    // 已选标签-全部删除
    handleDelAll () {
      for (let i = 0, len = this.totalTag.length; i < len; i++) {
        for (let j = 0, len2 = this.totalTag[i].length; j < len2; j++) {
          this.totalTag[i].pop()
          this.indicatoridSingle[i].pop()
          this.tabsData[i].checkAll = false
        }
      }
      this.indicatoridMul = []
      this.searchForm.indicatorids = ''
      this.exportInfo.indicatorids = ''
      this.tagGroups = []
    },
    // 关闭导入指标数据
    handleCloseIndex () {
      this.dateType2 = 1
      this.$refs.upload.fileList = []
    },
    // 分页
    pageChange (pageNum) {
      this.searchForm.pageNum = pageNum
      this.doSearch()
    }
  }
}
</script>
<style lang="less">
.tabs-style1 .ivu-scroll-content {
  margin-left: 2px;
}
.tabs-style1 {
  margin-top: 16px;
  .ivu-tabs-tab {
    padding: 8px 5px;
    margin-right: 16px;
    font-size: 12px;
  }
}
.cancle-hide .ivu-modal-footer button:first-child {
  display: none;
}
.align-left {
  text-align: left;
}
.weekStyle.el-input--prefix .el-input__inner {
  padding-left: 7px;
}
.weekStyle .el-input__prefix {
  left: 135px;
}
.el-picker-panel {
  left: 302px;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #b50029;
  //background-color: #17508A;
  
}
.el-date-table td.today span {
  color: #b50029;
  //color: #17508A;
}
.el-date-picker__header {
  margin: 12px 12px 0;
}
.el-date-picker__header-label {
  font-size: 14px;
}
.el-picker-panel__content {
  margin: 0 15px 15px;
}
</style>
<style lang="less" scoped>
.ivu-checkbox-group-item {
  width: 33.33%;
  margin-right: 0;
  vertical-align: top;
}
.demo-drawer-footer {
  text-align: center;
  margin-top: 48px;
}
.index-selected {
  margin-top: 16px;
  padding-left: 6px;
  border: 1px solid #dcdee2;
  border-radius: 2px;
}
/deep/.ivu-scroll-container {
  overflow-y: auto;
}
/deep/.el-date-editor .el-input__inner {
  height: 32px;
  line-height: 32px;
  font-size: 12px;
}
/deep/.ivu-tag-border.ivu-tag-closable .ivu-icon-ios-close {
  margin-left: 4px !important;
  float: right;
  top: 4px;
}
/deep/.ivu-tag-text {
  display: inline-block;
  vertical-align: middle;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
