<template>
  <div class="jdbycdetailtm">
    <div class="jdbycdetailtm-container">
      <div class="jdbycdetailtm-top">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>商标列表</el-breadcrumb-item>
          <el-breadcrumb-item>商标详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="jdbycdetailtm-main">
        <table class="table-main">
          <tbody class="tbody">
            <!-- 头部进度条 -->
            <tr>
              <td class="td-first">申请流程</td>
              <td class="td-el-steps" colspan="3">
                <div class="td-steps-right">
                  <div v-for="(o, i) in progressNarArr" :key="i">
                    <div class="td-steps-img" :style="progressNarBgColor(i)">
                      <img :src="o.icon" alt="" />
                    </div>
                    <div class="td-steps-name" :style="progressNarColor(i)">
                      {{ o.name }}
                    </div>
                    <div
                      class="td-border"
                      v-if="i != 3"
                      :style="progressNarBorColor(i)"
                    ></div>
                  </div>
                </div>
              </td>
            </tr>
            <!--  -->
            <tr>
              <td class="td-title">商标名称</td>
              <td class="td-content" colspan="2">{{ detaildata.sbmc }}</td>
              <td class="imgtd" rowspan="5">
                <img
                  v-if="detaildata.logo"
                  :src="detaildata.logo"
                  @click="showImgDialog('', detaildata.logo)"
                />
                <img
                  v-else
                  src="https://gsb-zc.oss-cn-beijing.aliyuncs.com/zc_imagequery293101543401586324201828183946324czhd.png"
                />
              </td>
            </tr>
            <tr>
              <td class="td-title">申请号</td>
              <td class="td-content" colspan="2">
                {{ detaildata.sbzch ? detaildata.sbzch : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">法律状态</td>
              <td class="td-content" style="color: #108EE9;" colspan="2">
                {{ detaildata.sbzt }}
              </td>
            </tr>
            <tr>
              <td class="td-title">国际分类</td>
              <td class="td-content" colspan="2">
                {{ detaildata.gjflname ? detaildata.gjflname : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">申请日期</td>
              <td class="td-content" colspan="2">
                {{ detaildata.sqrq ? detaildata.sqrq : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">申请人名称</td>
              <td class="td-content" style="color: #108EE9;" colspan="3">
                <span>{{ detaildata.zcr ? detaildata.zcr : "---" }}</span>
                <i
                  @click="getCompanyInfo(detaildata.zcr)"
                  class="el-icon-search"
                ></i>
              </td>
            </tr>
            <tr>
              <td class="td-title">申请人地址</td>
              <td class="td-content" colspan="3">
                {{ detaildata.zcdz ? detaildata.zcdz : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">申请人名称（英文）</td>
              <td class="td-content" colspan="3">
                {{ detaildata.zcren ? detaildata.zcren : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">申请人地址（英文）</td>
              <td class="td-content" colspan="3">
                {{ detaildata.zcdzen ? detaildata.zcdzen : "---" }}
              </td>
            </tr>
            <!--商品/服务项目-->
            <tr>
              <td class="td-title" rowspan="2">商品/服务项目</td>
              <td class="project-title">已注册群组</td>
              <td class="project-title" colspan="2">未注册群组</td>
            </tr>
            <tr>
              <td>
                <ul class="register" v-if="registeredList.length">
                  <li v-for="(item, index) in registeredList" :key="index">
                    {{ item.code }} {{ item.small_name }}
                  </li>
                </ul>
                <ul class="register" v-else>
                  <li>暂无</li>
                </ul>
              </td>
              <td colspan="2">
                <ul class="register" v-if="unregisteredList.length">
                  <li v-for="(item, index) in unregisteredList" :key="index">
                    {{ item.code }} {{ item.name }}
                  </li>
                </ul>
                <ul class="register" v-else>
                  <li>暂无</li>
                </ul>
              </td>
            </tr>
            <!--  -->
            <tr>
              <td class="td-title">初审公告期号</td>
              <td class="td-content click">
                {{ detaildata.csgg ? "第" + detaildata.csgg + "期" : "---"
                }}<i
                  v-if="detaildata.csgg"
                  @click="getLinkUrl(detaildata.csgg)"
                  class="el-icon-search"
                ></i>
              </td>
              <td class="td-title">初审公告日期</td>
              <td class="td-content">
                {{ detaildata.csrq ? detaildata.csrq : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">注册公告期号</td>
              <td class="td-content click">
                {{ detaildata.zcgg ? "第" + detaildata.zcgg + "期" : "---"
                }}<i
                  v-if="detaildata.zcgg"
                  @click="getLinkUrl(detaildata.zcgg)"
                  class="el-icon-search"
                ></i>
              </td>
              <td class="td-title">注册公告日期</td>
              <td class="td-content">
                {{ detaildata.zcrq ? detaildata.zcrq : "---" }}
              </td>
            </tr>
            <tr>
              <td class="td-title">专用权期限</td>
              <td class="td-content">
                {{ detaildata.zcrq ? detaildata.zcrq : "---" }}至{{
                  detaildata.jzrq ? detaildata.jzrq : "---"
                }}
              </td>
              <td class="td-title">代理机构名称</td>
              <td class="td-content click">
                {{ detaildata.dljg ? detaildata.dljg : "---"
                }}<i v-if="detaildata.dljg" class="el-icon-search"></i>
              </td>
            </tr>
            <tr>
              <td class="td-title">商标公告流程</td>
              <td class="td-content" colspan="3">
                <ul class="announcement-process">
                  <li
                    v-for="(item, index) in detaildata.lcxx"
                    :key="index"
                    class="click"
                  >
                    {{ item.name }} <i class="el-icon-search"></i>
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 图片弹出框 -->
    <el-dialog :title="imgTitle" :visible.sync="centerDialogVisible" center>
      <img v-if="imgUrl" :src="imgUrl" alt="" />
      <CompanyInfo v-else />
    </el-dialog>
  </div>
</template>

<script>
import icon1 from "@/assets/imgs/jdt/shenqing.png";
import icon2 from "@/assets/imgs/jdt/chushen.png";
import icon3 from "@/assets/imgs/jdt/zhuce.png";
import icon4 from "@/assets/imgs/jdt/wuxiao.png";
//
import CompanyInfo from "./companyInfo";
//

export default {
  components: {
    CompanyInfo
  },
  data() {
    return {
      //头部进度条
      tmstatus: null,
      progressNarArr: [
        {
          icon: icon1,
          name: "申请中"
        },
        {
          icon: icon2,
          name: "已初审"
        },
        {
          icon: icon3,
          name: "已注册"
        },
        {
          icon: icon4,
          name: "已无效"
        }
      ],
      //主体
      detaildata: {},
      registeredList: [],
      unregisteredList: [],
      processList: [
        "2019-03-13 商标注册公告（一）",
        "2019-03-13 商标注册公告（一）"
      ],
      //弹出框
      centerDialogVisible: false,
      imgTitle: "",
      imgUrl: ""
    };
  },
  mounted() {},
  methods: {
    progressNarBgColor(i) {
      var k = this.tmstatus;
      if (i <= k) {
        return "background:#62b5db";
      } else if (i > k) {
        return "background:#eff1f9";
      }
    },
    progressNarColor(i) {
      var k = this.tmstatus;
      if (i <= k) {
        return "color:#0989c5";
      } else if (i > k) {
        return "color:#bbbbbb;";
      }
    },
    progressNarBorColor(i) {
      var k = this.tmstatus;
      if (i < k) {
        return "border-color:#62b5db;";
      } else if (i >= k) {
        return "border-color:#eff1f9;";
      }
    },
    showImgDialog(title, url) {
      this.imgTitle = title;
      this.imgUrl = url;
      this.centerDialogVisible = true;
    },
    getLinkUrl(num) {},
    getCompanyInfo(name) {
      this.showImgDialog("", "");
    }
  }
};
</script>

<style lang="scss">
.jdbycdetailtm {
  width: 100%;
  height: 100%;
  background: #eceef3;
  overflow: auto;
  i {
    cursor: pointer;
  }
  .jdbycdetailtm-container {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 0 20px 20px;
  }
  //弹出框
  .el-dialog {
    .el-dialog__body {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
.jdbycdetailtm-top {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
}
.jdbycdetailtm-main {
  width: 100%;
  .table-main {
    width: 100%;
    .tbody {
      width: 100%;
      tr {
        width: 100%;
        td {
          border: 1px solid #d6daeb;
        }
        .td-first {
          width: 300px;
          height: 190px;
          background: #f7f8fc;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
        }
        .td-el-steps {
          padding: 0 110px;
        }
        .td-title {
          height: 40px;
          background: #f7f8fc;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
          line-height: 20px;
        }
        .td-content {
          min-width: 300px;
          text-align: left;
          padding-left: 17px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          letter-spacing: 0;
          line-height: 20px;
          text-align: left;
        }
        .click {
          color: #108ee9;
        }
        .imgtd {
          width: 196px;
          padding: 38px;
          img {
            width: 100%;
          }
        }
        .project-title {
          width: 450px;
          height: 40px;
          background: #f7f8fc;
          text-align: center;
        }
      }
      .register {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 20px;
        li {
          width: 50%;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          letter-spacing: 0;
          line-height: 20px;
        }
      }
      .announcement-process {
        width: 100%;
        padding: 10px 20px;
        li {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          letter-spacing: 0;
          line-height: 30px;
          i {
            color: #108ee9;
          }
        }
      }
    }
  }
  .td-steps-right {
    width: 100%;
    display: flex;
    background-color: #fff;
  }
  .td-steps-right > div {
    flex: 1;
    position: relative;
  }
  .td-steps-img {
    width: 60px;
    height: 60px;
    display: flex;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    border-radius: 50%;
  }
  .td-steps-img > img {
    width: 50px;
    height: 50px;
    margin: auto;
  }
  .td-steps-name {
    margin-top: 10px;
    margin-left: 5px;
    width: 50px;
    height: 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
  }
  .td-border {
    width: 70px;
    border-top: 4px solid #62b5db;
    height: 1px;
    overflow: hidden;
    position: absolute;
    right: 15px;
    top: 30px;
    border-radius: 100px;
  }
}
</style>
