<template>
  <div>
    <!-- 头部导航面包屑 -->
    <div class="noticeindex-nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/bycnoticetm' }"
          >商标公告查询</el-breadcrumb-item
        >
        <el-breadcrumb-item v-if="choiceForm.num"
          >{{ choiceForm.num }}期公告</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <!-- 查询选择表单 -->
    <div class="choice-form">
      <el-form :inline="true" :model="choiceForm">
        <el-row class="first-row">
          <el-form-item label="公告类型：" class="left-span">
            <el-select
              v-model="choiceForm.type"
              placeholder="请选择"
              @change="changeType"
            >
              <!--TMZCSQ TMZCZC  TMQTZC-->
              <el-option label="商标初步审定公告" value="TMZCSQ"></el-option>
              <el-option label="商标注册公告（一）" value="TMZCZC"></el-option>
              <el-option label="商标注册公告（二）" value="TMQTZC"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公告期号：" class="left-span">
            <el-input
              v-model="choiceForm.num"
              placeholder="请输入公告期号"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请人：" class="left-span">
            <el-input
              v-model="choiceForm.user"
              placeholder="请输入申请人名称"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="商标名称：" class="left-span">
            <el-input
              v-model="choiceForm.name"
              placeholder="请输入商标名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商标类别：" class="left-span">
            <el-select
              v-model="choiceForm.kind"
              placeholder="全部类别"
              @change="changeKind"
            >
              <el-option
                v-for="item in ncloptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请号：" class="left-span">
            <el-input
              v-model="choiceForm.digit"
              placeholder="请输入商标申请号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              class="btn-size left-span"
              >查询</el-button
            >

            <el-button plain class="btn-size" @click="clearChoices"
              >重置</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 数据记录条数 -->
    <div class="record">
      <div class="title">
        共
        <span>&nbsp;{{ count > 10000 ? 10000 : count }}&nbsp;</span>条公告数据
      </div>
    </div>
    <!-- 商标表格 -->
    <div class="brand-form-wrap">
      <el-table :data="brandData" class="brand-form" v-loading="loading">
        <el-table-column
          prop="logo"
          label="商标图样"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <div class="img-wrap">
              <img :src="scope.row.logo" alt="" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sbmc"
          label="商标名称"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sbmc ? scope.row.sbmc : "---" }}</span>
          </template></el-table-column
        >
        <el-table-column
          prop="sblb"
          label="商标类别"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sblb ? scope.row.sblb : "---" }}</span>
          </template></el-table-column
        >
        <el-table-column prop="sbzch" label="申请号" align="center" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.sbzch ? scope.row.sbzch : "---" }}</span>
          </template></el-table-column
        >
        <el-table-column prop="zcr" label="申请人" align="center" width="300">
          <template slot-scope="scope">
            <!-- 申请人返回的是" " 不是"",故加个trim去掉空格-->
            <span>{{ scope.row.zcr.trim() ? scope.row.zcr : "---" }}</span>
          </template></el-table-column
        >
        <el-table-column
          prop="gglx"
          label="公告类型"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.gglx ? scope.row.gglx : "---" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ggqh"
          label="公告期号"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.ggqh ? scope.row.ggqh : "---" }}</span>
          </template></el-table-column
        >
        <el-table-column prop="branddetail" label="公告详情" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="passNoticeNumber(scope.$index, scope.row)"
              >公告详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="pagenation" v-if="count != 0">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :total="count > 10000 ? 10000 : count"
        :current-page="noticequeryparams.currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { noticequery } from "@/api/tmQuery.js";
