<template>
  <div class="main-content market">
    <!-- <CommonTitle label="问题处置反馈" /> -->
    <el-tabs ref="tabs" v-model="tabIndex" type="border-card" @tab-click="tabClickCallback">
      <!--问题查询-->
      <el-tab-pane label="问题查询" name="1">
        <div class="search-box">
          <el-row>
            <el-col :span="8">
              <label class="label-name" style="display: inline-block;">问题主题:</label>
              <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
                <el-input v-model="searchForm1.problemTitle" placeholder="请输入问题主题" @keyup.enter.native="submitSearch" />
              </div>
              <!-- <div class="search-field">
                <p>问题主题</p>
                <el-input v-model="searchForm1.problemTitle" placeholder="请输入问题主题" @keyup.enter.native="submitSearch" />
              </div> -->
            </el-col>
            <el-col :span="6">
              <label class="label-name" style="display: inline-block;">问题描述:</label>
              <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
                <el-input v-model="searchForm1.problemDesc" placeholder="请输入问题描述" @keyup.enter.native="submitSearch" />
              </div>
              <!-- <div class="search-field">
                <p>问题描述</p>
                <el-input v-model="searchForm1.problemDesc" placeholder="请输入问题描述" @keyup.enter.native="submitSearch" />
              </div> -->
            </el-col>
            <el-col :span="6">
              <label class="label-name" style="display: inline-block;">发起人:</label>
              <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
                <el-input v-model="searchForm1.reporterName" placeholder="请输入发起人" @keyup.enter.native="submitSearch" />
              </div>
              <!-- <div class="search-field">
                <p>发起人</p>
                <el-input v-model="searchForm1.reporterName" placeholder="请输入发起人" @keyup.enter.native="submitSearch" />
              </div> -->
            </el-col>
            <el-col :span="6">
              <!-- <div class="search-field">
                <p>登记机关</p>
                <el-select v-model="searchForm1.regOrg" placeholder="请选择登记机关" style="width:100%" clearable>
                  <el-option v-for="each in regOrgOptions" :key="each.id" :label="each.name" :value="each.code" />
                </el-select>
              </div> -->
            </el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-col :span="8">
              <label class="label-name" style="display: inline-block;">登记时间:</label>
              <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
                <el-date-picker
                  v-model="searchForm1.createDateBegin"
                  type="date"
                  placeholder="开始日期"
                  style="width:45%"
                />至
                <el-date-picker
                  v-model="searchForm1.createDateEnd"
                  type="date"
                  placeholder="结束日期"
                  style="width:45%"
                />
              </div>
              <!-- <div class="search-field">
                <p>登记时间</p>
                <el-date-picker
                  v-model="searchForm1.createDateBegin"
                  type="date"
                  placeholder="开始日期"
                  style="width:46%"
                />至
                <el-date-picker
                  v-model="searchForm1.createDateEnd"
                  type="date"
                  placeholder="结束日期"
                  style="width:46%"
                />
              </div> -->
            </el-col>
            <el-col :span="6">
              <label class="label-name" style="display: inline-block;">流转状态:</label>
              <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
                <el-select v-model="searchForm1.state" placeholder="请选择流转状态" style="width:100%" clearable>
                  <el-option v-for="each in stateOptions" :key="'searchForm1State'+each.value" :label="each.label" :value="each.value" />
                </el-select>
              </div>
              <!-- <div class="search-field">
                <p>流转状态</p>
                <el-select v-model="searchForm1.state" placeholder="请选择流转状态" style="width:100%" clearable>
                  <el-option v-for="each in stateOptions" :key="'searchForm1State'+each.value" :label="each.label" :value="each.value" />
                </el-select>
              </div> -->
            </el-col>
            <el-col :span="6">
              <label class="label-name" style="display: inline-block;">紧急程度:</label>
              <div class="search-input-box" style="width: calc(100% - 100px);display: inline-block;">
                <el-select v-model="searchForm1.urgency" placeholder="请选择紧急程度" style="width:100%" clearable>
                  <el-option v-for="each in urgencyOptions" :key="'searchForm1Urgency'+each.value" :label="each.label" :value="each.value" />
                </el-select>
              </div>
              <!-- <div class="search-field">
                <p>紧急程度</p>
                <el-select v-model="searchForm1.urgency" placeholder="请选择紧急程度" style="width:100%" clearable>
                  <el-option v-for="each in urgencyOptions" :key="'searchForm1Urgency'+each.value" :label="each.label" :value="each.value" />
                </el-select>
              </div> -->
            </el-col>
            <el-col :span="4">
              <div class="btn-box">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="submitSearch">查询</el-button>
                <el-button type="info" icon="el-icon-refresh-left" size="mini" @click="resetSearchForm">重置</el-button>
              </div>
            </el-col>
            <!-- <el-col :span="6">
              <div class="func-box">
                <div class="btn-box" style="position: relative;top: 30px;text-align: left;">
                  <el-button type="primary" icon="el-icon-search" size="small" @click="submitSearch">查询</el-button>
                  <el-button type="info" icon="el-icon-refresh-left" size="small" @click="resetSearchForm">重置</el-button>
                </div>
              </div>
            </el-col> -->
          </el-row>
        </div>

        <div class="main-body  ">
          <div class="content">
            <el-table
              v-loading="loading1"
              :data="tableData1"
              class="table-style"
              :row-class-name="tableRowClassName"
              :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
            >
              <el-table-column
                prop="index"
                label="序号"
                min-width="50"
              />
              <el-table-column
                prop="problemTitle"
                label="问题主题"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                prop="problemDesc"
                label="问题描述"
                min-width="150"
                show-overflow-tooltip
              />
              <el-table-column
                prop="reportOrgName"
                label="发起单位"
                show-overflow-tooltip
              />
              <el-table-column
                prop="createTime"
                label="发起时间"
                show-overflow-tooltip
              />
              <el-table-column
                prop="reporterName"
                label="发起人"
                show-overflow-tooltip
              />
              <el-table-column
                prop="urgencyStr"
                label="紧急程度"
                min-width="50"
                show-overflow-tooltip
              />
              <el-table-column
                prop="stateStr"
                label="流转状态"
                min-width="50"
                show-overflow-tooltip
              />
              <el-table-column
                prop="address"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link type="primary" @click="showSearchDetail(scope.row)">查看详情</el-link>
                </template>
              </el-table-column>
            </el-table>
            <div class="page-box">
              <el-row>
                <el-col :span="24" style="text-align:right">
                  <el-pagination
                    :disabled="loading1"
                    :page-size="pageParam1.pageSize"
                    :total="pageParam1.total"
                    :page-sizes="[10, 20, 30, 40,50,100,200]"
                    layout="slot,total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChange1"
                    @current-change="pageIndexChange1"
                  >
                    <!-- <batchFunction :options="options" style="float:left" /> -->
                    <span>
                      第 {{ pageParam1.curPage }} 页 /
                      共 {{ (parseInt((pageParam1.total + pageParam1.pageSize - 1)/pageParam1.pageSize)) }} 页
                    </span>
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--上报录入-->
      <el-tab-pane label="上报录入" name="2">
        <div class="main-body" style="border:none">
          <div class="header" style="color:#292a2c;margin-bottom:20px;font-size:20px">
            录入信息
          </div>
          <div class="content">
            <el-form ref="reportForm" label-width="100px" label-position="right" style="width:50%" :model="reportForm" :rules="reportFormRules">
              <el-form-item label="问题主题" prop="problemTitle">
                <el-input v-model="reportForm.problemTitle" placeholder="请输入问题主题" />
              </el-form-item>
              <el-form-item label="问题描述" prop="problemDesc">
                <el-input v-model="reportForm.problemDesc" type="textarea" :autosize="{minRows:6, maxRows:10}" :maxlength="500" placeholder="请输入问题描述" />
              </el-form-item>
              <el-form-item label="紧急程度" prop="urgency">
                <el-select v-model="reportForm.urgency" placeholder="请输入紧急程度">
                  <el-option v-for="each in urgencyOptions" :key="'reportFormUrgency'+each.value" :value="each.value" :label="each.label" />
                </el-select>
              </el-form-item>
              <el-form-item label="附件">
                <el-upload
                  :action="uploadPath"
                  :data="{bizseq:bizseq}"
                  :on-remove="removeFile"
                  :on-success="uploadCallback"
                  :on-preview="previewFile"
                  drag
                  multiple
                  :file-list="fileList"
                  style="width:min-content"
                >
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </el-form-item>
            </el-form>
            <div class="func-btn">
              <el-button v-loading="submitLoading" type="primary" plain @click="saveForm">仅保存不上报</el-button>
              <el-button v-loading="submitLoading" type="primary" @click="saveFormAndReport">保存并上报</el-button>
              <!-- <el-button>返回</el-button> -->
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--问题处理-->
      <el-tab-pane label="问题处理" name="3">
        <div class="search-box">
          <el-row class="mb10">
            <el-col :span="12">
              <div class="search-field">
                <p>问题主题</p>
                <el-input v-model="searchForm2.problemTitle" placeholder="请输入问题主题" @keyup.enter.native="submitSearch" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search-field">
                <p>问题描述</p>
                <el-input v-model="searchForm2.problemDesc" placeholder="请输入问题描述" @keyup.enter.native="submitSearch" />
              </div>
            </el-col>

            <!-- <el-col :span="6"> -->
            <!-- <div class="search-field">
                <p>登记机关</p>
                <el-select v-model="searchForm1.regOrg" placeholder="请选择登记机关" style="width:100%" clearable>
                  <el-option v-for="each in regOrgOptions" :key="each.id" :label="each.name" :value="each.code" />
                </el-select>
              </div> -->
            <!-- </el-col> -->
          </el-row>
          <el-row v-if="showMore" style="margin-top:10px" class="mb10">
            <el-col :span="12">
              <div class="search-field">
                <p>发起人</p>
                <el-input v-model="searchForm2.reporterName" placeholder="请输入发起人" @keyup.enter.native="submitSearch" />
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search-field">
                <p>登记时间</p>
                <el-date-picker
                  v-model="searchForm2.createDateBegin"
                  type="date"
                  placeholder="开始日期"
                  style="width:36%"
                />至
                <el-date-picker
                  v-model="searchForm2.createDateEnd"
                  type="date"
                  placeholder="结束日期"
                  style="width:36%"
                />
              </div>
            </el-col>
          </el-row>
          <el-row v-if="showMore" class="mb10">
            <el-col :span="12">
              <div class="search-field">
                <p>流转状态</p>
                <el-select v-model="searchForm2.state" placeholder="请选择流转状态" clearable>
                  <el-option v-for="each in stateOptions" :key="'searchForm2State'+each.value" :label="each.label" :value="each.value" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="search-field">
                <p>紧急程度</p>
                <el-select v-model="searchForm2.urgency" placeholder="请选择紧急程度" clearable>
                  <el-option v-for="each in urgencyOptions" :key="'searchForm2Urgency'+each.value" :label="each.label" :value="each.value" />
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="func-box">
                <div class="btn-box">
                  <span v-if="!showMore" style="margin-right:20px;color:#409EFF;cursor:pointer" @click="showMoreCriteria">
                    展开<i class="el-icon-d-arrow-right" />
                  </span>
                  <span v-if="showMore" style="margin-right:20px;color:#409EFF;cursor:pointer" @click="showMoreCriteria">
                    <i class="el-icon-d-arrow-left" />隐藏
                  </span>
                  <el-button type="primary" icon="el-icon-search" size="small" @click="submitSearch2">查询</el-button>
                  <el-button type="info" icon="el-icon-refresh-left" size="small" @click="resetSearchForm2">重置</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="main-body" style="background:#fff;padding:20px">
          <div class="content">
            <el-table
              v-loading="loading2"
              :data="tableData2"
              class="table-style"
              :row-class-name="tableRowClassName"
              :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
            >
              <el-table-column
                prop="index"
                label="序号"
                min-width="50"
              />
              <el-table-column
                prop="problemTitle"
                label="问题主题"
                min-width="120"
                show-overflow-tooltip
              />
              <el-table-column
                prop="problemDesc"
                label="问题描述"
                min-width="150"
                show-overflow-tooltip
              />
              <el-table-column
                prop="reportOrgName"
                label="发起单位"
                show-overflow-tooltip
              />
              <el-table-column
                prop="createTime"
                label="发起时间"
                show-overflow-tooltip
              />
              <el-table-column
                prop="reporterName"
                label="发起人"
                show-overflow-tooltip
              />
              <el-table-column
                prop="urgencyStr"
                label="紧急程度"
                min-width="50"
                show-overflow-tooltip
              />
              <el-table-column
                prop="stateStr"
                label="流转状态"
                min-width="50"
                show-overflow-tooltip
              />
              <el-table-column
                prop="address"
                label="操作"
              >
                <template slot-scope="scope">
                  <el-link type="primary" @click="showSearchDetail(scope.row)">查看详情</el-link>
                </template>
              </el-table-column>
            </el-table>
            <div class="page-box">
              <el-row>
                <el-col :span="24" style="text-align:right">
                  <el-pagination
                    :disabled="loading2"
                    :page-size="pageParam2.pageSize"
                    :total="pageParam2.total"
                    :page-sizes="[10, 20, 30, 40,50,100,200]"
                    layout="slot,total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChange2"
                    @current-change="pageIndexChange2"
                  >
                    <!-- <batchFunction :options="options" style="float:left" /> -->
                    <span>
                      第 {{ pageParam2.curPage }} 页 /
                      共 {{ (parseInt((pageParam2.total + pageParam2.pageSize - 1)/pageParam2.pageSize)) }} 页
                    </span>
                  </el-pagination>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { problemSimplePage, saveProblem, reportProblem } from '@/api/problem'
