<template>
    <div class="wrapper">
        <el-dialog
            style="margin-top: 5vh"
            title=""
            :visible.sync="open"
            width="80%"
            append-to-body
            :close-on-click-modal="false"
            @close="closeDialog"
        >
            <div class="content">
                <!--        <TableDialog
          ref="tableDialog"
          :column-list="columnList"
        >

        </TableDialog>-->
                <el-form
                    :model="queryParams"
                    ref="queryFormRef"
                    size="medium"
                    :inline="true"
                    label-width="80px"
                    style="margin-bottom: 20px"
                >
                    <el-form-item
                        label="设备名称"
                        prop="devName"
                        v-if="status <= 8"
                    >
                        <el-input
                            v-model="queryParams.devName"
                            placeholder="请输入设备名称"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="设备编号"
                        prop="devCode"
                        v-if="status <= 8"
                    >
                        <el-input
                            v-model="queryParams.devCode"
                            placeholder="请输入设备编号"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="工程名称"
                        prop="proName"
                        v-if="status > 8"
                    >
                        <el-input
                            v-model="queryParams.proName"
                            placeholder="请输入工程名称"
                            clearable
                            style="width: 240px"
                        />
                    </el-form-item>
                    <el-form-item
                        label="工程类型"
                        prop="proType"
                        v-if="status === 9"
                    >
                      <el-select
                        v-model="queryParams.proType"
                        clearable
                        filterable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in proTypeRange"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="日期" prop="date" v-if="status > 11">
                        <el-date-picker
                            v-model="queryParams.date"
                            style="width: 240px"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        />
                    </el-form-item>
                    <el-button
                        style="margin-top: 3px"
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="getTableList(currentFunc)"
                        >搜索</el-button
                    >
                </el-form>

                <el-table
                    :data="tableList"
                    border
                    ref="tableRef"
                    style="width: 100%"
                    v-loading="loading"
                    :row-style="rowStyle"
                    :header-cell-style="{
                        background:
                           'linear-gradient(to bottom, #A0C9E8, #DDECFB)',
                        }"
                >
                    <el-table-column
                        align="center"
                        width="80"
                        label="序号"
                        type="index"
                    />
                    <el-table-column
                        v-for="(item, v) in columnList"
                        :key="v"
                        :label="item.t_label"
                        :prop="item.t_props"
                        :width="item.t_width"
                        align="center"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                          <template v-if="item.t_slot === 'code'">
                            <span
                            >
                              {{ scope.row[item.t_props] }}
                            </span>
                          </template>
                          <template v-else-if="item.t_slot === 'warnType'">
                            {{ scope.row[item.t_props] }}异常
                          </template>
                          <template v-else>
                            {{ scope.row[item.t_props] || '-' }}
                          </template>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getTableList(currentFunc, currentParam)"
                />
            </div>
        </el-dialog>

        <EnvirDialog
          :if-open="envirOpen"
          @closeDialog="envirOpen = false"
        >
        </EnvirDialog>

        <DipDialog
          :if-open="dipOpen"
          @closeDialog="dipOpen = false"
        >
        </DipDialog>

    </div>
</template>

