<template>
  <!-- 基本信息 -->
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="formInline"
        class="demo-form-inline"
      >
        <!-- <el-form-item :label="$t('message.lifter.devName')">
          <el-select
            v-model="formInline.alarmPushWorkerId"
            multiple
            :placeholder="$t('message.alarmValueSet.placeholder_select')"
            size="medium"
            style="margin-right: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.workerName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号">
          <el-select
            v-model="formInline.alarmPushWorkerId"
            multiple
            :placeholder="$t('message.alarmValueSet.placeholder_select')"
            size="medium"
            style="margin-right: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.workerName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" plain>{{
            $t("message.lifter.demand")
          }}</el-button> -->
          <el-button type="warning" plain @click="refresh">{{
            $t("message.alarmValueSet.refresh")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="List">
        <!-- 序号 -->
        <el-table-column
          width="50"
         type="index"
          :label="$t('message.energyManage.material.serialNo')"
        ></el-table-column>
        <el-table-column
          prop="ammeterName"
          align="center"
          :label="$t('message.alarmValueSet.deviceName')"
        ></el-table-column>

        <el-table-column
          prop="ammeterNo"
          :label="$t('message.alarmValueSet.deviceId')"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="isClosed"
          :label="$t('message.alarmValueSet.isClosed')"
          align="center"
        >
          <template slot-scope="scope">{{
            $t("message.deviceManage.isClosedArr")[scope.row.isClosed - 1]
          }}</template>
        </el-table-column>

        <el-table-column
          prop="realTime"
          width="200"
          :label="$t('message.alarmValueSet.createTime')"
          align="center"
        ></el-table-column> -->
        <!-- 设备状态 -->
        <el-table-column
            prop="online"
            label="设备状态"
            align="center"
        >
        <template slot-scope="scope">
           {{ scope.row.online==0?'离线':'在线' }}
         </template>  
      </el-table-column>
        <el-table-column
          prop="deviceStatus"
          label="设备激活状态"
          align="center"
        >
         <template slot-scope="scope">
           {{ scope.row.deviceStatus==0?'已注册':scope.row.deviceStatus==1?'已激活':'已注销' }}
         </template>  
      </el-table-column>
        <!-- 阀值状态 -->
        <el-table-column
            prop="gateStatus"
            label="阀门状态"
            align="center"
        >
        <template slot-scope="scope">
           {{ scope.row.gateStatus==1?'开':'关' }}
         </template>  
      </el-table-column>
       
        <el-table-column
          :label="$t('message.alarmValueSet.operation')"
          align="center"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <!-- <div @click="yu(scope.row)" class="operationText">
                <img src="@/assets/images/yu.png" alt="" />{{
                  $t("message.alarmValueSet.yjz")
                }}
              </div>
              <div @click="bao(scope.row)" class="operationText">
                <img src="@/assets/images/bao.png" alt="" />{{
                  $t("message.alarmValueSet.bjz")
                }}
              </div> -->
              <el-button type="text" @click="threshold(scope.row)" class="operationText">
              {{$t('message.energyManage.valveControlSet')}}
                <!-- 阀值设置 -->
              </el-button>
              <div @click="edit(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>{{ $t("message.alarmValueSet.edit") }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        class="pagerBox"
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="pagInfo.pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pagInfo.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="pagInfo.total"
        background
      ></el-pagination> -->
    </div>

    <el-dialog
      :title="$t('message.alarmValueSet.Popup_title')[Popup.type]"
      :visible.sync="Popup.show"
      width="667px"
      :modal-append-to-body="false"
    >
      <div class="dialog_content">
        <el-form
          :modal-append-to-body="false"
          v-show="Popup.type === 'edit'"
          size="medium"
          ref="addEditForm"
          :model="addEditForm"
          :rules="addEditRules"
          label-width="120px"
          class="dialogFormBox"
        >
          <!--<el-form-item :label="$t('message.alarmValueSet.dialog_edit.contactNumber')" >
                        <el-input v-model="addEditForm.devName"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>-->
          <el-form-item
            :label="$t('message.alarmValueSet.dialog_edit.deviceId')"
            prop="ammeterNo"
          >
            <el-input
              v-model="addEditForm.ammeterNo"
              disabled
              :placeholder="$t('message.alarmValueSet.placeholder')"
            ></el-input>
          </el-form-item>
          <!--<el-form-item label="接收时间" prop="realTime">
                        <el-date-picker
                                v-model="addEditForm.realTime"
                                type="datetime"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期">
                            &lt;!&ndash;value-format="yyyy-MM-dd hh:mm:ss"&ndash;&gt;
                        </el-date-picker>
                    </el-form-item>-->
          <el-form-item
            :label="$t('message.alarmValueSet.dialog_edit.isEnable')"
            prop="isEnable"
          >
            <el-radio-group v-model="addEditForm.isEnable">
              <el-radio :label="0">{{
                $t("message.alarmValueSet.dialog_edit.isEnableArr")[0]
              }}</el-radio>
              <el-radio :label="1">{{
                $t("message.alarmValueSet.dialog_edit.isEnableArr")[1]
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('message.alarmValueSet.dialog_edit.name')"
            prop="ammeterName"
          >
            <el-input
              v-model="addEditForm.ammeterName"
              :placeholder="$t('message.alarmValueSet.placeholder')"
            ></el-input>
          </el-form-item>
          <!-- 安装位置 -->
          <el-form-item :label="$t('message.energyManage.installLocation')">
            <el-input
              v-model="addEditForm.ammeterPosition"
              :placeholder="$t('message.alarmValueSet.placeholder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.lng')">
            <el-input
              v-model="addEditForm.lng" disabled >
              <template slot="append">
                <el-link type="primary" @click="toGetLocalFn">{{
                    $t(
                        "message.companyDiagram.dialog_ProjectPop_up.coordinatePicking"
                    )
                  }}</el-link>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.lat')">
            <el-input
              v-model="addEditForm.lat" disabled ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.alarmValueSet.dialog_edit.pusher')">
            <el-select
              v-model="addEditForm.alarmPushWorkerId"
              multiple
              :placeholder="$t('message.alarmValueSet.placeholder_select')"
            >
              <el-option
                v-for="item in options"
                :key="item.workerId"
                :label="item.workerName"
                :value="item.workerId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="Popup.show = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.alarmValueSet.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submit"
              size="medium"
              >{{ $t("message.alarmValueSet.save") }}
            </el-button>
          </div>
        </el-form>
        <el-form
          v-if="Popup.type === 'threshold'"
          size="medium"
          ref="warningForm"
          label-width="140px"
          class="dialogFormBox yj-dialogFormBox"
        >
        <!-- 月用电量 -->
          <el-form-item v-for="(item,index) in thresholdArr" :key="index"
            :label="item.monthNum+$t('message.energyManage.monthUseElectricity')"
            prop="pm25Warning"
          >
            <el-input
              v-model="item.thresholdValue"
              :placeholder="$t('message.alarmValueSet.placeholder')"
            ></el-input>
          </el-form-item>
         
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="Popup.show = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.alarmValueSet.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submit"
              size="medium"
              >{{ $t("message.alarmValueSet.save") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!--高德地图-->
    <gd-map v-if="showMap" @closeMap="closeMap" @save="getLngLat"></gd-map>
  </div>
</template>
<script>
import {
    editwaterMeterApi,
    getwaterMeterListApi,
    addOrUpdateWaterMeterThresholdApi,
    selelctWaterMeterThresholdApi
} from '@/assets/js/api/electricDevManage'
 import {
  getProjectChilderSystemUserListApi
} from "@/assets/js/api/configManage";
import gdMap from '@/components/map/gd-map'

export default {
  mounted() {
    this.getList();
    this.getLaborManagementList();
  },
  components:{
    gdMap
  },
  data() {
    return {
      showMap: false,
      props: {
        multiple: true,
      },
      formInline:{

      },
      addEditRules: {
        ammeterName: [
          {
            required: true,
            message: this.$t("message.deviceManage.rules.devName"),
            trigger: "blur",
          },
          {
            required: true,
            message: this.$t("message.deviceManage.rules.devName"),
            trigger: "change",
          },
        ],
      },
      options: [
        /*{realName: "曾祥万", value: 1},
                    {realName: "李先生", value: 2},*/
      ],
      warningInfo: {},
      addEditForm: {},
      List: [],
      Popup: {
        type: "edit",
        show: false,
      },
      pagInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0, //总条数
      },
      thresholdArr:[]
    };
  },
  methods: {
    //获取阈值
    selelctWaterMeterThreshold(ammeterNo){
      selelctWaterMeterThresholdApi({ammeterNo:ammeterNo,projectSn:this.$store.state.projectSn}).then(res=>{
        if(res.result&&res.result.length>0){
          this.thresholdArr=res.result
        }else{
          this.thresholdArr=[]
          for (let index = 1; index <= 12; index++) {
            this.thresholdArr.push({
              thresholdValue:'',ammeterNo:ammeterNo,projectSn:this.$store.state.projectSn,monthNum:index
            })
            
          }
        }
        
      })
    },
    //获取经纬度
    toGetLocalFn() {
      this.showMap = true;
      // window.open("https://lbs.amap.com/console/show/picker");
    },
    closeMap(val) {
      this.showMap = val;
    },
    getLngLat(v) {
      this.showMap = false;
      this.addEditForm.lng = v.lng;
      this.addEditForm.lat = v.lat;
      console.log('查看经纬度',v);
    },
    SizeChange(val) {
      this.pagInfo.pageSize = val;
      this.getList();
    },
    CurrentChange(val) {
      this.pagInfo.pageNo = val;
      this.getList();
    },

    handle(type, show) {
      //打开弹窗前的统一处理
      this.Popup = {
        type: type,
        show: show,
      };
    },

    setWarningType(warningType) {
      addOrUpdateWaterMeterThresholdApi(this.thresholdArr).then((result) => {
        if (result.success) {
          this.$message.success(result.message);
          console.log("预警值/报警值设置成功", result);
        }
      });
    },
    submit() {
      if (this.Popup.type === "threshold") {
        this.setWarningType(1);
        this.Popup.show = false;
      } else if (this.Popup.type === "edit") {
        this.$refs.addEditForm.validate((valid) => {
          if (valid) {
            let params = this.addEditForm;
            params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(",");
            params.projectSn = this.$store.state.projectSn;
            console.log("编辑信息", this.addEditForm);
            editwaterMeterApi(params).then((result) => {
              if (result.success) {
                // console.log('信息编辑成功', result);
                this.$message.success(result.message);
                this.getList();
                this.Popup.show = false;
              }
            });
          } else {
            return false;
          }
        });
      }
    },
    Change() {},
    threshold(obj) {
      console.log("阀值", obj);
      this.handle("threshold", true);
      // obj.warningType = 1;
      this.selelctWaterMeterThreshold(obj.ammeterNo)
      // this.getWarningInfo(obj);
    },
    edit(obj) {
      console.log("编辑", obj);
      this.addEditForm = JSON.parse(JSON.stringify(obj));
      if (typeof obj.alarmPushWorkerId === "string"&& obj.alarmPushWorkerId != '') {
        this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId
          .split(",")
         
      }
      this.handle("edit", true);
    },
    getList() {
      getwaterMeterListApi({ projectSn: this.$store.state.projectSn }).then(
        (result) => {
          if (result.success) {
            this.List = result.result;
            console.log("列表", result);
          }
        }
      );
    },
    refresh() {
      this.getList();
    },
    getWarningInfo(obj) {
      let { deviceId, projectSn, warningType } = obj;
      getEnvironmentWarningInfo({
        deviceId: deviceId,
        projectSn: projectSn,
        warningType: warningType,
      }).then((result) => {
        if (result.success) {
          this.warningInfo = result.result;
          console.log("预警信息", result);
        }
      });
    },
    getLaborManagementList() {
      getProjectChilderSystemUserListApi({
        projectSn: this.$store.state.projectSn,
        workerName: "",
      }).then((result) => {
        if (result.success) {
          console.log("劳务人员", result);
          this.options = result.result;
        }
      });
    },
  },
};
</script>
<style lang="less">
.tableBtns {
  display: flex;
  justify-content: center;
}

.yj-dialogFormBox {
  width: 462px;
}
</style>
