<template>
  <page-header-wrapper>
    <Grid :columns="['400px', 1]" :rows="gridRows">
      <a-card
        title="想定列表"
        class="my-card my-card-has-title"
        :bordered="false"
        v-loading="xd.loading"
        style="grid-row: 1 / 3"
      >
        <template #extra>
          <a-icon type="sync" style="font-size: 30px" @click="getXdListData()" />
        </template>
        <a-tree
          :treeData="xd.listData"
          :replaceFields="{ title: 'name', key: 'id' }"
          :selectedKeys.sync="xd.selectedKeys"
          @select="handleChangeXdSelected"
        >
        </a-tree>
      </a-card>
      <a-card title="气象环境" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddQxhjModal">新增</a-button>
          <a-icon
            v-if="layoutRight === 'qxhj'"
            type="fullscreen-exit"
            style="font-size: 32px"
            @click="layoutRight = 'auto'"
          />
          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'qxhj'" />
        </template>
        <AntQueryTable
          ref="qxhj-table"
          height="100%"
          :queryConfig="qxhj.queryConfig"
          :tableConfig="qxhj.tableConfig"
          :pageConfig="qxhj.pageConfig"
          :showTool="qxhj.showTool"
        >
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="edit" @click="handleOpenEditQxhjModal(record)"></a-button>
          </template>
        </AntQueryTable>
      </a-card>
      <a-card title="电磁环境" class="my-card my-card-has-title" :bordered="false">
        <template #extra>
          <a-button type="primary" style="margin-right: 20px" @click="handleOpenAddDchjModal">新增</a-button>
          <a-icon
            v-if="layoutRight === 'dchj'"
            type="fullscreen-exit"
            style="font-size: 32px"
            @click="layoutRight = 'auto'"
          />
          <a-icon v-else type="fullscreen" style="font-size: 32px" @click="layoutRight = 'dchj'" />
        </template>
        <AntQueryTable
          ref="dchj-table"
          height="100%"
          :queryConfig="dchj.queryConfig"
          :tableConfig="dchj.tableConfig"
          :pageConfig="dchj.pageConfig"
          :showTool="dchj.showTool"
        >
          <template #tablecell-action="{ record }">
            <a-button type="text-primary" icon="edit" @click="handleOpenEditDchjModal(record)"></a-button>
          </template>
        </AntQueryTable>
      </a-card>
    </Grid>
    <AntFormModal
      :visible.sync="qxhjModal.visible"
      :title="qxhjModal.title"
      :formItems="qxhjModal.formItems"
      :formRules="qxhjModal.formRules"
      :formData="qxhjModal.formData"
      :onSubmit="handleSubmitQxhj"
      @success="handleSubmitQxhjSuccess"
    ></AntFormModal>
    <AntFormModal
      :visible.sync="dchjModal.visible"
      :title="dchjModal.title"
      width="900px"
      :formItems="dchjModal.formItems"
      :formRules="dchjModal.formRules"
      :formData="dchjModal.formData"
      :onSubmit="handleSubmitDchj"
      @success="handleSubmitDchjSuccess"
    ></AntFormModal>
  </page-header-wrapper>
</template>

