<template>
  <div class="dataDevice manage-page">
    <div class="table-title">
      <img src="../../assets/manageImg/dataDevice.png" alt="">
      {{ $t('bigDataDevice.title') }}
    </div>
    <div class="table-view">
      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <el-table-column prop="deviceId" :label="$t('bigDataDevice.tableHeaders.deviceCode')" width="180px">
        </el-table-column>
        <el-table-column prop="greenhouseName" :label="$t('bigDataDevice.tableHeaders.deviceName')">
        </el-table-column>
        <el-table-column prop="greenhouseVariety" :label="$t('bigDataDevice.tableHeaders.variety')">
        </el-table-column>
        <el-table-column prop="greenhouseNums" :label="$t('bigDataDevice.tableHeaders.quantity')">
        </el-table-column>
        <el-table-column prop="growthStageName" :label="$t('bigDataDevice.tableHeaders.growthStage')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-type">
                {{ scope.row.growthStageName }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('bigDataDevice.tableHeaders.operations')">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row)">
                <img src="../../assets/manageImg/table-edit.png" alt="">
                {{ $t('bigDataDevice.tableHeaders.edit') }}
              </div>
              <!-- 如果需要删除功能 -->
              <!-- <el-popconfirm :title="$t('bigDataDevice.dialog.deleteConfirmation')">
                <div class="table-operate red" slot="reference">
                  <img src="../../assets/manageImg/table-delete.png" alt="">
                  {{ $t('bigDataDevice.tableHeaders.delete') }}
                </div>
              </el-popconfirm> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :close-on-click-modal="false" :title="$t('bigDataDevice.dialog.title')" top="10vh" 
      :visible.sync="addModel" width="700px" class="vrcode-model manage-model" :append-to-body="true">
      <div class="vrcode-model-title">
        {{ $t('bigDataDevice.dialog.title') }}
      </div>
      <div class="vrcode-content" v-if="nowData">
        <div class="manage-left">
          <div class="manage-input-sel">
            <div class="input-title">{{ $t('bigDataDevice.tableHeaders.deviceCode') }}</div>
            <el-dropdown @command="handleCommand">
              <div class="el-dropdown-link">
                <input v-model="nowData.deviceId" type="text" class="input-input" 
                  :placeholder="$t('bigDataDevice.dialog.deviceCodePlaceholder')">
                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
              </div>
              <el-dropdown-menu slot="dropdown" class="manage-dropdown">
                <el-dropdown-item v-for="item, index in typeSelList" 
                  :key="index" :command="item.deviceId">
                  {{ item.deviceTypeName }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="manage-input">
            <div class="input-title">{{ $t('bigDataDevice.tableHeaders.variety') }}</div>
            <input type="text" v-model="nowData.greenhouseVariety" 
              :placeholder="$t('bigDataDevice.dialog.varietyPlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{ $t('bigDataDevice.tableHeaders.growthStage') }}</div>
            <input type="text" v-model="nowData.growthStageName" 
              :placeholder="$t('bigDataDevice.dialog.growthStagePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{ $t('bigDataDevice.tableHeaders.deviceName') }}</div>
            <input type="text" v-model="nowData.greenhouseName" 
              :placeholder="$t('bigDataDevice.dialog.deviceNamePlaceholder')">
          </div>
          <div class="manage-input">
            <div class="input-title">{{ $t('bigDataDevice.tableHeaders.quantity') }}</div>
            <input type="text" v-model="nowData.greenhouseNums" 
              :placeholder="$t('bigDataDevice.dialog.quantityPlaceholder')">
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-img">
            <label for="sel-img">
              <img class="" :src="nowData.greenhouseImage" alt="">
            </label>
            <input ref="fileInput" type="file" :multiple="false" id="sel-img" accept="image/*"
              @change="handleImageChange($event, 0)" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
       <div class="vrcode-btn blue-btn w-100" @click="confirmModel">{{$t('index.confirm')}}</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">{{$t('index.cancel')}}</div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      addModel: false,
      nowData: null,
      typeSelList: [],
    }
  },
  mounted() { this.dataInit() },
  methods: {
    dataInit() {
      var user = JSON.parse(localStorage.getItem('userInfo'))
      this.api.selUserbyid(user.userid).then(res => {
        
        if (res.data.code == 200) {
          this.tableData = res.data.data.bigDataControls
          this.typeSelList=[]
          res.data.data.devices.forEach((el, index) => {
            if (el.deviceName == 10) {
              this.typeSelList.push(el)
            }
          })
        }
      })
    },
    getData1(data) {
      var name = ''
      this.typeSelList.forEach((el, index) => {
        if (el.deviceId == data) {
          name = el.deviceTypeName
        }
      })
      return name
    },
    handleCommand(e) {
      this.nowData.deviceId = e
    },
    confirmModel() {
      this.loading = this.$loading({
        lock: true,
        text: this.$t('message.loading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = this.nowData
      this.api.updateDataDevice(data).then(res => {
        this.loading.close()
        if (res.data.code == 200) {
          this.dataInit()
          this.$message.success(res.data.msg);
          this.addModel = false
        } else {
          this.$message.error(res.data.msg);
          this.addModel1 = false
        }
      })
    },
    openModel(item) {
      this.nowData = JSON.parse(JSON.stringify(item))
      this.addModel = true
    },
    handleImageChange(event, type) {
      this.loading = this.$loading({
        lock: true,
        text:  this.$t('message.uploading'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const imageData = e.target.result;
        const convertedFile = new File([imageData], file.name, { type: file.type });
        // 处理转换后的文件...

        var data = { file: convertedFile }
        this.api.manageUploadImage(data).then(res => {
          this.loading.close()
          if (res.data.code == 200) {
            this.nowData.greenhouseImage = res.data.msg
            this.$refs.fileInput.value = '';

          } else {

          }
        })
      };
      reader.readAsArrayBuffer(file);

    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

}
</script>
<style lang="scss"></style>