<template>
  <div>
    <el-dialog
      title="策略管理"
      :visible.sync="dialogVisible"
      width="80%"
      v-loading="loading"
    >
      <div class="title">
        <el-button style="margin-bottom: 10px" @click="addPolicy"
          >新增策略</el-button
        >
        <p v-if="tableData.length >= 2">只能添加两条数据</p>
      </div>

      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="clgl_name" label="名称"> </el-table-column>
        <el-table-column prop="clgl_qidong" label="是否启动">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.clgl_qidong"
              @change="handleSwitchChange(scope.row)"
            ></el-switch> </template
        ></el-table-column>
        <el-table-column prop="clgl_xy" label="协议"> </el-table-column>
        <el-table-column prop="clgl_gzms" label="工作模式"> </el-table-column>
        <el-table-column prop="clgl_ydx" label="源对象"> </el-table-column>
        <el-table-column prop="clgl_ydk" label="源端口"> </el-table-column>
        <el-table-column prop="clgl_rkwk" label="入口网卡"> </el-table-column>
        <el-table-column prop="clgl_rkip" label="入口IP"> </el-table-column>
        <el-table-column prop="clgl_rkwg" label="入口网关"> </el-table-column>
        <el-table-column prop="clgl_ckwk" label="出口网卡"> </el-table-column>
        <el-table-column prop="clgl_ckip" label="出口IP"> </el-table-column>
        <el-table-column prop="clgl_ckwg" label="出口网关"> </el-table-column>
        <el-table-column prop="clgl_mddx" label="目的对象"> </el-table-column>
        <el-table-column prop="clgl_mddk" label="目的端口"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="del(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { GetUserAnswer, SaveUserAnswer } from "../api/user";