import { removeAttachementById, listAttachmentByBizseq } from '@/api/attachment'
import { getDataType } from '@/api/constant'
export default {
  data() {
    return {
      tabIndex: '1',
      showMore: false,
      tableData1: [],
      tableData2: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      loading1: false,
      loading2: false,
      regOrgOptions: [],
      fileList: [],
      pageParam1: {
        curPage: 1,
        pageSize: 10,
        total: 0
      },
      pageParam2: {
        curPage: 1,
        pageSize: 10,
        total: 0
      },
      reportForm: {
        problemTitle: '',
        problemDesc: '',
        urgency: '0'
      },
      reportFormRules: {
        problemTitle: [
          { required: true, message: '请输入问题主题', trigger: 'blur' }
        ],
        problemDesc: [
          { required: true, message: '请输入问题描述', trigger: 'blur' }
        ],
        urgency: [
          { required: true, message: '请选择紧急程度', trigger: 'blur' }
        ]
      },
      bizseq: '',
      uploadPath: `${process.env.VUE_APP_BASE_API}/attachment/uploadAdvance`,
      submitLoading: false,
      searchForm1: {
        problemTitle: '',
        problemDesc: '',
        reporterName: '',
        regOrg: '',
        createDateBegin: null,
        createDateEnd: null,
        state: '',
        urgency: ''
      },
      searchForm2: {
        problemTitle: '',
        problemDesc: '',
        reporterName: '',
        regOrg: '',
        createDateBegin: null,
        createDateEnd: null,
        state: '',
        urgency: ''
      },
      stateOptions: [
        { value: '0', label: '暂存' },
        { value: '1', label: '上报' },
        { value: '2', label: '办理中' },
        { value: '3', label: '办结' },
        { value: '4', label: '退回' }
      ],
      urgencyOptions: [
        { value: '0', label: '普通' },
        { value: '1', label: '紧急' }
      ]
    }
  },
  mounted() {
    this.bizseq = this.$util.getGuid()
    const tab = this.$route.query.t
    if (this.$util.isNotEmpty(tab)) {
      this.tabIndex = tab
    }
    this.loadSearchPage()
    // 加载登记机关
    getDataType('registration').then(res => {
      if (res.code === 0) {
        this.regOrgOptions = res.data
      }
    })
  },
  methods: {
    showMoreCriteria() {
      this.showMore = !this.showMore
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 展示搜索详情
    showSearchDetail(row) {
      if (row.isReport === '1') {
        return this.$router.push({ path: '/market/problem/detail', query: { id: row.problemId }})
      }
      this.reportForm = {
        ...row
      }
      this.bizseq = row.problemId
      delete this.reportForm.createTime
      delete this.reportForm.lauptime
      delete this.reportForm.reportTime
      listAttachmentByBizseq(this.bizseq).then(data => {
        data.forEach(each => {
          each.id = each.attachmentid
          each.name = each.filename
          each.url = `${process.env.VUE_APP_DOWNLOAD_URL}/` + each.temppath
        })
        this.fileList = data
      })
      this.tabIndex = '2'
    },
    // 点击回调
    tabClickCallback(tab) {
      if (tab.index === '0') {
        return this.loadSearchPage()
      }
      if (tab.index === '2') {
        return this.loadHandlePage()
      }
      this.resetReportForm()
    },
    // 重置搜索表单
    resetSearchForm() {
      this.searchForm1 = {
        problemTitle: '',
        problemDesc: '',
        reporterName: '',
        regOrg: '',
        createDateBegin: null,
        createDateEnd: null,
        state: '',
        urgency: ''
      }
    },
    resetSearchForm2() {
      this.searchForm2 = {
        problemTitle: '',
        problemDesc: '',
        reporterName: '',
        regOrg: '',
        createDateBegin: null,
        createDateEnd: null,
        state: '',
        urgency: ''
      }
    },
    // 重置问题表单表单
    resetReportForm() {
      this.bizseq = this.$util.getGuid()
      this.reportForm = {
        problemTitle: '',
        problemDesc: '',
        urgency: ''
      }
      this.fileList = []
    },
    // 提交搜索
    submitSearch() {
      this.pageParam1.paramMap = {
        ...this.searchForm1
      }
      if (this.pageParam1.paramMap.createDateBegin) {
        this.pageParam1.paramMap.createDateBegin = this.$util.formatDate.format(this.pageParam1.paramMap.createDateBegin, 'yyyy-MM-dd')
      }
      if (this.pageParam1.paramMap.createDateEnd) {
        this.pageParam1.paramMap.createDateEnd = this.$util.formatDate.format(this.pageParam1.paramMap.createDateEnd, 'yyyy-MM-dd')
      }
      this.pageParam1.curPage = 1
      this.pageParam1.pageSize = 10
      this.loadSearchPage()
    },
    // 提交搜索
    submitSearch2() {
      this.pageParam2.paramMap = {
        ...this.searchForm2
      }
      if (this.pageParam2.paramMap.createDateBegin) {
        this.pageParam2.paramMap.createDateBegin = this.$util.formatDate.format(this.pageParam2.paramMap.createDateBegin, 'yyyy-MM-dd')
      }
      if (this.pageParam2.paramMap.createDateEnd) {
        this.pageParam2.paramMap.createDateEnd = this.$util.formatDate.format(this.pageParam2.paramMap.createDateEnd, 'yyyy-MM-dd')
      }
      this.pageParam2.curPage = 1
      this.pageParam2.pageSize = 10
      this.loadHandlePage()
    },
    // 问题查询分页
    loadSearchPage() {
      if (this.loading1) return
      this.loading1 = true
      problemSimplePage(this.pageParam1).then(res => {
        this.loading1 = false
        if (res.code === 0) {
          const data = res.data
          const list = []
          let index = (this.pageParam1.curPage - 1) * this.pageParam1.pageSize
          data.records.forEach(each => {
            each.index = ++index
            each.createTime = each.createTime.replace('T', ' ')
            each.urgencyStr = each.urgency === '0' ? '普通' : '紧急'
            for (const i in this.stateOptions) {
              const atom = this.stateOptions[i]
              if (each.state === atom.value) {
                each.stateStr = atom.label
                break
              }
            }
            list.push(each)
          })
          this.tableData1 = list
          this.pageParam1.total = data.total
        }
      })
    },
    // 问题处理分页
    loadHandlePage() {
      if (this.loading2) return
      this.loading2 = true
      problemSimplePage(this.pageParam2).then(res => {
        this.loading2 = false
        if (res.code === 0) {
          const data = res.data
          const list = []
          let index = (this.pageParam2.curPage - 1) * this.pageParam2.pageSize
          data.records.forEach(each => {
            each.index = ++index
            each.createTime = each.createTime.replace('T', ' ')
            each.urgencyStr = each.urgency === '0' ? '普通' : '紧急'
            for (const i in this.stateOptions) {
              const atom = this.stateOptions[i]
              if (each.state === atom.value) {
                each.stateStr = atom.label
                break
              }
            }
            list.push(each)
          })
          this.tableData2 = list
          this.pageParam2.total = data.total
        }
      })
    },
    // 当前分页改变
    pageIndexChange1(curPage) {
      this.pageParam1.curPage = curPage
      this.loadSearchPage()
    },
    // 分页大小改变
    pageSizeChange1(pageSize) {
      this.pageParam1.pageSize = pageSize
      this.loadSearchPage()
    },
    // 当前分页改变
    pageIndexChange2(curPage) {
      this.pageParam2.curPage = curPage
      this.loadHandlePage()
    },
    // 分页大小改变
    pageSizeChange2(pageSize) {
      this.pageParam2.pageSize = pageSize
      this.loadHandlePage()
    },
    // 上传文件预览
    previewFile(file) {
      window.open(file.url, '_blank')
    },
    uploadCallback(res, file) {
      if (res.code === 0) {
        file.id = res.data.attachmentid
        this.$message.success('上传成功')
      }
    },
    // 移除文件回调
    removeFile(file) {
      if (file && file.status === 'success') {
        removeAttachementById(file.id).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 暂存问题
    saveForm() {
      if (this.submitLoading) return
      this.$refs.reportForm.validate(valid => {
        if (!valid) return
        this.submitLoading = true
        if (this.$util.isNotEmpty(this.bizseq)) {
          this.reportForm.bizseq = this.bizseq
        }
        saveProblem(this.reportForm).then(res => {
          this.submitLoading = false
          if (res.code === 0) {
            this.$message.success('保存成功')
            this.resetReportForm()
            this.tabIndex = '1'
            this.loadSearchPage()
          }
        })
      })
    },
    // 保存问题并上报
    saveFormAndReport() {
      if (this.submitLoading) return
      this.$refs.reportForm.validate(valid => {
        if (!valid) return
        this.submitLoading = true
        if (this.$util.isNotEmpty(this.bizseq)) {
          this.reportForm.bizseq = this.bizseq
        }
        reportProblem(this.reportForm).then(res => {
          this.submitLoading = false
          if (res.code === 0) {
            this.$message.success('保存并上报成功')
            this.resetReportForm()
            this.tabIndex = '1'
            this.loadSearchPage()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  background: none;
    >div:not(:first-child){
        margin-top:16px;
    }

    .btn-box{
        text-align:right;
    }
    .main-body{
        padding:16px;
        .header{
            .header-label{
                font-size: 20PX;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: bold;
                color: #243668;
                line-height: 32px;
            }
        }
        /deep/.el-form-item__label{
          font-size: 16px;
        }
    }

}
/deep/.el-input__inner{
  height: 28px;
}
.el-input {
    width: 70%;
}
.el-select{
  width: 70%;
}
/deep/.label-name{
  text-align: right;
  width: 90px;
  font-size: $table-content-font-size;
}
/deep/.el-input__icon{
  line-height: 28px;
}
.content{
  background: #fff;
  /deep/.el-table .warning-row {
    background: #eaf4fe!important;
  }
}
.search-box{
  margin-bottom: 40px;
  .search-field{
      width: 100%;
      >p{
        display:inline-block;
        width: 100px;
        text-align: right;
        margin:0 0 10px 0;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        color: #5e5e7a;
        font-size:16PX;
      }
  }
}
</style>
