<template>
  <div class="patentData-collection">
    <div class="header-patentDataCollection">
      <el-button type="primary">同步应用到系统</el-button>
      <span>同步时间：2023/02/22</span>
    </div>
    <div class="derived-list">
      <div><i class="el-icon-search"></i><span>筛选查询</span></div>
      <el-button type="primary" size="mini">查询结果</el-button>
    </div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true" class="yourForm" label-position="left" label-width="110px" >
      <div class="ssh">
        <el-form-item label="市州"  class="formItem">
          <el-select v-model="queryParams.sqr" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区县"  class="formItem">
          <el-select v-model="queryParams.zllx" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">只看市州或区县为空的数据</el-checkbox>
        </el-form-item>

      </div>
      <!-- 2 -->
      <div class="ssh">
        <el-form-item label="地址调整记录"  class="formItem">
          <el-select v-model="queryParams.dztzjl" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请人调整记录" class="formItem">
          <el-select v-model="queryParams.sqrtzjl" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formItem">
          <template>
            <span style="margin-right: 10px;">公告日</span>
            <el-select v-model="queryParams.ggr" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
          </template>
        </el-form-item>
        <el-form-item class="formItem">
          <template>
            <span style="margin-right: 10px;">入库时间</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-form-item>

      </div>
      <!-- 3 -->
      <div class="ssh">
        <el-form-item label="申请人类型"  class="formItem">
          <el-select v-model="queryParams.rksj" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="高价值类型"  class="formItem">
          <el-select v-model="queryParams.rksj" placeholder="请选择" clearable>
            <el-option label="5%" value="5%"></el-option>
            <el-option label="6%" value="6%"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <div class="derived-list">
      <div><i class="el-icon-s-operation"></i><span>数据表</span></div>
      <el-button type="primary" size="mini">导出列表</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :cell-style="columnbackgroundStyle"
      @cell-click="cellClick" :cell-class-name="tableClassName"
      :header-cell-style="{background:'#2a8eed',color:'#fafcfe',}" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" width="55">
        <template slot-scope="scope">
            <div>{{ scope.row.id }}</div>
          </template>
      </el-table-column>
      <el-table-column label="地址" prop="dz" align="center" width="300"></el-table-column>
      <el-table-column label="申请人" prop="sqr" align="center"></el-table-column>
      <el-table-column prop="ggr" label="公告日" align="center"></el-table-column>
      <el-table-column prop="rksj" label="入库时间" align="center"></el-table-column>
      <el-table-column prop="zllx" label="专利类型" align="center"></el-table-column>
      <el-table-column prop="sqrlx" label="申请人类型" align="center"></el-table-column>
      <el-table-column prop="gjzlx" label="高价值类型" align="center"></el-table-column>
      <el-table-column prop="cz" label="操作" align="center">
        <template>
          <el-button type="primary" size="small">调整</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "BooksChangeInfo",
  data() {
    return {
      activeName: 'first',
      radio:0,
      rksj:0,
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      queryParams: {},
      // 帐本金额变动信息表格数据
      tableData: [
        {
          id:1,
          dz:'云南省丽江市玉龙纳西族自治县',
          sqr:'王孜孜',
          ggr:'2023年',
          rksj:'2023/02/22 14:00',
          zllx:'发明',
          sqrlx:'企业',
          gjzlx:'战略性新兴产业的',
          xmcb:'发明专利'
        },
        {
          id:2,
          dz:'云南省丽江市玉龙纳西族自治县',
          sqr:'林孜孜',
          ggr:'2023年',
          bbh2:'变更1.0',
          rksj:'2023/02/22 14:00',
          zllx:'发明',
          sqrlx:'企业',
          gjzlx:'战略性新兴产业的',
          xmcb:'发明专利'
        },
        {
          id:3,
          dz:'云南省丽江市玉龙纳西族自治县',
          sqr:'佘孜孜',
          ggr:'2023年',
          rksj:'2023/02/22 14:00',
          zllx:'发明',
          sqrlx:'企业',
          gjzlx:'战略性新兴产业的',
          xmcb:'发明专利'
        }
      ],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
  },
  methods: {
    back() {
      this.$store.state.showHiden = true
    }
  },
};
</script>
<style lang="scss" scoped>
.route-view-container[data-v-02b43ddf] {
  padding: 0;
}
body .el-form .el-form-item, body .app-container .el-form .el-form-item {
  margin-bottom: 10px !important;
}
::v-deep .el-input__inner {
  padding: 0 15px;
}
::v-deep .el-input__prefix{
  right: 5px;
  left: unset;
}
.patentData-collection {
  padding: 20px;
  min-width: 1300px;
  .header-patentDataCollection {
    padding-left: 20px;
    span {
      margin-left: 10px;
      color: #999999;
      font-size: 14px;
    }
  }
  .derived-list {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    padding: 0 10px 0 20px;
    margin: 20px 0;
    div {
      span{
        color:#616161;
        font-size:14px;
        margin-left: 5px;
      }
    }
  }
}
.yourForm {
  .el-input {
    width: 200px;
  }
  .el-textarea {
    width: 200px;
  }
  .el-select {
    width: 200px;
  }
}
 .formItem {
  margin-right: 50px;
 }
 @media screen and (max-width:1450px) {
  .formItem {
    margin-right: 10px;
  }
 }
</style>