<template>
  <div class="alarmLog">
    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
    <searchBox class="searchBox" ref="searchBox" :search-options="searchOptions" :title-option="{ title: '', info: '' }">
      <template #stationSelect="">
        <a-select style="width: 200px" :dropdown-match-select-width="false" v-model:value="stationId" allow-clear @change="changeStation">
          <a-select-option :value="option.value" v-for="option in stationList" :key="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
      </template>
    </searchBox>

    <div class="content-table">
      <ComTable
        :columns="columns"
        :table-data="tableData"
        @handlePagesizeChange="handlePagesizeChange"
        ref="comTable"
        :page-option="pageOption"
      >
        <template #type="record">
          <span>{{ ['其它', '系统日志', '操作日志', '设备日志'][record.type] }}</span>
        </template>
        <template #status="record">
          <span
            ><a-tag :color="record.status==0 ? 'red' : 'green'">{{
              record.status==0 ? '异常' : '正常'
            }}</a-tag></span
          >
        </template>

        <template #action="record">
          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
        </template>
      </ComTable>
    </div>
    <a-modal v-model:open="formModal" width="750px" style="top: 80px" :footer="null">
      <!-- action:edit add -->
      <EditCom
        :record="formState"
        @operateForm="operateForm"
        type="alarmLog"
        :action="formStatus"
      ></EditCom>
    </a-modal>
  </div>
</template>

<script>
import { columnList, alarmlogOptions } from '../../../public/config/columnList'
import { getReq, postReq } from '@/request/api.js'
import EditCom from '@/components/EditCom.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import searchBox from '@/components/SearchBox.vue'

export default {
  name: '',
  components: { EditCom, searchBox },
  props: {},
  data() {
    return {
      formModal: false,
      formState: {},
      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
      pageOption: {
        pageSize: 10,
        page: 1
      },
      btnOptionList: [],
      searchOptions: [
        {label: '场站选择', type: 'slot', value: [], key: 'station', slotName: 'stationSelect'}
      ],
      stationId: undefined,
      stationList: [],
      paramsDate: {},
      tableData: []
    }
  },
  computed: {},
  created() {
    let info = []
    let col = columnList.find((i) => i.page == 'alarmLog').columns
    if (col.length) {
      col.forEach((item) => {
        info.push(this.$setWidth(item))
      })
    }
    this.columns = info
  },

  mounted() {
    this.operateList = this.$getBtns(['查看'])
    // this.btnOptionList = this.$getBtns(['新增'])
    Promise.all([
      this.getStationList()
    ]).then(()=>{
      this.getList()
    })
  },

  methods: {
    // 下拉场站选择
    changeStation() {
      this.getList()
    },
    // 查询获取场站列表，查询日志列表时，stationId可以默认为空，查询全部
    async getStationList() {
      const params = { page_size: 1000, page: 1 }
      try {
        const res = await getReq('/queryStationList', params)
        if (res.errcode === 0) {
          this.stationList = res.data.map((item) => {
            return { value: item.station_id, label: item.name }
          })
        } else {
          const err = { tip: res.errmsg }
          throw err
        }
      } catch (error) {
        //统一处理报错提示
      }
    },

    async getList() {
      this.$refs.comTable.loading = true

      const { page, pageSize } = this.pageOption
      const params = {
        station_id: this.stationId,
        ...this.paramsDate,
        page_size: pageSize,
        page
      }

      try {
        const res = await getReq('/queryAlertLogList', params)
        if (res.errcode === 0) {
          this.$refs.comTable.loading = false

          this.tableData = res.data

          this.pageOption = {
            page: res.page,
            pageSize: res.page_size,
            count: res.count
          }
        } else {
          const err = { tip: res.errmsg }
          throw err
        }
      } catch (error) {
        //统一处理报错提示
      }
    },
    async operateForm(type, record = {}) {
      this.formStatus = type

      if (type == 'edit' || type == 'read') {
        await this.getRuleFormInfo(record)

        this.formModal = true
        this.formState = record
      } else if (type == 'del') {
        this.handleDelete([record.device_id], this.getList)
      } else if (type == 'back') {
        this.formModal = false
        this.getList()
      }
    },
    //  删除操作
    async handleDelete(id, callback) {
      const that = this
      this.$Modal.confirm({
        title: '你确认删除数据吗?',
        icon: createVNode(ExclamationCircleOutlined),

        async onOk() {
          try {
            const res = await getReq('/deleteUser', { user_id: id })
            if (res.errcode === 0) {
              this.$message.success(res.errmsg)
              this.pageOption.page = 1
              callback()
            } else {
              throw res
            }
          } catch (error) {
            callback()
          }
        },
        onCancel() {
          // console.log("Cancel");
        },
        class: 'test'
      })
    },
    async getRuleFormInfo(record) {
      const row = record || {}

      for (let e of alarmlogOptions) {
        for (let i of e.list) {
          e.ruleForm[i.key] = row[i.key] || ''
          // if (i.key === 'id') {
          //   e.ruleForm.id = row.id
          // } else if (i.key === 'is_open') {
          //   e.ruleForm.is_open = Boolean(row.is_open)
          // } else {
          //   e.ruleForm[i.key] = row[i.key] || ''
          // }

          // if (i.key === 'station_id') {
          //   i.list =  this.stations
          // }
          // if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
          //   const attrs=JSON.parse(row.attrs||"{}")
          //   e.ruleForm[i.key] = attrs[i.key]
          // }
        }
      }
    },
    handlePagesizeChange(pageOption) {
      this.pageOption.pageSize = pageOption.pageSize
      this.pageOption.page = pageOption.page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.alarmLog {
  height: 100%;
  padding: 20px;

  .content-table {
    height: calc(100% - 75px);
  }
}
</style>
