<template>
  <div class="app-container">

    <el-card>
      <div slot="header" class="clearfix">
        <b><span>场站信息</span></b>
        <el-button
          v-loading="tableLoading"
          style="float: right;padding:3px 10px 3px 3px;"
          type="text"
          @click="exportDataEvent"
        >导出数据
        </el-button>
      </div>

      <div class="filter-container">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          style="margin-bottom: 10px;"
          @click="downloadFile"
        >
          导出配置文件
        </el-button>
      </div>
      <div>
        <el-card style="width: 80%;margin-left: 10%">
          <div style="height: 30px" />
          <el-form ref="form" v-loading="tableLoading" :model="form" :rules="rules">

            <el-row style="gutter:30;text-align: left" class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="场站编号：" prop="stationCode" label-width="180px">
                  <el-input v-model="form.stationCode" placeholder="必填项" maxlength="32" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="上报省调：" label-width="180px" prop="provinceEnum">
                  <el-select
                    v-model="form.provinceEnum"
                    placeholder="请选择"
                    filterable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in this.provinceTypeList"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">

              <el-col :span="12">
                <el-form-item label="场站标识：" prop="sign" label-width="180px">
                  <el-input v-model="form.sign" placeholder="必填项" maxlength="32" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="场站名称：" prop="name" label-width="180px">
                  <el-input v-model="form.name" placeholder="必填项" maxlength="85" />
                </el-form-item>
              </el-col>

            </el-row>

            <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item
                  label="别名(上网变电站名称)："
                  prop="netSubstationName"
                  label-width="180px"
                  style="min-width: 110px"
                >
                  <el-input v-model="form.netSubstationName" placeholder="必填项" maxlength="32" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="总装机容量(MW)："
                  prop="capacity"
                  label-width="180px"
                  style="min-width: 110px"
                >
                  <el-input v-model="form.capacity" placeholder="必填项" maxlength="85" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item
                  label="光伏装机容量(MW)："
                  prop="backupE"
                  label-width="180px"
                  style="min-width: 110px"
                >
                  <el-input v-model="form.backupE" placeholder="必填项" maxlength="85" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="风电装机容量(MW)："
                  prop="backupF"
                  label-width="180px"
                  style="min-width: 110px"
                >
                  <el-input v-model="form.backupF" placeholder="必填项" maxlength="85" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="gutter:30" class="row-bg el-row-two" justify="space-between">
              <el-col :span="12">
                <el-form-item label="场站类型：" label-width="180px" prop="electricFieldTypeEnum" style="display:none">
                  <el-select
                    v-model="form.electricFieldTypeEnum"
                    placeholder="请选择"
                    filterable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in this.electricTypeList"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="场站状态111：" prop="stationStatusEnum" label-width="180px" style="display:none">
                  <el-input v-model="form.stationStatusEnum.message" placeholder="运维中" maxlength="32" readonly />
                </el-form-item>
              </el-col>

            </el-row>

            <el-row style="gutter:30" class="row-bg" justify="space-between">
              <el-col :span="12">
                <el-form-item label="入库间隔（单位s）：" prop="interval" label-width="180px">
                  <el-select
                    v-model="form.interval"
                    placeholder="请选择"
                    filterable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in this.intervals"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="并网设备数：" prop="gridCE" label-width="180px">
                  <el-input v-model="form.gridCE" placeholder="必填项" maxlength="10" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-row style="gutter:30" class="row-bg" justify="space-between">

              <el-col :span="12">
                <el-form-item label="场站经度：" prop="longitude" label-width="180px">
                  <el-input v-model="form.longitude" placeholder="必填项" maxlength="10" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="场站纬度：" prop="latitude" label-width="180px">
                  <el-input v-model="form.latitude" placeholder="必填项" maxlength="10" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="gutter:30" class="row-bg" justify="space-between">

              <el-col :span="12">
                <el-form-item label="场站海拔：" prop="altitude" label-width="180px">
                  <el-input v-model="form.altitude" placeholder="必填项" maxlength="10" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="场站所属公司：" prop="company" label-width="180px">
                  <el-input v-model="form.company" placeholder="必填项" maxlength="100" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row style="gutter:30" class="row-bg" justify="space-between">

              <el-col :span="12">
                <el-form-item label="场站位置：" prop="location" label-width="180px">
                  <el-input v-model="form.location" placeholder="必填项" maxlength="100" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="场站面积：" prop="area" label-width="180px">
                  <el-input v-model="form.area" placeholder="必填项" maxlength="10" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="gutter:30" class="row-bg" justify="space-between">

              <el-col :span="12">
                <el-form-item label="所属地调（文本）：" prop="backupA" label-width="180px">
                  <el-input v-model="form.backupA" placeholder="选填项" maxlength="20" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同结束日期：" prop="backupC" label-width="180px" style="display:none">
                  <!--<el-date-picker-->
                    <!--style="width: 100%" -->
                    <!--v-model="form.contractEndTime"-->
                    <!--:clearable="false"-->
                    <!--:editable="false"-->
                    <!--type="datetime"-->
                    <!--value-format="timestamp"-->
                    <!--placeholder="选择合同结束日期">-->
                  <!--</el-date-picker>-->
                  <el-date-picker
                    :readonly="true"
                    style="width: 100%"
                    v-model="form.backupC"
                    type="date"
                    placeholder="选择合同结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <span slot="footer" class="dialog-footer">
              <el-button
                v-loading="tableLoading"
                type="primary"
                style="width: 15%"
                @click="saveElectricField('form')"
              >保 存</el-button>
              <!--                    <span style="width: 200px"></span>-->
              <!--                  <el-button v-loading="tableLoading" @click="deleteRowEvent(form)">删 除</el-button>-->
              <!--                    <el-button v-loading="tableLoading" @click="resetForm('form')">重 置</el-button>-->
            </span>
          </div>
          <div style="height: 30px" />
        </el-card>
        <div style="height: 20px" />
      </div>
    </el-card>

  </div>

