<template>
  <Card :bordered="false" class="card">
    <div class="title">
      <div>{{ props.data.deviceName + '—' + props.data.deviceModel }}</div>
      <Button shape="circle" @click="handleEditInfo(props.data)" v-auth="editAuth"
        ><Icon icon="icon-xt-details_edit_default|iconfont" :size="12"
      /></Button>
    </div>
    <template v-for="(item, index) in props.data.disinfection" :key="index">
      <div class="card-row" v-if="item.disinfectionType === 'ddt_disinfectant_hot'">
        <div class="row-title"
          >热&nbsp;&nbsp; 消&nbsp;&nbsp; 毒：<span class="blank-font">{{
            formatDictValue(bizDictOptions.hot, item.disinfectant)
          }}</span></div
        >
        <div class="blank-font">{{ item.disinfectionTime }}min</div>
      </div>

      <div class="card-row" v-if="item.disinfectionType === 'ddt_disinfectant_chemistry'">
        <div class="row-title"
          >化&nbsp;学&nbsp;消&nbsp;毒：<span class="blank-font">{{
            formatDictValue(bizDictOptions.chemistry, item.disinfectant)
          }}</span></div
        >
        <div class="blank-font">{{ item.disinfectionTime }}min</div>
      </div>

      <div class="card-row" v-if="item.disinfectionType === 'ddt_disinfectant_chemistry_hot'">
        <div class="row-title"
          >热化学消毒：<span class="blank-font">{{
            formatDictValue(bizDictOptions.chemistryHot, item.disinfectant)
          }}</span></div
        >
        <div class="blank-font">{{ item.disinfectionTime }}min</div>
      </div>
      <div class="card-row" v-if="item.disinfectionType === 'ddt_disinfectant_other'">
        <div class="row-title"
          >其&nbsp;他&nbsp;消&nbsp;毒：<span class="blank-font">{{
            formatDictValue(bizDictOptions.other, item.disinfectant)
          }}</span></div
        >
        <div class="blank-font">{{ item.disinfectionTime }}min</div>
      </div>
    </template>
  </Card>
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, reactive } from 'vue';
  import { Card } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import { Icon } from '/@/components/Icon';
  import { listDictModelBatch } from '/@/api/common';
  import { formatDictValue } from '/@/utils';
  interface Props {
    data: {
      deviceId?: string;
      deviceName?: string;
      deviceModel?: string;
      disinfection?: Array<{
        disinfectionType?: string;
        disinfectionTime?: string;
        disinfectant?: string;
      }>;
    };
    editAuth: Array<string>;
  }

  const props = withDefaults(defineProps<Props>(), {
    data: () => {
      return {
        deviceId: 'ID',
        deviceName: '设备名称',
        deviceModel: '型号',
        disinfection: [],
      };
    },
    editAuth: () => [],
  });
  const bizDictData = ref([
    { key: 'hot', dictCode: 'ddt_disinfectant_hot' },
    { key: 'chemistry', dictCode: 'ddt_disinfectant_chemistry' },
    { key: 'chemistryHot', dictCode: 'ddt_disinfectant_chemistry_hot' },
    { key: 'other', dictCode: 'ddt_disinfectant_other' },
  ]);
  const bizDictOptions = reactive<any>({});
  // 组件加载前事件
  onBeforeMount(async () => {
    const res = await listDictModelBatch(bizDictData.value.map(ele => ele.dictCode));
    for (const i in res) {
      const filter = bizDictData.value.filter(ele => ele.dictCode == i)[0];
      bizDictOptions[filter.key] = res[i];
    }
  });
  const emit = defineEmits(['edits']);
  // 编辑按钮方法
  function handleEditInfo(data) {
    emit('edits', data);
  }
</script>

<style lang="less" scoped>
  .card {
    border-radius: 4px;
    border: 1px solid #efefef;
    background-color: #fff;
    width: 380px;
    height: 202px;

    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #000a18;
      display: flex;
      justify-content: space-between;
    }

    .card-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .row-title {
      font-size: 14px;
      font-weight: 400;
      color: #8a99ac;
    }

    .blank-font {
      font-size: 14px;
      font-weight: 400;
      color: #000a18;
    }
  }
</style>
