import Card from '@/components/Card';
import { computed, defineComponent } from 'vue-demi';

import emitter from '@/utils/mitt';


// @ts-ignore
import IconLevel from '@/assets/icons/detail/level@2x.png';
import moment from 'moment';



import { useCommonStore, useIncidentStore,useMainStore,useMarkerStore } from '@/store';


export default defineComponent({
  name: 'Wzcard',
  setup(props) {
    const store = useIncidentStore();
    const commonStore = useCommonStore();
    const mainStore = useMainStore();
     const markStore = useMarkerStore();

    const searchwz = async (wzname) => { 

      emitter.emit('dosearchstart');
      await markStore.searchWarehouseByGoods(wzname);
      emitter.emit('dosearchend');
    };
    
    return () => (
      <Card cardType="wz-all">
        <div class="content">
          <div class="header">
            <div style="flex-basis: 28%;">资源名称</div>
            <div style="flex-basis: 17%;">仓储总数</div>
            <div style="flex-basis: 17%;">可用总数</div>
            <div style="flex-basis: 8%;">单位</div>
            <div style="flex-basis: 30%;text-align: left;">更新时间</div>
          </div>
          <div class="body">
            {store.incidentDetail.resource?.map((i) => (
              <div class="line">
                <div
                  style="flex-basis: 28%;color:#39D6FE"
                  class="wzname"
                  onClick={() => {
                    searchwz(i.name);
                  }}>
                  {i.name}
                </div>
                <div style="flex-basis: 17%;">{i.num}</div>
                <div style="flex-basis: 17%;">
                  {store.incidentDetail.resourceSendTime == null
                    ? '无'
                    : moment(store.incidentDetail.resourceSendTime).valueOf() -
                        moment(i.time).valueOf() >
                      0
                    ? '未更新'
                    : i.availablenum}
                </div>
                <div style="flex-basis: 8%;">{i.unit}</div>
                <div style="flex-basis: 30%;text-align: left;">{i.time}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    );
  },
});