<template>
  <div class="modalSty" ref="refModel">
    <a-modal
      v-model:visible="visible"
      title="事件处置跟踪"
      @ok="handleOk"
      @cancel="handleCancel"
      width="1500px"
      :bodyStyle="{ padding: '20px' }"
      :getContainer="() => $refs.refModel"
    >
      <div class="info-head">
        <div class="arrowsBox">
          <div class="arrowsItem" v-for="(item, index) in list" :key="index">
            <div
              class="arrows-up arrows"
              :class="{
                arrows_active: item.status === 'active',
                arrows_done: item.status === 'done',
                arrows_todo: item.status === 'todo',
              }"
            ></div>
            <div
              class="arrows-down arrows"
              :class="{
                arrows_active: item.status === 'active',
                arrows_done: item.status === 'done',
                arrows_todo: item.status === 'todo',
              }"
            ></div>
            <div
              class="arrows-label"
              :class="{
                arrows_label_active: item.status === 'active',
                arrows_label_done: item.status === 'done',
                arrows_label_todo: item.status === 'todo',
              }"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
      <div class="fourth-step">
        是否解除归档
        <a-radio-group v-model:value="value">
          <a-radio :value="1">A</a-radio>
          <a-radio :value="2">B</a-radio>
          <a-radio :value="3">C</a-radio>
          <a-radio :value="4">D</a-radio>
        </a-radio-group>
        事件总结
        <a-textarea />
        <a-menu mode="horizontal" style="font-size: 12px; height: 32px; line-height: 32px">
          <a-menu-item>应急物资 </a-menu-item>
          <a-menu-item> 应急医疗队 </a-menu-item>
          <a-menu-item> 应急救援队 </a-menu-item>
        </a-menu>
        <div> 单位名称 <a-input /> 单位名称 <a-input /> 单位名称 <a-input /> </div>
      </div>
      <template #footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">发布</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue';
  // 单选
  const value = ref<number>(1);
  //table
  interface DataItem {
    key: string;
    name: string;
    age: number;
    address: string;
    ellipsis: boolean;
  }
  const data: DataItem[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i.toString(),
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park ${i}`,
      ellipsis: true,
    });
  }

  // 步骤条
  // const current = ref<number>(0);
  const list = reactive([
    {
      label: '①预警信息',
      prop: '0',
      status: 'done',
    },
    {
      label: '②事件接收',
      prop: '1',
      status: 'done',
    },
    {
      label: '③处置反馈',
      prop: '2',
      status: 'done',
    },
    {
      label: '④解除归档',
      prop: '3',
      status: 'active',
    },
  ]);
  const visible = ref(false);
  const handleOk = (e) => {
    console.log(e);
    visible.value = false;
  };
  function handleCancel() {
    visible.value = false;
  }
  //
  //
  function show() {
    visible.value = true;
  }
  //   编译器宏,暴露出方法
  defineExpose({
    show,
  });
</script>
<style lang="less" scoped>
  :deep(.ant-modal-header) {
    background-color: #2d74e7;
  }

  :deep(.ant-modal-title) {
    color: white;
  }

  :deep(.ant-modal-close) {
    color: white;
  }

  .left {
    margin-right: 50px;
  }

  .info-head {
    height: 50px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 20px;
  }

  .info-span {
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    font-weight: normal;
    border-left: 4px solid #0671dd;
    margin: 10px 0;
  }

  .div-map {
    height: 300px;
    background: #b3b3b3;
  }
  // 步骤条
  .arrowsBox {
    display: flex;
    justify-content: space-between;
    height: 44px;
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    font-weight: bold;
  }

  .arrowsItem {
    position: relative;
    height: 100%;
    width: 100%;
    margin-right: 10px;
  }

  .arrowsItem:first-child {
    margin-left: 10px;
  }

  .arrowsItem:first-child::before {
    content: '';
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    left: -10px;
    background: inherit;
    z-index: 0;
  }

  .arrows-up {
    transform: skewX(40deg);
  }

  .arrows-down {
    transform: skewX(-40deg);
  }

  .arrows {
    height: 50%;
    background: gray;
  }

  .arrows-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 22px;
  }

  .arrows_done {
    background: #edf9ff;
  }

  .arrows_active {
    background: #2083e8;
  }

  .arrows_todo {
    background: #ebedf0;
  }

  .arrows_label_done {
    color: #009fe9;
  }

  .arrows_label_active {
    color: #fff;
  }

  .arrows_label_todo {
    color: #929393;
  }
</style>
