<template>
  <div class="materialInformation">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-fileprotect"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="content">
      <div class="left-tree">
        <div class="common-table-content btn-pagenation">
          <el-table
            :border="true"
            stripe
            fit
            size="mini"
            v-loading="tableLoading"
            ref="multiple"
            :data="tableData"
            @row-click="handleBtn"
            height="100%"
            @select="(selection, row) => handleBtn(row)"
            @selection-change="handleSelectionChange"
            @select-all="selectAll"
            highlight-current-row
          >
            <el-table-column
              type="selection"
              min-width="50px"
              align="center"
              fixed="left"
            ></el-table-column>
            <el-table-column
              min-width="20%"
              label="供应商名称"
              align="center"
              resizable
            >
              <template v-slot="{row}">
                <template>
                  <el-button type="text" size="small" @click="detailBtn(row)">{{
                    row.quotationCompanyName
                  }}</el-button>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              show-overflow-tooltip
              min-width="15%"
              align="center"
              label="报价金额(元)"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="totalScore"
              min-width="10%"
              label="得分"
              align="center"
              resizable
            >
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" style="text-align: center" class="footer">
          <el-button
            type="primary"
            size="small"
            :loading="saving"
            @click="handleSave"
            >提交所有评标</el-button
          >
        </div>
      </div>
      <div class="common-page-shadow">
        <div class="material-management">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="评分管理" name="first"> </el-tab-pane>
            <el-tab-pane label="招标文件" name="five"></el-tab-pane>
            <el-tab-pane label="投标文件" name="second"></el-tab-pane>
            <el-tab-pane label="澄清提问" name="question"></el-tab-pane>
            <el-tab-pane label="补遗文件" name="addendum"></el-tab-pane>
          </el-tabs>
        </div>
        <el-row
          class="common-table-container flex searchPanel"
          :style="SearchPanel"
        >
          <el-col :span="24" class="common-table-wrapper">
            <div class="score-table" v-if="activeName === 'first'">
              <div class="common-search-container" ref="contentPanel">
                <el-form
                  ref="form"
                  :model="searchForm"
                  label-width="auto"
                  label-position="right "
                  :inline="true"
                  type="flex"
                  justify="left"
                >
                  <el-form-item label="投标单位:">
                    <span>{{ searchForm.name }}</span>
                  </el-form-item>
                  <el-form-item label="评标方式:">
                    {{ searchForm.manner === 1 ? '综合评标法' : '最低评标法' }}
                  </el-form-item>
                </el-form>
                <div style="margin-left: 100px">
                  <el-button
                    icon="el-icon-thumb"
                    @click="saveEva"
                    size="small"
                    :loading="loadingBtn"
                    type="primary"
                    >保存评标</el-button
                  >
                </div>
              </div>
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">评分表</div>
                </div>
              </div>
              <div class="table">
                <el-table
                  :border="true"
                  stripe
                  fit
                  size="mini"
                  row-key="id"
                  ref="multipleSelection"
                  default-expand-all
                  :summary-method="getSummaries"
                  show-summary
                  v-loading="loading"
                  :data="scoreData"
                  :tree-props="{
                    children: 'children',
                    hasChildren: 'hasChildren',
                  }"
                >
                  <el-table-column
                    prop="evaluationItemPname"
                    min-width="100px"
                    label="评分大项"
                    align="center"
                    resizable
                  >
                  </el-table-column>
                  <el-table-column
                    label="评分细项"
                    min-width="140"
                    prop="evaluationItemCode"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.evaluationItemCode }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="评分标准"
                    min-width="140"
                    prop="evaluationStandard"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.evaluationStandard }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="分值"
                    min-width="80"
                    prop="evaluationScore"
                  >
                    <template slot-scope="scope">
                      <div v-if="!scope.row.children">
                        {{ scope.row.evaluationScore }}
                      </div>
                      <div v-else>
                        {{ scope.row.evaluationScore }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="得分" min-width="140" prop="score">
                    <template slot-scope="scope">
                      <el-input-number
                        v-model="scope.row.score"
                        controls-position="right"
                        :min="0"
                        :precision="2"
                        :disabled="objData.isEva == 0 ? false : true"
                        v-if="!scope.row.children"
                        @change="handleInput(scope.row)"
                        :max="scope.row.evaluationScore"
                      ></el-input-number>
                      <div v-else>
                        {{ scope.row.score }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- <div slot="footer" class="footer">
                <el-button
                  type="primary"
                  size="small"
                  :loading="saving"
                  @click="handleSave"
                  >提交所有评标</el-button
                >
              </div> -->
            </div>
            <div class="quote-content" v-if="activeName === 'second'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">投标文件</div>
                </div>
              </div>
              <div class="content">
                <el-table class="down" :data="bidFileList" border stripe>
                  <el-table-column
                    prop="createOrgName"
                    label="投标供应商"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    key="second"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="quote-content" v-if="activeName === 'question'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">澄清提问</div>
                </div>
              </div>
              <div class="content">
                <el-table
                  class="down"
                  :data="clarifyList"
                  border
                  height="100%"
                  :key="activeName == 1"
                  stripe
                >
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-table
                        :key="'childTable' + props.row.id"
                        header-cell-class-name="selectAllbtnDis"
                        :ref="'childTable' + props.row.id"
                        :data="props.row.answerList"
                        style="width: 100%; margin-left: 25px"
                      >
                        <el-table-column label="澄清企业" prop="operateOrgName">
                        </el-table-column>
                        <el-table-column label="澄清描述" prop="describe">
                        </el-table-column>
                        <el-table-column label="澄清时间" prop="operateTime">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="附件"
                        ></el-table-column>
                        <el-table-column width="120px" label="操作">
                          <template slot-scope="scope">
                            <el-button
                              size="small"
                              v-if="scope.row.accessoryList.length != 0"
                              type="text"
                            >
                              <a
                                @click="
                                  downloadFile(scope.row.name, scope.row.url)
                                "
                                >下载</a
                              >
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operateOrgName"
                    label="提问企业"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="describe"
                    label="描述"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="operateTime"
                    label="提出时间"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column width="120px" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="small"
                        v-if="scope.row.accessoryList.length != 0"
                        type="text"
                      >
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="quote-content" v-if="activeName === 'addendum'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">补遗文件</div>
                </div>
              </div>
              <div class="content">
                <el-table class="down" :data="supplementList" border stripe>
                  <el-table-column
                    prop="describe"
                    label="描述"
                  ></el-table-column>
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column width="150px" label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="quote-content" v-if="activeName === 'five'">
              <div class="rows">
                <div class="rows-left">
                  <div class="rows-hr"></div>
                </div>
                <div class="rows-title">
                  <div class="text-overflow">招标文件</div>
                </div>
              </div>
              <div class="content">
                <el-table class="down" :data="TenderList" border stripe>
                  <el-table-column
                    prop="name"
                    label="文件名称"
                  ></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button size="small" type="text">
                        <a @click="downloadFile(scope.row.name, scope.row.url)"
                          >下载</a
                        >
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <procurementUnits ref="troubleshooting" />
  </div>
</template>

<script>
import procurementUnits from './procurementUnits.vue'
import {getMergeCells} from '@/utils/mergingTable.js'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import basicData from '@/api/basicData'
import pagination from '@/components/pagination'
import {TableMixin} from '@/mixins/tableMixin'
import routerManagement from '@/api/BasicDataManagement/routerManagement.js'
export default {
  name: 'evaluationManagement',
  components: {
    pagination,
    Breadcrumb,
    procurementUnits,
  },
  mixins: [TableMixin],
  data() {
    return {
      breadcrumbOpt: [
        {breadcrumbName: '项目采购'},
        {breadcrumbName: '综合评标法'},
      ],
      loading: false,
      tableLoading: false,
      activeName: 'first',
      handleSaveActive: '',
      clarifyList: [],
      loadingBtn: false,
      saving: false,
      tableData: [],
      bidFileList: [], //投标文件
      TenderList: [], //招标文件
      supplementList: [], //补遗文件
      objData: {},
      form: {},
      objScore: {},
      mannerList: [
        {label: '综合评标法', value: 1},
        {label: '最低评标法', value: 0},
      ],
      searchForm: {manner: 1, name: ''}, // 顶部搜索对象
      scoreData: [],
      selectArr: [],
    }
  },
  mounted() {},
  created() {
    this.params = this.$route.params
    console.log(this.params, 'params')
    this.loadData()
  },
  methods: {
    // 切换tab栏选项
    handleClick() {
      if (this.activeName == 'first') {
        // this.getScoreData()
      }
      if (this.activeName == 'second') {
        this.bidFileList = []
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalId',
            relation: 'AND',
            value: this.$route.params.ids,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalType',
            relation: 'AND',
            value: 1,
          }
        )
        this.bidFileList = []
        this.$http
          .post('${portal}/bidDocuments/v1/page', parmas)
          .then((res) => {
            let data = res.data.value.rows
            data.forEach((item) => {
              if (item.accessoryList && item.accessoryList.length != 0) {
                item.accessoryList.forEach((val) => {
                  if (item.id == val.sourceId) {
                    this.bidFileList.push(val)
                  }
                })
              }
            })
          })
      }
      if (this.activeName == 'question') {
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push({
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'projectApprovalId',
          relation: 'AND',
          value: this.$route.params.ids,
        })
        this.$http
          .post('${portal}/clarifyQuestions/v1/pageAndAnswer', parmas)
          .then((res) => {
            this.clarifyList = []
            if (res.data.state) {
              this.clarifyList = res.data.value.rows
              this.clarifyList.forEach((item) => {
                if (item.accessoryList && item.accessoryList.length) {
                  item.accessoryList.forEach((val) => {
                    item.name = val.name
                    item.url = val.url
                  })
                }
                if (item.answerList.length != 0) {
                  item.answerList.forEach((e) => {
                    if (e.accessoryList && e.accessoryList.length) {
                      e.accessoryList.forEach((key) => {
                        e.name = key.name
                        e.url = key.url
                      })
                    }
                  })
                }
              })
            }
          })
      }
      if (this.activeName == 'addendum') {
        this.supplementList = []
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalId',
            relation: 'AND',
            value: this.$route.params.ids,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'releaseStatus',
            relation: 'AND',
            value: 2,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'type',
            relation: 'AND',
            value: 2,
          }
        )
        this.$http
          .post('${portal}/tenderDocument/v1/pageAccessory', parmas)
          .then((res) => {
            let data = res.data.value.rows
            data.forEach((item) => {
              if (item.accessoryList && item.accessoryList.length != 0) {
                item.accessoryList.forEach((val) => {
                  if (item.id == val.sourceId) {
                    val.describe = item.describe
                    this.supplementList.push(val)
                  }
                })
              }
            })
          })
      }
      if (this.activeName == 'five') {
        this.TenderList = []
        let parmas = {
          pageBean: {
            pageSize: -1,
            page: -1,
          },
          querys: [],
        }
        parmas.querys.push(
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'projectApprovalId',
            relation: 'AND',
            value: this.$route.params.ids,
          },
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'type',
            relation: 'AND',
            value: 1,
          }
        )
        this.$http
          .post('${portal}/tenderDocument/v1/pageAccessory', parmas)
          .then((res) => {
            let data = res.data.value.rows
            data.forEach((item) => {
              if (item.accessoryList && item.accessoryList.length != 0) {
                item.accessoryList.forEach((val) => {
                  if (item.id == val.sourceId) {
                    this.TenderList.push(val)
                  }
                })
              }
            })
          })
      }
    },
    // 暂存评标
    saveEva() {
      this.loadingBtn = true
      if (this.searchForm.name == '') {
        this.$message.warning('请选择投标单位！')
        return
      }
      let form = {...this.objScore, ...this.form}
      form.evaluationDetailList = []
      form.noticeTitle = this.params.noticeTitle
      form.projectNumber = this.params.projectNumber
      form.quotationOrgId = form.quotationCompanyId
      form.quotationOrgCode = form.quotationCompanyCode
      form.quotationOrgName = form.quotationCompanyName
      form.quotationAmount = this.form.totalPrice
      form.evaluationMethods = 2
      form.evaluationMode = 2
      form.noticeDetaiedId = this.objData.noticeDetaiedId
      delete form.descriptionList
      let sum = 0
      this.scoreData.forEach((item) => {
        if (item.bidEvaId == undefined) {
          delete form.id
        }
        item.evaluationId = item.evaluationItemId
        item.children.forEach((val) => {
          if (item.id == val.evaluationItemPid) {
            val.evaluationSystemDetailId = val.id
            val.evaluationSystemId = item.id
            val.evaluationItemPname = item.subjectName
          }
          if (val.id) {
            delete val.id
          }
          sum += val.score
          form.evaluationDetailList.push(val)
        })
      })
      form.score = sum
      console.log(form)
      this.$http
        .post('${portal}/bidEvaluationRecord/v1/bidEvaComprehensive', form)
        .then((res) => {
          if (res.data.state) {
            this.$message.success(res.data.message)
          }
          this.loadData()
          this.loadingBtn = false
        })
    },
    //提交评标
    handleSave() {
      this.$confirm('提交所有评标数据后不可修改评分，是否继续提交？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      }).then(() => {
        let form = {}
        form.noticeId = this.params.ids
        form.noticeType = 1
        console.log(form)
        this.saving = true
        this.$http
          .post('${portal}/bidEvaluationRecord/v1/submitBidEvaluationOrg', form)
          .then((res) => {
            console.log(res, 'ressss')
            if (res.data.state) {
              this.$message.success(res.data.message)
            }
            this.loadData()
            this.saving = false
          })
      })
    },
    handleInput(val) {
      this.scoreData.forEach((item) => {
        item.score = 0
        item.children.forEach((e) => {
          item.score += e.score
        })
      })
    },
    //查看文件
    downloadFile(name, url) {
      console.log(name, 'name')
      const link = document.createElement('a')
      link.style.display = 'none'
      link.target = '_blank'
      // 设置下载地址
      link.setAttribute('href', url)
      // 设置文件名
      link.setAttribute('download', name)
      link.download = name
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    //获取数据
    loadData() {
      let params = {
        pageBean: {
          page: -1,
          pageSize: -1,
        },
        querys: [
          {
            group: 'main',
            operation: 'EQUAL',
            parentGroup: '',
            property: 'noticeId',
            relation: 'AND',
            value: this.params.ids,
          },
        ],
      }
      this.tableLoading = true
      this.$http
        .post('${portal}/bizBiddingQuotation/v1/evaOrgQuoData', params)
        .then((res) => {
          this.tableLoading = false
          if (res.data.state) {
            this.tableData = res.data.value.rows
          }
          console.log('返回的表格数据', this.tableData)
        })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'evaluationBid',
        params: {
          tabsActiveName: 'projectProcurement',
          pageBean: this.$route.query.pageBean,
        },
      })
    },
    getSummaries(param) {
      const {columns, data} = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ''
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    //详情
    detailBtn(row) {
      let form = row
      form.quotationRounds = this.params.quotationRoundsNum
      this.$refs.troubleshooting.add(form)
    },
    // 表格行点击
    handleBtn(rows) {
      this.form = rows
      this.objData = rows
      this.getScoreData()
      this.searchForm.name = rows.quotationCompanyName
      this.selectArr = []
      this.$refs.multiple.clearSelection()
      this.selectArr.push(rows)
      this.$refs.multiple.toggleRowSelection(rows)
    },
    selectAll(selection, row) {
      this.$refs.multiple.clearSelection()
      this.selectAll = []
    },
    handleSelectionChange(val) {
      this.selectArr = val
    },
    getScoreData() {
      this.loading = true
      this.selectTree()
      let params = {
        noticeId: this.form.noticeId,
        orgId: this.form.quotationCompanyId,
        noticeType: 1,
      }
      this.scoreData = []
      this.$http
        .post('${portal}/bizEvaluationSystemDescription/v1/getEvaScore', params)
        .then((res) => {
          this.loading = false
          if (res.data.state) {
            this.objScore = res.data.value
            let data = res.data.value.descriptionList || []
            this.treeData.forEach((val) => {
              val.score = 0
              data.forEach((i) => {
                if (i.evaluationItemPid == val.id) {
                  val.evaluationItemPname = val.subjectName
                  val.evaluationItemName = i.scoringContent
                  val.evaluationItemPid = val.evaluationItemPid
                  val.evaluationScore += i.evaluationScore
                  i.pname = val.evaluationItemPname
                  val.children.push(i)
                }
              })
              val.children.forEach((e) => {
                if (e.evaluationItemPname) {
                  delete e.evaluationItemPname
                }
                if (e.score == undefined) {
                  this.$set(e, 'score', 0)
                }
              })
            })
            this.scoreData = this.treeData || []
            this.scoreData.sort((a, b) => {
              if (a['evaluationItemPid'] != b['evaluationItemPid']) {
                return a['evaluationItemPid'].localeCompare(
                  b['evaluationItemPid']
                )
              }
              a.children.forEach((val) => {
                a.score += val.score
              })
              b.children.forEach((val) => {
                b.score += val.score
              })
            })
            console.log(this.scoreData, 'this.scoreData')
          }
        })
    },
    //查询评分分类树结构
    selectTree() {
      this.treeData = []
      basicData.bizEvaluationItemSelectTree().then((res) => {
        this.treeData = res.value[0].children
        this.treeData.forEach((item) => {
          this.$set(item, 'evaluationScore', 0)
          // this.$set(item, 'score', 0)
        })
      })
    },
  },
  computed: {
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px',
      }
    },
    // 获取所有单元格合并数据
    spanArr() {
      if (!this.scoreColumn.length) return []
      const mergeCols = ['School', 'Grade', 'Class'] // 需要合并的列（字段）
      return getMergeCells(this.scoreData, this.scoreColumn, mergeCols)
    },
  },
}
</script>

