<template>
  <div id="changeMasterData">
    <div class="tree-wrap" v-if="showTree">
      <h2>主数据分类</h2>
      <div class="title">
        <a-input-search
          placeholder="请输入类别名称/代码"
          style="width: 200px"
          @change="onSearch" />
        <div class="action">
          <div @click="onExpandCloseAll">全部收起</div>
        </div>
      </div>
      <a-tree
        v-if="treeData.length>0"
        :replaceFields="{
          title:'name',
          key: 'id',
          children:'children',
          value:'id'
        }"
        show-line
        :defaultExpandAll="true"
        :expandedKeys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onClassSelect">
        <template slot="name" slot-scope="{ name }">
          <span v-if="name.indexOf(searchValue) > -1">
            {{ name.substr(0, name.indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ name }}</span>
        </template>
        <a-icon slot="switcherIcon" type="down" />
      </a-tree>
    </div>
    <div class="table-wrap" ref="table_wrap">
      <div class="header">
        <div class="title">主数据变更</div>
        <div>模型:{{ modelName }}</div>
        <div>代码:{{ modelCode }}</div>
        <div class="change-view" @click="goModelView"><a-icon type="swap" /></div>
      </div>
      <div class="main">
        <div class="table-operations">
          <a-button type="add" @click="dataChange">数据变更</a-button>
          <a-button type="add" @click="stateChange">状态变更</a-button>
          <a-button type="delete" :disabled="!hasSelected" @click="deleteFun(selectedRowsId)">删除</a-button>
          <a-button type="delete" :disabled="!onCancel" @click="cancel(selectedRowsId)">撤消</a-button>
          <a-button type="edit" :disabled="!oneHasSelected" @click="onShowAdd">编辑</a-button>
          <a-button type="view" :disabled="!onJournal" @click="getApproveLogList(selectedRowsId)">审批日志</a-button>
          <a-button type="work" :disabled="!stopHasSelected" @click="getFile(selectedRowsId)">提交</a-button>
        <!-- <a-dropdown-button @click="handleButtonClick">
          更多操作
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="3"> <a-icon type="cloud-download" />数据导出</a-menu-item>
          </a-menu>
        </a-dropdown-button> -->
        </div>
        <Table
          @getSelectedRowKeys="getSelectedRowKeys"
          :tableData="tableData"
          :columns="columns"
          :selectedRowKeys="selectedRowKeys"
          :selectedRows="selectedRows"
          :total="total"
          @changeParams="changeParams"
          @getChangeList="getChangeList"
          :statusFormat="statusFormat"
          :operationFormat="operationFormat"
          :dataStatusFormat="dataStatusFormat"
        />
      </div>
      <a-modal
        width="900px"
        v-model="showState"
        :footer="null"
        :destroyOnClose="true"
        @ok="getDateChange">
        <span slot="title" class="header">
          <div class="title">主数据变更</div>
          <div>模型:{{ modelName }}</div>
          <div>代码:{{ modelCode }}</div>
        </span>
        <data-change
          :columns="changeColumns"
          :selectedRows="selectedRows"
          @getDateChange="getDateChange"
          :changesFrom="changesFrom"
          :modelId="modelId"
          :isHint="isHint"
          @changeShow="changeShow"
          :modelCode="modelCode"
          :dataTemplate="dataTemplate"
          @getChangeList="getChangeList"
        />
      </a-modal>

      <a-modal
        width="1100px"
        v-model="showJournal"
        title="审批日志"
        :destroyOnClose="true"
        :footer="null"
        @ok="getShowJournal">
        <journal
          :journalDate="journalDate"
          @getShowJournal="getShowJournal"
          :tableData="showlista"
          :statusFormat="statusFormat"
          :operationFormat="operationFormat"
        />
      </a-modal>

      <a-modal
        width="1100px"
        v-model="showStateChange"
        :footer="null"
        :destroyOnClose="true"
        @ok="getShowStateChange">
        <span slot="title" class="header">
          <div class="title">主数据变更</div>
          <div>模型:{{ modelName }}</div>
          <div>代码:{{ modelCode }}</div>
        </span>
        <state-change
          :journalDate="changeColumns"
          @getShowStateChange="getShowStateChange"
          @changeShow="changeShow"
          :tableData="data"
          :modelCode="modelCode"
          :modelId="modelId"
          :isHint="isHint"
          @getChangeList="getChangeList"
        />
      </a-modal>
      <a-modal
        width="1100px"
        v-model="showAdd"
        title="主数据变更"
        :footer="null"
        :destroyOnClose="true"
        @ok="getShowAdd">
        <Add
          :selectedRows="selectedRows[0]"
          :changesFrom="changesFrom"
          :modelId="modelId"
          :modelCode="modelCode"
          :recordId="this.selectedRowsOne.recordId"
          :id="this.selectedRowsOne.id"
          @getShowAdd="getShowAdd"
          @getChangeList="getChangeList"
          @clearSelectedRows="clearSelectedRows"
        />
      </a-modal>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Table from './components/Table'
import dataChange from './components/dataChange.vue'
import journal from './components/journal.vue'
import stateChange from './components/stateChange.vue'
import Add from '../addingMasterData/components/add.vue'
// import { getChangeableData } from '@/api/masterDataManger/changeMasterData'
import {
  changeList,
  removeMasterData,
  getApproveLog,
  recallMasterData,
  mdDataBatchSub,
  getAttrByModelId,
  getTreeDataByModelId
} from '@/api/masterDataManger/addingMasterData'
const basePath = '/modelView/modelView'
var id = null
var modelName = null
var Code = null
const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some(item => item.id === key)) {
        parentKey = node.id
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
const dataList = []
const generateList = data => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const id = node.id
    const name = node.name
    dataList.push({ id, name: name })
    if (node.children) {
      generateList(node.children)
    }
  }
}
export default {
  beforeRouteEnter(to, from, next) {
    id = to.query.id
    modelName = to.query.modelName
    Code = to.query.modelCode
    if (!id) {
      next(
        { path: basePath,
          query: {
            redirectPath: to.path
          }
        }
      )
    } else {
      next()
    }
  },
  beforeRouteLeave(to, from, next) {
    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
    this.$destroy(true)
    next()
  },
  components: {
    Table,
    dataChange,
    journal,
    stateChange,
    Add
  },
  data() {
    return {
      modelName,
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      searchValue: '',
      showTree: false,
      showlista: [
        {
        key: '1',
        operateType: '新增',
        approvalState: '审核通过',
        approvalIdea: '通过！加油干！',
        approvalMan: 'admin',
        approvalPhone: '12345678',
        approvalFTime: '2021-12-01',
        approvalTime: '2021-12-04'
        },
        {
        key: '2',
        operateType: '变更',
        approvalState: '审核通过',
        approvalIdea: '通过！加油干！',
        approvalMan: 'admin',
        approvalPhone: '12345678',
        approvalFTime: '2021-12-01',
        approvalTime: '2021-12-04'
        },
        {
        key: '3',
        operateType: '变更',
        approvalState: '审核驳回',
        approvalIdea: '没有原因 ，自己想',
        approvalMan: 'admin',
        approvalPhone: '12345678',
        approvalFTime: '2021-12-01',
        approvalTime: '2021-12-04'
        }
      ],
      tableData: [],
      journalDate: [
          {
          title: '序号',
          dataIndex: 'attrSort',
          key: 'attrSort',
          align: 'center',
          customRender: (text, record, index) => {
              return (<span>{++index}</span>)
            }
          },
          {
          title: '操作类型',
          dataIndex: 'operationType',
          key: 'operationType',
          scopedSlots: { customRender: 'operationType' }
          },
          {
          title: '审批状态',
          dataIndex: 'processStatus',
          key: 'processStatus',
          scopedSlots: { customRender: 'processStatus' }
          },
          {
          title: '审批意见',
          dataIndex: 'approveDesc',
          key: 'approveDesc'
          },
          {
          title: '审批人',
          dataIndex: 'approver',
          key: 'approver'
          },
          {
          title: '审批人电话',
          dataIndex: 'approvalPhone',
          key: 'approvalPhone'
        },
        {
          title: '送审时间',
          dataIndex: 'createTime',
          key: 'createTime'
          },
          {
          title: '审批时间',
          dataIndex: 'updateTime',
          key: 'updateTime'
          }
      ],
      selectedRowKeys: [],
      selectedRows: [],
      columns: [
          {
          title: '序号',
          dataIndex: 'num',
          key: 'num',
          align: 'center',
          customRender: (text, record, index) => {
              return (<span>{++index}</span>)
            },
        fixed: 'left',
        width: 100
        },

        {
          title: '流程状态',
          dataIndex: 'processStatus',
          key: 'processStatus',
          fixed: 'left',
          width: 100,
          // customRender: (text, record, index) => {
          //   if (text === '0') {
          //     return <span>仅保存</span>
          //   } else if (text === '1') {
          //     return <span>校验错误</span>
          //   } else if (text === '2') {
          //     return <span>审核中</span>
          //   } else if (text === '3') {
          //     return <span>审批通过</span>
          //   } else if (text === '4') {
          //     return <span>审批驳回</span>
          //   }
          // },
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'processStatus'
          },
          onFilter: (value, record) =>
            record.processStatus
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
              onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '审批意见',
          dataIndex: 'approveDesc',
          key: 'approveDesc',
          // width: 100
          ellipsis: true
        },
        {
          title: '操作类型',
          dataIndex: 'operationType',
          key: 'operationType',
          // customRender: (text, record, index) => {
          //   if (text === '0') {
          //     return <span>新增</span>
          //   } else if (text === '1') {
          //     return <span>变更</span>
          //   } else if (text === '2') {
          //     return <span>启用</span>
          //   } else if (text === '3') {
          //     return <span>停用</span>
          //   }
          // },
          scopedSlots: {
                  filterDropdown: 'filterDropdown',
                  filterIcon: 'filterIcon',
                  customRender: 'operationType'
                },
                onFilter: (value, record) =>
                  record.operationType
                    .toString()
                    .toLowerCase()
                    .includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: visible => {
                  if (visible) {
                    setTimeout(() => {
                      this.searchInput.focus()
                    }, 0)
                  }
                }
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          key: 'createBy'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime'
          // ellipsis: true,
          // fixed: 'right',
          // width: 100
        },
        {
          title: '最后更新人',
          dataIndex: 'updateBy',
          key: 'updateBy'
        },
        {
          title: '最后更新时间',
          dataIndex: 'updateTime',
          key: 'updateTime'
        },
        {
          title: '状态',
          dataIndex: 'dataStatus',
          key: 'dataStatus',
          // fixed: 'right',
          // width: 100,
          scopedSlots: {
                  filterDropdown: 'filterDropdown',
                  filterIcon: 'filterIcon',
                  customRender: 'dataStatus'
          },
          onFilter: (value, record) =>
                  record.operationType
                    .toString()
                    .toLowerCase()
                    .includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: visible => {
                  if (visible) {
                    setTimeout(() => {
                      this.searchInput.focus()
                    }, 0)
                  }
                }
        }
      ],
      changesFrom: [],
      showState: false,
      showJournal: false,
      showStateChange: false,
      showAdd: false,
      selectedRowsOne: {},
      selectedState: '',
      column: [
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key'

        },
        {
          title: '计量单位中文名称',
          dataIndex: 'measuringUnitCN',
          key: 'measuringUnitCN',
          scopedSlots: { customRender: 'measuringUnitCN' }
        },
        {
          title: '计量单位英文名称',
          dataIndex: 'measuringUnitEN',
          key: 'measuringUnitEN',
          scopedSlots: { customRender: 'measuringUnitEN' }

        },
        {
          title: '计量单位国际符号',
          dataIndex: 'measuringUnitIOS',
          key: 'measuringUnitIOS',
          scopedSlots: { customRender: 'measuringUnitIOS' }

        },
        {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
        }
      ],
      modelId: id,
      modelCode: Code,
      isHint: true,
      isDataProcessing: true,
      changeColumns: [],
      dataTemplate: [],
      statusOptions: [],
      operationTypeData: [],
      dataStatus: [],
      data: [],
      isSelect: Boolean,
      iscancel: Boolean,
      isSubmit: Boolean,
      total: 0,
      params: {
        pageSize: 10,
        pageNum: 1
      },
      title: '主数据变更'
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0 && this.isSelect
    },
    onCancel() {
      return this.selectedRowKeys.length > 0 && this.iscancel
    },
    oneHasSelected() {
      return this.selectedRowKeys.length === 1 && this.isSelect && this.selectedRowsOne.operationType === '1'
    },
    onJournal() {
      return this.selectedRowKeys.length === 1
    },
    stopHasSelected() {
      return this.selectedRowKeys.length > 0 && this.isSubmit && this.selectedRowsOne.operationType === '1'
    }

  },
  created() {
    this.getTreeDataByModelId()
    this.getChangeList()
    this.getTableHeader()
  },
  mounted() {
    this.getDicts('process_status_dict').then(response => {
      this.statusOptions = response.data
    })
    this.getDicts('operation_type_dict').then(response => {
      this.operationTypeData = response.data
    })
    this.getDicts('md_data_status').then(response => {
      this.dataStatus = response.data
    })
  },
  methods: {
    addAttr(data) {
      data.map((item) => {
        item.scopedSlots = { title: 'name' }
        if (item.children) this.addAttr(item.children)
      })
      return data
    },
    // 获取table表头
    getTableHeader() {
      getAttrByModelId({ modelId: this.modelId }).then(res => {
        this.dataProcessing(res.data)
      })
    },
     // 执行执行状态字典翻译
    statusFormat(row) {
      return this.selectDictLabel(this.statusOptions, row.processStatus)
    },
    operationFormat(row) {
      return this.selectDictLabel(this.operationTypeData, row.operationType)
    },
    dataStatusFormat(row) {
      return this.selectDictLabel(this.dataStatus, row.dataStatus)
    },
    // 清除选中状态
    clearSelectedRows() {
      const selectedRowKeys = []
      const selectedRows = []
      this.getSelectedRowKeys(selectedRowKeys, selectedRows)
      // console.log('清空啦！！！！！')
    },
      // 主数据变更列表查询
    getChangeList(a, b) {
      var that = this
      const formData = new FormData()
      const obj = { ...this.params, modelId: id }
      Object.keys(obj).forEach((key) => {
        if (obj[key] instanceof Array) {
          obj[key].forEach((item) => {
            formData.append(key, item)
          })
          return
        }
        formData.append(key, obj[key])
      })
      changeList(formData).then(res => {
      that.total = res.total * 1
      that.tableData = that.dataProcessing3(res.rows)
      that.dataTemplate = JSON.parse(res.rows[0].logJson)
        if (that.isDataProcessing) {
          that.isDataProcessing = false
        }
        that.dataProcessing2(res.rows)
      })
    },
      // 数据处理3
    dataProcessing3(data) {
      for (var i = 0; i < data.length; i++) {
        data[i].num = i + 1
      }
      return data
    },
       // 删除数据
    deleteFun(id) {
      var that = this
      const formData = new FormData()
      formData.append('ids', id)
      formData.append('modelId', this.modelId)
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk() {
          return removeMasterData(formData).then(() => {
            that.clearSelectedRows()
            that.getChangeList()
            that.$message.success('删除成功', 3)
          })
        }
      })
    },
    // 数据处理
    dataProcessing2(data) {
      data.forEach(item1 => {
       Object.keys(JSON.parse(item1.logJson)).forEach(item2 => {
          item1[item2] = JSON.parse(item1.logJson)[item2]
        })
      })
    },
    // 数据处理
    dataProcessing(data) {
      const arrs = []
      data.forEach((item, index) => {
        const obj1 = {}
        obj1.label = item.attrName
        obj1.prop = item.attrCode
        obj1.name = item.attrCode
        obj1.id = index
        const obj2 = {}
        obj2.title = item.attrName
        obj2.dataIndex = item.attrCode
        obj2.key = item.attrCode

        this.columns.splice(-5, 0, obj2)
        arrs.push(obj1)
        this.changeColumns.push(obj2)
      })
      this.changesFrom = arrs
    },
    // 审批日志
    getApproveLogList(id) {
      const formData = new FormData()
      formData.append('recordId', this.selectedRowsOne.recordId)
      formData.append('modelId', this.modelId)
      getApproveLog(formData).then((res) => {
        this.showlista = res.rows
      })
        this.showJournal = true
    },
     // 撤消审核中的数据
    cancel(id) {
      var that = this
      const formData = new FormData()
      formData.append('ids', id)
      formData.append('modelId', this.modelId)
      this.$confirm({
        title: '确认撤消所选中数据?',
        onOk() {
          return recallMasterData(formData).then(() => {
            that.clearSelectedRows()
            that.getChangeList()
            that.$message.success('撤消成功', 3)
          })
        }
      })
    },
    // 提交审核
    getFile() {
      const data = []
       this.selectedRows.forEach(item => {
        data.push({
        id: item.id,
        logJson: item.logJson,
        modelId: this.modelId,
        modelCode: this.modelCode,
        operationType: item.operationType,
        recordId: item.recordId
        })
      })
      mdDataBatchSub(data).then(res => {
        this.clearSelectedRows()
        this.getChangeList()
      })
    },
    getDateChange(showState) {
      this.showState = showState
    },
    getShowJournal(showJournal) {
      this.showJournal = showJournal
    },
    getShowAdd(data) {
      this.showAdd = data
    },
    getShowStateChange(showStateChange) {
      this.showStateChange = showStateChange
    },
    // 提交判断
    isSubmits(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].processStatus === '0') {
          this.isSubmit = true
        } else {
          this.isSubmit = false
          break
        }
      }
    },
    // 撤销删除判断
    isCancel(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].processStatus === '2') {
          this.iscancel = true
        } else {
          this.iscancel = false
          break
        }
      }
    },
    // 多选删除判断
    isDelete(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].processStatus === '2' || data[i].processStatus === '3') {
          this.isSelect = false
          break
        } else {
          this.isSelect = true
        }
      }
    },
    goModelView() {
      this.$router.push(
        { path: basePath,
          query: {
            redirectPath: this.$route.path
          }
        }
      )
    },
    dataChange() {
      this.showState = true
      // console.log('this.showState: ', this.showState)
    },
    getSelectedRowKeys(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowsId = []
      this.selectedRows = selectedRows

      console.log('selectedRows: ', selectedRows)

      this.isDelete(selectedRows)
      this.isCancel(selectedRows)
      this.isSubmits(selectedRows)

      selectedRows.forEach((item) => {
          this.selectedRowsId.push(item.id)
      })
          // console.log('selectedRowsId: ', this.selectedRowsId)

      if (selectedRows.length === 1) {
        this.selectedRowsOne = selectedRows[0]
        this.selectedState = this.selectedRowsOne.state
        // console.log('this.selectedState: ', this.selectedState)
      } else {
        this.selectedState = ''
      }
    },
    updateFun() {
    },
    onchange() {
    },
    onShow() {
      this.showJournal = true
    },
    stateChange() {
      this.showStateChange = true
      // 获取当前可变更数据接口
    },
    onShowAdd() {
      this.showAdd = true
    },
    changeShow(bool) {
      this.isHint = bool
    },
    handleButtonClick() {

    },
    handleMenuClick() {

    },
    oooo() {
      this.abcd = false
    },
    getTreeDataByModelId() {
      getTreeDataByModelId({ modelId: id }).then((res) => {
        if (res.code === 200) {
          this.showTree = !(+res.type)/* 是否显示树结构 */
          this.treeData = !(+res.type) ? this.addAttr(res.data) : []
          this.$refs['table_wrap'].style.width = !(+res.type) ? '74%' : '100%'
          generateList(this.treeData)
        }
      })
    },
    onSearch(e) { /* 搜索树结构 */
      const value = e.target.value
      const expandedKeys = dataList
      .map(item => {
        if (item.name.indexOf(value) > -1) {
          return getParentKey(item.id, this.treeData)
        }
        return null
      })
      .filter((item, i, self) => item && self.indexOf(item) === i)
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true
      })
    },
    onExpandCloseAll() { /* 关闭所有树结构 */
      this.expandedKeys = []
    },
    onExpand(selectedKeys) { /* 父节点展开 */
      this.expandedKeys = selectedKeys
    },
    onClassSelect(selectedKeys, info) { /* 选择树结构 */
      selectedKeys[0] && this.$set(this.params, 'nodeId', selectedKeys[0])
      info.node.onExpand()
    },
    changeParams(pageNum) {
      this.$set(this.params, 'pageNum', pageNum)
    }
  },
  watch: {
    params: {
      deep: true,
      immediate: false,
      handler(val) {
        this.getChangeList()
      }
    }
  }

}
</script>