<script>
export default {
  name: 'Bzhjsjk',
  data() {
    return {
      layoutRight: 'auto',
      xd: {
        loading: false,
        listData: [],
        selectedKeys: [],
      },

      qxhj: {
        queryConfig: false,
        tableConfig: {
          table: {},
          immediate: false,
          query: (queryParams) =>
            this.$http({
              url: `/baseData/weatherResource/list`,
              method: 'get',
              params: { id: this.xd.selectedKeys[0], ...queryParams },
            }),
          columns: [
            { dataIndex: 'serial' },
            { title: '天气类型', dataIndex: 'weatherType' },
            { title: '持续开始时间', dataIndex: 'lastBegTime' },
            { title: '持续结束时间', dataIndex: 'lastEndTime' },
            // { dataIndex: 'action', width: 100 },
          ],
        },
        pageConfig: true,
        showTool: false,
      },
      qxhjModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '天气类型',
            prop: 'weatherType',
            component: 'AntOriginSelect',
            options: {
              dataSource: () => ({
                data: [
                  { title: 'rain', id: 'rain' },
                  { title: 'snow', id: 'snow' },
                ],
              }),
            },
          },
          {
            label: '持续开始时间',
            prop: 'lastBegTimeStr',
            component: 'a-date-picker',
            options: { showTime: true, valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          },
          {
            label: '持续结束时间',
            prop: 'lastEndTimeStr',
            component: 'a-date-picker',
            options: { showTime: true, valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          },
        ],
        formRules: {},
        formData: {},
      },

      dchj: {
        queryConfig: false,
        tableConfig: {
          table: {},
          immediate: false,
          query: (queryParams) =>
            this.$http({
              url: `/environment/ebe/list`,
              method: 'get',
              params: { id: this.xd.selectedKeys[0], ...queryParams },
            }),
          columns: [
            { dataIndex: 'serial' },
            { title: '电磁强度', dataIndex: 'fieldStrength' },
            { title: '频率', dataIndex: 'ebeR' },
            { title: '经度', dataIndex: 'ebeLon' },
            { title: '纬度', dataIndex: 'ebeLat' },
            { dataIndex: 'action', width: 100 },
          ],
        },
        pageConfig: true,
        showTool: false,
      },
      dchjModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '电磁强度',
            prop: 'fieldStrength',
            component: 'AntOriginSelect',
            options: {
              dataSource: () => ({
                data: [
                  { title: '高', id: '高' },
                  { title: '中', id: '中' },
                  { title: '低', id: '低' },
                ],
              }),
            },
          },
          { label: '频率', prop: 'ebeR' },
          { label: '经度', prop: 'ebeLon', component: 'LongitudeInput' },
          { label: '纬度', prop: 'ebeLat', component: 'LatitudeInput' },
        ],
        formRules: {},
        formData: {},
      },
    }
  },
  computed: {
    gridRows() {
      return {
        auto: [1, 1],
        qxhj: [1, '56px'],
        dchj: ['56px', 1],
      }[this.layoutRight]
    },
  },
  created() {
    this.getXdListData()
  },
  methods: {
    async getXdListData() {
      try {
        this.xd.loading = true
        const res = await this.$http({
          url: `/baseData/scenario/all`,
          method: 'get',
        })
        this.xd.listData = res.data
        if (this.xd.selectedKeys.length === 0) {
          this.xd.selectedKeys = [this.xd.listData[0].id]
          this.handleChangeXdSelected()
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.xd.loading = false
      }
    },
    handleChangeXdSelected() {
      this.$refs['qxhj-table'].commitAction('query')
      this.$refs['dchj-table'].commitAction('query')
    },

    handleOpenAddQxhjModal() {
      this.qxhjModal.title = '新建气象环境'
      this.qxhjModal.mode = 'add'
      this.qxhjModal.formData = { scenarioId: this.xd.selectedKeys[0] }
      this.qxhjModal.visible = true
    },
    handleOpenEditQxhjModal(record) {
      this.qxhjModal.title = `编辑气象环境`
      this.qxhjModal.mode = 'edit'
      this.qxhjModal.formData = { ...record }
      this.qxhjModal.visible = true
    },
    handleSubmitQxhj(formData) {
      return this.$http({
        url: `/baseData/weatherResource/add`,
        method: 'post',
        data: formData,
      })
    },
    handleSubmitQxhjSuccess() {
      this.$refs['qxhj-table'].commitAction('query')
    },

    handleOpenAddDchjModal() {
      this.dchjModal.title = '新建电磁环境'
      this.dchjModal.mode = 'add'
      this.dchjModal.formData = { sceneId: this.xd.selectedKeys[0] }
      this.dchjModal.visible = true
    },
    async handleOpenEditDchjModal(record) {
      try {
        const res = await this.$http({
          url: `/environment/ebe/${record.id}`,
          method: 'get',
        })
        this.dchjModal.title = `编辑电磁环境`
        this.dchjModal.mode = 'edit'
        this.dchjModal.formData = { ...res.data }
        this.dchjModal.visible = true
      } catch (error) {
        console.log(error)
      }
    },
    handleSubmitDchj(formData) {
      return this.$http({
        url: `/environment/ebe/save`,
        method: 'post',
        data: formData,
      })
    },
    handleSubmitDchjSuccess() {
      this.$refs['dchj-table'].commitAction('query')
    },
  },
}
</script>

<style lang="less" scoped></style>
