import Card from '@/components/Card';
import { useIncidentStore } from '@/store';
import clsx from 'clsx';
import { computed, defineComponent, ref } from 'vue-demi';
import { Management } from '@element-plus/icons';
import { BaseReg } from '@/constants/constants';
import moment from 'moment';
export default defineComponent({
  name: 'ExecutionLogCard',
  setup(props) {
    const store = useIncidentStore();
    // const divc = ref();

    // const doscroll = () => {
    //   debugger;
    //   // alert('sd');
    //   console.log(divc.value.scrollHeight);
    //   divc.value.scrollTop = divc.value.scrollHeight;
    // };

    // const medias = computed(() =>
    //   (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).concat(
    //     store.incidentDetail?.baseInfo?.video?.split(',') ?? [],
    //   ),
    // );

    return { store };

   
  },
  render() { 
     return  (
       <Card cardType="execution-log">
         <div class="execution-log-container" id="cardlog1">
           {/* {store.incidentDetail?.process?.map((item, idx) => (
            <div class={clsx('log-item', `log-item-${idx % 4}`)}>
              <span class="log-label">
                {item.des?.includes('>>>>') ? (
                  <>
                    <span>{item.des.split('>>>>')[0]}</span>
                    <span>
                      <span
                        style={{
                          boxSizing: 'border-box',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          width: '75%',
                        }}>
                        {item.des.split('>>>>')[1]}
                      </span>
                      等
                      {
                        <span style={{ color: '#00d0ff' }}>
                          {item.des.split('>>>>')[1]?.split(',')?.length ?? 0}
                        </span>
                      }
                      人未读
                    </span>
                  </>
                ) : (
                  item.des
                )}
              </span>
              <span class="log-time">
                {item.createTime}
                <span class="logo-icon">
                  <el-icon>
                    <Management />
                  </el-icon>
                </span>
              </span>
            </div>
          ))} */}

           {this.store.incidentDetail?.process?.map((item, idx) => (
             <div
               class={`pitem pitem${
                 item.incidentStatus == null ? 3 : item.incidentStatus
               }`}
               datatype={`${
                 idx + 1 == this.store.incidentDetail?.process?.length
                   ? 'last'
                   : '1'
               }`}>
               <div class="pcontent">
                 <div class="ptime">
                   <div class="ptime-bg"></div>
                   <span>
                     {moment(item.createTime).format('YYYY-MM-DD HH:mm')}
                   </span>
                 </div>
                 <div class="pdesc">
                   <div> {item.des} </div>
                   <div
                     class="exdesc"
                     style={`${
                       item.userUnRead == null || item.userUnRead == ''
                         ? 'display:none'
                         : ''
                     }`}>
                     {(
                       ((item.userUnRead ?? '').split('、') ?? []).slice(
                         0,
                         5,
                       ) ?? []
                     )
                       .filter((i) => {
                         return i != '';
                       })
                       .join('、')}{' '}
                     等
                     <span style="color:#39D6FE;margin-left:5px;margin-right:5px">
                       {((item.userUnRead ?? '').split('、') ?? []).length - 1}
                     </span>
                     人未读。
                   </div>
                   <div
                     class="exdesc"
                     style={`${
                       item.userRead == null || item.userRead == ''
                         ? 'display:none'
                         : ''
                     }`}>
                     {(
                       ((item.userRead ?? '').split('、') ?? []).slice(0, 5) ??
                       []
                     )
                       .filter((i) => {
                         return i != '';
                       })
                       .join('、')}{' '}
                     等
                     <span style="color:#39D6FE;margin-left:5px;margin-right:5px">
                       {((item.userRead ?? '').split('、') ?? []).length - 1}
                     </span>
                     人已读。
                   </div>
                 </div>
               </div>
               <div class="pline"></div>
             </div>
           ))}
         </div>
       </Card>
     );

  }
});
