<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <div class="manage-container">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        label-position="left"
      >
        <el-form-item :label="$t('sensor.cgqmc')">
          <el-input
            v-model="form.name"
            :placeholder="$t('sensor.qsrcgqmc')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('sensor.cgqtp')">
          <el-select
            ref="select"
            v-model="form.img"
            style="width: 100%"
            :placeholder="$t('defalult.qxz')"
            @change="changeSelection"
          >
            <el-option
              v-for="item in iconData"
              :key="item.icon"
              :label="item.name"
              :value="item.icon"
            >
              <img
                :src="fileUrl + item.icon"
                style="width: 50px; height: 50px"
              />
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('defalult.px')">
          <el-input v-model="form.sort" placeholder="1"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sensor.dzh')">
          <el-input
            v-model="form.addressId"
            :placeholder="$t('sensor.srdzj')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('sensor.jcqh')">
          <el-input
            v-model="form.offset"
            :placeholder="$t('sensor.jcqh')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('sensor.sjjd')">
          <el-select
            v-model="form.accuracy"
            :placeholder="$t('sensor.qsrsjjd')"
          >
            <el-option
              v-for="item in accuracy"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isNumber" :label="$t('sensor.sxmrz')">
          <el-input v-model="data.value" placeholder="0"></el-input>
        </el-form-item>
        <el-form-item v-if="isNumber" :label="$t('sensor.sxdaw')">
          <el-input v-model="data.unit" placeholder="1"></el-input>
        </el-form-item>
        <el-form-item v-if="isNumber" :label="$t('sensor.csbz')">
          <el-input v-model="data.remark" placeholder="1"></el-input>
        </el-form-item>
        <el-form-item v-if="isConfig" :label="$t('sensor.cgdlx')">
          <el-select v-model="data.type" :placeholder="$t('sensor.qsrcgdlx')">
            <el-option
              v-for="item in typeData"
              :key="item.dataCode"
              :label="item.dataValue"
              :value="item.dataCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sensor.cgqdw')">
          <el-select v-model="form.unit" :placeholder="$t('sensor.qxzcgqdw')">
            <el-option
              v-for="item in unitData"
              :key="item.dataCode"
              :label="item.dataValue"
              :value="item.dataCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sensor.dxcx')">
          <el-select
            v-model="form.readWrite"
            :placeholder="$t('sensor.qxzdxqx')"
          >
            <el-option
              v-for="item in writeData"
              :key="item.dataCode"
              :label="item.dataValue"
              :value="item.dataCode"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('sensor.dtxs')">
          <el-select
            v-model="form.homeShowFlag"
            :placeholder="$t('sensor.sfdtxs')"
          >
            <el-option
              v-for="item in homeShowFlagData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sensor.dwzh')">
          <el-select
            v-model="form.convertFlag"
            :placeholder="$t('sensor.sfxygjddwzh')"
          >
            <el-option
              v-for="item in convertFlagData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sensor.sjgs')">
          <el-select
            v-model="form.dataFormat"
            :placeholder="$t('sensor.qxzsjgs')"
          >
            <el-option
              v-for="item in formatData"
              :key="item.dataCode"
              :label="item.dataValue"
              :value="item.dataCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <vab-query-form>
        <el-button type="primary" @click="save">
          {{ $t('defalult.bc') }}
        </el-button>
        <el-button type="primary" plain @click="close">
          {{ $t('defalult.fh') }}
        </el-button>
      </vab-query-form>
    </div>
  </el-dialog>
  <parameter-show ref="parameter" @getParameter="getParameter" />
</template>

