<template>
  <div class='Card'>
    <div class="header">
      <BackgroundClip class="left" clipPath="inset(0 0 0 0 round 24px)"
        borderColor="linear-gradient(90deg, rgba(251, 19, 19, 1), rgba(214, 0, 0, 0))"
        bgColor="linear-gradient(270deg, rgba(243, 0, 0, 0) 0%, #6B0000 100%)">
        <img src="@screen/images/TrafficAccidents.svg" />
        交通事故
      </BackgroundClip>
      <div class="right">
        <Switcher />
        <!-- <ElSwitch active-color="#fff" inactive-color="#48B0CB" /> -->
      </div>
    </div>

    <Descriptions :list="list" style="gap: 15px; flex: 1; margin-top: 9px;" column="1" />

    <div class="footer">
      <Button>修改</Button>
    </div>
  </div>
</template>

<script>
import Button from '@screen/components/Buttons/Button.vue';
import BackgroundClip from '@screen/components/Decorations/BackgroundClip.vue';
import Descriptions from '@screen/components/Descriptions.vue';
import Switcher from './Switcher.vue';

export default {
  name: 'Card',
  components: {
    Button,
    BackgroundClip,
    Descriptions,
    Switcher
  },
  data() {
    return {

      list: [
        {
          label: '信息级别',
          text: '影响通行',
        },
        {
          label: '发布渠道',
          text: '情报板、微博',
        },
        {
          label: '审核方式',
          text: '双人审核',
        },
        {
          label: '启用日期',
          text: '2023.12.22 13:00:00',
        }
      ]
    }
  }
}
</script>

<style lang='scss' scoped>
.Card {
  height: 226px;
  background: #133242;
  border-radius: 2px;
  border: 1px solid;
  padding: 15px 21px;
  border-image: linear-gradient(360deg, rgba(55, 231, 255, .42), rgba(55, 231, 255, 0)) 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      // height: 28px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 1px 6px;
      padding-right: 24px;
      // border: 1px solid;
      // border-image: linear-gradient(90deg, rgba(251, 19, 19, 1), rgba(214, 0, 0, 0)) 1 1;
    }
  }

  .footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
