<template>
  <div class="item_card" :style="{ height: props.flag ? '242px' : '206px' }">
    <div class="action_box" v-if="props.flag">
      <div class="can_click_text" @click="deleteItem(props.item)">删除</div>
      <div class="can_click_text" @click="move(1)" :class="props.item.canDown ? '' : 'disabled'">
        下移
      </div>
      <div class="can_click_text" @click="move(2)" :class="props.item.canUp ? '' : 'disabled'">
        上移
      </div>
    </div>
    <div class="top_info" :style="{ 'padding-left': !props.flag ? '8px' : '24px' }">
      <template v-if="props.item.isSelected">
        <el-checkbox
          v-if="!props.flag"
          class="select_box"
          v-model="props.item.isSelected"
          :disabled="props.item.isSelected"
          @change="changeSelectedList"></el-checkbox>
      </template>
      <el-checkbox
        v-else-if="!props.flag"
        class="select_box"
        v-model="checked"
        @change="changeSelectedList"></el-checkbox>
      <div class="logo">
        <img
          v-if="props.item.ability_logo !== '[]'"
          :src="JSON.parse(props.item.ability_logo)[0].url"
          alt="" />
        <img v-else src="../assets/imgs/img_cover_ability.png" alt="" />
      </div>
      <div class="info">
        <div class="name">
          <el-tooltip
            class="box-item"
            effect="light"
            :content="props.item.ability_name"
            placement="top">
            <span class="ability_name">{{ props.item.ability_name }}</span>
          </el-tooltip>
          <span class="icon_box openness" :class="openClassObj[props.item.openness_id]">{{
            props.item.openness
          }}</span>
          <span class="icon_box mock" v-if="props.item.include_mock_service">mock</span>
        </div>
        <div class="count">
          <div class="box1">
            <div class="score_box">
              <el-rate v-model="props.item.score" disabled />
            </div>
            <span class="score">{{ props.item.score }}</span>
          </div>
          <div class="line"></div>
          <div class="box2">
            阅读{{
              props.item.browse_count == 0 ||
              (props.item.browse_count && props.item.browse_count < 10000)
                ? props.item.browse_count
                : props.item.browse_count < 10000000
                ? Math.floor(props.item.browse_count / 10000) + "万+"
                : "999万+"
            }}
          </div>
          <div class="line"></div>
          <div class="box3">
            调用{{
              props.item.call_count == 0 || (props.item.call_count && props.item.call_count < 10000)
                ? props.item.call_count
                : props.item.call_count < 10000000
                ? Math.floor(props.item.call_count / 10000) + "万+"
                : "999万+"
            }}
          </div>
        </div>
      </div>
    </div>
    <div
      class="bottom_info"
      :style="{ height: props.flag ? 'calc(100% - 128px)' : 'calc(100% - 92px)' }">
      <div class="desc" :title="props.item.synopsis">
        {{ props.item.synopsis }}
      </div>
      <div class="action">
        <span class="fws" :title="props.item.develop">
          <bg-icon style="font-size: 14px; color: #909bb6" icon="#bg-ic-shop" />
          {{ props.item.develop }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const checked = ref(false);
const router = useRouter();
const props = defineProps({
  item: {
    type: Object,
    default: {},
  },
  flag: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["changeSelectedList", "deleteItem", "move"]);
const openClassObj = {
  "9de06ba6-6ee2-4449-91d9-31a1c7554311": "open",
  "4e8b4c37-e565-4195-8303-3b1ccd48dd13": "share",
  "4e8b4c37-e565-4195-8303-3b1ccd48dd12": "limit",
  "4e8b4c37-e565-4195-8303-3b1ccd48dd16": "sensitive",
};

const changeSelectedList = () => {
  emit("changeSelectedList", props.item, checked.value);
};
const deleteItem = (item) => {
  emit("deleteItem", item);
};
const move = (type) => {
  if ((type == 1 && !props.item.canDown) || (type == 2 && !props.item.canUp)) {
    return;
  }
  let temp = {
    item: props.item,
    type: type,
  };
  emit("move", temp);
};
</script>

<style lang="scss" scoped>
.item_card {
  width: 384px;
  // margin-right: 16px;
  margin-bottom: 16px;
  height: 206px;
  background-color: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(18, 30, 63, 0.08);
  border-radius: 6px;
  &:nth-child(3n) {
    margin-right: 0;
  }
  .action_box {
    height: 36px;
    background-color: #dfe5f5;
    display: flex;
    line-height: 36px;
    flex-direction: row-reverse;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    .can_click_text {
      margin-right: 16px;
    }
    .disabled {
      cursor: not-allowed;
      color: #a9b1c7;
    }
  }
  .top_info {
    width: 100%;
    height: 92px;
    padding: 0 16px 0 8px;

    padding-top: 24px;
    border-bottom: 1px solid #edeff2;
    display: flex;
    .select_box {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      margin-top: 16px;
    }
    .logo {
      width: 48px;
      height: 48px;
      margin-right: 16px;
      img {
        width: 48px;
      }
    }
    .info {
      width: calc(100% - 86px);
      .name {
        width: 100%;
        display: flex;
        align-items: center;
        .ability_name {
          max-width: calc(100% - 85px);
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          color: #202531;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .icon_box {
          height: 18px;
          border: 1px solid #fff;
          font-size: 12px;
          line-height: 16px;
          margin-left: 6px;
          text-align: center;
          border-radius: 3px;
        }
        .openness {
          width: 33px;
          color: #429e8a;
          background-color: #ecf5f4;
          border-color: #a1cfc5;
        }

        .open {
          background-color: #f0f5eb;
          border-color: #bbd19e;
          color: #78a33d;
        }
        .share {
        }
        .limit {
          background-color: #fcf0e6;
          border-color: #f2b380;
          color: #e56600;
        }
        .sensitive {
          background-color: #fbeeeb;
          border-color: #eba89c;
          color: #d75138;
        }
        .mock {
          width: 40px;
          color: #3759be;
          background-color: #ebeff9;
          border-color: #9bacdf;
        }
      }
      .count {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 12px;
        color: #404a62;
        .line {
          width: 1px;
          height: 12px;
          margin: 0 8px;
          background-color: #cbced7;
        }
        .box1 {
          max-width: calc(100% - 166px);
          height: 14px;
          display: flex;
          align-items: center;
          .score_box {
            max-width: 60px;
            padding-top: 1px;
            overflow: hidden;
            .el-rate {
              height: 14px;
              // padding-top: 1px;
              :deep().el-rate__item {
                width: 12px;
                height: 12px;
                .el-rate__icon {
                  font-size: 14px;
                }
              }
            }
          }
          .score {
            color: #e56600;
            margin-left: 5px;
            font-size: 14px;
          }
        }
        .box2,
        .box3 {
          max-width: 66px;
        }
      }
    }
  }
  .bottom_info {
    height: calc(100% - 92px);
    background-color: #fbfbfc;
    border-radius: 0 0 6px 6px;
    padding: 20px 24px 24px;
    font-size: 14px;
    color: #404a62;
    line-height: 22px;
    .desc {
      height: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      // white-space: nowrap;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      margin-bottom: 6px;
      text-align: left;
    }
    .action {
      display: flex;
      justify-content: space-between;
      .fws {
        color: #7784a6;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 160px;
      }
    }
  }
}
</style>
