import Card from '@/components/Card';
import { computed, defineComponent,onMounted,ref } from 'vue-demi';
// @ts-ignore
import command from '@/assets/icons/detail/command@2x.png';
// @ts-ignore
import co_organized from '@/assets/icons/detail/co_organized@2x.png';
// @ts-ignore
import host from '@/assets/icons/detail/host@2x.png';
// @ts-ignore
import main_organized from '@/assets/icons/detail/department@2x.png';
// @ts-ignore
import co_organizer from '@/assets/icons/detail/co_organizer@2x.png';
// @ts-ignore
import bg_zbm from '@/assets/card-bg/bg_zbm@2x.png';

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



export default defineComponent({
  name: 'CommandChainCard',
  setup() {
    const store = useIncidentStore();
    const commonStore = useCommonStore();

    const getDept = (value: string = '') =>
      commonStore.globalDict['zhdd_org_upload']?.find(
        (i) => i?.dictValue?.toString() === value?.toString(),
      )?.dictLabel ?? '-';
    
   

    
    onMounted(() => {
      
    });
    
    
    // const xblist = ['2', '2', '2', '2'];
    // console.log(xblist);

    // console.log(xblist.length == 0);


    // debugger
    return () => (
      <Card cardType="command-chain">
        {/* <div class="command-chain-container" >
          <div class="chain-item">
            <span class="title">指挥部门</span>
            <span class="desc">市交通运输局</span>
            <img class="logo" src={command} alt="" />
          </div>
          <div class="chain-item">
            <span class="title">协办部门</span>
            <span class="desc">
              {store?.incidentDetail?.baseInfo?.assistDept
                ?.split(',')
                ?.map((i) => getDept(i)).join()}
            </span>
            <img class="logo" src={co_organized} alt="" />
          </div>
          <div class="chain-item">
            <span class="title">主办部门</span>
            <span class="desc">
              {getDept(store.incidentDetail?.baseInfo?.madinDept)}
            </span>
            <img class="logo" src={host} alt="" />
          </div>
        </div> */}
        <div class="command-chain-container" id="ss" style="position:relative">
          <div class="main-dept">
            <div>
              <div class="dept" id="11" datatype="1">
                <img src={main_organized} />
                主办部门
              </div>
              <div class="deptline"></div>
            </div>

            <div class="dept-list">
              <div class="dept-name" id="22">
                <div></div>
                {getDept(store.incidentDetail?.baseInfo?.madinDept)}
              </div>
            </div>
          </div>
          <div
            class="main-dept"
            v-show={
              (store?.incidentDetail?.baseInfo?.assistDept?.split(',') ?? []).length!=0
            }>
            <div>
              <div class="dept" datatype="2">
                <img src={co_organizer} />
                协办部门
              </div>
              <div class="deptline"></div>
            </div>

            <div class="dept-list">
              <div
                class="leftline"
                style="position: absolute;background: white;width: 1px;left: 0;"></div>
              {(
                store?.incidentDetail?.baseInfo?.assistDept?.split(',') ?? []
              ).map((item, index) => (
                <div
                  class="dept-name"
                  datatype={
                    index ==
                    store?.incidentDetail!.baseInfo!.assistDept!.split(',')
                      .length -
                      1
                      ? ''
                      : '0'
                  }>
                  <div></div>
                  {getDept(item)}
                </div>
              ))}
            </div>
          </div>
        </div>
      </Card>
    );
  },
});
