<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">
        <a-row>
          <a-col :span="10">
            <div class="left">
              <a-form
                :model="formState"
                name="basic"
                :label-col="{ style: { width: '100px' } }"
                autocomplete="off"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
              >
                <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="所属区域"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="事件类型"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="事件级别"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="所属领域"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="所属行业"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="事件名称"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="经度"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="纬度"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <a-input v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-item
                      label="事件地址"
                      name="username"
                      :rules="[{ required: true, message: 'Please input your username!' }]"
                    >
                      <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-textarea v-model:value="formState.username" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12" />
                </a-row>
              </a-form>
            </div>
          </a-col>
          <a-col :span="14">
            <div class="right">
              <div class="div-map"> </div>
              <div class="info-span">
                <span style="margin-left: 9px">重点关注目标</span>
              </div>
              <div class="right-bottom">
                <div
                  class="right-bottom-top"
                  style="display: flex; justify-content: space-between; margin-bottom: 10px"
                >
                  <div class="right-bottom-top-left">
                    重点关注搜索半径
                    <a-input style="width: 120px; margin-right: 7px" />
                    <a-button type="primary">搜索</a-button>
                  </div>
                  <div class="right-bottom-top-right">
                    <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-item> 应急医疗队 </a-menu-item>
                      <a-menu-item> 应急救援队 </a-menu-item>
                    </a-menu>
                  </div>
                </div>
                <div class="right-bottom-table">
                  <BasicTable @register="registerTable" />
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="second-step" v-show="current == 1">
        <a-row>
          <a-col :span="10">
            <div class="left">
              <div class="info-span">
                <span style="margin-left: 9px">配置预案</span>
              </div>
              <div class="left-middle">
                <a-cascader v-model:value="value" :options="options" placeholder="Please select" />
              </div>
              <div class="left-bottom">
                <BasicTable @register="registerSecondTable">
                  <template #action="{ record }">
                    <TableAction
                      :actions="[
                        {
                          label: '预览',
                          onClick: handleItem.bind(null, record),
                        },
                      ]"
                    />
                  </template>
                </BasicTable>
              </div>
            </div>
          </a-col>
          <a-col :span="14">
            <div class="right">
              <div class="div-map"></div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="third-step" v-show="current == 2">
        <div class="info-span">
          <span style="margin-left: 9px">事件处置要求</span>
        </div>
        <a-textarea v-model:value="formState.username" placeholder="请输入" />
        <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 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="fourth-step" v-show="current == 3">
        <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" />
        <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" />
      </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 { tableColums, secondTableColums, thirdTableColums } from './dialogTableColumns';

  // 多选
  const value2 = ref(['a1', 'b2']);
  const handleChange = (value: string[]) => {
    console.log(`selected ${value}`);
  };
  // Cascader 级联选择
  let value = ref<string[]>([]);
  interface Option {
    value: string;
    label: string;
    children?: Option[];
  }
  const options: Option[] = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ];
  //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 [registerTable] = useTable({
    title: '',
    columns: tableColums,
    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 },
  });
  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 },
  });
  /**
   * 点击详情
   */
  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 < 4) {
      current.value++;
    }
    nextStep();
  };
  const prev = () => {
    if (current.value < 4) {
      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-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>
