<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="对比周期" label-width="120px">
          <el-date-picker
            v-model="appDate1"
            type="monthrange"
            @input="appDateInput1"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
          />
          和
          <el-date-picker
            v-model="appDate2"
            type="monthrange"
            @input="appDateInput2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM"
            value-format="yyyy-MM"
          />
        </el-form-item>



        <el-form-item label="地区级别" prop="province" label-width="120px">
          <el-select
            v-model="queryParams.province"
            placeholder="请选择省份"
          >
            <el-option label="云南省" value="53"></el-option>
          </el-select>

          <el-select
            v-model="queryParams.appliCity"
            placeholder="请选择州市"
            @change="search"
          >
            <el-option label="不选择" value="null"></el-option>
            <el-option label="全部州市" value="all"></el-option>
            <el-option
              v-for="region in regionOptions"
              :key="region.cityShortName"
              :label="region.cityShortName"
              :disabled="region.cityShortName == '云南省'"
              :value="region.code"
            />
          </el-select>
          <el-select
            v-model="queryParams.appliCounty"
            placeholder="请选择区县"
            :disabled="opensb"
          >
            <el-option label="不选择" value="null"></el-option>
            <el-option label="全部区县" value="all"></el-option>
            <!--
            <el-option
              v-for="item in ysDistrictCounty"
              :key="item.cityShortName"
              :label="item.cityShortName"
              :value="item.name"
            />-->
          </el-select>
        </el-form-item>
          <el-form-item
        label="对比数据"
        prop="isDeptHightValues"
        label-width="150px"
      >
      <el-radio-group v-model="queryParams.isDeptHightValues">
          <el-radio
            v-for="t in isPressHightValueList"
            :label="t.id"
            :key="t.id"
          >{{ t.name }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
        <el-form-item style="margin-left: 50px;">
          <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="尼斯类别号" width="100" align="center">
                <template slot-scope="scope">
                <span>{{ scope.row["nc"] }}</span>
                </template>
            </el-table-column>
              <el-table-column label="尼斯类别名称" width="500" align="center">
                  <template slot-scope="scope">
                  <span>{{ scope.row["ncStr"] }}</span>
                  </template>
              </el-table-column>
              <el-table-column label="数据" align="center" width="300" >
                  <el-table-column label="对比日期" align="center">
                    <template slot-scope="scope">
                    <span>{{ scope.row["compareRate"] }}</span>
                    </template>
                  </el-table-column>
              </el-table-column>
            <el-table-column :label="zbctitles" align="center" >
              <el-table-column v-for="t in areaNames" :label="t" :key="t" align="center" width="280">
                <template slot-scope="scope">
                <span>{{ scope.row[t] }}</span>
                </template>
              </el-table-column>
            </el-table-column>

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

  <script>
    import {listReportNcGrowth} from '@/api/trademark/chineseTrademarkApplication'
    import {getRegionList} from "@/api/system/urPatentValid";
  export default {
    name: "Growthratestatistics",
    data() {
      return {
        maxHeight: 0,
        yearList: [],
        headerList: [],
        Population:[],
        hearderTitle: "统计时期:2022",
        yearColumn1: "年",
        yearColumn2: "年发明专利有效量（件）",
        yearColumn3: "年人口（万人）",
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        appDate:[],
        zbctitles:'',
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 专利有效-万人发明拥有量统计表格数据
        popuYearList: ['2001','2002'],
        isPressHightValueList: [
        { id: "2", name: "有效" },
        { id: "1", name: "申请" },
        { id: "0", name: "注册" },

      ],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        opensb:false,
        regionOptions: {},
        areaNames:[],
        appDate1: ['2020-12','2021-12'],
        appDate2: ['2021-12','2022-12'],
        ysDistrictCounty: [],
        regionOptions: [],
        // cpContentArr: ["1", "2"],
        // 查询参数
        queryParams: {
          isDeptHightValues:'2',
          // cpContentArr: ["1", "2"],
          cpContents: null,
          province:"53",
          appliCity:null,
          appliCounty:null,
          pageNum: 1,
          pageSize: 10,
          patentType: null,
          cityCode: null,
          cityName: null,
          //year: "2022",
          //month: "12",
          higherSchool: null,
          researchInstitute: null,
          status: null,
          beginDate1:'202012',
          endDate1:'202112',
          beginDate2:'202112',
          endDate2:'202212',
        },
        // 表单参数
        form: {},
        activityRegs: [],
        activityRegs2: ['2021-12','2022-12'],
        activityRegs1: ['2020-12','2021-12'],
        // 表单校验
        rules: {},
      };
    },
    created() {
      this.getHeader();
      this.getList();
      if (this.ysDistrictCounty > 0) {
        this.opensb = false;
      } else {
        this.opensb = true;
      }
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 200; //300是页面中除了表格外其他组件的高度
      });
      this.getRegion()
    },
    methods: {
      /** 获取省市列表 */
     getRegion() {
      let params = {};
      getRegionList(params).then((response) => {
        this.regionOptions = response.data;
      });
    },
      appDateInput1(e) {
        console.log(e,'appDateInput1');
        this.$nextTick(() => {
          if (e == null) {
            this.queryParams.beginDate1 = null;
            this.queryParams.endDate1 = null;
          } else {
            console.log(this.activityRegs1);
            this.$set(this, "activityRegs1", [e[0], e[1]]);
            this.queryParams.beginDate1 = this.activityRegs1[0].replaceAll("-", "");
            this.queryParams.endDate1 = this.activityRegs1[1].replaceAll("-", "");
          }
        });
      },

      appDateInput2(e) {
        console.log(e,'appDateInput2');
        this.$nextTick(() => {
          if (e == null) {
            this.queryParams.beginDate2 = null;
            this.queryParams.endDate2 = null;
          } else {
            console.log(this.activityRegs2);
            this.$set(this, "activityRegs2", [e[0], e[1]]);
            this.queryParams.beginDate2 = this.activityRegs2[0].replaceAll(
              "-",
              ""
            );
            this.queryParams.endDate2 = this.activityRegs2[1].replaceAll("-", "");
          }
        });
      },


      /** 获取动态表头 */
      getHeader() {
        let head = "统计时期";
        this.hearderTitle = head;
      },
      search(q) {
        console.log(q);
        if (q == null || q == "" || q == "null"|| q == "all") {
          this.opensb = true;
          //this.queryParams.appliCounty = null;
          this.queryParams.appliCounty='null';
        } else {
          this.opensb = false;
          this.queryParams.appliCounty = "null";
          this.regionOptions.forEach((item) => {
            if (q == item.cityName) {
              this.ysDistrictCounty = item.areaList;
              this.opensb = false;
            }
          });
        }
      },
      refreshHeader() {
        //this.queryType = this.queryParams.queryType;
        this.cpContentArr = this.queryParams.cpContentArr;
      },
      /** 查询专利有效-万人发明拥有量统计列表 */
      getList() {
        this.loading = true;
        this.refreshHeader();
        if(this.queryParams.isDeptHightValues == 0){
          this.zbctitles = '注册'
        }else if(this.queryParams.isDeptHightValues == 1){
          this.zbctitles = '申请'
        }else if(this.queryParams.isDeptHightValues == 2){
          this.zbctitles = '有效'
        }
        //let queryType2 = this.queryType;
        let cpContentArr2 = this.cpContentArr;

        // let cpContents = "";
        // if (cpContentArr2.length > 0) {
        //   for (let i = 0; i < cpContentArr2.length; i++) {
        //     if (i > 0) {
        //       cpContents = cpContents + ",";
        //     }
        //     cpContents = cpContents + cpContentArr2[i];
        //   }
        // }
        // this.queryParams.cpContents = cpContents;

        listReportNcGrowth(this.queryParams).then(response=>{
          // this.popuYearList =  res.data.years
          // this.Population = res.data.list
          this.loading = false;
          let temp = [];
          this.areaNames=response.data.areaNames;
          response.data.dataList.forEach((item) => {
            let r1 = {};
            r1.areaName = item.areaName;
            r1.nc = item.nc;
            r1.ncStr = item.ncStr;
            r1 = { ...r1, ...item.ncItem1 };
            let r2 = {};
            r2.areaName = "";
            r2 = { ...r2, ...item.ncItem2 };
            let r3 = {};
            r3 = { ...item.ncGrowth };
            r3['regTotalCnt']=r3['regGrowth'];
            r3['aplTotalCnt']=r3['aplGrowth'];
            r3['actTotalCnt']=r3['actGrowth'];
            temp.push(r1);
            temp.push(r2);
            temp.push(r3);
          });
          this.Population = temp;
          console.log(this.Population)


        })

      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          patentType: null,
          cityCode: null,
          cityName: null,
          //year: null,
         // month: null,
          higherSchool: null,
          researchInstitute: null,
          remark: null,
          delFlag: null,
          status: 0,
          createTime: null,
          createBy: null,
          updateTime: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        // if (this.queryParams.month) {
        //   if (this.queryParams.year) {
        //     this.getHeader();
        //     this.queryParams.pageNum = 1;
        //     this.getList();
        //   } else {
        //     this.$message("请选择年份");
        //   }
        // } else {
          this.getHeader();
          this.queryParams.pageNum = 1;
          this.getList();
        // }
      },
      /** 重置按钮操作 */
      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;
        getRzlInventStatisticsInfo(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) {
              updateRzlInventStatisticsInfo(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addRzlInventStatisticsInfo(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 delRzlInventStatisticsInfo(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "trade/cTrademark/exportReportNcGrowth",
          {
            ...this.queryParams,
          },
          `rzlInventStatisticsInfo_${new Date().getTime()}.xlsx`
        );
      },
    },
  };
  </script>
