<template>
  <Grid :columns="[1, 4, 4, 1]" class="page-scene-entry">
    <ModuleWrapper title="想定方案" style="grid-area: 1 / 2 / 2 / 3">
      <template #extra>
        <a-button
          type="text-success"
          icon="plus"
          title="新建想定"
          style="font-size: 26px; line-height: 1.2"
          @click="handleOpenAddScenarioModal"
        ></a-button>
        <AntFormModal
          :visible.sync="scenarioModal.visible"
          :title="scenarioModal.title"
          width="900px"
          :formItems="scenarioModal.formItems"
          :formRules="scenarioModal.formRules"
          :formData="scenarioModal.formData"
          :onSubmit="handleSubmitScenario"
          @success="handleSubmitScenarioSuccess"
        ></AntFormModal>
        <a-button
          type="text-primary"
          icon="sync"
          style="font-size: 24px; line-height: 1.2; margin-left: 10px"
          @click="getScenarioList"
        ></a-button>
      </template>
      <Flex v-loading.dark="scenario.loading" fd="co" class="normal">
        <div class="scenario-list flex-1">
          <Flex v-for="item in scenario.listData" :key="item.id" ai="c" class="scenario-item">
            <div class="flex-1">
              <div class="scenario-name">【{{ item.id }}】{{ item.name }}</div>
              <Flex ai="c">
                <div class="scenario-author">{{ item.author }}</div>
                <div class="scenario-create-time">{{ item.createTime.replace('T', ' ') }}</div>
              </Flex>
            </div>
            <a-icon
              title="删除"
              type="delete"
              style="font-size: 30px; margin-right: 30px; color: red"
              @click="handleDeleteScenario(item)"
            />
            <a-icon
              title="编辑想定"
              type="setting"
              style="font-size: 30px; margin-right: 30px"
              @click="handleOpenSetting(item)"
            />
            <AddRoom @click="handleOpenAddRoomModal(item)" />
            <AntFormModal
              :visible.sync="roomModal.visible"
              :title="roomModal.title"
              :formItems="roomModal.formItems"
              :formRules="roomModal.formRules"
              :formData="roomModal.formData"
              :onSubmit="handleSubmitRoom"
              @success="handleSubmitRoomSuccess"
            ></AntFormModal>
          </Flex>
        </div>
        <Flex ai="c" jc="c">
          <a-pagination
            v-model="scenario.pagination.pageNum"
            :total="scenario.pagination.total"
            :pageSize="scenario.pagination.pageSize"
            show-less-items
            :showTotal="(total) => `共${total}条`"
            @change="getScenarioList"
          />
        </Flex>
      </Flex>
    </ModuleWrapper>
    <ModuleWrapper title="推演实例" style="grid-area: 1 / 3 / 2 / 4">
      <template #extra>
        <a-button
          type="text-primary"
          icon="sync"
          style="font-size: 24px; line-height: 1.2"
          @click="getRoomList"
        ></a-button>
      </template>
      <Flex v-loading.dark="room.loading" fd="co" class="normal">
        <Flex fw="w" ac="fs" class="room-list flex-1">
          <div class="room-item" v-for="item in room.listData" :key="item.id">
            <Flex class="room-card">
              <Flex fd="co" jc="c" class="room-info flex-1">
                <Flex ai="c" jc="sb">
                  <div class="room-name">
                    <a-icon type="home" style="margin-right: 10px" />
                    {{ item.roomName }}
                  </div>
                  <div class="room-status" :style="{ color: statusMapColor[item.status] }">
                    {{ statusMpText[item.status] }}
                  </div>
                </Flex>
                <div class="room-scenario-relation">想定名称：{{ item.scenarioName }}</div>
                <div class="room-create-time">{{ item.createTime.slice(0, 19).replace('T', ' ') }}</div>
              </Flex>
              <Flex class="room-enter" ai="c" title="推演想定" @click="handleSelectRoom(item)">
                <a-icon type="right" style="font-size: 20px" />
              </Flex>
            </Flex>
          </div>
        </Flex>
        <Flex ai="c" jc="c">
          <a-pagination
            v-model="room.pagination.pageNum"
            :total="room.pagination.total"
            :pageSize="room.pagination.pageSize"
            show-less-items
            :showTotal="(total) => `共${total}条`"
            @change="getRoomList"
          />
        </Flex>
      </Flex>
    </ModuleWrapper>
  </Grid>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import AddRoom from './components/AddRoom.vue'

