<template>
  <div>
    <el-dialog
      :title="$t('strategyManagement.title')"
      :visible.sync="dialogVisible"
      width="80%"
      v-loading="loading"
    >
      <div class="title">
        <el-button style="margin-bottom: 10px" @click="addPolicy"
          >{{ $t('strategyManagement.createStrategy') }}</el-button
        >
        <p v-if="tableData.length >= 2">只能添加两条数据</p>
      </div>

      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column :label="$t('strategyManagement.num')">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="clgl_name" :label="$t('strategyManagement.name')"> </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="$t('strategyManagement.Protocol')"> </el-table-column>
        <el-table-column prop="clgl_gzms" :label="$t('strategyManagement.workingMode')"> </el-table-column>
        <el-table-column prop="clgl_ydx" :label="$t('strategyManagement.sourceObject')"> </el-table-column>
        <el-table-column prop="clgl_ydk" :label="$t('strategyManagement.sourcePort')"> </el-table-column>
        <el-table-column prop="clgl_rkwk" :label="$t('strategyManagement.entranceNetworkCard')"> </el-table-column>
        <el-table-column prop="clgl_rkip" :label="$t('strategyManagement.entranceIP')"> </el-table-column>
        <el-table-column prop="clgl_rkwg" :label="$t('strategyManagement.entranceGateway')"> </el-table-column>
        <el-table-column prop="clgl_ckwk" :label="$t('strategyManagement.exportNetworkCard')"> </el-table-column>
        <el-table-column prop="clgl_ckip" :label="$t('strategyManagement.exportIP')"> </el-table-column>
        <el-table-column prop="clgl_ckwg" :label="$t('strategyManagement.exportGateway')"> </el-table-column>
        <el-table-column prop="clgl_mddx" :label="$t('strategyManagement.targetObject')"> </el-table-column>
        <el-table-column prop="clgl_mddk" :label="$t('strategyManagement.targetPort')"> </el-table-column>
        <el-table-column fixed="right" :label="$t('strategyManagement.Operation')" 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)"
              >{{ $t('del') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {getQueryAnswer, GetUserAnswer, SaveUserAnswer} from "../api/user";
export default {
  data() {
    return {
      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_ckwg: "",
        clgl_ckwk: "有线区网闸（外网）",
        clgl_ckip: "",
        clgl_wdyml: "拒绝",
      },
      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,
      type:''
    };
  },
  mounted() {
    let str = window.location.href.split("?")[1];
    this.user_id = decodeURIComponent(str).split("|")[0];
    this.type = decodeURIComponent(str).split("|")[1];
    if (this.type == 1) {
      this.$store.commit("setType", "GYWZ_yx");
    } else {
      this.$store.commit("setType", "GYWZ_wx");
    }
    // alert(this.user_id, this.$store.state.type);
    console.log(this.user_id, this.$store.state.type);
    this.GetUserAnswer();
  },
  methods: {
    addPolicy() {
      this.$router.push(
         "/addstrategy?" + this.user_id + "|" + this.type,
        // query:   ,
      );
    },
    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_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_wx",
        // user_id: "USER202307301109254198",
      });
      this.loading = false;
      if(!data.state){
        getQueryAnswer({
          mark: this.$store.state.type,
          user_id: this.user_id
        }).then(res => {
          let obj = JSON.parse(res.data.data.r3);
          (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.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_nw_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") && obj.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,
              },
            ];
          }
        })
      }
      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.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_nw_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") && obj.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>