export default {
  data() {
    return {
      // 查询选择表单数据
      choiceForm: {
        num: "", // 公告期号
        type: "", // 公告类型
        user: "", // 申请人
        name: "", // 商标名称
        kind: "all", // 商标类别
        digit: null // 申请号
      },
      // 商标表格数据
      brandData: [],

      // 商标类别 数据
      ncloptions: [
        { value: "all", label: "全部类别" },
        { value: "1", label: "01类 化学原料" },
        { value: "2", label: "02类 颜料油漆" },
        { value: "3", label: "03类 日化用品" },
        { value: "4", label: "04类 燃料油脂" },
        { value: "5", label: "05类 医药" },
        { value: "6", label: "06类 金属材料" },
        { value: "7", label: "07类 机械设备" },
        { value: "8", label: "08类 手工器械" },
        { value: "9", label: "09类 科学仪器" },
        { value: "10", label: "10类 医疗器械" },
        { value: "11", label: "11类 灯具空调" },
        { value: "12", label: "12类 运输工具" },
        { value: "13", label: "13类 军火烟火" },
        { value: "14", label: "14类 珠宝钟表" },
        { value: "15", label: "15类 乐器" },
        { value: "16", label: "16类 办公用品" },
        { value: "17", label: "17类 橡胶制品" },
        { value: "18", label: "18类 皮革皮具" },
        { value: "19", label: "19类 建筑材料" },
        { value: "20", label: "20类 家具" },
        { value: "21", label: "21类 厨房洁具" },
        { value: "22", label: "22类 绳网袋蓬" },
        { value: "23", label: "23类 纱线丝" },
        { value: "24", label: "24类 布料床单" },
        { value: "25", label: "25类 服装鞋帽" },
        { value: "26", label: "26类 钮扣拉链" },
        { value: "27", label: "27类 地毯席垫" },
        { value: "28", label: "28类 健身器材" },
        { value: "29", label: "29类 食品" },
        { value: "30", label: "30类 方便食品" },
        { value: "31", label: "31类 农林生鲜" },
        { value: "32", label: "32类 啤酒饮料" },
        { value: "33", label: "33类 酒" },
        { value: "34", label: "34类 烟草烟具" },
        { value: "35", label: "35类 广告销售" },
        { value: "36", label: "36类 金融物管" },
        { value: "37", label: "37类 建筑修理" },
        { value: "38", label: "38类 通讯服务" },
        { value: "39", label: "39类 运输贮藏" },
        { value: "40", label: "40类 材料加工" },
        { value: "41", label: "41类 教育娱乐" },
        { value: "42", label: "42类 科技服务" },
        { value: "43", label: "43类 餐饮住宿" },
        { value: "44", label: "44类 医疗园艺" },
        { value: "45", label: "45类 社会服务" }
      ],

      // 公告查询参数
      noticequeryparams: {
        noticenumber: "1656",
        applynumber: "",
        tmname: "大爱城控股",
        applier: "",
        noticetype: "TMZCSQ",
        nclNum: "all",
        pageSize: 20,
        currentPage: 1
      },

      // 共查出的数据条数
      count: 0,

      // loading动画
      loading: false
    };
  },
  methods: {
    // 点击 公告详情 跳到对应的公告详情页面
    passNoticeNumber(index, row) {
      // 提交请求
      this.$router.push({
        path: "/bycnoticedetail",
        query: {
          ggqh: row.ggqh,
          sbzch: row.sbzch,
          sbmc: row.sbmc // 公告请求的类型
        }
      });
    },

    // 分页器 改变当前页码
    async handleCurrentChange(val) {
      // 改变当前页码为点击到的高亮的页码
      this.noticequeryparams.currentPage = val;
      this.commonParams(); // 提交查询参数

      this.loading = true; // 查询数据之前显示 loading
      let result = await this.getNoticeQuery();

      // 如果查询后没有数据 就显示 0条记录 并 把表格数据置为空
      if (result == undefined) {
        this.brandData = [];
        this.count = 0;
      } else {
        // 请求回来的数据装填 数据表 和 记录条数
        this.brandData = result.rows;
        this.loading = false; //数据查询成功之后隐藏 loading
        this.count = result.count;
      }
    },

    // 提交查询参数
    commonParams() {
      this.noticequeryparams.noticenumber = this.choiceForm.num;
      this.noticequeryparams.applynumber = this.choiceForm.digit;
      this.noticequeryparams.tmname = this.choiceForm.name;
      this.noticequeryparams.applier = this.choiceForm.user;
      this.noticequeryparams.noticetype = this.choiceForm.type;
      this.noticequeryparams.nclNum = this.choiceForm.kind;
    },

    // 请求数据的方法提取
    getNoticeQuery() {
      return noticequery(this.noticequeryparams).then(res => {
        if (res.status == 0) {
          return res.data; // 返回请求成功的非空数据
        } else {
          // 服务器端请求失败
          this.$notify.error({
            title: "错误",
            message: res.msg
          });
        }
      });
    },

    // 提交查询
    async onSubmit() {
      this.commonParams(); // 提交查询参数

      if (/\D/.test(this.noticequeryparams.noticenumber)) {
        // 数字
        this.$message({
          message: "工期号只能是数字",
          type: "warning"
        });
      } else {
        this.noticequeryparams.currentPage = 1;
        this.loading = true; // 查询数据之前显示 loading
        let result = await this.getNoticeQuery();
        // 如果查询后没有数据 就显示 0条记录 并 把表格数据置为空
        if (result == undefined) {
          this.brandData = [];
          this.count = 0;
        } else {
          this.brandData = result.rows;
          this.loading = false; //数据查询成功之后隐藏 loading
          this.count = result.count;
        }
      }
    },

    // 下拉select框的选择条目的改变
    changeKind(value) {
      this.choiceForm.kind = value;
    },

    // 下拉公告类别的改变
    changeType(val) {
      this.choiceForm.type = val;
    },

    // 重置公告查询选项
    clearChoices() {
      this.choiceForm.num = null;
      this.choiceForm.type = null;
      this.choiceForm.user = null;
      this.choiceForm.name = null;
      this.choiceForm.kind = null;
      this.choiceForm.digit = null;
    }
  },
  created() {
    // form表格接收传过来的参数 并 装填上
    this.choiceForm.type = this.$route.query.type;
    this.choiceForm.num = this.$route.query.noticenum;
    this.commonParams(); // 提交查询参数
    // 进行公告查询 并 对返回的数据进行处理

    this.loading = true; // 查询数据之前显示 loading
    noticequery(this.noticequeryparams).then(res => {
      if (res.status == 0) {
        // 查询成功有数据就装填在表格里面 无数据表格提示查询数据为空
        this.brandData = res.data.rows;
        this.loading = false; //数据查询成功之后隐藏 loading
        this.count = res.data.count;
      } else {
        // 服务器端请求失败
        this.$notify.error({
          title: "错误",
          message: res.msg
        });
      }
    });
  },
  mounted() {}
};
</script>

