<template>
  <div id="searchMasterData">
    <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',
        }"
        :load-data="onLoadData"
        :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="view"
            :disabled="!oneHasSelected"
            @click="getApproveLogLists(selectedRowsId)"
          >审批日志</a-button
          >
          <a-button type="add" :disabled="!oneHasSelected" @click="seeVersionList()">查看版本</a-button>
          <a-button type="add" :disabled="!hasSelected" @click="getMainDataList()">数据分发</a-button>
          <a-button type="add" :disabled="!oneHasSelected" @click="lifeCycle()">生命周期</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"
          :total="total"
          @changeParams="changeParams"
          :selectedRowKeys="selectedRowKeys"
          :selectedRows="selectedRows"
          @getSerachList="getSerachList"
          :dataStatusFormat="dataStatusFormat"
        />
      </div>
      <a-modal width="1100px" v-model="showVersions" :footer="null" :destroyOnClose="true" @ok="getShowVersions">
        <span slot="title" class="header">
          <div class="title">{{ isComparison ? '查看版本' : '版本对比' }}</div>
          <div>模型:{{ modelName }}</div>
          <div>代码:{{ modelCode }}</div>
        </span>
        <Versions
          :versionsDate="versionsDate"
          :typeList="typeList"
          :changeColumns="changeColumns"
          @getShowVersions="getShowVersions"
          @changeShow="changeShow"
          :isComparison="isComparison"
          :tableData="versionsTableData"
          :statusFormat="statusFormat"
          :operationFormat="operationFormat"
          :modelId="modelId"
        />
      </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="showLifecycle"
        title="数据生命周期"
        :footer="null"
        :destroyOnClose="true"
        @ok="getShowLifecyclel"
      >
        <Lifecycle @getShowLifecyclel="getShowLifecyclel" :tableData="lifecycleData" />
      </a-modal>
      <a-modal
        width="1100px"
        v-model="showDataDistribution"
        title="数据分发"
        :destroyOnClose="true"
        :footer="null"
        @ok="getDataDistributionl"
      >
        <DataDistribution
          :dataDistribution="DataDistribution"
          @getDataDistributionl="getDataDistributionl"
          :selectedRows="selectedRows"
          @clearSelectedRows="clearSelectedRows"
        />
      </a-modal>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Table from './components/Table'
