<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
<!--          <a-col :span="6">-->
<!--            <a-form-item label="设备名称">-->
<!--              <j-select-device placeholder="请选择设备名称" :multiple="false" v-model="queryParam.deviceId"/>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="5" :sm="7">
            <a-form-item label="设备名称">
              <a-tree-select placeholder="请选择设备名称"
                             v-model="this.deviceName"
                             :tree-data="this.treeData"
                             tree-default-expand-all
                             :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                             @select="handleSelectChange">
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="当前状态">
              <j-dict-select-tag v-model="queryParam.status" placeholder="请选择当前状态" dict-code="remind_status" ></j-dict-select-tag>
            </a-form-item>
          </a-col>
<!--          <a-col :span="6">-->
<!--            <a-form-item label="异常类型">-->
<!--              <j-dict-select-tag v-model="queryParam.remindType" placeholder="请选择异常类型" dict-code="remind_type" ></j-dict-select-tag>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :span="4">-->
<!--            <a-form-item label="检测项点">-->
<!--              <a-select placeholder="请选择检测项点" v-model="testItem"  @change="testChange">-->
<!--                <a-select-option value="过压">过压异常</a-select-option>-->
<!--                <a-select-option value="欠压">欠压异常</a-select-option>-->
<!--                <a-select-option value="过流">过流异常</a-select-option>-->
<!--                <a-select-option value="温度">温度异常</a-select-option>-->
<!--                <a-select-option value="湿度">湿度异常</a-select-option>-->
<!--                <a-select-option value="噪声">噪声异常</a-select-option>-->
<!--                <a-select-option value="烟雾">烟雾异常</a-select-option>-->
<!--                <a-select-option value="缺相">电源缺相异常</a-select-option>-->
<!--                <a-select-option value="不平衡">不平衡异常</a-select-option>-->
<!--                <a-select-option value="电池">电池电量异常</a-select-option>-->
<!--                <a-select-option value="电机">电机异常</a-select-option>-->
<!--                <a-select-option value="轴承">轴承异常</a-select-option>-->
<!--                <a-select-option value="断网">断网异常</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :span="8">
            <a-form-item label="请选择开始和结束时间">
              <a-range-picker @change="onChange" :showTime=true :value="createValue" dateFormat="YYYY-MM-DD HH:mm:ss" />
            </a-form-item>
          </a-col>
          <a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery1" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
<!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
      <a-button type="primary" icon="download" @click="handleExportXls('设备异常信息统计表')">导出</a-button>
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
<!--      <a-button type="primary" @click="searchQuery1" icon="search">查询</a-button>-->
<!--      <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
      <!-- 高级查询区域 -->
<!--      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>-->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchSee">批量忽略</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :customRow="doubleClick"
        @change="handleTableChange">
<!--        style="word-break: break-all" class="j-table-force-nowrap"-->
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <template slot="deviceFunState" slot-scope="text">
          <a-tag v-if="text === '待处理'" color="#f58">待处理</a-tag>
<!--          <a-tag v-else-if="text === '已查看'" color="#ffba5a">已查看</a-tag>-->
          <a-tag v-else-if="text === '已忽略'" color="#D3D3D3">已忽略</a-tag>
          <a-tag v-else-if="text === '已处理'" color="#87d068">已处理</a-tag>
          <span v-else>{{ text }} </span>
        </template>

        <span slot="testItem" slot-scope="text, record">
          <a href="#" @click="oneClick(record);" style="text-decoration:underline;">{{ text }}</a>
        </span>
        <span slot="action" slot-scope="text, record">
<!--          <a @click="handleEdit(record)">编辑</a>-->
<!--          <a-divider type="vertical" />-->
<!--          <a-dropdown>-->
<!--            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item>-->
<!--          <template v-if="(record.status!==0)">-->
          <a @click="handleRemind(record)">查看</a>
<!--          </template>-->
          <template v-if="(record.status===0)">
            <a-divider type="vertical" />
          <a @click="handleEdit(record)">处理</a>
          </template>
          <template v-if="(record.status===0)">
          <a-divider type="vertical" />
            <a-popconfirm title="确定忽略吗?" @confirm="() => handleIgnore(record)">
              <a>忽略</a>
            </a-popconfirm>
          </template>
