<template>
  <div>
    <el-dialog title="详情" :visible.sync="xqFlag" width="30%">
      <div class="xqbox">
        <p>
          <span class="s1">网关SN:</span> <span>{{ rowDate.wgsn }}</span>
        </p>
        <p>
          <span class="s1">网关编号:</span> <span>{{ rowDate.wgbh }}</span>
        </p>
        <p>
          <span class="s1">网关名称:</span> <span>{{ rowDate.wgmc }}</span>
        </p>
        <p>
          <span class="s1">参数key:</span> <span>{{ rowDate.cskey }}</span>
        </p>
        <p>
          <span class="s1">参数名称:</span> <span>{{ rowDate.csmc }}</span>
        </p>
        <p>
          <span class="s1">小数位数:</span> <span>{{ rowDate.xsws }}</span>
        </p>
        <p>
          <span class="s1">设定值:</span> <span>{{ rowDate.sdz }}</span>
        </p>
        <p>
          <span class="s1">偏差值:</span> <span>{{ rowDate.pcz }}</span>
        </p>
        <p>
          <span class="s1">维护人:</span> <span>{{ rowDate.whr }}</span>
        </p>
        <p>
          <span class="s1">维护时间:</span> <span>{{ rowDate.whsj }}</span>
        </p>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('ntmaintenance.title')"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="90%"
    >
      <div class="title">
        <div class="left">
          <el-button @click="flag = true">{{$t('ntmaintenance.createParameter')}}</el-button>
          <el-button @click="deleteSelectedRows">{{$t('del')}}</el-button>
        </div>
        <!-- <div class="right">
          <el-input type="search" style="margin-right: 10px"></el-input>
          <el-button>筛选</el-button>
        </div> -->
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        style="margin-top: 10px"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :label="$t('ntmaintenance.num')">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template></el-table-column
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="sswg" :label="$t('ntmaintenance.gatewaySNNumber')"> </el-table-column>
        <el-table-column prop="cskey" :label="$t('ntmaintenance.parameterKey')"> </el-table-column>
        <el-table-column prop="csname" :label="$t('ntmaintenance.parameterName')"> </el-table-column>
        <el-table-column prop="xsws" :label="$t('ntmaintenance.decimalPlaces')"> </el-table-column>
        <el-table-column prop="sdz" :label="$t('ntmaintenance.setValue')"> </el-table-column>
        <el-table-column prop="pcz" :label="$t('ntmaintenance.deviationValue')"> </el-table-column>

        <el-table-column :label="$t('edit')">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >{{ $t('del') }}</el-button
            >
          </template></el-table-column
        >
      </el-table>
    </el-dialog>

    <el-dialog :title="$t('ntmaintenance.createParameter')" :visible.sync="flag" width="30%">
      <el-col :span="12">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-form-item :label="$t('ntmaintenance.affiliatedGateway')" prop="sswg">
            <el-select v-model="ruleForm.sswg" :placeholder="$t('select')">
              <el-option label="lan-box1" value="lan-box1"></el-option>
              <el-option label="lan-box2" value="lan-box2"></el-option>
              <el-option label="wlan-box1" value="wlan-box1"></el-option>
              <el-option label="wlan-box2" value="wlan-box2"></el-option>
              <!-- <el-option
                label="lan- server port"
                value="lan- server port"
              ></el-option>
              <el-option
                label="wlan- server port"
                value="wlan- server port"
              ></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('ntmaintenance.parameterName')" prop="csname">
            <el-select v-model="ruleForm.csname" :placeholder="$t('select')">
              <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">

              </el-option>
              <!-- <el-option label="产量" value="产量"></el-option>
              <el-option label="主轴转速" value="主轴转速"></el-option>
              <el-option label="急停状态" value="急停状态"></el-option>
              <el-option label="切削速度" value="切削速度"></el-option> -->


              <!-- <el-option label="负载电流" value="负载电流"></el-option>
              <el-option label="额定电流" value="额定电流"></el-option> -->
            </el-select>
          </el-form-item>

          <el-form-item :label="$t('ntmaintenance.setValue')" prop="sdz">
            <el-input v-model="ruleForm.sdz"> </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-form-item :label="$t('ntmaintenance.parameterKey')" prop="cskey">
            <el-select v-model="ruleForm.cskey" :placeholder="$t('select')">
              <el-option
                label="MachinePamHID910"
                value="MachinePamHID910"
              ></el-option>
              <el-option
                label="MachinePamHID917"
                value="MachinePamHID917"
              ></el-option>
              <el-option
                label="MachinePamHID909"
                value="MachinePamHID909"
              ></el-option>
              <el-option
                label="MachinePamHID928"
                value="MachinePamHID928"
              ></el-option>
              <!-- <el-option
                label="MachinePamHID923"
                value="MachinePamHID923"
              ></el-option>
              <el-option
                label="MachinePamHID924"
                value="MachinePamHID924"
              ></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('ntmaintenance.decimalPlaces')" prop="xsws">
            <el-input v-model="ruleForm.xsws"> </el-input>
          </el-form-item>
          <el-form-item :label="$t('ntmaintenance.deviationValue')" prop="pcz">
            <el-input v-model="ruleForm.pcz"> </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveinfo">{{$t('save')}}</el-button>
        <el-button @click="flag = false">{{$t('cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { GetUserAnswer, SaveUserAnswer } from "@/api/user";
export default {
  data() {
    return {
      options:this.$t('ntmaintenance.options'),
      dialogVisible: true,
      labelPosition: "left",
      flag: false,
      user_id: "",
      xqFlag: false,
      rowDate: {},
      wgid: "",
      multipleSelection: [],
      tableData: [
        // {
        //   wgsn: "",
        //   wgbh: "",
        //   wgmc: "",
        //   cskey: "",
        //   csmc: "",
        //   xsws: "",
        //   sdz: "",
        //   pcz: "",
        //   whr: "",
        //   whsj: "",
        // },
      ],
      ruleForm: {
        sswg: "",
        csname: "",
        // sfyxbz: "",
        sdz: "",
        cskey: "",
        xsws: "",
        pcz: "",
      },
      FormData: [],
      rules: {
        sswg: [
          { required: true, trigger: "change", message: this.$t('ntmaintenance.rules.sswg') },
        ],
        csname: [
          { required: true, trigger: "change", message: this.$t('ntmaintenance.rules.csname') },
        ],
        // sfyxbz: [
        //   { required: true, trigger: "change", message: "请选择一个选项" },
        // ],
        sdz: [{ required: true, trigger: "blur", message: this.$t('ntmaintenance.rules.sdz') }],
        cskey: [
          { required: true, trigger: "change", message: this.$t('ntmaintenance.rules.cskey') },
        ],
        xsws: [
          { required: true, trigger: "blur", message: this.$t('ntmaintenance.rules.xsws') },
        ],

        pcz: [{ required: true, trigger: "blur", message: this.$t('ntmaintenance.rules.pcz') }],
      },
    };
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.GetUserAnswer();
  },
  methods: {
    //读缓存
    async GetUserAnswer() {
      let { data } = await GetUserAnswer({
        mark: "YDPZYM_wgwh",
        user_id: `${this.user_id}`,
        // user_id: "USER202307301109254198",
      });
      if (data.data && data.state) {
        this.tableData = JSON.parse(data.data.mark_value);
      }
    },
    saveinfo() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.tableData.length < 4) {
            this.SaveUserAnswer();
            this.flag = false;
          } else {
            this.$message({
              message: "抱歉，只能添加四条数据",
              type: "error",
            });
            return false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    async handleDelete(a, b) {
      this.tableData.splice(a, 1);
      let { data } = await SaveUserAnswer({
        mark: "YDPZYM_wgwh",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.tableData),
      });
      if (data.state) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error("操作失败");
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    async deleteSelectedRows() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请先选择要删除的数据",
          type: "warning",
        });
        return;
      }
      this.tableData = this.tableData.filter(
        (row) => !this.multipleSelection.includes(row)
      );
      this.multipleSelection = [];
      let { data } = await SaveUserAnswer({
        mark: "YDPZYM_wgwh",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.tableData),
      });
      if (data.state) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error("操作失败");
      }
    },
    chakan(a, b) {
      console.log(b);
      this.rowDate = b;
      this.xqFlag = true;
    },
    //保存数据
    async SaveUserAnswer() {
      let obj = {
        sswg: this.ruleForm.sswg,
        csname: this.ruleForm.csname,
        // sfyxbz: "",
        sdz: this.ruleForm.sdz,
        cskey: this.ruleForm.cskey,
        xsws: this.ruleForm.xsws,
        pcz: this.ruleForm.pcz,
      };
      this.tableData.push(obj);
      let { data } = await SaveUserAnswer({
        mark: "YDPZYM_wgwh",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.tableData),
      });
      if (data.state) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
        for (let key in this.ruleForm) {
          this.ruleForm[key] = "";
        }
      } else {
        this.$message.error(data.message);
      }
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .el-dialog__body{
  overflow: hidden !important;
}
.title {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
  }
}

.el-table {
  margin-top: 10px;
}

/deep/.red .el-form-item__label {
  color: red;
}

.xqbox {
  p {
    margin: 5px;
    display: flex;

    .s1 {
      width: 70px;
      color: #0275ff;
    }
  }
}
.el-table {
  height: 400px;
}
</style>
