<template>
  <div>
    <el-dialog :title="$t('ntconfig.title')" :visible.sync="dialogVisible" width="70%">
      <el-dialog :title="$t('ntconfig.title')" :visible.sync="xqFlag" width="30%">
        <div class="xqbox">
          <p>
            <span class="s1">{{ $t("ntconfig.gatewayNumber") }}</span>
            <span>{{ rowDate.wgbh }}</span>
          </p>
          <p>
            <span class="s1">{{ $t("ntconfig.gatewayId") }}</span>
            <span>{{ rowDate.wgid }}</span>
          </p>
          <p>
            <span class="s1">{{ $t("ntconfig.gatewayType") }}</span>
            <span>{{ rowDate.wglx }}</span>
          </p>
          <p>
            <span class="s1">{{ $t("ntconfig.gatewayName") }}</span>
            <span>{{ rowDate.wgmc }}</span>
          </p>
        </div>
      </el-dialog>

      <div class="title">
        <div class="left">
          <el-button @click="flag = true">{{ $t("ntconfig.createGateway") }}</el-button>
          <el-button @click="deleteSelectedRows">{{ $t("del") }}</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="wgpz"
        border
        style="margin-top: 10px; width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :label="$t('ntconfig.num')">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template></el-table-column
        >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="wgid" :label="$t('ntconfig.gatewayId')"> </el-table-column>
        <el-table-column prop="wgbh" :label="$t('ntconfig.gatewayNumber')">
        </el-table-column>
        <el-table-column prop="wgmc" :label="$t('ntconfig.gatewayName')">
        </el-table-column>
        <el-table-column prop="wglx" :label="$t('ntconfig.gatewayType')">
        </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-column :label="$t('ntconfig.details')">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="chakan(scope.$index, scope.row)"
              >{{ $t("ntconfig.check") }}</el-button
            >
          </template></el-table-column
        >
        <el-table-column :label="$t('ntconfig.parameterConfiguration')">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="$router.push('/ntmaintenance?' + user_id)"
              >{{ $t("ntconfig.parameterConfiguration") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="$t('ntconfig.createGateway')" :visible.sync="flag">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item :label="$t('ntconfig.gatewayType')" prop="wglx">
          <el-col :span="12">
            <el-select v-model="ruleForm.wglx" :placeholder="$t('select')">
              <el-option label="box" value="box"></el-option>
              <el-option label="server port" value="server port"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('ntconfig.gatewayNumber')" prop="wgbh">
          <el-col :span="12">
            <el-select v-model="ruleForm.wgbh" :placeholder="$t('select')">
              <el-option label="2000808010" value="2000808010"></el-option>
              <el-option label="2000808011" value="2000808011"></el-option>
              <el-option label="2000808012" value="2000808012"></el-option>
              <el-option label="2000808013" value="2000808013"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('ntconfig.gatewayId')" prop="wgid">
          <el-col :span="12">
            <el-select v-model="ruleForm.wgid" :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-select>
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('ntconfig.gatewayName')" prop="wgmc">
          <el-col :span="12">
            <el-select v-model="ruleForm.wgmc" :placeholder="$t('select')">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
              <!-- <el-option label="有线区网关1" value="有线区网关1"></el-option>
              <el-option label="有线区网关2" value="有线区网关2"></el-option>
              <el-option label="无线区网关1" value="无线区网关1"></el-option>
              <el-option label="无线区网关2" value="无线区网关2"></el-option> -->
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>

      <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 { SaveUserAnswer, GetUserAnswer, getQueryAnswer } from "@/api/user";
export default {
  data() {
    return {
      options: this.$t("ntconfig.options"),
      dialogVisible: true,
      xqFlag: false,
      flag: false,
      labelPosition: "left",
      user_id: "",
      wgpz: [],
      FormData: [],
      multipleSelection: [],
      search: "",
      rowDate: {},
      ruleForm: {
        wglx: "",
        wgid: "",
        wgbh: "",
        wgmc: "",
      },
      rules: {
        wglx: [{ required: true, trigger: "change", message: this.$t("ntconfig.rules") }],
        wgid: [{ required: true, trigger: "change", message: this.$t("ntconfig.rules") }],
        wgbh: [{ required: true, trigger: "change", message: this.$t("ntconfig.rules") }],
        wgmc: [{ required: true, trigger: "change", message: this.$t("ntconfig.rules") }],
      },
    };
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.GetUserAnswer();
  },
  methods: {
    //新建网关保存
    saveinfo() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.wgpz.length < 4) {
            localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
            this.SaveUserAnswer();
            this.flag = false;
          } else {
            this.$message({
              message: "抱歉，只能添加四条数据",
              type: "error",
            });
            return false;
          }
        } else {
          return false;
        }
      });
    },
    //删除
    async handleDelete(a, b) {
      this.wgpz.splice(a, 1);
      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
      let { data } = await SaveUserAnswer({
        mark: "YDPZYM_wgpz",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.wgpz),
      });
      if (data.state) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error(this.$t('fail'));
        return;
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    async deleteSelectedRows() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请先选择数据",
          type: "warning",
        });
        return false;
      }
      this.wgpz = this.wgpz.filter((row) => !this.multipleSelection.includes(row));
      this.multipleSelection = [];
      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
      let { data } = await SaveUserAnswer({
        mark: "YDPZYM_wgpz",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.wgpz),
      });
      if (data.state) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message.error(this.$t('fail'));
        return;
      }
    },
    //查看
    chakan(a, b) {
      this.rowDate = b;
      this.xqFlag = true;
    },
    //读缓存
    async GetUserAnswer() {
      let { data } = await GetUserAnswer({
        mark: "YDPZYM_wgpz",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
      });
      console.log(data.data, "xxxx");
      if (data.data && data.state) {
        this.wgpz = JSON.parse(data.data.mark_value);
      } else {
        // getQueryAnswer({
        //   mark: 'YDPZYM_wgpz',
        //   user_id: this.user_id
        // }).then(res => {
        //   this.wgpz = JSON.parse(res.data.data.r2);
        // })
      }
    },
    //保存数据
    async SaveUserAnswer() {
      this.wgpz.push({
        wglx: this.ruleForm.wglx,
        wgid: this.ruleForm.wgid,
        wgbh: this.ruleForm.wgbh,
        wgmc: this.ruleForm.wgmc,
      });
      let { data } = await SaveUserAnswer({
        mark: "YDPZYM_wgpz",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.wgpz),
      });
      if (data.state) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
        this.flag = false;
        for (let key in this.ruleForm) {
          this.ruleForm[key] = "";
        }
      } else {
        this.$message.error(this.$t('fail'));
        return;
      }
    },
  },
};
</script>
<style scoped lang="less">
.title {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
  }
}

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

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

    .s1 {
      width: 70px;
      color: #0275ff;
    }
  }
}

.el-table {
  height: 400px;
}
</style>