<!--          <a @click="handleEdit(record)">编辑</a>-->
<!--          <a @click="handleChart(record)">详细</a>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item>-->
<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">-->
<!--                  <a>删除</a>-->
<!--                </a-popconfirm>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
        </span>
<!--        超出内容省略号截取-->
        <span slot="subContent" slot-scope="text">
          <j-ellipsis :value="text" :length="40"/>
        </span>
      </a-table>
    </div>

    <bu-device-online-modal ref="modalForm" @ok="modalFormOk"></bu-device-online-modal>
    <bu-electric-modal ref="electricModalForm" @ok="modalFormOk"></bu-electric-modal>
    <bu-air-quality-modal ref="airQualityModalForm" @ok="modalFormOk"></bu-air-quality-modal>
    <bu-vibration-modal ref="vibrationModalForm" @ok="modalFormOk"></bu-vibration-modal>
    <bu-air-noise-modal ref="airNoiseModalForm" @ok="modalFormOk"></bu-air-noise-modal>
    <bu-air-smoke-modal ref="airSmokeModalForm" @ok="modalFormOk"></bu-air-smoke-modal>
    <bu-air-water-modal ref="airWaterModalForm" @ok="modalFormOk"></bu-air-water-modal>
    <bu-flow-online-modal ref="flowOnlineModalForm" @ok="modalFormOk"></bu-flow-online-modal>
    <bu-dip-angle-modal ref="dipAngleModalForm" @ok="modalFormOk"></bu-dip-angle-modal>
    <bu-device-online-chart-modal ref="chartmodalForm" @ok="modalFormOk"></bu-device-online-chart-modal>