<style lang="scss" scoped>
.materialInformation {
  width: 100%;
  height: 100%;
  .content {
    display: flex;
    width: 100%;
    height: calc(100% - 60px);
    margin-top: 10px;
    .common-page-shadow {
      width: 70%;
      height: calc(100%);
      box-sizing: border-box;
      .common-table-container {
        margin: 0;
        height: calc(100% - 80px);
        .common-table-wrapper {
          height: 100%;
          .score-table {
            height: calc(100% - 88px);
            .table {
              height: calc(100% - 120px);
              overflow-y: scroll;
            }
          }
          .quote-content {
            height: 100%;
            position: relative;
            .content {
              height: calc(100% - 70px);
              overflow-y: scroll;
            }
            .btn {
              width: 100%;
              position: absolute;
              bottom: 16px;
              display: flex;
              justify-content: center;
            }
          }
        }
      }
      .footer {
        width: 100%;
        height: 70px;
        background-color: white;
        border-radius: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .left-tree {
      width: 30%;
      margin-right: 10px;
      padding: 10px;
      box-sizing: border-box;
      height: calc(100%);
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0.10417vw 0.625vw 0 rgba(0, 0, 0, 0.1);
    }
  }
}
/deep/.el-tabs__header {
  margin-bottom: 10px;
}
/deep/.el-table .cell {
  font-size: 14px;
}
.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-right: 5px;
  }
  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }
  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
  }
  // &:nth-child(2):hover {
  //   background-color: #f56c6c;
  //   color: #fff;
  //   border-color: #f56c6c;
  // }
  /deep/ i,
  span {
    font-size: 16px;
  }
}
/deep/.el-tree-node.is-current > .el-tree-node__content {
  background-color: #ebf3fa;
  color: #409eff;
  font-weight: bold;
}

/deep/ .el-tree-node__content {
  padding: 5px 0;
}

/deep/ .el-table thead tr th {
  background-color: #eee !important;
  border-right: 1px solid #dfe2e8 !important;
}
/deep/ .el-table {
  border-collapse: collapse !important;
}
</style>
