<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      @row-dblclick="handleDbClick"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="pointName, varName"
      :show-export="false"
      :show-custom-column="false"
      ref="htTable"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          @click="showDialog()"
          icon="el-icon-plus"
          >添加</el-button
        >
        <ht-delete-button
          url="${cssc}/biz/base/pointInfo/v1/"
          :htTable="$refs.htTable"
          >删除</ht-delete-button
        >
        <el-button
          icon="el-icon-back"
          style="margin-left: 10px"
          @click="handleImportDialog"
          type="primary"
          plain
          >导入</el-button
        >
        <el-dropdown
          @command="handleCommand"
          size="medium"
          style="margin-left: 10px"
        >
          <el-button type="primary" plain>
            导出<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="all">全部点位</el-dropdown-item>
            <el-dropdown-item command="select">选中点位</el-dropdown-item>
            <el-dropdown-item command="windField">风场点位</el-dropdown-item>
            <el-dropdown-item command="crew">机组点位</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template>
        <ht-table-column
          prop="pointName"
          label="点位名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="pointType"
          label="点位类型"
          :sortable="true"
          :filters="pointTypeList"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-tag v-if="row.pointType == 1">风场点位 </el-tag>
            <el-tag type="success" v-if="row.pointType == 2">机组点位 </el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="varName"
          label="变量名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="dataType"
          label="变量类型"
          :sortable="true"
          :filters="dataTypeList"
          :show-overflow-tooltip="true"
        >
          <template v-slot="{row}">
            <el-tag v-if="row.dataType == 'B'">布尔</el-tag>
            <el-tag type="success" v-if="row.dataType == 'F'">浮点</el-tag>
            <el-tag type="warning" v-if="row.dataType == 'I'">整型</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="unit"
          label="单位"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
      </template>
    </ht-table>
    <common-dialog
      width="800px"
      title="点位信息"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <el-form v-form data-vv-scope="BizPointInfoForm" class="form-single-row">
        <ht-form-item label="点位类型">
          <ht-select
            v-model="BizPointInfo.pointType"
            :options="pointTypeList"
            :props="{key: 'value', value: 'text'}"
            validate="required"
          />
        </ht-form-item>
        <ht-form-item label="点位名称">
          <ht-input v-model="BizPointInfo.pointName" validate="required" />
        </ht-form-item>
        <ht-form-item label="变量名称">
          <ht-input v-model="BizPointInfo.varName" validate="required" />
        </ht-form-item>
        <ht-form-item label="变量类型">
          <ht-select
            v-model="BizPointInfo.dataType"
            :options="dataTypeList"
            :props="{key: 'value', value: 'text'}"
            validate="required"
          />
        </ht-form-item>
        <ht-form-item label="单位">
          <ht-input v-model="BizPointInfo.unit" />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          url="${cssc}/biz/base/pointInfo/v1/"
          :model="BizPointInfo"
          :request-method="saveMethod"
          scope-name="BizPointInfoForm"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
    <import-point ref="importPoint" :importData="importData"></import-point>
  </div>
</template>
<script>
import importPoint from '@/views/Basic/modules/importPoint'
import req from '@/request.js'
export default {
  name: 'PointInfo',
  components: {
    importPoint
  },
  data() {
    return {
      importData: {
        title: '点位信息录入',
        templateName: '点位信息模板.xls',
        downloadUrl: './../static/excel/ExportPiontTemplate.xls',
        importUrl: window.context.cssc + '/biz/base/pointInfo/v1/import'
      },
      dialogVisible: false,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      BizPointInfo: {
        pointType: 1,
        dataType: 'B'
      },
      saveMethod: 'POST',
      dataTypeList: [
        {
          text: '布尔',
          value: 'B'
        },
        {
          text: '浮点',
          value: 'F'
        },
        {
          text: '整型',
          value: 'I'
        }
      ],
      pointTypeList: [
        {
          text: '风场点位',
          value: 1
        },
        {
          text: '机组点位',
          value: 2
        }
      ]
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  methods: {
    handleImportDialog() {
      this.$refs.importPoint.open()
    },
    handleCommand(command) {
      switch (command) {
        case 'all':
          this.exportExcel('all')
          break
        case 'select':
          this.exportExcel('select')
          break
        case 'windField':
          this.exportExcel('windField')
          break
        case 'crew':
          this.exportExcel('crew')
          break
        default:
          break
      }
    },
    exportExcel(type) {
      let idsStr, pointType
      if (type == 'select') {
        let selection = this.$refs.htTable.$refs.htTable.selection
        if (!selection || selection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请至少选择一条记录'
          })
          return
        }
        let ids = []
        for (let i = 0; i < selection.length; i++) {
          ids.push(selection[i].id)
        }
        idsStr = ids.join(',')
      } else if (type == 'windField') {
        pointType = 1
      } else if (type == 'crew') {
        pointType = 2
      }

      let url =
        window.context.cssc +
        '/biz/base/pointInfo/v1/export?ids=' +
        `${idsStr ? idsStr : ''}` +
        '&pointType=' +
        `${pointType ? pointType : ''}`
      console.log(url, 'url')
      this.$message.warning('数据导出中,请稍候......')
      req
        .download(url)
        .then(res => {
          if (res) {
            this.$message.success('导出成功')
          }
        })
        .catch(err => {
          this.$message.warning(`导出失败: ${err}`)
        })
    },
    handleDbClick(row) {
      this.showDialog(row.id)
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${cssc}/biz/base/pointInfo/v1/' + id).then(
          resp => {
            this.BizPointInfo = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.BizPointInfo = {
        pointType: 1,
        dataType: 'B'
      }
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$http
        .post('${cssc}/biz/base/pointInfo/v1/query', param)
        .then(
          resp => {
            let response = resp.data
            this.data = response.rows
            this.pageResult = {
              page: response.page,
              pageSize: response.pageSize,
              total: response.total
            }
          },
          error => {
            reject(error)
          }
        )
        .finally(() => cb())
    },
    afterSaveData() {
      setTimeout(() => {
        this.beforeCloseDialog()
        this.$refs.htTable.load()
      }, 500)
    }
  }
}
</script>