<style scoped lang="less">
#changeMasterData{
  padding: 20px;
  display: flex;
  justify-content: space-around;
  .tree-wrap{
    width: 25%;
    margin-right: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    h2{
      position: relative;
      color: #000;
			font-weight: 700;
			font-size: 20px;
      &::before{
        content: '';
        width: 4px;
        height: 26px;
        background-color: #3b75f5;
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  .title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .action{
    display: flex;
    justify-content: space-around;
    >div{
      margin-left: 20px;
      cursor: pointer;
      &:hover{
        color: rgb(0, 101, 189);
      }
    }
  }
}
 .header{
  display: flex;
  align-items: center;
  position: relative;
  padding: 0px 20px;
  >div{
    font-size: 18px;
    color: #777;
    margin-right: 14px;
    font-weight: 700;
  }
  .title{
    color: #000;
    font-weight: 700;
    font-size: 20px;
    margin-right: 20px;
  }
  .change-view{
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-size: 1.5em;
    font-weight: 700;
  }
    }
.table-wrap {
  min-width: calc(100% - 25%);
  max-width: 100%;
  width: auto;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 25px 0;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  .header{
  display: flex;
  align-items: center;
  position: relative;
  padding: 0px 20px;
  &::before{
    content: '';
    width: 4px;
    height: 26px;
    background-color: #3b75f5;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  >div{
    font-size: 18px;
    color: #777;
    margin-right: 14px;
    font-weight: 700;
  }
  .title{
    color: #000;
    font-weight: 700;
    font-size: 20px;
    margin-right: 20px;
  }
  .change-view{
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-size: 1.5em;
    font-weight: 700;
  }
  }
  .main{
    padding: 0 40px;
    .table-operations {
      margin: 30px 0 35px;

      .ant-btn-primary-disabled, .ant-btn-primary.disabled, .ant-btn-primary[disabled], .ant-btn-primary-disabled:hover, .ant-btn-primary.disabled:hover, .ant-btn-primary[disabled]:hover, .ant-btn-primary-disabled:focus, .ant-btn-primary.disabled:focus, .ant-btn-primary[disabled]:focus, .ant-btn-primary-disabled:active, .ant-btn-primary.disabled:active, .ant-btn-primary[disabled]:active, .ant-btn-primary-disabled.active, .ant-btn-primary.disabled.active, .ant-btn-primary[disabled].active {
          opacity: 0.3;
      }
    }
  }

}
</style>
