<template>
  <div class="app-container">
    <div class="derived-list" v-if="false">
      <div><i class="el-icon-search"></i><span>筛选查询</span></div>
      <el-button type="primary" size="mini" @click="handleQuery"
        >查询结果</el-button
      >
    </div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <!-- <el-form-item
        label="局高价值专利标记时间"
        prop="appliAddress"
        label-width="200px"
      >
        <el-input
          v-model="queryParams.appliAddress"
          placeholder="请输入局高价值专利标记时间"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <!--州市要用修改后的字段来查-->
      <el-form-item label="州市" prop="modifyAppliCity" label-width="110px">
        <el-select
          v-model="queryParams.modifyAppliCity"
          placeholder="请选择州市"
          clearable
          @change="search"
        >
          <el-option
            v-for="region in regionOptions"
            :key="region.cityShortName"
            :label="region.cityShortName"
            :value="region.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="统计年份" prop="yearBatch" label-width="150px">
        <el-select
          v-model="queryParams.yearBatch"
          placeholder="请选择年份"
          clearable
        >
          <el-option
            v-for="year in yearList"
            :key="year"
            :label="year"
            :value="year"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="高价值类型" label-width="120px" prop="highValue">
        <el-select
          v-model="queryParams.highValue"
          placeholder="请选择高价值专利类型"
          clearable
        >
          <el-option
            v-for="item in highValueList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="出版社高价值专利"
        prop="isAddPopulation"
        label-width="150px"
      >
        <el-radio-group v-model="isPressHightValues">
          <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
        label="局高价值专利"
        prop="isAddPopulation"
        label-width="150px"
      >
        <el-radio-group v-model="isDeptHightValues">
          <el-radio
            v-for="t in isDeptHightValueList"
            :label="t.id"
            :key="t.id"
          >{{ t.name }}</el-radio
          >
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="局高价值专利标记时间"
        prop="appliAddressb"
        label-width="200px"
      >
        <!--
        <el-date-picker
          v-model="appliAddressb"
          type="daterange"
          @input="appDateInput"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        />-->

        <el-date-picker
          v-model="appliAddressb"
          type="month"
          placeholder="请选择"
          style="width: 100%;"
          value-format="yyyy-MM"
          format="yyyy-MM"
        />
      </el-form-item>





      <el-form-item style="margin-left: 20px;">
        <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 class="derived-list">
      <div>
        <Popover :visible="visible" :showColumnArr="showColumnArr" /><span
          >数据表</span
        >
      </div>
      <!-- <el-button type="primary" size="mini">导出列表</el-button> -->
    </div>
    <el-table
      v-loading="loading"
      :data="dHeightValuePatentDetailList"
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        background: '#2a8eed',
        color: '#fafcfe',
        'text-align': 'center',
        position: 'sticky',
        top: '0',
        left: '0',
      }"
      border
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
        label="主键"
        align="center"
        prop="id"
        v-if="show('id')"
      />

      <el-table-column
        label="数据类型"
        align="center"
        prop="dataType"
        width="100"
        v-if="show('dataType')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.dataType == 'act'
              ? "有效"
              : scope.row.dataType == 'pub'
              ? "公开"
              : ""
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="申请号"
        align="center"
        prop="appNumber"
        v-if="show('appNumber')"
      />
      <el-table-column
        label="申请日"
        align="center"
        prop="appDate"
        v-if="show('appDate')"
      />
      <el-table-column
        label="第一申请人（原始专利权人）"
        align="center"
        prop="appli"
        v-if="show('appli')"
      />

      <el-table-column
        label="申请人地址"
        align="center"
        prop="appliAddress"
        v-if="show('appliAddress')"
      />

      <el-table-column
        label="省份（原始）"
        align="center"
        prop="appliProvince"
        v-if="show('appliProvince')"
      />
      <el-table-column
        label="州市（原始）"
        align="center"
        prop="appliCity"
        v-if="show('appliCity')"
      />
      <el-table-column
        label="区县（原始）"
        align="center"
        prop="appliCounty"
        v-if="show('appliCounty')"
      />
      <el-table-column
        label="省份"
        align="center"
        prop="modifyAppliProvince"
        v-if="show('modifyAppliProvince')"
      />
      <el-table-column
        label="州市"
        align="center"
        prop="modifyAppliCity"
        v-if="show('modifyAppliCity')"
      />
      <el-table-column
        label="区县"
        align="center"
        prop="modifyAppliCounty"
        v-if="show('modifyAppliCounty')"
      />
      <el-table-column
        label="当前权利状态"
        align="center"
        prop="status"
        width="100"
        v-if="show('status')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.status == 10
              ? "有效"
              : scope.row.status == 20
              ? "无效"
              : "无效"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="高价值（出版社）"
        align="center"
        prop="heightValuePress"
        v-if="show('heightValuePress')"
      >
      <template slot-scope="scope">
          <span>{{
            scope.row.heightValuePress == 1
              ? "是"
              : scope.row.heightValuePress == 2
              ? "否"
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="战略性新兴产业"
        align="center"
        prop="hvSeisPress"
        v-if="show('hvSeisPress')"
      >
      <template slot-scope="scope">
          <span>{{
            scope.row.hvSeisPress == 1
              ? "是"
              : scope.row.hvSeisPress == 2
              ? "否"
              : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="在海外有同族专利"
        align="center"
        prop="hvHaveOverseasPress"
        v-if="show('hvHaveOverseasPress')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvHaveOverseasPress == 1
              ? "是"
              : scope.row.hvHaveOverseasPress == 2
              ? "否"
              : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="维持年限超十年"
        align="center"
        prop="hvKeep10Press"
        v-if="show('hvKeep10Press')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvKeep10Press == 1
              ? "是"
              : scope.row.hvKeep10Press == 2
              ? "否"
              : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="存在质押记录"
        align="center"
        prop="hvHighPledgePress"
        v-if="show('hvHighPledgePress')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvHighPledgePress == 1
              ? "是"
              : scope.row.hvHighPledgePress == 2
              ? "否"
              : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="获得国家科技奖或者中国专利奖"
        align="center"
        prop="hvTechnologyAwardPress"
        v-if="show('hvTechnologyAwardPress')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvTechnologyAwardPress == 1
              ? "是"
              : scope.row.hvTechnologyAwardPress == 2
              ? "否"
              : "否"
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="战略性新兴产业(局）"
        align="center"
        prop="hvSeisDept"
        v-if="show('hvSeisDept')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvSeisDept == 1
              ? ""
              : scope.row.hvSeisDept == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="在海外有同族专利(局）"
        align="center"
        prop="hvHaveOverseasDept"
        v-if="show('hvHaveOverseasDept')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvHaveOverseasDept == 1
              ? ""
              : scope.row.hvHaveOverseasDept == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="维持年限超十年(局）"
        align="center"
        prop="hvKeep10Dept"
        v-if="show('hvKeep10Dept')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvKeep10Dept == 1
              ? ""
              : scope.row.hvKeep10Dept == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="存在质押记录(局）"
        align="center"
        prop="hvHighPledgeDept"
        v-if="show('hvHighPledgeDept')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvHighPledgeDept == 1
              ? ""
              : scope.row.hvHighPledgeDept == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="获得国家科技奖或者中国专利奖(局）"
        align="center"
        prop="hvTechnologyAwardDept"
        v-if="show('hvTechnologyAwardDept')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.hvTechnologyAwardDept == 1
              ? ""
              : scope.row.hvTechnologyAwardDept == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="高价值（局）"
        align="center"
        prop="heightValueDept"
        v-if="show('heightValueDept')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.heightValueDept == 1
              ? ""
              : scope.row.heightValueDept == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="高价值（局）数据批次"
        align="center"
        prop="licCounts"
        v-if="show('licCounts')"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.licCounts == 1
              ? ""
              : scope.row.licCounts == 2
              ? ""
              : ""
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listDHeightValuePatentDetail,
  getDHeightValuePatentDetail,
  delDHeightValuePatentDetail,
  addDHeightValuePatentDetail,
  updateDHeightValuePatentDetail,
} from "@/api/highval/dHeightValuePatentDetail";
import { getRegionList } from "@/api/system/urPatentValid";
import { getYearList } from "@/api/report/rzlViewStatisticsInfo";
import { getHighValues, getApplicantTypesb } from "@/api/staticdata.js";
import Popover from "@/components/Popover";
import popoverData from "./mixis/popoverData";
export default {
  name: "DHeightValuePatentDetail",
  dicts: ["sys_status"],
  mixins: [popoverData],
  components: { Popover },
  data() {
    return {
      isDeptHightValues: [],
      isDeptHightValueList: [
        { id: "1", name: "是" },
        { id: "0", name: "否" },
      ],

      isPressHightValues: [],
      isPressHightValueList: [
        { id: "1", name: "是" },
        { id: "0", name: "否" },
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 查询年份数据
      yearList: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      appliAddressb: null,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 高价值专利详情表格数据
      dHeightValuePatentDetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      regionOptions: {},
      ysDistrictCounty: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        pubId: null,
        dataType: null,
        appNumber: null,
        appDate: null,
        appli: null,
        appliAddress: null,
        preCounts: null,
        highValue: null,
        appliProvince: null,
        appliCity: null,
        appliCounty: null,
        modifyAppliProvince: null,
        modifyAppliCity: null,
        modifyAppliCounty: null,
        status: null,
        heightValuePress: null,
        hvSeisPress: null,
        hvHaveOverseasPress: null,
        hvKeep10Press: null,
        hvHighPledgePress: null,
        hvTechnologyAwardPress: null,
        heightValueDept: null,
        hvSeisDept: null,
        hvHaveOverseasDept: null,
        hvKeep10Dept: null,
        hvHighPledgeDept: null,
        hvTechnologyAwardDept: null,
        licCounts: null,
        title: null,
        ipcMain: null,
        pleCounts: null,
        appTranCounts: null,
        locStr: null,
        curtCounts: null,
        nationalEcoStr: null,
        agencyName: null,
        pubNumber: null,
        patTranCounts: null,
        patentType: null,
        appliType: null,
        yearBatch: '2022',
      },
      // 表单参数
      form: {},
      activityRegs2: [],
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
    this.getYear();
    this.getRegion();
    this.highValueList = getHighValues();
  },
  methods: {
    search(q) {
      this.queryParams.appliCounty = "";
      this.regionOptions.forEach((item) => {
        if (q == item.cityName) {
          this.ysDistrictCounty = item.areaList;
        }
      });
    },
    /** 获取省市列表 */
    getRegion() {
      let params = {};
      getRegionList(params).then((response) => {
        console.log(response.data);
        this.regionOptions = response.data;
      });
    },
    /** 获取查询年份列表 */
    getYear() {
      getYearList().then((response) => {
        //this.hasYearList=response.data;
        this.yearList = response.data;
      });
    },
    appDateInput(e) {
      console.log(e);
      this.$nextTick(() => {
        if (e == null) {
          this.queryParams.beginDate = null;
          this.queryParams.endDate = null;
        } else {
          this.$set(this, "activityRegs2", [e[0], e[1]]);
          this.queryParams.beginDate = this.activityRegs2[0].replaceAll(
            "-",
            ""
          );
          this.queryParams.endDate = this.activityRegs2[1].replaceAll(
            "-",
            ""
          );
        }
      });
    },
    /** 查询高价值专利详情列表 */
    getList() {
      this.loading = true;
      listDHeightValuePatentDetail(this.queryParams).then((response) => {
        this.dHeightValuePatentDetailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        pubId: null,
        dataType: null,
        appNumber: null,
        appDate: null,
        appli: null,
        appliAddress: null,
        preCounts: null,
        highValue: null,
        appliProvince: null,
        appliCity: null,
        appliCounty: null,
        modifyAppliProvince: null,
        modifyAppliCity: null,
        modifyAppliCounty: null,
        status: null,
        heightValuePress: null,
        hvSeisPress: null,
        hvHaveOverseasPress: null,
        hvKeep10Press: null,
        hvHighPledgePress: null,
        hvTechnologyAwardPress: null,
        heightValueDept: null,
        hvSeisDept: null,
        hvHaveOverseasDept: null,
        hvKeep10Dept: null,
        hvHighPledgeDept: null,
        hvTechnologyAwardDept: null,
        licCounts: null,
        title: null,
        ipcMain: null,
        pleCounts: null,
        appTranCounts: null,
        locStr: null,
        curtCounts: null,
        nationalEcoStr: null,
        agencyName: null,
        pubNumber: null,
        patTranCounts: null,
        patentType: null,
        appliType: null,
        remark: null,
        delFlag: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        yearBatch: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.heightValueDept = this.isDeptHightValues;
      this.queryParams.heightValuePress = this.isPressHightValues;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.appliAddressb = null;
      this.queryParams.endDate = null;
      this.queryParams.beginDate = null;
      this.isPressHightValues = [];
      this.isDeptHightValues = [];
      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;
      getDHeightValuePatentDetail(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) {
            updateDHeightValuePatentDetail(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDHeightValuePatentDetail(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 delDHeightValuePatentDetail(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "highval/dHeightValuePatentDetail/export",
        {
          ...this.queryParams,
        },
        `dHeightValuePatentDetail_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.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 {
    display: flex;

    span {
      color: #616161;
      font-size: 14px;
      margin-left: 5px;
    }
  }
}
</style>