<style lang="scss">
/* 头部导航面包屑 */
.noticeindex-nav {
  width: 1200px;
  margin: 0 auto;
  padding-top: 21px;
  padding-bottom: 19px;

  .el-breadcrumb {
    span:nth-child(1) {
      .el-breadcrumb__inner.is-link {
        color: #03004c;
        font-size: 16px;
      }
    }
    span:nth-child(2) {
      .el-breadcrumb__inner {
        color: #0989c5;
        font-size: 16px;
      }
    }
  }
}

/* 查询选择表单 */
.choice-form {
  background: rgba(247, 248, 252, 1);
  border: 1px solid rgba(239, 241, 249, 1);
  width: 1200px;
  height: 131px;
  margin: 0 auto;
  .el-form {
    .el-row {
      .el-form-item {
        .el-input {
          .el-input__inner {
            width: 220px;
            height: 34px;
            border-radius: 0px;
          }
        }
      }
      .el-form-item {
        .el-button {
          padding: 0;
          border-radius: 0px;
        }
      }
    }
  }

  .first-row {
    margin-top: 18px;
  }

  .left-span {
    margin-left: 20px;
    height: 34px;
  }

  .btn-size {
    width: 60px;
    height: 34px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
  }
}

/* 数据记录条数 */
.record {
  width: 1200px;
  margin: 0 auto;

  .title {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    padding: 10px 0 10px 20px;

    span {
      color: #108ee9;
    }
  }
}

/* 商标表格 */
.brand-form-wrap {
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #d6daeb;
  border-bottom: none;

  .brand-form {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    .img-wrap {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      background: url("https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png")
        no-repeat;
      background-size: 100% 100%;
    }
    img {
      display: block;
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }
    .el-table__header-wrapper .el-table__header .has-gutter tr th {
      background: rgba(247, 248, 252, 1);
    }
  }
}

/* 分页器 */
.pagenation {
  width: 1200px;
  height: 60px;
  background: #fff;
  border: 1px solid rgba(214, 218, 235, 1);
  margin: 0 auto;
  text-align: right;
  .el-pagination {
    margin: 15px 0;
  }
}
</style>