<!--    <bu-device-life-circle-repair-modal ref="repairmodalForm" @ok="modalFormOk"></bu-device-life-circle-repair-modal>-->
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import BuDeviceOnlineModal from './modules/BuDeviceOnlineModal'
  import BuDeviceOnlineChartModal from './modules/BuDeviceOnlineChartModal'
  import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
  import JSelectDevice from '@comp/jeecgbiz/JSelectDevice'
  import { getAction } from '@api/manage'
  import BuDeviceLifeCircleRepairModal from '@views/device/modules/BuDeviceLifeCircleRepairModal'
  import { filterObj } from '../../utils/util'
  import BuElectricModal from "@views/energy/modules/BuElectricModal";
  import BuAirQualityModal from "@views/energy/modules/BuAirQualityModal";
  import BuVibrationModal from "@views/energy/modules/BuVibrationModal";
  import BuAirNoiseModal from "@views/energy/modules/BuAirNoiseModal";
  import BuAirSmokeModal from "@views/energy/modules/BuAirSmokeModal";
  import BuAirWaterModal from "@views/energy/modules/BuAirWaterModal";
  import BuFlowOnlineModal from "@views/energy/modules/BuFlowOnlineModal";
  import BuDipAngleModal from "@views/energy/modules/BuDipAngleModal";
  export default {
    name: 'BuDeviceOnlineList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      BuAirWaterModal,
      BuAirSmokeModal,
      BuAirNoiseModal,
      BuElectricModal,
      BuAirQualityModal,
      BuVibrationModal,
      BuFlowOnlineModal,
      BuDipAngleModal,
      BuDeviceOnlineModal,
      JSuperQuery,
      JSelectDevice,
      BuDeviceLifeCircleRepairModal,
      BuDeviceOnlineChartModal,
    },
    data () {
      return {
        description: '设备在线表管理页面',
        timer: null,
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:30,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;//省略展示
            }
          },
          {
            title:'设备名称',
            align:"center",
            dataIndex: 'deviceName',
            width:180,

          },
          {
            title:'设备编号',
            align:"center",
            dataIndex: 'deviceCode',
            width:100
          },
          {
            title:'风险名称',
            align:"center",
            dataIndex: 'testItem',
            scopedSlots: { customRender: 'testItem' },
          },
          {
            title:'风险发生时间',
            align:"center",
            dataIndex: 'time',
            width:160,
          },
          // {
          //   title:'异常类型',
          //   align:"center",
          //   dataIndex: 'remindType_dictText'
          // },
          // {
          //   title:'检测项点',
          //   align:"center",
          //   dataIndex: 'testItem'
          // },
          // {
          //   title:'风险说明',
          //   align:"center",
          //   dataIndex: 'remind',
          //   // scopedSlots: { customRender: 'subContent' }
          // },
          // {
          //   title:'风险危害',
          //   align:"center",
          //   dataIndex: 'riskHarm',
          //   width:300,
          //   scopedSlots: { customRender: 'subContent' }
          // },
          // {
          //   title:'专家建议',
          //   align:"center",
          //   width:200,
          //   dataIndex: 'suggest',
          //   scopedSlots: { customRender: 'subContent' }
          // },
          {
            title:'当前状态',
            align:"center",
            dataIndex: 'status_dictText',
            width:70,
            scopedSlots: { customRender: 'deviceFunState' }
          },
          {
            title:'处理措施',
            align:"center",
            dataIndex: 'content',
            width:350,
            // scopedSlots: { customRender: 'subContent' },
          },
          {
            title:'处理人',
            align:"center",
            dataIndex: 'user',
            width:80,
          },
          {
            title:'处理时间',
            align:"center",
            dataIndex: 'processingTime',
            width:160,
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:150,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/device/buDeviceOnline/list",
          delete: "/device/buDeviceOnline/delete",
          deleteBatch: "/device/buDeviceOnline/deleteBatch",
          exportXlsUrl: "/device/buDeviceOnline/exportXls",
          importExcelUrl: "device/buDeviceOnline/importExcel",
          remind: "device/buDeviceOnline/remind",
          ignore: "device/buDeviceOnline/ignore",
          getBatchSee: "device/buDeviceOnline/getBatchSee",
          treeTest: "/device/buDevice/treeTest",
          queryById: "/device/buDeviceOnline/sensorDataById"
        },
        dictOptions:{},
        superFieldList:[],
        createValue: [],
        testItem:'',
        treeData:[],
        // deviceId:'',
        deviceName:undefined,
      }
    },
    created() {
      this.treeTest()
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig(){
      },
      treeTest(){
        getAction(this.url.treeTest).then((res) => {
          if (res) {
            res.forEach(type=>{
              this.childrenList = []
              if(type.children.length>0){
                type.children.forEach(device=>{
                  this.childrenList.push({title:device.deviceName+device.deviceCode,key:device.id,value: device.id,typeId:device.deviceTypeId})
                })
              }else{
                this.childrenList.push({})
              }
              this.treeData.push({title:type.typeName,key:type.id,value: type.id,children:this.childrenList,selectable:false,})
            })
          }else{
          }
        })
      },
      handleSelectChange(selectedKeys, event) {
        this.queryParam.deviceId = selectedKeys;
        this.deviceName = event.$options.propsData.dataRef.title;
        // this.loadData(1);
      },
      onChange(data,dataString){
        console.log(data);
        this.createValue = data;
        this.beginTime = dataString[0];
        this.endTime = dataString[1];
      },
      searchReset() {
        this.queryParam = {};
        this.createValue = [];
        this.testItem = [];
        this.loadData(1);
      },
      searchQuery1() {
        this.loadData1();
      },
      loadData1(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams1();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      getQueryParams1() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam ,this.filters);
        param.field = this.getQueryField();
        param.beginTime = this.beginTime;
        param.endTime = this.endTime;
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      handleRemind(record){
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title="详情";
        this.$refs.modalForm.disableSubmit = true;
        // let params = {data:record.id};
        // getAction(this.url.remind, params,'get').then((res) => {
        //   this.$message.success(res.message);
        //   this.loadData(1);
        // })
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleIgnore(record){
        getAction(this.url.ignore, {id: record.id} ,'get').then((res) => {
          this.$message.success(res.message);
          this.loadData(1);
        })
      },
      batchSee: function(){
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          getAction(that.url.getBatchSee, {ids: ids},'get').then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.loadData();
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.loading = false;
          });
        }
      },
      handleChart(record){
        this.$refs.chartmodalForm.edit(record);
        this.$refs.chartmodalForm.title="详细";
        this.$refs.chartmodalForm.disableSubmit = false;
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData1();
      },
      // testChange(value){
      //   this.item = value;
      //   this.testItem = value;
      // },
      oneClick(record){
        getAction(this.url.queryById,{id:record.id})
          .then(res => {
            if (!res.success){
              this.$message.warning(res.message);
              return
            }
            if (record.remindType === 1){
              this.$refs.electricModalForm.edit(res.result);
              this.$refs.electricModalForm.title="风险发生时刻数据";
              this.$refs.electricModalForm.disableSubmit = true;
            }else if (record.remindType === 2){
              this.$refs.airQualityModalForm.edit(res.result);
              this.$refs.airQualityModalForm.title="风险发生时刻数据";
              this.$refs.airQualityModalForm.disableSubmit = true;
            }else if (record.remindType === 3){
              this.$refs.vibrationModalForm.edit(res.result);
              this.$refs.vibrationModalForm.title="风险发生时刻数据";
              this.$refs.vibrationModalForm.disableSubmit = true;
            }else if (record.remindType === 4){
              this.$refs.airNoiseModalForm.edit(res.result);
              this.$refs.airNoiseModalForm.title="风险发生时刻数据";
              this.$refs.airNoiseModalForm.disableSubmit = true;
            }else if (record.remindType === 5){
              this.$refs.airSmokeModalForm.edit(res.result);
              this.$refs.airSmokeModalForm.title="风险发生时刻数据";
              this.$refs.airSmokeModalForm.disableSubmit = true;
            }else if (record.remindType === 6){
              this.$refs.airWaterModalForm.edit(res.result);
              this.$refs.airWaterModalForm.title="风险发生时刻数据";
              this.$refs.airWaterModalForm.disableSubmit = true;
            }else if (record.remindType === 7){
              this.$refs.flowOnlineModalForm.edit(res.result);
              this.$refs.flowOnlineModalForm.title="风险发生时刻数据";
              this.$refs.flowOnlineModalForm.disableSubmit = true;
            }else if (record.remindType === 8){
              this.$refs.dipAngleModalForm.edit(res.result);
              this.$refs.dipAngleModalForm.title="风险发生时刻数据";
              this.$refs.dipAngleModalForm.disableSubmit = true;
            }
          })
      },
      doubleClick(record) {
        return{
          on: {
            dblclick: () => {
              getAction(this.url.queryById,{id:record.id})
                .then(res => {
                  if (!res.success){
                    this.$message.warning(res.message);
                    return
                  }
                  if (record.remindType === 1){
                    this.$refs.electricModalForm.edit(res.result);
                    this.$refs.electricModalForm.title="风险发生时刻数据";
                    this.$refs.electricModalForm.disableSubmit = true;
                  }else if (record.remindType === 2){
                    this.$refs.airQualityModalForm.edit(res.result);
                    this.$refs.airQualityModalForm.title="风险发生时刻数据";
                    this.$refs.airQualityModalForm.disableSubmit = true;
                  }else if (record.remindType === 3){
                    this.$refs.vibrationModalForm.edit(res.result);
                    this.$refs.vibrationModalForm.title="风险发生时刻数据";
                    this.$refs.vibrationModalForm.disableSubmit = true;
                  }else if (record.remindType === 4){
                    this.$refs.airNoiseModalForm.edit(res.result);
                    this.$refs.airNoiseModalForm.title="风险发生时刻数据";
                    this.$refs.airNoiseModalForm.disableSubmit = true;
                  }else if (record.remindType === 5){
                    this.$refs.airSmokeModalForm.edit(res.result);
                    this.$refs.airSmokeModalForm.title="风险发生时刻数据";
                    this.$refs.airSmokeModalForm.disableSubmit = true;
                  }else if (record.remindType === 6){
                    this.$refs.airWaterModalForm.edit(res.result);
                    this.$refs.airWaterModalForm.title="风险发生时刻数据";
                    this.$refs.airWaterModalForm.disableSubmit = true;
                  }else if(record.remindType === 7){
                    this.$refs.flowOnlineModalForm.edit(res.result);
                    this.$refs.flowOnlineModalForm.title="风险发生时刻数据";
                    this.$refs.flowOnlineModalForm.disableSubmit = true;
                  }else if (record.remindType === 8){
                    this.$refs.dipAngleModalForm.edit(res.result);
                    this.$refs.dipAngleModalForm.title="风险发生时刻数据";
                    this.$refs.dipAngleModalForm.disableSubmit = true;
                  }
                })
            }
          }
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>