<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      @row-dblclick="row => showDialog(row.id)"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="fanName,fanCode,fanType"
      :default-sorter="[{direction: 'ASC', property: 'sn'}]"
      :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/fanInfo/v1/"
          :htTable="$refs.htTable"
          >删除</ht-delete-button
        >
        <el-button
          size="small"
          type="primary"
          plain
          @click="saveSn('snObj')"
          icon="el-icon-finished"
          >保存风场排序</el-button
        >
        <el-button
          size="small"
          type="primary"
          plain
          @click="saveSn('snLineObj')"
          icon="el-icon-finished"
          >保存路线排序</el-button
        >
      </template>
      <template>
        <ht-table-column
          prop="fanName"
          label="机组名称"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="fanCode"
          label="机组编码"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="lineCode"
          label="风场线路"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>
        <ht-table-column
          prop="fanType"
          label="机组类型"
          width="180"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
        </ht-table-column>

        <ht-table-column
          prop="isFlagship"
          label="旗舰机"
          width="100"
          :filters="filterFlagship"
          :sortable="true"
        >
          <template v-slot="{row}">
            <el-tag v-if="row.isFlagship == 1">是</el-tag>
            <el-tag type="danger" v-if="row.isFlagship == 0">否</el-tag>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="sn"
          label="风场排序号"
          width="120"
          :sortable="true"
        >
          <template v-slot="{row}">
            <el-input-number
              style="width: 100%"
              v-model="row.sn"
              :controls="false"
              @change="(val, old, $event) => handleChangeSn(row, val, 'snObj')"
              :min="0"
            ></el-input-number>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="snLine"
          label="线路排序号"
          width="120"
          :sortable="true"
        >
          <template v-slot="{row}">
            <el-input-number
              style="width: 100%"
              v-model="row.snLine"
              :controls="false"
              @change="
                (val, old, $event) => handleChangeSn(row, val, 'snLineObj')
              "
              :min="0"
            ></el-input-number>
          </template>
        </ht-table-column>
        <ht-table-column label="操作" width="120">
          <template v-slot="{row}">
            <el-button icon="el-icon-document-add" @click="handleExtend(row)"
              >扩展参数</el-button
            >
          </template>
        </ht-table-column>
      </template>
    </ht-table>
    <common-dialog
      width="1000px"
      title="机组基础信息"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="beforeCloseDialog"
      destroy-on-close
    >
      <el-form
        v-model="BizFanInfo"
        data-vv-scope="BizFanInfoForm"
        clsss="fan-info-form"
      >
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="机组名称" prop="fanName">
              <ht-input v-model="BizFanInfo.fanName" validate="required" />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="机组编码" prop="fanCode">
              <ht-input
                v-model="BizFanInfo.fanCode"
                v-pinyin="BizFanInfo.fanName"
                validate="required"
                :disabled="!!BizFanInfo.id"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="机组类型" prop="fanType">
              <dict-select
                v-model="BizFanInfo.fanType"
                dictCode="jzfjxh"
                validate="required"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="风场线路" prop="lineCode">
              <ht-select
                v-model="BizFanInfo.lineCode"
                validate="required"
                :options="windFarmLine"
                :props="{key: 'lineCode', value: 'lineName'}"
              ></ht-select>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="经度" prop="longitude">
              <ht-input
                class="number-type"
                type="number"
                v-model="BizFanInfo.longitude"
                validate="required"
                :max="180"
                :min="-180"
                :precision="6"
                placeholder="请输入经度"
              />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="纬度" prop="latitude">
              <ht-input
                class="number-type"
                type="number"
                v-model="BizFanInfo.latitude"
                validate="required"
                :max="90"
                :min="-90"
                :precision="6"
                placeholder="请输入纬度"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="机位号" prop="fanSetId">
              <ht-input v-model="BizFanInfo.fanSetId" />
            </ht-form-item>
          </el-col>
          <el-col :span="12">
            <ht-form-item label="叶片型号" prop="bladeModel">
              <ht-input v-model="BizFanInfo.bladeModel" />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="额定功率" prop="capacity">
              <ht-input
                class="number-type"
                type="number"
                v-model="BizFanInfo.capacity"
                :min="0"
                placeholder="请输入额定功率"
              />
              <span> KW</span>
            </ht-form-item>
          </el-col>

          <el-col :span="12">
            <ht-form-item label="轮毂高度" prop="wheelhubHeight">
              <ht-input
                class="number-type"
                type="number"
                v-model="BizFanInfo.wheelhubHeight"
                :min="0"
                placeholder="请输入轮毂高度"
              />
              <span> M</span>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <ht-form-item label="是否旗舰机" prop="isFlagship">
              <ht-radio
                v-model="BizFanInfo.isFlagship"
                :options="FlagshipList"
                :props="{key: 'value', value: 'label'}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" style="text-align: center">
        <ht-submit-button
          url="${cssc}/biz/base/fanInfo/v1/"
          :model="BizFanInfo"
          :request-method="saveMethod"
          scope-name="BizFanInfoForm"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
        <el-button @click="beforeCloseDialog">取消</el-button>
      </div>
    </common-dialog>
    <crew-extend-params-model ref="extend"></crew-extend-params-model>
  </div>
