<template>
  <div>
    <Row :gutter="30">
      <Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
        <div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
          <Icon size="24" :type="item.icon" />
          <p>{{item.title}}</p>
        </div>
      </Col>
      <!-- 外部链接，只有pc端跳转 -->
      <Col span="6" v-if="$route.name === 'renovation'">
        <div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
          <Poptip v-model="linkVisible">
              <Icon size="24" :type="linkItem.icon" />
              <p>{{linkItem.title}}</p>
              <div slot="title">链接地址</div>
              <div slot="content">
                  <Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
              </div>
          </Poptip>

        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      linkList: [ // 链接列表
        {
          title: "首页",
          icon: "md-home",
          ___type: "home",
        },
        {
          title: "购物车",
          icon: "md-cart",
          ___type: "cart",
        },
        {
          title: "收藏商品",
          icon: "md-heart",
          ___type: "collection",
        },
        {
          title: "我的订单",
          icon: "md-document",
          ___type: "order",
        },
        {
          title: "个人中心",
          icon: "md-person",
          ___type: "user",
        },
        {
          title: "拼团频道",
          icon: "md-flame",
          ___type: "group",
        },
        {
          title: "秒杀频道",
          icon: "md-flame",
          ___type: "seckill",
        },
        {
          title: "领券中心",
          icon: "md-pricetag",
          ___type: "coupon",
        },
        {
          title: "签到",
          icon: "md-happy",
          ___type: "sign",
        },
        {
          title: "小程序直播",
          icon: "ios-videocam",
          ___type: "live",
        },

      ],
      linkItem: {
        title: "外部链接",
        icon: "ios-link",
        ___type: "link",
        url: ''
      },
      linkVisible: false, // 是否显示外部链接
      selectedIndex: 9999999, // 已选index
    };
  },
  methods: {
    handleLink(val, index) {
      val = {...val,___type:'other'}
      this.selectedIndex = index;
      if (index === this.linkList.length) {
        this.linkVisible = true
      } else {
        this.linkVisible = false
      }
      this.$emit("selected",[val])
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style.scss";
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
  margin: 10px 0;
  text-align: center;
  transition: 0.35s;
  cursor: pointer;
  /deep/ p {
    margin: 10px 0;
  }
  border: 1px solid #ededed;
}
.card:hover{
   background: #ededed;
}
.active {
  background: #ededed;
}
</style>
