<template>
  <div class="top-left-box">
    <ItemBox :title="$t('dashboard.stationData')" :show-point-setting="true" @handleSetting="handleSetting">
      <div slot="header">
        <div class="header-right-box">
          <div class="header-title" :class="{'active':currentIndex === 0}" @click="changeType(0)">{{ $t('dashboard.dataOverView') }}</div>
          <div class="header-title" :class="{'active':currentIndex === 1}" @click="changeType(1)">{{ $t('dashboard.stationInfo') }}</div>
        </div>
      </div>
      <div v-if="currentIndex === 0" v-loading="loading" class="box">
        <StationData
          :table-data=" stationId !== 1069 ? [ ...overflowData,...dynamicData] : [ ...dynamicData]"
        />
      </div>
      <div v-else v-loading="loading" class="box">
        <StationData :table-data="totalData" />
      </div>
    </ItemBox>

    <el-dialog :title="$t('dashboard.pzsjy')" :visible.sync="configVisible" width="30%" @close="closeConfig">
      <el-form ref="configForm" :model="configForm" :rules="rules" label-width="135px">
        <el-form-item :label="$t('dashboard.time')" prop="time">
          <el-date-picker v-model="configForm.time" style="width: 100%" type="date" :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd" :placeholder="$t('remote.pleaseSelect')" />
        </el-form-item>

        <el-form-item :label="$t('dashboard.generation') + '(kWh)'" prop="param1">
          <el-input-number v-model="configForm.param1" style="width: 100%" :max="9999999" :min="-9999999" :controls="false" :placeholder="$t('remote.pleaseInput')" />
        </el-form-item>
        <el-form-item :label="$t('dashboard.yhl') + '(L)'" prop="param2">
          <el-input-number v-model="configForm.param2" style="width: 100%" :max="9999999" :min="-9999999" :controls="false" :placeholder="$t('remote.pleaseInput')" />
        </el-form-item>
        <el-form-item :label="$t('dashboard.jsfs')" prop="countMethod">
          <el-select v-model="configForm.countMethod" style="width:100%" :placeholder="$t('remote.pleaseSelect')">
            <el-option v-for="item in countMethod" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

      </el-form>

      <span slot="footer">
        <el-button @click="closeConfig">{{ $t('dashboard.cancel') }}</el-button>
        <el-button type="primary" :loading="sureLoading" @click="sureConfig">{{ $t('dashboard.sure') }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { ToDegrees } from '@/utils/index'
import { GetPcsStationData, DynamicConfigPoint, SetDataConfig } from '@/api/home-page/index'
import { GetRAPcsTotalData } from '@/api/homePage-integrated/index'
import dayImg from '../../../../assets/station-data/run-day.png'
import capImg from '../../../../assets/station-data/Installed-capacity.png'
import disImg from '../../../../assets/station-data/total-discharge.png'
import otherImg from '../../../../assets/station-data/station-data.png'
export default {
  name: 'Index',
  props: {
    stationId: {
      type: Number,
      default: 0
    },
    permissionId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0,
      dayImg,
      capImg,
      disImg,
      otherImg,
      overflowData: [{
        name: this.$t('dashboard.safeDays') + `(${this.$t('dashboard.day')})`,
        id: 'operationDays',
        picture: dayImg,
        value: 0
      }, {
        name: this.$t('dashboard.totalCapacity') + `(kWh)`,
        id: 'totalCapacity',
        picture: capImg,
        value: 0
      }, {
        name: this.$t('dashboard.systemConversionEfficiency') + `(%)`,
        id: 'systemEfficiency',
        picture: disImg,
        value: 0
      }],
      totalData: [{
        name: this.$t('dashboard.stationName'),
        id: 'name',
        picture: disImg,
        value: 0
      }, {
        name: this.$t('dashboard.stationType'),
        id: 'type',
        picture: disImg,
        value: 0
      }, {
        name: this.$t('dashboard.stationLocation'),
        id: 'address',
        picture: disImg,
        value: 0
      },
      {
        name: this.$t('dashboard.commTime'),
        id: 'createTime',
        picture: disImg,
        value: 0
      },
      {
        name: this.$t('dashboard.log'),
        id: 'longitude',
        picture: disImg,
        value: 0
      },
      {
        name: this.$t('dashboard.lat'),
        id: 'latitude',
        picture: disImg,
        value: 0
      }],
      stationType: [],
      loading: false,
      timeForm: {
        beforeTime: undefined,
        nowDayTime: undefined
      },
      dynamicData: [],
      configVisible: false,
      configForm: {
        countMethod: '4'
      },
      sureLoading: false,
      selectItem: {},
      rules: {
        time: [{ required: true, message: this.$t('remote.pleaseSelect'), trigger: 'change' }],
        param1: [{ required: true, message: this.$t('remote.pleaseInput'), trigger: 'blur' }],
        param2: [{ required: true, message: this.$t('remote.pleaseInput'), trigger: 'blur' }],
        countMethod: [{ required: true, message: this.$t('remote.pleaseSelect'), trigger: 'change' }]
      },
      pickerOptionsStart: {
        // 时间不能大于当前时间
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  computed: {
    stationTypeList() {
      return this.$store.getters.dicts['stationType'] || []
    },
    countMethod() {
      return this.$store.getters.dicts['commonCountSymbol'] || []
    },
    permission() {
      return this.$store.getters.permissions
    },
    language() {
      return this.$store.getters.language || undefined
    }

  },

  watch: {
    language: {
      handler() {
        this.overflowData = [{
          name: this.$t('dashboard.safeDays') + `(${this.$t('dashboard.day')})`,
          id: 'operationDays',
          picture: dayImg,
          value: 0
        }, {
          name: this.$t('dashboard.totalCapacity') + `(kWh)`,
          id: 'totalCapacity',
          picture: capImg,
          value: 0
        }, {
          name: this.$t('dashboard.systemConversionEfficiency') + `(%)`,
          id: 'systemEfficiency',
          picture: disImg,
          value: 0
        }]
        this.totalData = [{
          name: this.$t('dashboard.stationName'),
          id: 'name',
          picture: disImg,
          value: 0
        }, {
          name: this.$t('dashboard.stationType'),
          id: 'type',
          picture: disImg,
          value: 0
        }, {
          name: this.$t('dashboard.stationLocation'),
          id: 'address',
          picture: disImg,
          value: 0
        },
        {
          name: this.$t('dashboard.commTime'),
          id: 'createTime',
          picture: disImg,
          value: 0
        },
        {
          name: this.$t('dashboard.log'),
          id: 'longitude',
          picture: disImg,
          value: 0
        },
        {
          name: this.$t('dashboard.lat'),
          id: 'latitude',
          picture: disImg,
          value: 0
        }]
      },
      deep: true
    }
  },
  mounted() { },
  methods: {
    configData(item) {
      if (item.isConfig && this.permission.includes('business:DataConfig:configData')) {
        this.selectItem = item
        this.configVisible = true
        this.$nextTick(() => {
          this.$refs.configForm.clearValidate()
        })
      }
    },
    sureConfig() {
      this.$refs.configForm.validate(async(valid) => {
        if (valid) {
          this.sureLoading = true
          try {
            await SetDataConfig({
              ...this.configForm,
              stationId: this.selectItem.stationId,
              srcId: this.selectItem.srcId,
              deviceType: this.selectItem.deviceType,
              col: this.selectItem.col
            })
            this.$message.success(this.$t('dashboard.saveSuccess'))
            this.getData()
            this.closeConfig()
          } finally {
            this.sureLoading = false
          }
        }
      })
    },
    closeConfig() {
      this.configForm = {
        countMethod: '4'
      }
      this.configVisible = false
    },
    handleSetting() {
      this.$emit('handleSetting')
    },
    getStationTypeName(item) {
      const typeIndex = this.stationTypeList.findIndex(t => Number(t.value) === Number(item))
      return this.stationTypeList[typeIndex].label
    },
    changeType(val) {
      this.currentIndex = val
    },
    getData() {
      this.GetPcsStationData()
      this.GetPcsTotalData()
    },
    async GetPcsStationData() {
      this.loading = true
      const params = {
        stationId: this.stationId
      }
      try {
        const { data } = await GetPcsStationData(params)
        this.totalData.forEach((item) => {
          item.value = data[item.id]
          if (item.id === 'type') {
            item.value = this.getStationTypeName(item.value)
          }
          if (item.id === 'longitude') {
            item.value = ToDegrees(item.value, 1)
          }
          if (item.id === 'latitude') {
            item.value = ToDegrees(item.value, 2)
          }
        })
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    },

    async GetPcsTotalData() {
      this.loading = true
      const params = {
        stationId: this.stationId,
        pageLocation: 'stationData',
        permissionId: this.permissionId
      }
      try {
        const { data } = await GetRAPcsTotalData(params)
        const res = await DynamicConfigPoint(params)
        this.overflowData.forEach((item) => {
          if (data[item.id]) {
            item.value = data[item.id]
          }
          if (item.id === 'systemEfficiency') {
            item.value = (item.value * 100).toFixed(2)
          }
        })
        this.dynamicData = res.data
        this.dynamicData.forEach((item) => {
          item.picture = otherImg
        })
      } catch (error) {
        // console.log(error);
      } finally {
        this.loading = false
      }
    }

  }
}
</script>
<style lang="scss" scoped>
::v-deep .item-con {
  overflow: auto;
}
.top-left-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .header-right-box {
    display: flex;
    align-items: center;

    .header-title {
      white-space: nowrap;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0em;
      color: rgba(206, 235, 255, 0.5);
      padding: 0 10px;
      cursor: pointer;
      font-family: Source Han Sans CN;

      &.active {
        color: #ffffff;
        background: linear-gradient(
          90deg,
          rgba(0, 148, 255, 0) 0%,
          rgba(0, 148, 255, 0.43) 51%,
          rgba(0, 148, 255, 0) 99%
        );
      }
    }
  }
}
.box {
  width: 100%;
  height: 100%;
  padding: 10px;
  padding-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
