<template>
  <div class="app-container urPatentValid">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="年份" prop="year">
          <el-select v-model="queryParams.year" placeholder="请选择年份" >
            <el-option
              v-for="year in yearList"
              :key="year"
              :label="year"
              :value="year"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="月份" prop="month">
          <el-select v-model="queryParams.month" placeholder="请选择月份" >
            <el-option label="11" value="shanghai"></el-option>
            <el-option label="12" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="州市" prop="cityName">
          <el-select v-model="queryParams.cityName" placeholder="请选择州市" >
            <el-option
              v-for="region in regionOptions"
              :key="region.cityShortName"
              :label="region.cityShortName"
              :value="region.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="handleQuery">重置/刷新</el-button>
          <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleExport">导出</el-button> -->
        </el-form-item>
    </el-form>

    <div id="scrollTable">
      <el-table v-loading="loading" :data="urPatentValidList" :max-height="maxHeight" :header-cell-style="{background:'#2a8eed',color:'#fafcfe',}" >
        <el-table-column label="地区" align="center" width="100" fixed="left">
          <template slot-scope="scope">
            <span>{{scope.row.datas[0]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="专利类型" align="center" width="100" fixed="left">
          <template slot-scope="scope">
            <span>{{scope.row.datas[1]}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="hearderTitle" align="center">
          <el-table-column v-for="(item,index) in headerList" :label="item.patentName" align="center" :key="index">
            <template slot-scope="scope">
              <span>{{scope.row.datas[index+2]}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
    import {listUrPatentValid, getHeaderList, getYearList, getRegionList} from "@/api/system/urPatentValid";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "UrPatentValid",
        components: { Treeselect },
        data() {
            return {
                tableHeight: 600,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 有效专利表格数据
                urPatentValidList: [],
                // 动态表头数据
                headerList: [],
                // 查询年份数据
                yearList: [],
                // 表头合并行内容
                hearderTitle: '',
                // 省市树选项
                regionOptions: [],
                maxHeight: 0,
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    year: '',
                    startDate: null,
                    an: null,
                    databaseDate: null,
                    ad: null,
                    patentName: null,
                    agentOrgCode: null,
                    agentOrgName: null,
                    ipc: null,
                    peopleName: null,
                    zipCode: null,
                    address: null,
                    pts: null,
                    ppType: null,
                    provinceName: null,
                    cityName: '53',
                    districtName: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {}
            };
        },
        created() {
            this.getHeader();
            this.getYear();
            this.getRegion();
            this.getList();
            this.$nextTick(()=>{
                this.maxHeight = window.innerHeight - 200;//300是页面中除了表格外其他组件的高度
            })
        },
        methods: {
            /** 查询有效专利列表 */
            getList() {
                this.loading = true;
                listUrPatentValid(this.queryParams).then(response => {
                    this.urPatentValidList = response.data;
                    this.loading = false;
                });
                this.hearderTitle = '统计时期' + this.queryParams.year + '-1';
            },
            /** 获取动态表头 */
            getHeader() {
                this.queryParams.startDate = this.queryParams.year;
                getHeaderList(this.queryParams).then(response => {
                    this.headerList = response.data;
                });
            },
            /** 获取查询年份列表 */
            getYear() {
                getYearList().then(response => {
                    this.yearList = response.data;
                });
            },
            /** 获取省市列表 */
            getRegion() {
                let params = {};
                getRegionList(params).then(response => {
                    this.regionOptions = response.data;
                });
            },
            /** 合并表头 */
            handerMethod ({ row, column, rowIndex, columnIndex }) {
                // if (rowIndex === 0) {
                //     if (column.label == '地区' || column.label == '专利类型') {
                //         this.$nextTick(() => {
                //             var _c = document.getElementsByClassName(column.id);
                //             document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2);
                //         });
                //         return column;
                //     }
                // } else if (rowIndex === 1) {
                //     if (column.label == '地区' || column.label == '专利类型') {
                //         return { display: 'none' };
                //     }
                // }
                // if (column[0].level == 1) {
                //     column[0].rowSpan = 2
                //     column[1].rowSpan = 0
                //     if (rowIndex === 1) {
                //         return { display: 'none' }
                //     }
                // }
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.getHeader();
                this.getList();
            },
            handleExport() {
              this.download(
                "patent/export",
                {
                  ...this.queryParams,
                },
                `volunteersInfo_${new Date().getTime()}.xlsx`
              );
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss">
  // ----------修改elementui表格的默认样式-----------
  .el-table__body-wrapper {
    &::-webkit-scrollbar { // 整个滚动条
      width: 0; // 纵向滚动条的宽度
      background: rgba(213,215,220,0.3);
      border: none;
    }
    &::-webkit-scrollbar-track { // 滚动条轨道
      border: none;
    }
  }

  // --------------------隐藏table gutter列和内容区右侧的空白 start
  .el-table th.gutter{
    display: none;
    width:0
  }
  .el-table colgroup col[name='gutter']{
    display: none;
    width: 0;
  }

  .el-table__body{
    width: 100% !important;
  }

  // --------------------隐藏table gutter列和内容区右侧的空白 end
</style>