import Versions from './components/versions.vue'
import Journal from './components/journal.vue'
import Lifecycle from './components/Lifecycle.vue'
import DataDistribution from './components/dataDistribution.vue'
import { getColumnsByModelId, showTableModel, getTree, getTableDataByModelId, getApproveLogList, getVersionList, getLifeCycle, mainDataList, exportExcel } from '@/api/masterDataManger/searchMasterData'
import {
  getTreeDataByModelId,
   getAttrByModelId
} 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,
    Versions,
    Journal,
    Lifecycle,
    DataDistribution
  },
  data() {
    return {
      versionsTableData: [],
      versionsDate: [
        {
        title: '序号',
        dataIndex: 'key',
        key: 'key'
        },
          {
        title: '创建人',
        dataIndex: 'approver',
        key: 'approver'
        },
          {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime'
        },
        {
        title: '最后更新人',
        dataIndex: 'updateBy',
        key: 'updateBy'
        },
        {
        title: '最后更新时间',
        dataIndex: 'updateTime',
        key: 'updateTime'
        },
        {
        title: '操作类型',
        dataIndex: 'operationType',
        key: 'operationType',
        scopedSlots: { customRender: 'operationType' }
        },
        {
        title: '审批意见',
        dataIndex: 'approveDesc',
        key: 'approveDesc'
        },
        {
        title: '版本号',
        dataIndex: 'operationVersion',
        key: 'operationVersion'
        },
        {
        title: '状态',
        dataIndex: 'processStatus',
        key: 'processStatus',
        scopedSlots: { customRender: 'processStatus' }
        }
      ],
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      showTree: false,
      showlista: [],
      tableData: [],
      lifecycleData: [],
      journalDate: [
        {
        title: '序号',
        dataIndex: 'key',
        key: 'key',
        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: 'approverTel',
        key: 'approverTel'
        },
        {
        title: '送审时间',
        dataIndex: 'createTime',
        key: 'createTime'
        },
        {
        title: '审批时间',
        dataIndex: 'updateTime',
        key: 'updateTime'
        }
      ],
      selectedRowKeys: [],
      searchValue: '',
      selectedRows: [],
      dataTemplate: [],
      columns: [ {
        title: '序号',
        dataIndex: 'attrSort',
        key: 'attrSort',
        align: 'center',
        width: 100,
        customRender: (text, record, index) => {
            return (<span>{++index}</span>)
          },
        fixed: 'left'
      } ],
      changesFrom: [],
      changeColumns: [],
      DataDistribution: [
      '人事系统人员数据接口',
      '财务账号人员接口',
      'OA人员数据接口'
      ],
      showVersions: false,
      showJournal: false,
      showLifecycle: false,
      showDataDistribution: false,
      selectedRowsOne: {},
      selectedState: '',
      statusOptions: [],
      operationTypeData: [],
      dataStatus: [],
      typeList: [],
      treeClome: [],
      isComparison: true,
      modelId: id,
      modelCode: Code,
      isDataProcessing: true,
      modelName,
      total: 0,
      params: {
        pageSize: 10,
        pageNum: 1
      },
      isOuts: Boolean
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0 && this.isOuts
    },
    oneHasSelected() {
      return this.selectedRowKeys.length === 1
    },
    stopHasSelected() {
      return this.selectedState === 1
    }
  },
  created() {
    // this.getTreeDataByModelId()
    // this.getSerachModel()
    this.getTableHeader()
    this.getSerachList()
    this.getShowTableModel()
  },
  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: {
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve()
          return
        }
        getTree({ modelId: this.modelId, pid: treeNode.dataRef.id }).then(res => {
          this.changeName(res.data, this.treeClome.column.modelname, this.treeClome.column.modelid)
           treeNode.dataRef.children = res.data
           this.treeData = [...this.treeData]
          resolve()
        })
        // setTimeout(() => {
        // }, 1000)
      })
    },
    getShowTableModel() {
      showTableModel({ modelId: this.modelId }).then(res => {
        this.$refs['table_wrap'].style.width = '100%'
        res.data.forEach(i => {
          if (i.type === 'tree') {
            // console.log('res', res)
            this.treeClome = i
            this.showTree = true/* 是否显示树结构 */
            this.$refs['table_wrap'].style.width = '74%'
            getTree({ modelId: this.modelId, pid: '0' }).then(treeRes => {
              // console.log('1111111', 1111111)
            this.showTree = true
            this.changeName(treeRes.data, i.column.modelname, i.column.modelid)
            // console.log('treeRes.data', treeRes.data)
            // this.treeData = this.handleTree(treeRes.data, 'id', i.column.modelpid)
            this.treeData = treeRes.data
            // console.log('%c [ this.treeData ]-407', 'font-size:13px; background:pink; color:#bf2c9f;', this.treeData)
            this.addAttr(this.treeData)
            generateList(this.treeData)
            // console.log('%c [ this.treeData ]-406', 'font-size:13px; background:pink; color:#bf2c9f;', this.treeData)
          })
          }
          if (i.type === 'table') {
            i.columns.forEach(item => {
            const obj = {}
            obj.title = item.label
            obj.dataIndex = item.value
            obj.key = item.value
            obj.sorter = item.sortable === 'true'
            obj.fixed = item.fixed === 'true'
            obj.scopedSlots = item.filter === 'true' ? { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: item.value } : ''
            this.columns.push(obj)
            // console.log('%c [ this.columns ]-422', 'font-size:13px; background:pink; color:#bf2c9f;', this.columns)
            })
          }
        })
      })
    },
    changeName(e, key, ids) {
      e.forEach(item => {
        item.name = item[key]
        item.id = item[ids]
      })
    },
    addAttr(data) {
      data.map((item) => {
        item.scopedSlots = { title: 'name' }
        if (item.children) this.addAttr(item.children)
      })
      return data
    },
    // 根据模型ID获取动态值
    getTableHeader() {
      getAttrByModelId({ modelId: this.modelId }).then(res => {
        this.typeList = res.data
        this.dataProcessing1(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)
    },
    // 根据id获取生命周期
    lifeCycle() {
       const data = {
        modelId: this.modelId,
        recordId: this.selectedRowsOne.record_id
      }
      getLifeCycle(data).then(res => {
        this.lifecycleData = res.rows
        this.onShowLifecycle()
      })
    },
    // 查看版本
    seeVersionList() {
        const data = {
        modelId: this.modelId,
        recordId: this.selectedRowsOne.record_id
        }
        getVersionList(data).then(res => {
          this.versionsTableData = this.dataProcessing3(res.rows)
          this.dataTemplate = JSON.parse(res.rows[0].logJson)
          if (this.isDataProcessing) {
              // this.dataProcessing1(JSON.parse(res.rows[0].logJson))
              this.isDataProcessing = false
              // console.log(`this.changeColumns`, this.changeColumns)
              // console.log(` this.changesFrom`, this.changesFrom)
          }
          this.dataProcessing2(res.rows)
          this.onShowVersions()
        })
    },
    // 审批日志
    getApproveLogLists() {
      const data = {
        modelId: this.modelId,
        recordId: this.selectedRowsOne.record_id
      }
      getApproveLogList(data).then((res) => {
        this.showlista = res.rows
      })
        this.onShow()
    },
    // 根据模型id查找数据分发接口
    getMainDataList() {
      const data = {
        modelId: this.modelId
      }

      mainDataList(data).then(res => {
        console.log('res.rows', res.rows)
        this.DataDistribution = res.rows.filter(item => {
          if (item.status !== '1') {
            return item
          }
        })
        this.onShowDataDistribution()
      })
    },
    // 根据模型id获取主数据表数据
    getSerachList(a) {
      const data = { ...this.params, modelId: id }
      getTableDataByModelId(data).then(res => {
        this.total = res.total * 1
        this.tableData = res.rows
      })
    },
    // 根据模型id获取主数据表结构
    getSerachModel() {
        const data = {
          modelId: this.modelId
        }
        getColumnsByModelId(data).then(res => {
        this.dataProcessing4(res.data)
        })
    },
    // 数据处理4
    dataProcessing4(data) {
      data.forEach(item => {
         if (item.COLUMN_NAME === 'dataStatus') {
           const obj = {}
          obj.title = item.COLUMN_COMMENT
          obj.dataIndex = item.COLUMN_NAME
          obj.key = item.COLUMN_NAME

          obj.scopedSlots = { customRender: 'dataStatus' }
          this.columns.push(obj)
        } else if (item.COLUMN_NAME !== 'record_id') {
        const obj = {}
        obj.title = item.COLUMN_COMMENT
        obj.dataIndex = item.COLUMN_NAME
        obj.key = item.COLUMN_NAME
        if (item.COLUMN_COMMENT.length > 8) { obj.ellipsis = true }
        if (item.COLUMN_NAME === 'createTime' || item.COLUMN_NAME === 'updateTime') {
          obj.scopedSlots = { customRender: 'time' }
        //     obj.fixed = 'right'
        //     obj.width = 100
        //     obj.ellipsis = true
        }
        this.columns.push(obj)
        }
      })
    },
     // 数据处理2
    dataProcessing2(data) {
     data.forEach(item1 => {
        Object.keys(JSON.parse(item1.logJson)).forEach(item2 => {
          item1[item2] = JSON.parse(item1.logJson)[item2]
        })
        // JSON.parse(item1.logJson).forEach(item2 => {
        //    item1[item2.attr_code] = item2.value
        // })
      })
    },
    // 数据处理1
    dataProcessing1(data) {
      // console.log('%c [ data ]-516', 'font-size:13px; background:pink; color:#bf2c9f;', 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.versionsDate.splice(-8, 0, obj2)
        arrs.push(obj1)
        this.changeColumns.push(obj2)
      })
      // console.log(`this.versionsDate`, this.versionsDate)
      this.changesFrom = arrs
    },
    // 数据处理3
    dataProcessing3(data) {
        for (var i = 0; i < data.length; i++) {
          data[i].num = i + 1
        }
        return data
    },
    goModelView() {
				this.$router.push(
					{ path: basePath,
						query: {
							redirectPath: this.$route.path
						}
					}
				)
    },
    // 数据分发判断
    isOut(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].dataStatus === '0') {
          this.isOuts = true
        } else {
          this.isOuts = false
          break
        }
      }
    },
    getShowVersions(showVersions) {
      this.showVersions = showVersions
    },
    getShowJournal(showJournal) {
      this.showJournal = showJournal
    },
    getDataDistributionl(showDataDistribution) {
      this.showDataDistribution = showDataDistribution
    },
    getShowLifecyclel(showLifecycle) {
      this.showLifecycle = showLifecycle
    },
    // 清空选择
    clearSelectedRows() {
      const selectedRowKeys = []
      const selectedRows = []
      this.getSelectedRowKeys(selectedRowKeys, selectedRows)
    // console.log('清空啦！！！！！')
    },
    addFun() {
      this.showState = true
      // console.log('this.showState: ', this.showState)
    },
    getSelectedRowKeys(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRowsId = []
      this.selectedRows = selectedRows
      this.isOut(selectedRows)
      console.log('selectedRows: ', 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 = ''
      }
    },
    changeShow(bool) {
      this.isComparison = bool
    },
    onShow() {
      this.showJournal = true
    },
    onShowVersions() {
      this.showVersions = true
    },
    onShowDataDistribution() {
      this.showDataDistribution = true
    },
    onShowLifecycle() {
      this.showLifecycle = true
    },
    handleButtonClick() {

    },
    handleMenuClick() {
      const data = {
        modelId: this.modelId,
        pageNum: 1,
        pageSize: 10
      }
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk() {
          return exportExcel(data)
            .then(response => {
              that.download(response.msg)
              that.$message.success(
                '导出成功',
                3
              )
            })
        },
        onCancel() {}
      })
    },
    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, this.treeClome.column.modelid, selectedKeys[0])
      info.node.onExpand()
    },
    changeParams(pageNum) {
      this.$set(this.params, 'pageNum', pageNum)
    }
  },
  watch: {
    params: {
      deep: true,
      immediate: false,
      handler(val) {
        this.getSerachList()
      }
    }
  }
}
</script>

<style scoped lang="less">
#searchMasterData {
  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: -18px;
        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;
    background: #fff;
    cursor: pointer;
    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: #fff;
  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;
      background: #fff;
      cursor: pointer;
      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>
