<template>
    <div class="app-container">
      <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="请选择年份"
            clearable
          >
            <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="请选择月份"
            clearable
          >
            <el-option label="01" value="01"></el-option>
            <el-option label="02" value="02"></el-option>
            <el-option label="03" value="03"></el-option>
            <el-option label="04" value="04"></el-option>
            <el-option label="05" value="05"></el-option>
            <el-option label="06" value="06"></el-option>
            <el-option label="07" value="07"></el-option>
            <el-option label="08" value="08"></el-option>
            <el-option label="09" value="09"></el-option>
            <el-option label="10" value="10"></el-option>
            <el-option label="11" value="11"></el-option>
            <el-option label="12" value="12"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="州市" prop="cityCode">
          <el-select
            v-model="queryParams.cityCode"
            placeholder="请选择州市"
            clearable
          >
            <el-option
              v-for="region in regionOptions"
              :key="region.cityShortName"
              :label="region.cityShortName"
              :value="region.code"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="时间" prop="appDate">
            <el-date-picker
              v-model="appDate"
              type="daterange"
              @input="appDateInput"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            />
          </el-form-item> -->
        <el-form-item style="margin-left: 25px;">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button type="primary"  size="mini" @click="handleExport"
          >导出列表</el-button
        >
        </el-form-item>
      </el-form>

      <div id="scrollTable">
        <el-table
          v-loading="loading"
          :data="Population"
          :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["areaName"] }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="zbctitle" align="center" >
            <el-table-column
                :label="String(y)"
                align="center"
                v-for="(y, yi) in hasYearList"
                :key="yi"
                >

                <el-table-column label="地标数量" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row["totals"][y] || 0 }}</span>
                </template>
                </el-table-column>

                <el-table-column label="核准企业数" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row["hzqyCounts"][y] || 0}}</span>
                </template>
                </el-table-column>

            </el-table-column>
          </el-table-column>

        </el-table>
      </div>
    </div>
  </template>

  <script>
  import {
    listUrPatentValid,
    getHeaderList,
    getRegionList,
  } from "@/api/system/urPatentValid";

  import {listReportHzqy} from '@/api/indica/cIndicationInfo'
  import{getyearList} from '@/api/staticdata'
  export default {
    name: "Protectionproducts",
    data() {
      return {
        hearderTitle: "",
        headerList: [],
        Population:[],
        // 查询年份数据
        yearList: [],
        hasYearList: ['2018','2019'],
        regionOptions: [],
        maxHeight: 0,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        appDate: null,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 专利授权-概况统计表格数据
        rzsViewStatisticsInfoList: [],

        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          year: "2022",
          pageNum: 1,
          pageSize: 10,
          cityCode: null,
          cityName: null,
          month: "12",
          patentType: null,
          higherSchool: null,
          researchInstitute: null,
          enterprise: null,
          institutions: null,
          individual: null,
          status: null,
          createTimeEnd: null,
          createTimeBegin: null,
        },
        // 表单参数
        form: {},
        activityRegs2: [],
        // 表单校验
        rules: {},
        zbctitle:''
      };
    },
    created() {
      //this.getHeader();
      this.getList();
      this.yearList = getyearList()
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 200; //300是页面中除了表格外其他组件的高度
      });
      this.getRegion()
      this.zbctitle = `统计时期${this.queryParams.year}${this.queryParams.month}`
    },
    methods: {
       /** 获取省市列表 */
    getRegion() {
      let params = {};
      getRegionList(params).then((response) => {
        this.regionOptions = response.data;
      });
    },
      appDateInput(e) {
        this.$nextTick(() => {
          if (e == null) {
            this.queryParams.createTimeBegin = null;
            this.queryParams.createTimeEnd = null;
          } else {
            this.$set(this, "activityRegs2", [e[0], e[1]]);
            this.queryParams.createTimeBegin =
              this.activityRegs2[0] + " " + "00:00:00";
            this.queryParams.createTimeEnd =
              this.activityRegs2[1] + " " + "23:59:59";
          }
        });
      },
      /** 查询专利授权-概况统计列表 */
      getList() {
        this.loading = true;
        this.zbctitle = `统计时期${this.queryParams.year}${this.queryParams.month}`
        listReportHzqy(this.queryParams).then(response=>{
          this.loading = false;
          this.hasYearList =  response.data.years
          this.Population = response.data.list
        })
      },

      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          cityCode: null,
          cityName: null,
          year: null,
          month: null,
          patentType: null,
          higherSchool: null,
          researchInstitute: null,
          enterprise: null,
          institutions: null,
          individual: null,
          remark: null,
          delFlag: null,
          status: 0,
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        if (this.queryParams.month) {
          if (this.queryParams.year) {
            //this.getHeader();
            this.setTopHeader();
            this.queryParams.pageNum = 1;
            this.getList();
          } else {
            this.$message("请选择年份");
          }
        } else {
          //this.getHeader();
          this.setTopHeader();
          this.queryParams.pageNum = 1;
          this.getList();
        }
      },

      setTopHeader() {
        let t = "统计时期";

        if (this.queryParams.year) {
          t = t + this.queryParams.year;
        }
        if (this.queryParams.month) {
          t = t + "-" + this.queryParams.month;
        }
        this.hearderTitle = t;
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加专利授权-概况统计";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getRzsViewStatisticsInfo(id).then((response) => {
          this.form = response.data;
          this.open = true;
          this.title = "修改专利授权-概况统计";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateRzsViewStatisticsInfo(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addRzsViewStatisticsInfo(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal
          .confirm('是否确认删除专利授权-概况统计编号为"' + ids + '"的数据项？')
          .then(function () {
            return delRzsViewStatisticsInfo(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "indica/cIndicationInfo/exportReportHzqy",
          {
            ...this.queryParams,
          },
          `rzsViewStatisticsInfo_${new Date().getTime()}.xlsx`
        );
      },
    },
  };
  </script>


  <style rel="stylesheet/scss" lang="scss" scoped>
  // ----------修改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>
