import Card from '@/components/Card';
import { defineComponent } from 'vue-demi';
// @ts-ignore
import sjt from '@/assets/icons/detail/sjt@2x.png';
// @ts-ignore
import sjt_1 from '@/assets/icons/detail/sjt_1@2x.png';
// @ts-ignore
import rhtx from '@/assets/icons/detail/rhtx@2x.png';
// @ts-ignore
import dbpt from '@/assets/icons/detail/dbpt@2x.png';
import { useDaHuaStore, useIncidentStore } from '@/store';

export default defineComponent({
  name: 'EmergencyLinkage',
  setup() {
    const store = useIncidentStore();
    const dahuaStore = useDaHuaStore();

    const handleDaHuaSystem = () => {
      dahuaStore.dahuaUserVisible = true;
    };

    return () => (
      <Card cardType="emergency-linkage">
        <div class="linkage-chain-container">
          {[
            { label: '视频会议', src: sjt_1 },
            { label: '融合通信平台', src: rhtx },
            { label: '电话会议', src: sjt },
            { label: '单兵系统', src: dbpt },
          ].map((item) => (
            <div
              class="linkage-item"
              onClick={() => {
                if (item.label === '融合通信平台') handleDaHuaSystem();
              }}>
              <img src={item.src} alt="" />
              <span>{item.label}</span>
            </div>
          ))}
        </div>
      </Card>
    );
  },
});