<template>
  <div class="bbsl-common-page"
       @click="commonPageClick">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam"
               :inline="true">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="测点名称">
              <el-input clearable
                        size="mini"
                        placeholder="请输入测点名称"
                        v-model="queryParam.params.mpnm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="测点类型："
                          prop="mptp">
              <el-select style="width: 100%"
                         size="mini"
                         v-model="queryParam.params.mptp"
                         clearable
                         placeholder="请选择测点类型">
                <el-option v-for="item in mptpType"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行政区划">
              <el-cascader size="mini"
                           filterable
                           :show-all-levels="false"
                           :options="basAdNames"
                           v-model="queryParam.params.addvcd"
                           :props="{
                  value: 'code',
                  label: 'name',
                  children: 'children',
                }"
                           @change="onhouChange"
                           placeholder="请选择行政区划">
                <template slot-scope="{node, data}">
                  <span>{{ data.name }}</span>
                  <span v-if="!node.isLeaf">
                    ({{ data.children === [] ? '' : data.children.length }})
                  </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button type="primary"
                         icon="el-icon-search"
                         size="mini"
                         @click="onClickSearch">搜索</el-button>
              <el-button icon="el-icon-refresh"
                         size="mini"
                         @click="resetQuery">重置</el-button>
              <el-button type="text"
                         @click.stop="openMore">更多
                <i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="bbsl-search-more"
             style="width: 250px"
             v-if="showMore">
          <el-row>
            <el-col :span="24">
              <el-form-item label="工情设施类型："
                            prop="sttp">
                <el-select style="width: 100%"
                           size="small"
                           v-model="queryParam.params.sttp"
                           clearable
                           placeholder="请选择工情设施类型">
                  <el-option v-for="item in sttpType"
                             :key="item.id"
                             :label="item.name"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="水库名称："
                            prop="rscd">
                <el-select style="width: 100%"
                           size="small"
                           v-model="queryParam.params.rscd"
                           clearable
                           placeholder="请选择水库">
                  <el-option v-for="item in rscds"
                             :key="item.id"
                             :label="item.rsnm"
                             :value="item.rscd"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="bbsl-table-content"
         ref="contentPanel">
      <div class="bbsl-btn-content"
           ref="btnPanel">
        <el-button size="mini"
                   icon="el-icon-plus"
                   type="primary"
                   @click="openFormDiao">新增</el-button>
        <el-button :disabled="!multipleSelection.length"
                   size="mini"
                   icon="el-icon-delete"
                   type="danger"
                   @click="deleteSelect">删除</el-button>
      </div>
      <el-table stripe
                size="mini"
                :height="tableMaxHeight"
                @row-dblclick="handleDbClick"
                :style="{width: '100%'}"
                ref="multipleSelection"
                v-loading="loading"
                border
                :data="tableData"
                :row-key="getRowKey"
                @selection-change="handleSelectionChange"
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}">
        <el-table-column type="selection"
                         width="55"
                         :reserve-selection="true"></el-table-column>
        <el-table-column type="index"
                         width="55"
                         label="序号"></el-table-column>

        <el-table-column min-width="100"
                         sortable
                         prop="mpcd"
                         label="测点编码"
                         show-overflow-tooltip></el-table-column>
        <el-table-column min-width="150"
                         sortable
                         prop="mpnm"
                         label="测点名称"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="150"
                         sortable
                         prop="rsnm"
                         label="水库名称"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="140"
                         sortable
                         prop="mptp"
                         label="测点类型"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="160"
                         sortable
                         prop="sttp"
                         label="工情设施类型"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column min-width="150"
                         sortable
                         prop="areaName"
                         label="所在行政区划"
                         show-overflow-tooltip></el-table-column>

        <el-table-column min-width="150"
                         sortable
                         prop="stlc"
                         label="安装详细地址"
                         show-overflow-tooltip></el-table-column>
        <el-table-column min-width="150"
                         sortable
                         prop="wkcn"
                         label="在线状态"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="{
		      color:
		        scope.row.wkcn == 1 
		          ? '#09ef09'
		          : 'red'
		    }"
                  v-if="scope.row.wkcn == '1' ">正常</span>
            <span :style="{
		      color:
		        scope.row.wkcn == 0 
		          ? 'red'
		          : '#09ef09'
		    }"
                  v-if="scope.row.wkcn == '0' ">异常</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination ref="paginationPanel"
                     align="right"
                     class="bbsl-pagination"
                     background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryParam.pageBean.page"
                     :page-sizes="[20, 30, 40, 50]"
                     :page-size="queryParam.pageBean.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
    </div>
    <form-dialog v-if="showFormDia"
                 @closeFormDiao="closeFormDiao"
                 @refList="getDateList"
                 :showFormDia="showFormDia"
                 :title="title"
                 :pId="pId"></form-dialog>
  </div>