export default {
  name: 'SubsystemSceneEntry',
  components: {
    AddRoom,
  },
  data() {
    return {
      ws: null,
      scenario: {
        loading: false,
        listData: [],
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
      },
      scenarioModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          { label: '想定名称', prop: 'name', required: true },
          {
            label: '开始时间',
            prop: 'startTime',
            required: true,
            component: 'a-date-picker',
            options: {
              showTime: true,
              format: 'YYYY-MM-DD HH:mm:ss',
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
            },
          },
          {
            label: '结束时间',
            prop: 'endTime',
            required: true,
            component: 'a-date-picker',
            options: {
              showTime: true,
              format: 'YYYY-MM-DD HH:mm:ss',
              valueFormat: 'YYYY-MM-DD HH:mm:ss',
            },
          },
          { label: '想定区域(东)', prop: 'right', required: true, component: 'LongitudeInput' },
          { label: '想定区域(西)', prop: 'left', required: true, component: 'LongitudeInput' },
          { label: '想定区域(南)', prop: 'down', required: true, component: 'LatitudeInput' },
          { label: '想定区域(北)', prop: 'up', required: true, component: 'LatitudeInput' },
          { label: '想定描述', prop: 'mark', required: true, component: 'a-textarea', options: { rows: 4 } },
        ],
        formRules: {},
        formData: {},
      },
      room: {
        loading: false,
        listData: [],
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
      },
      roomModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [{ label: '房间名称', prop: 'roomName', required: true }],
        formRules: {},
        formData: {},
      },
      statusMpText: {
        0: '待推演',
        1: '推演中',
        2: '暂停中',
        3: '已结束',
      },
      statusMapColor: {
        0: '#00C7FE',
        1: '#33FF00',
        2: '#FFFF99',
        3: '#FF0000',
      },
    }
  },
  created() {
    this.getScenarioList()
    this.getRoomList()
  },
  methods: {
    async getScenarioList() {
      try {
        this.scenario.loading = true
        const res = await getAction('/baseData/scenario/list', {
          pageNum: this.scenario.pagination.pageNum,
          pageSize: this.scenario.pagination.pageSize,
        })
        this.scenario.listData = res.data.data
        this.scenario.pagination.total = res.data.totalCount
      } catch (error) {
        console.log(error)
      } finally {
        this.scenario.loading = false
      }
    },
    handleOpenAddScenarioModal() {
      this.scenarioModal.title = '新建想定'
      this.scenarioModal.formData = {}
      this.scenarioModal.visible = true
    },
    handleSubmitScenario(formData) {
      const params = {
        name: formData.name,
        startTime: formData.startTime,
        endTime: formData.endTime,
        leftUpLng: formData.left,
        leftUpLat: formData.up,
        rightUpLng: formData.right,
        rightUpLat: formData.up,
        leftBottomLng: formData.left,
        leftBottomLat: formData.down,
        rightBottomLng: formData.right,
        rightBottomLat: formData.down,
        mark: formData.mark,
      }
      return postAction('/baseData/scenario/save', params)
    },
    handleSubmitScenarioSuccess() {
      this.getScenarioList()
    },
    async handleDeleteScenario(scenarioItem) {
      try {
        await this.$confirm({ title: '温馨提示', content: '确定要删除该想定吗？' })
        const res = await getAction(`/baseData/scenario/remove/${scenarioItem.id}`)
        this.$message.success(res.message)
        this.getScenarioList()
      } catch (error) {
        console.log(error)
      }
    },
    handleOpenSetting(scenarioItem) {
      this.$router.push({
        name: 'SubsystemScenePresetting',
        params: {
          scenarioId: scenarioItem.id,
          scenarioName: scenarioItem.name,
        },
      })
    },
    handleOpenAddRoomModal(scenarioItem) {
      this.roomModal.title = '新建房间'
      this.roomModal.formData = {}
      this.roomModal.formData.scenarioId = scenarioItem.id
      this.roomModal.visible = true
    },
    handleSubmitRoom(formData) {
      return postAction('/scenario/room/save', formData)
    },
    handleSubmitRoomSuccess() {
      this.getRoomList()
    },
    async getRoomList() {
      try {
        this.room.loading = true
        const res = await getAction('/scenario/room/list', {
          pageNum: this.room.pagination.pageNum,
          pageSize: this.room.pagination.pageSize,
        })
        this.room.listData = res.data.data
        this.room.pagination.total = res.data.totalCount
      } catch (error) {
        console.log(error)
      } finally {
        this.room.loading = false
      }
    },
    handleSelectRoom(item) {
      this.$router.push({
        name: 'SubsystemScene',
        params: {
          roomId: item.id,
          roomName: item.roomName,
          scenarioId: item.scenarioId,
          scenarioName: item.scenarioName,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.page-scene-entry {
  height: 100%;
  color: #ffffff;
  background-color: #022234;
  padding: 20px;
}
.scenario-item {
  margin: 0 10px;
  height: 10%;
  border-bottom: 1px solid #ffffff22;
  .scenario-name {
    font-size: 20px;
    font-weight: bolder;
    margin-left: -10px;
  }
  .scenario-author {
    font-size: 16px;
    margin-right: 16px;
  }
  .scenario-create-time {
    font-size: 14px;
    font-style: italic;
    color: #888888;
  }
}
.room-item {
  width: 50%;
  height: 20%;
  padding: 10px;
  .room-card {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #00d5fe;
    .room-info {
      padding: 10px;
      border-right: 1px solid #00d5fe;
    }
    .room-name {
      font-size: 26px;
      font-weight: bolder;
    }
    .room-status {
      font-size: 20px;
      font-weight: bolder;
    }
    .room-create-time {
      font-size: 14px;
      font-style: italic;
      color: #888888;
    }
    .room-enter {
      border-radius: 0 10px 10px 0;
      cursor: pointer;
      padding: 0 10px;
    }
    .room-enter:hover {
      background-color: #10475f;
    }
  }
}
::v-deep {
  .ant-pagination-total-text {
    font-size: 16px;
    color: #ffffff;
  }
}
</style>
