<template>
  <div class="jdbycdetailtm">
    <div class="detailLoading" v-loading="true" v-if="loading"></div>
    <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 ? 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 ? 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">
                已注册群组
                <el-button
                  v-if="registeredList.length"
                  v-clipboard:copy="toStringList(registeredList)"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError"
                  @click="toStringList(registeredList)"
                  >复制</el-button
                >
              </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">
                {{ 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 ">
                {{ 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"
                  @click="getCompanyInfo(detaildata.dljg)"
                ></i>
              </td>
            </tr>
            <tr>
              <td class="td-title">商标公告流程</td>
              <td class="td-content" colspan="3">
                <ul class="announcement-process" v-if="detaildata.lcxx.length">
                  <li
                    v-for="(item, index) in detaildata.lcxx"
                    :key="index"
                    class="click"
                  >
                    {{ item.name }}
                    <i
                      class="el-icon-search"
                      @click="showImgDialog(item.name, item.link_url)"
                    ></i>
                  </li>
                </ul>
                <ul v-else>
                  暂无
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 图片弹出框 -->
    <el-dialog
      :title="imgTitle"
      :visible.sync="centerDialogVisible"
      center
      :width="imgUrl ? '30%' : '60%'"
    >
      <img v-if="imgUrl" :src="imgUrl" alt="" />
      <CompanyInfo v-else :title="imgTitle" />
    </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";
//请求接口
import { tradeMarkDetail } from "@/api/tmQuery.js";
export default {
  components: {
    CompanyInfo
  },
  data() {
    return {
      //loading
      loading: false,
      //头部进度条
      tmstatus: null,
      progressNarArr: [
        {
          icon: icon1,
          name: "申请中"
        },
        {
          icon: icon2,
          name: "已初审"
        },
        {
          icon: icon3,
          name: "已注册"
        },
        {
          icon: icon4,
          name: "已无效"
        }
      ],
      //主体内容
      detaildata: {
        lcxx: []
      },
      registeredList: [],
      unregisteredList: [],
      //弹出框
      centerDialogVisible: false,
      //弹框图片
      imgTitle: "",
      imgUrl: ""
    };
  },
  mounted() {
    let params = {
      sbzch: this.$route.query.sbzch,
      gjfl: this.$route.query.gjfl
    };
    this.loading = true;
    tradeMarkDetail(params).then(res => {
      this.loading = false;
      if (res.data.detaildata[0]) {
        if (res.data.detaildata[0].sbzt == "申请中") {
          this.tmstatus = 2;
        } else if (res.data.detaildata[0].sbzt == "已初审") {
          this.tmstatus = 3;
        } else if (res.data.detaildata[0].sbzt == "已注册") {
          this.tmstatus = 4;
        } else if (res.data.detaildata[0].sbzt == "已无效") {
          this.tmstatus = 5;
        }
      }
      this.detaildata = res.data.detaildata[0];
      this.registeredList = res.data.nclexist;
      this.unregisteredList = res.data.nclnotexist;
      console.log(this.detaildata);
    });
  },
  methods: {
    //复制数组到字符串
    toStringList(list) {
      let str = "";
      list.forEach((item, index) => {
        if (index < list.length - 1) {
          str += `${item.code} ${item.small_name},`;
        } else {
          str += `${item.code} ${item.small_name}`;
        }
      });
      return str;
    },
    //复制粘贴
    onCopy() {
      this.$message({
        message: "复制成功！",
        type: "success"
      });
    },
    onError() {
      this.$message.error("复制失败！");
    },
    //步骤条添加高亮
    progressNarBgColor(i) {
      var k = this.tmstatus - 2;
      if (i <= k) {
        return "background:#62b5db";
      } else if (i > k) {
        return "background:#eff1f9";
      }
    },
    progressNarColor(i) {
      var k = this.tmstatus - 2;
      if (i <= k) {
        return "color:rgb(9, 137, 197)";
      } else if (i > k) {
        return "color:#bbbbbb;";
      }
    },
    progressNarBorColor(i) {
      var k = this.tmstatus - 2;
      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() {},
    getCompanyInfo(name) {
      this.showImgDialog(name, "");
    }
  }
};
</script>

<style lang="scss">
.jdbycdetailtm {
  width: 100%;
  background: #eceef3;
  .detailLoading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  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 #e4eef6;
        }
        .td-first {
          width: 300px;
          height: 190px;
          background: #f0f7fc;
          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: #f0f7fc;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          letter-spacing: 0;
          text-align: center;
          line-height: 20px;
          padding: 15px;
          white-space: nowrap;
        }
        .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;
          padding: 15px 0;
          background: #f7f8fc;
          text-align: center;
          button {
            padding: 0;
            width: 60px;
            height: 25px;
            margin-left: 16px;
          }
        }
      }
      .register {
        width: 100%;
        padding: 20px;
        li {
          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>
