<template>
  <div class="card" @click="clickCardHandler">
    <div class="card-content">
      <div :class="typeInfo.class">
        <img :src="typeInfo.icon" />{{type}}</div>
      <div class="info">
        <div class="detail-desp">
          <div class="desp_text">
            【描述】：{{desp}}
          </div>
          <div class="state">{{state}}</div>
        </div>
        <div class="detail-time">
          案发时间：{{time}}
        </div>
        <div class="detail-address">
          案件地址：{{address}}
        </div>
        <div class="detail-dept">
          主管机构：{{dept}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import hzpjIcon from '@/assets/images/icon/hzpj.png';
import shjzIcon from '@/assets/images/icon/shjz.png';
import qxjyIcon from '@/assets/images/icon/qxjy.png';
import qtjyIcon from '@/assets/images/icon/qtjy.png';

const typeData = {
  '火灾扑救': {
    class: 'title-02',
    icon: hzpjIcon
  },
  '社会救助': {
    class: 'title-01',
    icon: shjzIcon
  },
  '抢险救援': {
    class: 'title-01',
    icon: qxjyIcon
  },
  '其他救援': {
    class: 'title-01',
    icon: qtjyIcon
  },
}

export default {
  props: {
    id: {
      type: String,
      default: '1'
    },
    type: {
      type: String,
      default: '火灾扑救'
    },
    desp: {
      type: String,
      default: '渝中区较口场火灾扑救'
    },
    state: {
      type: String,
      default: '已出动'
    },
    time: {
      type: String,
      default: '2022年2月14日15:49:54'
    },
    address: {
      type: String,
      default: '重庆市渝中区较场口站东一路119号'
    },
    dept: {
      type: String,
      default: '渝中区较场口消防救援站'
    }
  },
  computed: {
    typeInfo() {
      return typeData[this.type];
    }
  },
  methods:{
    clickCardHandler: function() {
      this.$router.push({
        path: `/detail/${this.id}`
      });
    }
  }
}
</script>

<style lang="less" scoped>
@import url("@/assets/styles/common.less");

.init-icon(@icon,@width: 0.6vw, @height: 1.1vh) {
  content: "";
  display: inline-block;
  background: url("@/assets/images/icon/@{icon}") no-repeat;
  background-size: 100% 100%;
  width: @width;
  height: @height;
  margin-right: 0.3vw;
  margin-left: 0.3vw;
}

.card {
  height: 195px;
  width: 100%;
  padding: 17.5px;
  transition: background-url 0.5s;
  cursor: pointer;
  .card-content {
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: url("@/assets/images/card.png") no-repeat center center;
    background-size: 100% 100%;
    transition: background-url 0.5s;
    padding: 10px;

    [class^=title-] {
      color: #fff;
      padding-left: 10px;
      width: 132px;
      height: 26px;
      display: flex;
      align-items: center;
      gap: 5px;
      img {
        width: 14px;
        height: 19px;
      }
    }

    .title-01 {
      background: url("@/assets/images/bg-tag-01.png") no-repeat left center;
      background-size: 100% 100%;
      
    }

    .title-02 {
      background: url("@/assets/images/bg-tag-02.png") no-repeat left center;
      background-size: 100% 100%;
    }

    .info {
      [class^=detail-] { 
        color: #aeeeff !important;
        width: 100%;   
        .line();
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 2px 0px;
      }
      .detail-desp {
        justify-content: space-between;

        .state {
          border: 1px solid orange;
          font-size: 12px;
          border-radius: 5px;
          color: orange;
          padding: 2px;
        }
      }

      .detail-time {
        
        &::before {
          .init-icon("time-icon.png");
        }

      }

      .detail-address {
        &::before {
          .init-icon("address-icon.png", 0.6vw, 1.3vh);
        } 
      }

      .detail-dept {
        &::before {
          .init-icon("dept-icon.png");
        }
      }
    }
  }
  &:hover, .active {
    background: url("@/assets/images/card-active.png") no-repeat center center;
    background-size: 100% 100%;
    .card-content {
      background: none;
    }
  }
}
</style>