</template>
<script>
import CommonDialog from '../../components/dialog/CommonDialog.vue'
import CrewExtendParamsModel from './modules/CrewExtendParamsModel.vue'

export default {
  components: {CommonDialog, CrewExtendParamsModel},
  data() {
    return {
      dialogVisible: false,
      filterFlagship: [{text: '是', value: 1}, {text: '否', value: 0}],
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      BizFanInfo: {
        lineCode: '',
        fanType: '',
        fanName: '',
        fanCode: '',
        fanSetId: '',
        bladeModel: '',
        capacity: '',
        wheelhubHeight: '',
        longitude: '',
        latitude: '',
        isFlagship: 0
      },
      saveMethod: 'POST',
      FlagshipList: [
        {
          label: '是',
          value: 1
        },
        {
          label: '否',
          value: 0
        }
      ],
      windFarmLine: [],
      snObj: {},
      snLineObj: {},
      snUrl: {
        snObj: '/biz/base/fanInfo/v1/updateFanSequence',
        snLineObj: '/biz/base/fanInfo/v1/updateFanLineSequence'
      }
    }
  },
  mounted() {
    this.$validator = this.$root.$validator
  },
  created() {
    this.getWindFarmLine()
  },
  methods: {
    handleExtend(row) {
      this.$refs.extend.open(row)
    },
    handleChangeSn(row, val, type) {
      this[type][row.id] = val
    },
    saveSn(type) {
      this.$http
        .post('${cssc}' + `${this.snUrl[type]}`, this[type])
        .then(res => {
          this.$refs.htTable.load()
        })
    },
    getWindFarmLine() {
      this.$http.post('${cssc}/biz/base/wfLine/v1/list', {}).then(res => {
        this.windFarmLine = res.data
      })
    },
    showDialog(id) {
      if (id) {
        this.saveMethod = 'PUT'
        this.$http.get('${cssc}/biz/base/fanInfo/v1/' + id).then(
          resp => {
            this.BizFanInfo = resp.data
            this.dialogVisible = true
          },
          error => {
            reject(error)
          }
        )
      } else {
        this.saveMethod = 'POST'
        this.dialogVisible = true
      }
    },
    beforeCloseDialog() {
      this.BizFanInfo = {
        lineCode: '',
        fanType: '',
        fanName: '',
        fanCode: '',
        fanSetId: '',
        bladeModel: '',
        capacity: '',
        wheelhubHeight: '',
        longitude: '',
        latitude: '',
        isFlagship: 0
      }
      this.dialogVisible = false
    },
    loadData(param, cb) {
      this.$http
        .post('${cssc}/biz/base/fanInfo/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>
<style lang="scss" scoped>
.number-type /deep/ .el-input-number {
  width: 100%;
}
</style>