<script>
import { doAdd, getDictData, doEdit } from '@/api/sensor';
import { getList } from '@/api/material';
import parameterShow from './parameter';
import { baseURL } from '@/config';
export default {
  name: 'Sensor',
  components: {
    parameterShow,
  },
  data() {
    return {
      attrData: [],
      typeData: [],
      unitData: [],
      strategyData: [],
      codeData: [],
      fileUrl: baseURL + '/static/img/',
      formatData: [],
      writeData: [],
      homeShowFlagData: [
        {
          label: '显示',
          value: 1,
        },
        {
          label: '不显示',
          value: 0,
        },
      ],
      convertFlagData: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 0,
        },
      ],
      accuracy: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      form: {
        id: '',
        name: '',
        projectId: '',
        deviceId: '',
        addressId: '',
        offset: '',
        // attribute: '',
        // attributeParams: '',
        storeStrategy: '',
        functionCode: '',
        dataFormat: '',
        sort: '',
        // formulaUp: '',
        // formulaDown: '',
        readWrite: '',
        homeShowFlag: '',
        img: '',
        convertFlag: '',
        unit: '',
      },
      data: {
        value: '',
        unit: '',
        remark: '',
        type: '',
      },
      config: '',
      isNumber: false,
      isConfig: false,
      dialogFormVisible: false,
      title: '',
      diffData: {},
      iconData: [],
    };
  },
  created() {
    // this.getAttrData();
    // this.getTypeData();
    // this.getUnitData();
    // this.getStrategyData();
    // this.getCodeData();
    // this.getFormatData();
    // this.getWriteData();
  },
  methods: {
    changeSelection(e) {
      for (var index in this.iconData) {
        const obj = this.iconData[index];
        if (obj.icon == e) {
          this.$refs['select'].$el.children[0].children[0].setAttribute(
            'style',
            'background:url(' +
              this.fileUrl +
              obj.icon +
              ') no-repeat;color:#fff;text-indent: -9999px;background-position: center center'
          );
        }
      }
    },
    async getIconData() {
      const { data } = await getList({ page: 1, size: 100, name: '' });
      this.iconData = data.items;
    },
    showEdit(row, status) {
      if (!status) {
        this.title = '添加传感器';
        this.getDeviceData(row);
      } else {
        this.title = '编辑传感器';
        this.assignment(row);
      }
      this.getDictData();
      this.getIconData();
      this.dialogFormVisible = true;
    },
    assignment(row) {
      const form = Object.assign({}, row);
      if (form.attribute != undefined) {
        this.form.attribute = form.attribute.dataCode;
      }
      this.form.id = form.id;
      this.form.name = form.name;
      this.form.img = form.img;
      this.form.addressId = form.addressId;
      this.form.offset = form.offset;
      this.form.accuracy = form.accuracy;
      if (form.unit != undefined) {
        this.form.unit = form.unit.dataCode;
      }
      // this.form.formulaUp = form.formulaUp;
      // this.form.formulaDown = form.formulaDown;
      if (form.dataFormat != undefined) {
        this.form.dataFormat = form.dataFormat.dataCode;
      }
      if (form.readWrite != undefined) {
        this.form.readWrite = form.readWrite.dataCode;
      }
      this.form.transferId = form.transferId;
      this.form.homeShowFlag = isNaN(Number(form.homeShowFlag))
        ? ''
        : Number(form.homeShowFlag);
      this.form.convertFlag = isNaN(Number(form.convertFlag))
        ? ''
        : Number(form.convertFlag);
      this.form.sort = form.sort;
    },
    getType(value) {
      if (value == 0) {
        this.isNumber = false;
        this.isConfig = true;
      } else {
        this.isNumber = true;
        this.isConfig = false;
      }
      this.data.unit = '';
      this.data.value = '';
      this.data.remark = '';
      this.data.type = '';
    },
    parameter() {
      this.$refs['parameter'].showEdit();
    },
    async getDeviceData(deviceId) {
      this.form.projectId = sessionStorage.getItem('projectId');
      this.form.deviceId = deviceId;
    },
    getParameter(row) {
      this.config = JSON.stringify(row);
      this.form.functionCode = row.functionCode;
      this.form.dataFormat = row.dataFormat;
    },
    async getDictData() {
      const { data } = await getDictData();
      this.attrData = data.sensorAttribute;
      this.typeData = data.sensorType;
      this.unitData = data.sensorUnit;
      this.strategyData = data.storeStrategy;
      this.codeData = data.functionCode;
      this.formatData = data.dataFormat;
      this.writeData = data.sensorReadWrite;
    },
    close() {
      this.$refs['form'].resetFields();
      this.form = this.$options.data().form;
      this.dialogFormVisible = false;
      this.$emit('fetch-data');
    },
    save() {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          this.form.attributeParams = JSON.stringify(this.data);
          if (this.form.id) {
            const { msg } = await doEdit(this.form);
            this.$notify({
              title: msg,
              type: 'success',
            });
          } else {
            delete this.form.id;
            const { msg } = await doAdd(this.form);
            this.$notify({
              title: msg,
              type: 'success',
            });
          }
          this.$refs['form'].resetFields();
          this.$parent.fetchData();
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;
  .el-input {
    width: 205px;
  }
  .sensor-title {
    font-size: 18px;
    border-left: 6px solid #3281fd;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .notes {
    font-size: 14px;
    margin-left: 10px;
  }
}
</style>