<script>
import Pagination from '../Pagination/index.vue'
import {
    querySenseDeviceInfoApi,
    queryRiskInfoApi,
    queryProjListApi,
    queryDeviceListApi
} from '@/api/tableApis'
import EnvirDialog from '@/components/dialog/envirDialog.vue'
import DipDialog from '@/components/dialog/dipDialog.vue'
export default {
    name: 'commonDialog',
    components: {
        Pagination,
        EnvirDialog,
        DipDialog
    },
    data() {
        return {
            total: 0,
            loading: false,
            status: undefined,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            open: false,
            tableList: [],
            columnList: [],
            additionalList: [],
            currentFunc: undefined,
            currentParam: undefined,
            envirOpen: false,
            dipOpen: false,
            proTypeRange: [
              { label: '变电工程', value: '1' },
              { label: '线路工程', value: '2' },
              { label: '电缆工程', value: '3' },
            ]
        }
    },
    methods: {
        querySenseDeviceInfoApi,
        queryRiskInfoApi,
        queryProjListApi,
        queryDeviceListApi,
        setOpen(v) {
            this.queryParams = {
              pageNum: 1,
              pageSize: 10,
            }
            this.open = v.open
            this.status = v.param.order
            switch (v.param.order) {
                case 1:
                    this.columnList = [
                        { t_props: 'devName', t_label: '设备名称' },
                        { t_props: 'devCode', t_label: '设备编号' },
                        { t_props: 'bdName', t_label: '边代名称' },
                        { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                    this.currentFunc = this.queryDeviceListApi
                    this.getTableList(this.queryDeviceListApi)
                    break;
                case 2:
                    this.columnList = [
                        { t_props: 'devName', t_label: '设备名称' },
                        { t_props: 'devCode', t_label: '设备编号' },
                        { t_props: 'bdName', t_label: '边代名称' },
                        { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                    this.currentFunc = this.queryDeviceListApi
                    this.currentParam = {
                      devStatus: 1
                    }
                    this.getTableList(this.queryDeviceListApi, {
                      devStatus: 1
                    })
                    break;
                case 3:
                    this.columnList = [
                        { t_props: 'devUserName', t_label: '使用人' },
                        { t_props: 'devName', t_label: '设备名称' },
                        { t_props: 'devCode', t_label: '设备编号', },
                        { t_props: 'devTypeName', t_label: '设备类型' },
                        { t_props: 'proName', t_label: '所属工程' },
                        { t_props: 'bdDeviceName', t_label: '所属边代设备' },
                        { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                    this.currentFunc = this.querySenseDeviceInfoApi
                    this.currentParam = {
                      devTypeCode: 123
                    }
                    this.getTableList(this.querySenseDeviceInfoApi, {
                      devTypeCode: 123
                    })
                    break;
                case 4:
                    this.columnList = [
                        { t_props: 'devName', t_label: '设备名称' },
                        { t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
                        { t_props: 'devTypeName', t_label: '设备类型' },
                        { t_props: 'proName', t_label: '所属工程' },
                        { t_props: 'bdDeviceName', t_label: '所属边代设备' },
                        { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                  this.currentFunc = this.querySenseDeviceInfoApi
                  this.currentParam = {
                    devTypeCode: 116
                  }
                  this.getTableList(this.querySenseDeviceInfoApi, {
                    devTypeCode: 116
                  })
                    break;
                case 5:
                    this.columnList = [
                      { t_props: 'devName', t_label: '设备名称' },
                      { t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
                      { t_props: 'devTypeName', t_label: '设备类型' },
                      { t_props: 'proName', t_label: '所属工程' },
                      { t_props: 'bdDeviceName', t_label: '所属边代设备' },
                      { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                  this.currentFunc = this.querySenseDeviceInfoApi
                  this.currentParam = {
                    devTypeCode: 119
                  }
                  this.getTableList(this.querySenseDeviceInfoApi, {
                    devTypeCode: 119
                  })
                    break;
                case 6:
                    this.columnList = [
                      { t_props: 'devName', t_label: '设备名称' },
                      { t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
                      { t_props: 'devTypeName', t_label: '设备类型' },
                      { t_props: 'proName', t_label: '所属工程' },
                      { t_props: 'bdDeviceName', t_label: '所属边代设备' },
                      { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                  this.currentFunc = this.querySenseDeviceInfoApi
                  this.currentParam = {
                    devTypeCode: 117
                  }
                  this.getTableList(this.querySenseDeviceInfoApi, {
                    devTypeCode: 117
                  })
                    break;
                case 7:
                    this.columnList = [
                      { t_props: 'devName', t_label: '设备名称' },
                      { t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
                      { t_props: 'devTypeName', t_label: '设备类型' },
                      { t_props: 'proName', t_label: '所属工程' },
                      { t_props: 'bdDeviceName', t_label: '所属边代设备' },
                      { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                  this.currentFunc = this.querySenseDeviceInfoApi
                  this.currentParam = {
                    devTypeCode: 118
                  }
                  this.getTableList(this.querySenseDeviceInfoApi, {
                    devTypeCode: 118
                  })
                    break;
                case 8:
                    this.columnList = [
                      { t_props: 'devName', t_label: '设备名称' },
                      { t_props: 'devCode', t_label: '设备编号', t_slot: 'code' },
                      { t_props: 'devTypeName', t_label: '设备类型' },
                      { t_props: 'proName', t_label: '所属工程' },
                      { t_props: 'bdDeviceName', t_label: '所属边代设备' },
                      { t_props: 'devStatusName', t_label: '工作状态' },
                    ]
                  this.currentFunc = this.querySenseDeviceInfoApi
                  this.currentParam = {
                    devTypeCode: 124
                  }
                  this.getTableList(this.querySenseDeviceInfoApi, {
                    devTypeCode: 124
                  })
                    break;
                case 9:
                    this.columnList = [
                        { t_props: 'proName', t_label: '工程名称' },
                        { t_props: 'relName', t_label: '电压等级' },
                        { t_props: 'areaName', t_label: '建管单位' },
                        { t_props: 'proTypeName', t_label: '工程类型' },
                        { t_props: 'proStatusName', t_label: '工程状态' },
                    ]
                    this.currentFunc = this.queryProjListApi
                    this.getTableList(this.queryProjListApi)
                    break;
                case 10:
                    this.columnList = [
                      { t_props: 'proName', t_label: '工程名称' },
                      { t_props: 'relName', t_label: '电压等级' },
                      { t_props: 'areaName', t_label: '建管单位' },
                      { t_props: 'proTypeName', t_label: '工程类型' },
                      { t_props: 'proStatusName', t_label: '工程状态' },
                    ]
                    this.currentFunc = this.queryProjListApi
                    this.currentParam = {
                      proType: '1'
                    }
                    this.getTableList(this.queryProjListApi, {
                      proType: '1'
                    })
                    break;
                case 11:
                    this.columnList = [
                      { t_props: 'proName', t_label: '工程名称' },
                      { t_props: 'relName', t_label: '电压等级' },
                      { t_props: 'areaName', t_label: '建管单位' },
                      { t_props: 'proTypeName', t_label: '工程类型' },
                      { t_props: 'proStatusName', t_label: '工程状态' },
                    ]
                    this.currentFunc = this.queryProjListApi
                    this.currentParam = {
                      proType: '2'
                    }
                    this.getTableList(this.queryProjListApi, {
                      proType: '2'
                    })
                    break;
                case 12:
                    this.columnList = [
                        { t_props: 'proName', t_label: '工程名称' },
                        { t_props: 'warnTime', t_label: '预警时间' },
                        { t_props: 'warnType', t_label: '预警内容' },
                    ]
                    this.currentFunc = this.queryRiskInfoApi
                    this.getTableList(this.queryRiskInfoApi)
                    break;
                case 13:
                  this.columnList = [
                    { t_props: 'proName', t_label: '工程名称' },
                    { t_props: 'warnTime', t_label: '预警时间' },
                    { t_props: 'warnType', t_label: '预警内容', t_slot: 'warnType' },
                  ]
                  this.currentFunc = this.queryRiskInfoApi
                  this.getTableList(this.queryRiskInfoApi)
                  break;
            }
        },
        async getTableList(func, param) {
            this.loading = true
            if (this.queryParams.date) {
                this.queryParams.startTime = this.queryParams.date[0]
                this.queryParams.endTime = this.queryParams.date[1]
                delete this.queryParams.date
            }
            if(param) {
              Object.assign(this.queryParams, param)
            }
            let res = await func(this.queryParams)
            /* res.rows.forEach(item => {
              item.warnType = item.warnType + '异常'
            }) */
            if(res.data) {
              this.tableList = res.data.rows
              this.total = res.data.total
            } else {
              this.total = res.total
              this.tableList = res.rows
            }
            this.loading = false
        },
        rowStyle(scope) {
            if (scope.rowIndex % 2 === 0) {
                return {
                    background: '#E1EEFF',
                }
            } else {
                return {
                    background: '#EAF5FF',
                }
            }
        },
        closeDialog() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
        },
      toggleCode(v) {
        console.log(v)
        if(v.devTypeName === '环境监测类') {
          this.envirOpen = true
        } else if(v.devTypeName === '基坑监测类') {
          this.dipOpen = true
        }
      }
    },
}
</script>

<style lang="scss" scoped>
.content {
    box-sizing: border-box;
    padding: 20px;
}
</style>
