<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="区域名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="districtName">
              <a-input v-model="model.districtName" placeholder="请输入区域名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入设备名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" placeholder="请输入设备编码"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="type">
              <a-select placeholder="设备类型" v-model="model.type">
                <a-select-option value="1">
                  枪机
                </a-select-option>
                <a-select-option value="2">
                  球形
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备ip" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ip">
              <a-input v-model="model.ip" placeholder="请输入设备ip"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="所属设备" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="theirEquipment">
              <a-input v-model="model.theirEquipment" placeholder="请输入所属设备"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <a-select placeholder="设备状态" v-model="model.status">
                <a-select-option :value=1>
                  正常
                </a-select-option>
                <a-select-option :value=2>
                  离线
                </a-select-option>
                <a-select-option :value=3>
                  维修
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="端口" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="port">
              <a-input v-model="model.port" placeholder="请输入端口"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="通道号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="chanelNum">
              <a-input v-model="model.chanelNum" placeholder="请输入通道号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="xy值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coordinateTmp">
              <a-input v-model="model.coordinateTmp" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <div style="position: relative">
              <img src="@/assets/floor.png" alt="floor" width="100%" height="100%"
                   @click="imgClick($event)" ref="imgBg" @load="floorImgLoadComplete($event)"/>
              <img :src="doorIconPath" alt="door"
                   :style="doorIconStyle"
                   v-show="doorIconPath"/>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'PmMonitoringDeviceForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
          coordinateTmp: null,
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/pm/pmMonitoringDevice/add",
          edit: "/pm/pmMonitoringDevice/edit",
          queryById: "/pm/pmMonitoringDevice/queryById"
        },
        statusList: [
        {name: '正常', value: 1, imgPath: require('@/assets/door-close.png')},
        {name: '离线', value: 2, imgPath: require('@/assets/door-offline.png')},
        {name: '损坏', value: 3, imgPath: require('@/assets/door-warning.png')}],
        doorIconStyle: {
          position: 'absolute',
          top: '0px',
          left: '0px',
          width: '40px'
        },
        doorIconPath: null,
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
            // 设置创建用户Id
            this.model.createUserId = this.$store.getters.userInfo.id;
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            // 初始化坐标对象并赋值
            let coordinate = this.model.coordinateTmp.split(',');
            this.model.coordinate = {
              x: coordinate[0],
              y: coordinate[1]
            }
            // 设置修改用户Id
            this.model.modifyUserId = this.$store.getters.userInfo.id;

            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      imgClick(e) {
        // 获取点击目标的x,y坐标
        let event = e || window.event;
        let target = event.target || event.srcElement;
        let fixX = this.$refs.imgBg.getBoundingClientRect().left;
        let fixY = this.$refs.imgBg.getBoundingClientRect().top;
        let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        let eventx = e.pageX - scrollX || e.clientX;
        let eventy = e.pageY - scrollY || e.clientY;
        let offsetWidth = target.offsetWidth;
        let offsetHeight = target.offsetHeight;
        let offsetX = (eventx - fixX);
        let offsetY = (eventy - fixY);
        this.doorIconStyle.top = offsetY - 20 + 'px';
        this.doorIconStyle.left = offsetX - 20 + 'px';
        let x = ((eventx - fixX) / offsetWidth).toFixed(4);
        let y = ((eventy - fixY) / offsetHeight).toFixed(4);
        this.model.coordinateTmp = x + "," + y;
        this.$refs.form.validateField('coordinateTmp');
      },
      statusChange(value) {
        let targetList = this.statusList.filter(status => status.value === value);
        this.doorIconPath = targetList.length > 0 ? targetList[0].imgPath : null;
      },
      floorImgLoadComplete(e) {
      if (this.model.coordinate) {
          this.model.coordinateTmp = this.model.coordinate.x + ',' + this.model.coordinate.y;
          this.statusChange(this.model.status);
          console.log(this.model.status);
          let target = e.target;
          let fixX = 20;
          let fixY = 20;
          let offsetWidth = target.offsetWidth;
          let offsetHeight = target.offsetHeight;
          this.doorIconStyle.top = this.model.coordinate.y * offsetHeight - fixY + 'px'
          this.doorIconStyle.left = this.model.coordinate.x * offsetWidth - fixX + 'px';
        }
      },
    }
  }
</script>