</template>

<script>

export default {

  data() {
    return {
      addVisible: false,
      loading: true,
      tableLoading: false,
      tableData: {},
      datas: {},
      showCreateButton: false,
      provinceTypeList: [],
      electricTypeList: [],
      form: { stationStatusEnum: {
        code: 'E1',
        message: '未运维'
      }},
      electricFieldStatrsEnumList: [],
      intervals: [{ key: 0, value: 0, label: '不入库' },{ key: 60, value: 60, label: '一分钟' }, { key: 900, value: 900, label: '十五分钟' }],
      // 表单验证规则
      rules: {
        stationCode: [
          { required: true, message: '请填写场站编号' }
          // {message: '输入过长', max: 8}
        ],
        sign: [
          { required: true, message: '请填写标识名称' }
          // {message: '输入过长', max: 15}
        ],
        name: [
          { required: true, message: '请填写场站名称' }
          // {message: '输入过长', max: 50}
        ],
        backupE: [
          { required: true, message: '请正确填写光伏装机容量' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只能输入正数数字或带两位小数的数字' }
          // {message: '输入过长', max: 10}
        ],
        backupF: [
          { required: true, message: '请正确填写风电装机容量' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只能输入正数数字或带两位小数的数字' }
          // {message: '输入过长', max: 10}
        ],
        capacity: [
          { required: true, message: '请正确填写装机容量' },
          { pattern: /^\d+(\.\d{0,2})?$/, message: '只能输入正数数字或带两位小数的数字' }
          // {message: '输入过长', max: 10}
        ],
        gridCE: [
          { required: true, message: '请正确填写并网设备数' },
          { pattern: /^[0-9]*[1-9][0-9]*$/, message: '只能输入正整数数字' }
          // {message: '输入过长', max: 5}
        ],
        longitude: [
          { required: true, message: '请正确填写场站经度' },
          {pattern: /^\d+(\.\d{1,6})?$/, message: '只能输入正数数字或带小数点6位以内的数字'},
          {pattern: /^-?((0|1?[0-8]?[0-9]?)(([.][0-9]{1,10})?)|180(([.][0]{1,10})?))$/, message: '请输入正确的经度'}
          // {message: '输入过长', max: 10}
        ],
        latitude: [
          { required: true, message: '请正确填写场站纬度' },
          {pattern: /^\d+(\.\d{1,6})?$/, message: '只能输入正数数字或带小数点6位以内的数字'},
          {pattern: /^-?((0|[1-8]?[0-9]?)(([.][0-9]{1,10})?)|90(([.][0]{1,10})?))$/, message: '请输入正确的纬度'}
          // {message: '输入过长', max: 10}
        ],
        provinceEnum: [
          { required: true, message: '请选择上报省调类型' }
        ],
        netSubstationName: [
          { required: true, message: '请填写别名' }
          // {message: '输入过长', max: 50}
        ],
        electricFieldTypeEnum: [
          { required: true, message: '请填写场站类型' }
        ],
        interval: [
          { required: true, message: '请填写入库时间' }],
        altitude: [
          { required: true, message: '请填写场站海拔' },
          { pattern: /^\d+(\.\d{2})?$/, message: '只能输入正数数字或带两位小数的数字' }
          // {message: '输入过长', max: 50}
        ],
        company: [
          { required: true, message: '请填写场站所属公司' }
          // {message: '输入过长', max: 50}
        ],
        location: [
          { required: true, message: '请填写场站位置' }
          // {message: '输入过长', max: 50}
        ],
        area: [
          { required: true, message: '请填写场站面积' },
          { pattern: /^\d+(\.\d{2})?$/, message: '只能输入正数数字或带两位小数的数字' }
          // {message: '输入过长', max: 50}
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  methods: {
    getData() {
      Promise.all([this.getEl(), this.getProvince(), this.getElType(), this.getElectricFieldStatrsEnum()]).then((results) => {
        this.provinceTypeList = results[1]
        this.electricTypeList = results[2]
        // window.console.log(this.provinceTypeList)
        this.electricFieldStatrsEnumList = results[3]
        if (results[0] == null) {
          this.showCreateButton = true
          this.form = {
            stationStatusEnum: {
              code: 'E1',
              message: '未运维'
            }
          }
          this.tableData = {
            stationStatusEnum: {
              code: 'E1',
              message: '未运维'
            }
          }
        } else {
          this.form = results[0]
          this.tableData = results[0]
          console.log(this.tableData)
        }

        this.loading = false
      })
    },
    getElType() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/electricField/getElType').then(res => {
          resolve(res.data)
          // console.log("获取场站类型枚举信息成功")
        }).catch((error) => {
          this.$message.error('获取场站类型枚举信息出错' + error)
        })
      })
    },
    getProvince() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/electricField/getProvince').then(res => {
          resolve(res.data)
          // console.log("获取上报类型枚举信息成功")
        }).catch((error) => {
          this.$message.error('获取上报类型枚举信息出错' + error)
        })
      })
    },
    getEl() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/electricField/').then(res => {
          resolve(res.data)
          // console.log("获取场站信息成功")
        }).catch((error) => {
          this.$message.error('获取场站信息出错' + error)
        })
      })
    },
    getElectricFieldStatrsEnum() {
      const a = this.$axios
      return new Promise(function(resolve, reject) {
        a.get('/electricField/getElectricFieldStatrsEnum').then(res => {
          resolve(res.data)
          // console.log("获取场站状态信息成功")
        }).catch((error) => {
          this.$message.error('获取场站状态信息出错' + error)
        })
      })
    },
    downloadFile() {
      this.loading = true
      this.$axios.post('/electricField/dataDownload', {
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      }).catch((error) => {
        console.log(error)
        this.loading = false
      })
    },
    saveElectricField(formName) {
      // window.console.log(this.form)
      this.form.stationStatusEnum = 'E1'
      const a = this.$axios
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.tableLoading = true
          a.post('/electricField/', this.form).then(res => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.addVisible = false
            this.tableLoading = false
            this.getData()
            this.showCreateButton = false
          }).catch((error) => {
            this.$message.error('添加场站信息出错' + error)
            this.tableLoading = false
          })
        } else {
          this.$message.error('添加信息未通过验证，请查看提示')
          return false
        }
      })
    },
    // 删除场站信息
    deleteRowEvent(row) {
      this.$XModal.confirm('删除不可恢复！！！确认删除?').then(type => {
        if (type === 'confirm') {
          this.$axios.delete('/electricField/' + row.stationCode).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getData()
          }).catch((error) => {
            this.$message.error('删除场站信息出错' + error)
          })
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.form = this.tableData
    },
    exportDataEvent() {
      this.loading = true
      this.$axios.post('/electricField/export', {}, {
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
