<template>
  <div>
    <!-- 头部导航面包屑 -->
    <div class="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/bycnoticetm' }"
          >商标公告查询</el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ 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="请选择"
              class="info-box"
              @change="changeType"
            >
              <el-option label="商标初步审定公告" value="TMZCSQ"></el-option>
              <!--TMZCSQ TMZCZC  TMQTZC-->
              <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"
              class="info-box"
              placeholder="请输入公告期号"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请人：" class="left-span">
            <el-input
              v-model="choiceForm.user"
              placeholder="请输入申请人名称"
              class="info-box"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="商标名称：" class="left-span">
            <el-input
              v-model="choiceForm.name"
              class="info-box"
              placeholder="请输入商标名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="商标类别：" class="left-span">
            <el-select
              v-model="choiceForm.kind"
              placeholder="全部类别"
              class="info-box"
              @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"
              class="info-box"
              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 }}&nbsp;</span>条公告数据
      </div>
    </div>
    <!-- 商标表格 -->
    <div class="brand-form-wrap">
      <el-table :data="brandData" class="brand-form">
        <el-table-column
          prop="logo"
          label="商标图样"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <img :src="scope.row.logo" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          prop="sbmc"
          label="商标名称"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="sblb"
          label="商标类别"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="sbzch"
          label="申请号"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="zcr"
          label="申请人"
          align="center"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="gglx"
          label="公告类型"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="ggqh"
          label="公告期号"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="branddetail"
          label="公告详情"
          align="center"
          width="90"
        >
          <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"
        :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
    };
  },
  methods: {
    // 点击 公告详情 跳到对应的公告详情页面
    passNoticeNumber(index, row) {
      // console.log(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.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;

      let result = await noticequery(this.noticequeryparams).then(res => {
        if (res.status == 0) {
          if (res.data.rows.length == 0) {
            this.$notify({
              title: "警告",
              message: "没有该商品", // 服务器端返回的数据为空
              type: "warning"
            });
          } else {
            return res.data; // 返回请求成功的非空数据
          }
        } else {
          // 服务器端请求失败
          this.$notify.error({
            title: "错误",
            message: res.msg
          });
        }
      });

      if (result == undefined) {
        this.brandData = [];
        this.count = 0;
      } else {
        // 请求回来的数据装填 数据表 和 记录条数
        this.brandData = result.rows;
        this.count = result.count;
      }
    },

    // 提交查询
    async onSubmit() {
      console.log("submit!");
      // 提交查询参数
      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;
      this.noticequeryparams.currentPage = 1;
      console.log(this.noticequeryparams);

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

      // 如果查询后没有数据 就显示 0条记录 并 把表格数据置为空
      if (result == undefined) {
        this.brandData = [];
        this.count = 0;
      } else {
        this.brandData = result.rows;
        this.count = result.count;
      }
    },

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

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

    // 重置公告查询选项
    clearChoices() {
      console.log("clear, clear, clear");
      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.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;
    // 进行公告查询 并 对返回的数据进行处理
    noticequery(this.noticequeryparams).then(res => {
      if (res.status == 0) {
        if (res.data.rows.length == 0) {
          // 服务器端返回的数据为空
          // this.$notify({
          //   title: "警告",
          //   message: "没有该商品",
          //   type: "warning"
          // });
        } else {
          this.brandData = res.data.rows;
          this.count = res.data.count;
        }
      } else {
        // 服务器端请求失败
        this.$notify.error({
          title: "错误",
          message: res.msg
        });
      }
    });
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
/* 头部导航面包屑 */
.nav {
  width: 1200px;
  margin: 0 auto;
  padding-top: 21px;
  padding-bottom: 18px;
  // 样式，，，
  .el-breadcrumb > .el-breadcrumb__item > .el-breadcrumb__inner {
    color: rgb(9, 137, 197);
    font-size: 16px;
  }
}

/* 查询选择表单 */
.choice-form {
  background: #f7f8fc;
  border: 1px solid #eff1f9;
  width: 1198px;
  height: 129px;
  margin: 0 auto;

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

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

  .info-box {
    width: 220px;
    height: 334px;
  }

  /* .el-input__inner {
    border-radius: 0px;
  } */

  .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: 1198px;
  margin: 0 auto;
  border: 1px solid #d6daeb;

  .brand-form {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;

    img {
      display: block;
      width: 80px;
      height: 80px;
    }
  }
}

/* 分页器 */
.pagenation {
  background: #f7f8fc;

  width: 1198px;
  height: 59px;
  margin: 0 auto;

  text-align: right;
}
</style>