export default {
  data() {
    return {
      clgl_qidong: true,
      loading: false,
      user_id: "",
      // 入口IP
      clgl_rkip1: "",
      clgl_rkip2: "",
      clgl_rkip3: "",
      clgl_rkip4: "",
      // 出口ip
      clgl_ckip1: "",
      clgl_ckip2: "",
      clgl_ckip3: "",
      clgl_ckip4: "",
      options1: [
        {
          label: "有线区策略",
          value: "有线区策略",
        },
        {
          label: "无线区策略",
          value: "无线区策略",
        },
      ],
      options2: [
        {
          label: "OPC",
          value: "OPC",
        },
        {
          label: "Modbus(TCP)",
          value: "Modbus(TCP)",
        },
        {
          label: "DNP3",
          value: "DNP3",
        },
        {
          label: "S7",
          value: "S7",
        },
        {
          label: "EC104",
          value: "EC104",
        },
      ],
      options3: [
        {
          label: "代理模式",
          value: "代理模式",
        },
        {
          label: "路由模式",
          value: "路由模式",
        },
        {
          label: "透明模式",
          value: "透明模式",
        },
      ],
      options4: [
        {
          label: "有线区交换机",
          value: "有线区交换机",
        },
        {
          label: "无线区路由器",
          value: "无线区路由器",
        },
      ],
      options5: [
        {
          label: "拒绝",
          value: "拒绝",
        },
        {
          label: "允许",
          value: "允许",
        },
      ],
      options6: [
        {
          label: "读线圈状态",
          value: "读线圈状态",
        },
        {
          label: "读输入状态",
          value: "读输入状态",
        },
        {
          label: "读线保持寄存器",
          value: "读线保持寄存器",
        },
        {
          label: "读输入寄存器",
          value: "读输入寄存器",
        },
        {
          label: "强制单个线圈",
          value: "强制单个线圈",
        },
        {
          label: "预置单个寄存器",
          value: "预置单个寄存器",
        },
        {
          label: "强制多个寄存器",
          value: "强制多个寄存器",
        },
      ],
      options7: [
        {
          label: "有线区交换机命令",
          value: "有线区交换机命令",
        },
        {
          label: "无线区路由器命令",
          value: "无线区路由器命令",
        },
      ],
      options8: [
        {
          label: "有线区网闸（外网）",
          value: "有线区网闸（外网）",
        },
        {
          label: "无线区网闸（外网）",
          value: "无线区网闸（外网）",
        },
      ],
      options9: [
        {
          label: "有线区网闸（内网）",
          value: "有线区网闸（内网）",
        },
        {
          label: "无线区网闸（内网）",
          value: "无线区网闸（内网）",
        },
      ],
      dialogVisible: true,
      labelPosition: "left",
      tableData: [
        // {
        //   clgl_name: "",
        //   cmdlist_qsdz: "",
        //   clgl_xy: "",
        //   clgl_gzms: "",
        //   clgl_ydx: "",
        //   clgl_ydk: "",
        //   clgl_rkwk: "",
        //   clgl_rkip: "",
        //   clgl_rkwg: "",
        //   clgl_ckwk: "",
        //   clgl_ckip: "",
        //   clgl_ckwg: "",
        //   clgl_mddx: "",
        //   clgl_mddk: "",
        // },
      ],
      cmdlist_ml: "",
      cmdlist_sbid: "",
      cmdlist_qsdz: "",
      cmdlist_dzcd: "",
      cmdlist_ms: "",
      cmdlist_dz: "",
      wlgl_nw_name: "",
      wlgl_nw_ip: "",
      wlgl_nw_zwym: "",
      wlgl_ww_name: "",
      wlgl_ww_ip: "",
      wlgl_ww_zwym: "",
      dxgl: [],
      ruleForm1: {
        clgl_name: "有线区策略",
        clgl_xy: ["Modbus(TCP)"],
        clgl_gzms: "透明模式",
        clgl_ydx: "有线区交换机",
        clgl_ydk: "",
        clgl_mddx: "",
        clgl_mddk: "",
        clgl_rkwg: "",
        clgl_rkwk: "有线区网闸（内网）",
        clgl_rkip: "",
        clgl_dldk: "",
        clgl_ckwg: "",
        clgl_ckwk: "有线区网闸（外网）",
        clgl_ckip: "",
        clgl_wdyml: "拒绝",
        clgl_dldk: "",
      },
      rules1: {
        clgl_name: [{ required: true, trigger: "change" }],
        clgl_xy: [{ required: true, trigger: "change" }],
        clgl_gzms: [{ required: true, trigger: "change" }],
        clgl_mddk: [{ required: true, trigger: "blur" }],
        clgl_rkwk: [{ required: true, trigger: "change" }],
        clgl_ckwk: [{ required: true, trigger: "change" }],
        clgl_rkip: [{ required: true, trigger: "blur" }],
        clgl_ckip: [{ required: true, trigger: "blur" }],
        clgl_ydx: [{ required: true, trigger: "blur" }],
        clgl_ydk: [{ required: true, trigger: "change" }],
        clgl_mddx: [{ required: true, trigger: "change" }],
        clgl_wdyml: [{ required: true, trigger: "change" }],
      },
      value: "",
      flag: false,
    };
  },
  created() {
    let str = window.location.href.split("?")[1];
    this.user_id = str.split("|")[0];
    let type = str.split("|")[1];
    if (type == 1) {
      this.$store.commit("setType", "GYWZ_yx");
    } else {
      this.$store.commit("setType", "GYWZ_wx");
    }
    this.GetUserAnswer();
  },
  methods: {
    addPolicy() {
      this.$router.push({
        name: "addstrategy",
        query: { id: this.user_id },
      });
    },
    async del(index, a) {
      this.tableData = [];
      let newSessObj = {
        clgl_name: "",
        clgl_xy: "",
        clgl_gzms: "",
        clgl_ydx: "",
        clgl_ydk: "",
        clgl_rkwk: "",
        clgl_rkip: "",
        clgl_ckip: "",
        clgl_rkwg: "",
        clgl_ckwk: "",
        clgl_dldk: "",
        clgl_ckwg: "",
        clgl_mddx: "",
        clgl_mddk: "",
        clgl_wdyml: "",
        cmdlist_ml: this.cmdlist_ml,
        cmdlist_sbid: this.cmdlist_sbid,
        cmdlist_qsdz: this.cmdlist_qsdz,
        cmdlist_dzcd: this.cmdlist_dzcd,
        cmdlist_ms: this.cmdlist_ms,
        cmdlist_dz: this.cmdlist_dz,
        dxgl: this.dxgl,
        wlgl_nw_name: this.wlgl_nw_name,
        wlgl_nw_ip: this.wlgl_nw_ip,
        wlgl_nw_zwym: this.wlgl_nw_zwym,
        wlgl_ww_name: this.wlgl_ww_name,
        wlgl_ww_ip: this.wlgl_ww_ip,
        wlgl_ww_zwym: this.wlgl_ww_zwym,
      };
      let { data } = await SaveUserAnswer({
        mark: this.$store.state.type,
        user_id: this.user_id,
        // mark: "GYWZ_yx",
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(newSessObj),
      });
      if (data.state) {
        this.tableData.splice(index, 1);
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }
    },
    //拿缓存
    async GetUserAnswer() {
      this.loading = true;
      let { data } = await GetUserAnswer({
        mark: this.$store.state.type,
        user_id: this.user_id,
        // mark: "GYWZ_yx",
        // user_id: "USER202307301109254198",
      });
      this.loading = false;
      if (data.data && data.state) {
        let obj = JSON.parse(data.data.mark_value);
        (this.ruleForm1.clgl_xy = obj.clgl_xy),
          (this.ruleForm1.clgl_gzms = obj.clgl_gzms),
          (this.ruleForm1.clgl_ydx = obj.clgl_ydx),
          (this.ruleForm1.clgl_ydk = obj.clgl_ydk),
          (this.ruleForm1.clgl_rkwk = obj.clgl_rkwk),
          (this.ruleForm1.clgl_rkip = obj.clgl_rkip),
          (this.ruleForm1.clgl_rkwg = obj.clgl_rkwg),
          (this.ruleForm1.clgl_ckwk = obj.clgl_ckwk),
          (this.ruleForm1.clgl_ckip = obj.clgl_ckip),
          (this.ruleForm1.clgl_ckwg = obj.clgl_ckwg),
          (this.ruleForm1.clgl_mddx = obj.clgl_mddx),
          (this.ruleForm1.clgl_mddk = obj.clgl_mddk),
          (this.ruleForm1.clgl_dldk = obj.clgl_dldk),
          (this.dxgl = obj.dxgl),
          (this.wlgl_nw_name = obj.wlgl_nw_name),
          (this.wlgl_nw_ip = obj.wlgl_nw_ip),
          (this.wlgl_nw_zwym = obj.wlgl_ww_zwym),
          (this.wlgl_ww_name = obj.wlgl_ww_name),
          (this.wlgl_ww_ip = obj.wlgl_ww_ip),
          (this.wlgl_ww_zwym = obj.wlgl_ww_zwym),
          (this.cmdlist_ml = obj.cmdlist_ml),
          (this.cmdlist_sbid = obj.cmdlist_sbid),
          (this.cmdlist_qsdz = obj.cmdlist_qsdz),
          (this.cmdlist_dzcd = obj.cmdlist_dzcd),
          (this.cmdlist_ms = obj.cmdlist_ms),
          (this.cmdlist_dz = obj.cmdlist_dz);
        if (obj.hasOwnProperty("clgl_name")) {
          this.tableData = [
            {
              clgl_name: obj.clgl_name,
              cmdlist_qsdz: obj.cmdlist_qsdz,
              clgl_xy: obj.clgl_xy,
              clgl_gzms: obj.clgl_gzms,
              clgl_ydx: obj.clgl_ydx,
              clgl_ydk: obj.clgl_ydk,
              clgl_rkwk: obj.clgl_rkwk,
              clgl_rkip: obj.clgl_rkip,
              clgl_rkwg: obj.clgl_rkwg,
              clgl_ckwk: obj.clgl_ckwk,
              clgl_ckip: obj.clgl_ckip,
              clgl_ckwg: obj.clgl_ckwg,
              clgl_mddx: obj.clgl_mddx,
              clgl_mddk: obj.clgl_mddk,
            },
          ];
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.el-col-1 {
  padding: 0px 4px;
  line-height: 62px;
  height: 20px;
  text-align: center;
}

.el-input__inner {
  height: 30px;
}

.el-col-5 {
  width: 43px;
  height: 30px;
}

/deep/ .demo-ruleForm1 {
  .el-col-1 {
    padding: 0px 4px;
    line-height: 62px;
    height: 20px;
    text-align: center;
  }

  .el-col-5 {
    width: 43px;
    height: 30px;
  }

  .el-input__inner {
    height: 30px;
  }
}
.title {
  display: flex;
  align-items: center;
  p {
    margin-left: 10px;
    color: red;
  }
}
.el-table {
  height: 500px;
}
</style>
