<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="first-step" v-show="current == 0">
        <div class="info-span">
          <span style="margin-left: 9px">基本信息</span>
        </div>
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ style: { width: '100px' } }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-row>
            <a-col :span="10">
              <div class="left">
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="预警日期">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="所属区域">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="所属领域">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="所属行业">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item label="预警地址">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="事件级别">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="事件类型">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item label="事件来源">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item label="报警详情">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </a-col>
            <a-col :span="14">
              <div class="right">
                <a-row>
                  <a-col :span="8">
                    <a-form-item label="预警类型">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="预警级别">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="风险等级">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item label="预警内容">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="16">
                    <a-form-item label="事件名称">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="派发日期">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="8">
                    <a-form-item label="派发单位">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="派发人员">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="联系方式">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="8">
                    <a-form-item label="阈值">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="危险源数量">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="防护目标数量">
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-form>
        <div class="info-span">
          <span style="margin-left: 9px">应急处置预案</span>
        </div>
        <BasicTable @register="registerFirstTable">
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: '预览',
                  onClick: handleItem.bind(null, record),
                },
              ]"
            />
          </template>
        </BasicTable>
        <div class="info-span">
          <span style="margin-left: 9px">智能决策</span>
        </div>
        事件处置要求
        <div style="padding: 10px; border: 1px solid #dedede; box-sizing: border-box">
          1、请尽快处置，若发现问题第一时间上报；2、若无法解决请第一时间上报协调处理！
        </div>
        <a-menu mode="horizontal">
          <a-menu-item> 辅助决策知识库() </a-menu-item>
          <a-menu-item> 辅助决策专家() </a-menu-item>
        </a-menu>
        <a-select
          v-model:value="value2"
          mode="multiple"
          style="width: 100%"
          placeholder="Please select"
          :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
          @change="handleChange"
        />
        <div class="div-item" style="margin-top: 30px">
          <a-tag color="#108ee9" style="margin-bottom: 5px">燃气泄漏处置知识库</a-tag>
          <div
            style="
              border: 1px solid #f0f0f0;
              padding: 10px 20px;
              box-sizing: border-box;
              margin-bottom: 10px;
            "
          >
            <div style="display: flex; margin-bottom: 10px">
              <div>处置措施</div>
              <div
                style="flex=1;padding: 20px 10px;box-sizing: border-box;text-indent: 2em;background: #f0f0f0;"
                >这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施。</div
              >
            </div>
            <div style="display: flex">
              <div>处置要点</div>
              <div
                style="flex=1;padding: 20px 10px;box-sizing: border-box;text-indent: 2em;background: #f0f0f0;"
                >这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施，这里是燃气泄露一级报警事件处置措施。</div
              >
            </div>
          </div>
        </div>
      </div>
      <div class="second-step" v-show="current == 1">
        <div class="info-span">
          <span style="margin-left: 9px">牵头单位及负责人</span>
        </div>
        <a-select
          v-model:value="value2"
          mode="multiple"
          style="width: 100%"
          placeholder="Please select"
          :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
          @change="handleChange"
        />
        <BasicTable @register="registerThirdTable">
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: '催办',
                  onClick: handleItem.bind(null, record),
                },
              ]"
            />
          </template>
        </BasicTable>
        <div class="info-span">
          <span style="margin-left: 9px">协同单位及负责人</span>
        </div>
        <a-select
          v-model:value="value2"
          mode="multiple"
          style="width: 100%"
          placeholder="Please select"
          :options="[...Array(25)].map((_, i) => ({ value: (i + 10).toString(36) + (i + 1) }))"
          @change="handleChange"
        />
        <BasicTable @register="registerFourthTable">
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  label: '催办',
                  onClick: handleItem.bind(null, record),
                },
              ]"
            />
          </template>
        </BasicTable>
      </div>
      <div class="third-step" v-show="current == 2">
        <div class="info-span">
          <span style="margin-left: 9px">灾害上报</span>
        </div>
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ style: { width: '100px' } }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item label="是否产生灾害" name="username">
            <a-switch v-model:checked="formState.username" />
          </a-form-item>
          <a-row>
            <a-col :span="5">
              <a-form-item label="上报时间">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="报送单位">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="报送部门">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="报送人员">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="联系方式">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="5">
              <a-form-item label="受伤人数">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="重伤人数">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="死亡人数">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="失联人数">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="经济损失">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="info-span">
          <span style="margin-left: 9px">处置记录</span>
        </div>
        <div>
          <Timeline mode="left">
            <TimelineItem>
              <div>
                <a-form
                  :model="formState"
                  name="basic"
                  :label-col="{ style: { width: '100px' } }"
                  autocomplete="off"
                  @finish="onFinish"
                  @finishFailed="onFinishFailed"
                >
                  <a-row>
                    <a-col :span="4"> 2023-04-11 12:20:30 </a-col>
                    <a-col :span="4">
                      <a-form-item label="牵头单位">
                        <a-input v-model:value="formState.username" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item label="处置部门">
                        <a-input v-model:value="formState.username" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item label="处置人员">
                        <a-input v-model:value="formState.username" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item label="联系方式">
                        <a-input v-model:value="formState.username" />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4">
                      <a-form-item label="处置状态">
                        <a-input v-model:value="formState.username" />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
            </TimelineItem>
            <TimelineItem>初步排除网络异常 2015-09-01</TimelineItem>
            <TimelineItem>初步排除网络异常 2015-09-01</TimelineItem>
          </Timeline>
        </div>
      </div>
      <div class="fourth-step" v-show="current == 3">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ style: { width: '100px' } }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-row>
            <a-col :span="5">
              <a-form-item label="归档单位">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="归档部门">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="归档人员">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="联系方式">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <a-form-item label="归档时间">
                <a-input v-model:value="formState.username" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div><h3>事件总结</h3></div>
        <div><a-textarea /></div>
        <a-menu mode="horizontal">
          <a-menu-item>应急物资() </a-menu-item>
          <a-menu-item> 应急医疗队() </a-menu-item>
          <a-menu-item> 应急救援队() </a-menu-item>
        </a-menu>
        <BasicTable @register="registerLastTable" />
      </div>
      <template #footer>
        <a-button @click="handleCancel" v-show="current == 0">取消</a-button>
        <a-button @click="prev" v-show="current > 0">上一步</a-button>
        <a-button type="primary" @click="next" v-show="current < 3">下一步</a-button>
        <a-button type="primary" @click="handleOk" v-show="current == 3">生成报告</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import {
    // secondTableColums,
    thirdTableColums,
    firstHandleTableColums,
    lastTableColums,
  } from './dialogTableColumns';

  import { Timeline, TimelineItem } from 'ant-design-vue';
  // 多选
  const value2 = ref(['a1', 'b2']);
  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
  };
  // Cascader 级联选择

  //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 [registerFirstTable] = useTable({
    title: '',
    columns: firstHandleTableColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
    dataSource: data,
    scroll: { y: 100 },
  });
  // const [registerSecondTable] = useTable({
  //   title: '',
  //   columns: secondTableColums,
  //   useSearchForm: false,
  //   showTableSetting: false,
  //   bordered: false,
  //   showIndexColumn: true,
  //   canResize: false,
  //   striped: true,
  //   pagination: true,
  //   dataSource: data,
  //   scroll: { y: 100 },
  //   actionColumn: {
  //     width: 100,
  //     dataIndex: 'action',
  //     title: '操作',
  //     slots: { customRender: 'action' },
  //     fixed: 'right',
  //   },
  // });
  const [registerThirdTable] = useTable({
    title: '',
    columns: thirdTableColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
    dataSource: data,
    scroll: { y: 150 },
    actionColumn: {
      width: 100,
      dataIndex: 'action',
      title: '操作',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });
  const [registerFourthTable] = useTable({
    title: '',
    columns: thirdTableColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
    dataSource: data,
    scroll: { y: 150 },
    actionColumn: {
      width: 100,
      dataIndex: 'action',
      title: '操作',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });
  const [registerLastTable] = useTable({
    title: '',
    columns: lastTableColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
    dataSource: data,
    scroll: { y: 150 },
  });
  /**
   * 点击详情
   */
  function handleItem() {}
  // 步骤条
  const current = ref<number>(0);
  const list = reactive([
    {
      label: '①预警信息',
      prop: '0',
      status: 'active',
    },
    {
      label: '②事件接收',
      prop: '1',
      status: 'todo',
    },
    {
      label: '③处置反馈',
      prop: '2',
      status: 'todo',
    },
    {
      label: '④解除归档',
      prop: '3',
      status: 'todo',
    },
  ]);
  function nextStep() {
    for (let item of list) {
      if (item.status === 'active') {
        item.status = 'done';
      }

      if (item.status === 'todo') {
        item.status = 'active';
        if (list[list.length - 1].status === 'active') {
        }
        break;
      }
    }
  }
  function preStep() {
    for (let item of list) {
      if (item.status === 'active') {
        item.status = 'todo';
        list[Number(current.value)].status = 'active';
      }
    }
  }
  const next = () => {
    if (current.value < 3) {
      current.value++;
    }
    nextStep();
  };
  const prev = () => {
    if (current.value < 3) {
      current.value--;
    }
    preStep();
  };
  const visible = ref(false);
  const handleOk = (e) => {
    console.log(e);
    visible.value = false;
  };
  function handleCancel() {
    visible.value = false;
  }
  //
  const formState = reactive({
    username: '',
    password: '',
    remember: true,
  });
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  //
  function show() {
    visible.value = true;
  }
  //   编译器宏,暴露出方法
  defineExpose({
    show,
  });
</script>
<style lang="less" scoped>
  :deep(.ant-col-5) {
    max-width: 20%;
  }

  :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>
