<template>
  <div>
    <!-- 头部导航面包屑 -->
    <div class="nav">
      <span>商标公告查询 ></span>&nbsp;
      <span>注册公告</span>
    </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">
              <el-option label="商标初步审定公告" value="chushen"></el-option>
              <el-option label="商标注册公告（一）" value="gonggaoyi"></el-option>
              <el-option label="商标注册公告（二）" value="gonggaoer"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公告期号：" class="left-span">
            <el-input v-model="choiceForm.num" class="info-box"></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"></el-input>
          </el-form-item>
          <el-form-item label="商标类别：" class="left-span">
            <el-select v-model="choiceForm.type" placeholder="全部类别" class="info-box">
              <el-option label="全部类别" value="all"></el-option>
              <el-option label="01" value="one"></el-option>
              <el-option label="02" value="two"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请号：" class="left-span">
            <el-input v-model="choiceForm.digit" class="info-box"></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">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!-- 数据记录条数 -->
    <div class="record">
      <div class="title">
        共
        <span>&nbsp;13420&nbsp;</span>条公告数据
      </div>
    </div>
    <!-- 商标表格 -->
    <div class="brand-form-wrap">
      <el-table :data="brandData" class="brand-form" header-row-class-name="tableHeader">
        <el-table-column prop="brandicon" label="商标图样" align="center" width="150">
          <img
            src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png"
            alt
          />
        </el-table-column>
        <el-table-column prop="brandname" label="商标名称" align="center" width="100"></el-table-column>
        <el-table-column prop="brandkind" label="商标类别" align="center" width="100"></el-table-column>
        <el-table-column prop="brandnum" label="申请号" align="center" width="100"></el-table-column>
        <el-table-column prop="branduser" label="申请人" align="center" width="300"></el-table-column>
        <el-table-column prop="brandtype" label="公告类型" align="center" width="200"></el-table-column>
        <el-table-column prop="branddigit" label="公告期号" align="center" width="150"></el-table-column>
        <el-table-column prop="branddetail" label="公告详情" align="center" width="100">
          <el-button type="text" size="small">公告详情</el-button>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="pagenation">
      <el-pagination background layout="prev, pager, next" :total="1000" class="pages"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询选择表单数据
      choiceForm: {
        // 公告期号
        num: "",
        // 公告类型
        type: "",
        // 申请人
        user: "",
        // 商标名称
        name: "",
        // 商标类别
        kind: "",
        // 申请号
        digit: 323
      },
      // 商标表格数据
      brandData: [
        {
          brandicon: "圣启",
          brandname: "圣启",
          brandkind: "6",
          brandnum: "37195529",
          branduser: "河南省海圣门窗销售有限公司",
          brandtype: "商标初步审定公告",
          branddigit: "1677(2019-12-27)",
          branddetail: "公告详情"
        },
        {
          brandicon: "圣启",
          brandname: "圣启",
          brandkind: "6",
          brandnum: "37195529",
          branduser: "河南省海圣门窗销售有限公司",
          brandtype: "商标初步审定公告",
          branddigit: "1677(2019-12-27)",
          branddetail: "公告详情"
        },
        {
          brandicon: "圣启",
          brandname: "圣启",
          brandkind: "6",
          brandnum: "37195529",
          branduser: "河南省海圣门窗销售有限公司",
          brandtype: "商标初步审定公告",
          branddigit: "1677(2019-12-27)",
          branddetail: "公告详情"
        },
        {
          brandicon: "圣启",
          brandname: "圣启",
          brandkind: "6",
          brandnum: "37195529",
          branduser: "河南省海圣门窗销售有限公司",
          brandtype: "商标初步审定公告",
          branddigit: "1677(2019-12-27)",
          branddetail: "公告详情"
        }
      ]
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style lang="scss" scoped>
/* 头部导航面包屑 */
.nav {
  width: 1200px;
  margin: 0 auto;
  padding-top: 21px;
  padding-bottom: 18px;
  span:nth-child(1) {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #262635;
  }
  span:nth-child(2) {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #108ee9;
  }
}

/* 查询选择表单 */
.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: 1200px;
  margin: 0 auto;
  .brand-form {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;

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

.tableHeader {
  background: #f7f8fc;
  border: 1px solid #d6daeb;
  width: 1198px;
  height: 38px;
}

/* 分页器 */
.pagenation {
  background: #f7f8fc;
  border: 1px solid #d6daeb;
  width: 1198px;
  height: 59px;
  margin: 0 auto;

  text-align: right;

  .pages {
    margin-top: 15px;
  }
}
</style>