<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"
      :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: `/environment/weather/list`,
              method: 'get',
              params: { id: this.xd.selectedKeys[0], ...queryParams },
            }),
          columns: [
            { dataIndex: 'serial' },
            { title: '区域', dataIndex: 'area' },
            { title: '日期', dataIndex: 'date' },
            { title: '天气', dataIndex: 'weather' },
            { title: '大气压', dataIndex: 'airPressure' },
            { title: '空气质量', dataIndex: 'airQuality' },
            { title: '湿度', dataIndex: 'humidity' },
            { title: '降水量', dataIndex: 'precipitation' },
            { title: '能见度', dataIndex: 'visibility' },
            { title: '风向', dataIndex: 'windDirection' },
            { title: '风力', dataIndex: 'windPower' },
            { title: '风速', dataIndex: 'windSpeed' },
            { dataIndex: 'action', width: 100 },
          ],
        },
        pageConfig: true,
        showTool: false,
      },
      qxhjModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '区域',
            prop: 'area',
            component: 'AntOriginSelect',
            options: { dataSource: () => this.$http({ url: `/system/area/getTreeSelect`, method: 'get' }) },
          },
          {
            label: '日期',
            prop: 'date',
            component: 'a-date-picker',
            options: { format: 'YYYY/MM/DD', valueFormat: 'YYYY/MM/DD' },
          },
          { label: '天气', prop: 'weather' },
          { label: '大气压', prop: 'airPressure' },
          { label: '空气质量', prop: 'airQuality' },
          { label: '湿度', prop: 'humidity' },
          { label: '降水量', prop: 'precipitation' },
          { label: '能见度', prop: 'visibility' },
          { label: '风向', prop: 'windDirection' },
          { label: '风力', prop: 'windPower' },
          { label: '风速', prop: 'windSpeed' },
        ],
        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: 'area' },
            { title: '持续时间', dataIndex: 'duration' },
            { title: '环境变化趋势', dataIndex: 'environmentalChangeTrends' },
            { title: '环境复杂度', dataIndex: 'environmentalComplexity' },
            { title: '磁场强度', dataIndex: 'fieldStrength' },
            { title: '频率', dataIndex: 'frequency' },
            { title: '频率区间', dataIndex: 'frequencyRang' },
            { title: '干扰幅度', dataIndex: 'interferenceAmplitude' },
            { title: '干扰源', dataIndex: 'interferenceSource' },
            { title: '干扰类型', dataIndex: 'interferenceType' },
            { title: '波型', dataIndex: 'waveType' },
            { dataIndex: 'action', width: 100 },
          ],
        },
        pageConfig: true,
        showTool: false,
      },
      dchjModal: {
        visible: false,
        title: '',
        mode: '',
        formItems: [
          {
            label: '区域',
            prop: 'area',
            component: 'AntOriginSelect',
            options: { dataSource: () => this.$http({ url: `/system/area/getTreeSelect`, method: 'get' }) },
          },
          { label: '持续时间', prop: 'duration' },
          { label: '环境变化趋势', prop: 'environmentalChangeTrends' },
          { label: '环境复杂度', prop: 'environmentalComplexity' },
          { label: '磁场强度', prop: 'fieldStrength' },
          { label: '频率', prop: 'frequency' },
          { label: '频率区间', prop: 'frequencyRang' },
          { label: '干扰幅度', prop: 'interferenceAmplitude' },
          { label: '干扰源', prop: 'interferenceSource' },
          { label: '干扰类型', prop: 'interferenceType' },
          { label: '波型', prop: 'waveType' },
        ],
        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 = { sceneId: this.xd.selectedKeys[0] }
      this.qxhjModal.visible = true
    },
    async handleOpenEditQxhjModal(record) {
      try {
        const res = await this.$http({
          url: `/environment/weather/${record.id}`,
          method: 'get',
        })
        this.qxhjModal.title = `编辑气象环境`
        this.qxhjModal.mode = 'edit'
        this.qxhjModal.formData = { ...res.data }
        this.qxhjModal.visible = true
      } catch (error) {
        console.log(error)
      }
    },
    handleSubmitQxhj(formData) {
      return this.$http({
        url: `/environment/weather/save`,
        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>