</template>
<script>
import FormDialog from './components/gqForm-dialog.vue'
import gqManager from '@/api/stManager/gqManager.js'
import latitude from '@/mixins/latitude'
import req from '@/request.js'
import { TableMixin } from '@/mixins/tableMixin'
export default {
  name: 'FormManger',
  components: {
    FormDialog,
  },
  mixins: [TableMixin],
  data () {
    return {
      loading: false,
      multipleSelection: [], // 删除复选框
      queryParam: {
        pageBean: {
          pageSize: 20,
          page: 1,
        },
        params: {
          mpcd: null, //测点编号
          mpnm: null, //测点名称
          mptp: null, //测点类型
          sttp: null, //工情设施类型
          addvcd: null, //所在行政区域
          rsnm: null, //水库名称
          deviceName: null, //设备名称
        },
      },
      params: {
        id: null,
        status: null,
      },
      status: null,
      total: 0,
      title: '',
      showFormDia: false,
      tableData: [],
      pId: '',
      mptpType: [], //测点类型
      sttpType: [], //工情设施类型
      basAdNames: [], //行政区域
      rscds: [], //水库名称
      objIds: [],
    }
  },
  created () {
    this.getSysDict()
    this.getTreets()
  },
  methods: {
    openMore () {
      this.showMore = !this.showMore
    },
    getTreets () {
      // 行政区查询
      gqManager.getbasAdName({}, (res) => {
        this.basAdNames = res.value
      })
      //获取水库
      gqManager.getRscds({}, (res) => {
        this.rscds = res.value
      })
    },
    //获取字典数据
    getSysDict () {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.mptpType = response.data.cdlx //测点类型
            this.sttpType = response.data.gqsslx //工情设施类型
            this.getDateList()
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    getDateList () {
      this.loading = true
      this.tableData = []
      gqManager.ListGet(this.queryParam, (res) => {
        this.total = res.value.total

        res.value.rows.forEach((ii) => {
          //测点类型
          this.mptpType.forEach((item) => {
            if (ii['mptp'] === item['value']) {
              ii['mptp'] = item['name']
            }
          })
          //工情设施类型
          this.sttpType.forEach((item) => {
            if (ii['sttp'] === item['value']) ii['sttp'] = item['name']
          })
          //水库名称
          this.rscds.forEach((item) => {
            if (ii['rscd'] === item['rscd']) {
              ii['rsnm'] = item['rsnm']
            }
          })
        })
        this.tableData = JSON.parse(JSON.stringify(res.value.rows))
        this.$set(this.tableData)
        this.loading = false
        // console.log(this.tableData, '列表')
      })
    },
    // changeStatus(val) {
    //   if (val.status) {
    //     this.params.status = '1'
    //     this.params.id = val.id
    //     gqManager.getStatus(this.params, (res) => {
    //       if (res.state) {
    //         this.$notify({
    //           type: 'success',
    //           message: '修改成功',
    //           duration: 2000,
    //         })
    //       }
    //     })
    //   } else {
    //     this.params.status = '0'
    //     this.params.id = val.id
    //     deviceManger.getStatus(this.params, (res) => {
    //       if (res.state) {
    //         this.$notify({
    //           type: 'warning',
    //           message: '修改成功',
    //           duration: 2000,
    //         })
    //       }
    //     })
    //   }
    // },
    //获取行政区域
    onhouChange (val) {
      this.queryParam.params.addvcd = val.pop()
      // let arr = this.basAdNames.filter((ite) => ite.code === val[0])
      // this.calleArr(arr, val[val.length - 1])
    },
    openFormDiao () {
      this.title = '新增'
      this.showFormDia = true
    },
    closeFormDiao () {
      this.showFormDia = false
      this.getDateList()
    },
    handleSizeChange (val) {
      this.queryParam.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange (val) {
      this.queryParam.pageBean.page = val
      this.getDateList()
    },
    // // 修改
    handleUpdate (row) {
      this.title = '修改'
      this.pId = row.id
      this.showFormDia = true
      console.log(row)
    },
    handleSelectionChange (val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
    },
    // // 指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },

    // // 批量删除
    deleteSelect () {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      })
        .then(() => {
          gqManager
            .remove(this.multipleSelection, (res) => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000,
                  // offset: 80
                })
                // this.multipleSelection = [];
                this.$refs.multipleSelection.clearSelection()
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch((res) => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80,
              })
              this.getDateList()
            })
        })
        .catch(() => { })
    },

    /** 删除按钮操作 */
    handleDelete (row) {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      })
        .then(() => {
          FormManger.remove(row.id, (res) => {
            if (res.state) {
              this.$notify({
                type: 'success',
                message: '删除成功',
                duration: 2000,
                // offset: 80
              })
              this.queryParam.pageBean.page = 1
              this.getDateList()
            }
          }).catch((res) => {
            this.$notify({
              type: 'error',
              message: res.message,
              duration: 2000,
              offset: 80,
            })
            this.getDateList()
          })
        })
        .catch(() => { })
    },
    // // 点击查询
    onClickSearch () {
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery () {
      this.queryParam.params = {}
      this.onClickSearch()
    },
  },
}
</script>
<style lang="scss" scoped>
.btn-content {
  display: flex;
}
.el-select-dropdown__item span {
  color: rgb(51, 51, 51) !important;
}
.el-select-dropdown__item {
  color: #9a9a9a !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f5f7fa;
}
.btn-content :first-child {
  margin: 0 0 0 0 !important;
}
.el-switch__label--left {
  position: relative;
  left: 45px;
  color: #fff;
  z-index: -1111;
}
.el-switch__core {
  width: 50px !important;
}

.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}
.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}
::-webkit-scrollbar {
  background: #fff !important;
}
.bbsl-pagination {
  bottom: 10px !important;
}
</style>
