<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="open" fullscreen @close="cancel">
      <el-row>
        <el-col :span="24">
          <el-button
            size="mini"
            @click="handleAdd()"
            type="primary"
            style="margin-bottom: 5px"
            >添加</el-button
          >
          <el-form ref="form">
            <el-table ref="mytable" :data="table_data" style="width: 100%">
              <el-table-column
                align="center"
                v-for="(item, index, key) in table_columns"
                :item="item"
                :key="key"
                :index="index"
                :label="item.label"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="scope.row.edit && item.input === 'textarea'"
                    type="textarea"
                    :rows="1"
                    placeholder="请输入执行语句/表名/共享ip+端口"
                    v-model="scope.row[item.prop]"
                  >
                  </el-input>
                  <el-input
                    v-if="scope.row.edit && item.input === 'input'"
                    size="small"
                    v-model="scope.row[item.prop]"
                    :placeholder="'请输入' + item.label"
                  ></el-input>
                  <el-select
                    v-if="scope.row.edit && item.input === 'selectTag'"
                    v-model="scope.row[item.prop]"
                    filterable
                    :placeholder="'请选择' + item.label"
                  >
                    <el-option :value="''" label="请选择"> </el-option>
                    <el-option
                      v-for="dict in tags"
                      :key="dict"
                      :label="dict"
                      :value="dict"
                    >
                    </el-option>
                  </el-select>
                  <el-select
                    v-if="scope.row.edit && item.input === 'select'"
                    v-model="scope.row[item.prop]"
                    filterable
                    :placeholder="'请选择' + item.label"
                    @change="changeSelect(scope.row[item.prop], item.prop)"
                  >
                    <el-option :value="''" label="请选择"> </el-option>
                    <el-option
                      v-for="dict in dictIt(item.selectName)"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    >
                    </el-option>
                  </el-select>
                  <span v-if="!scope.row.edit">{{
                    dictFormat(item.selectName, scope.row[item.prop])
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <!-- 全局控制的编辑 -->
                  <div
                    v-if="is_edit && scope.row.add == undefined"
                    style="display: inline-block"
                  >
                    <!-- 编辑 -->
                    <el-button
                      size="mini"
                      v-if="!scope.row.edit"
                      @click="handleEdit(scope.$index, scope.row)"
                      type="primary"
                      style="margin-right: 5px"
                      >修改</el-button
                    >
                    <!-- 保存 -->
                    <el-button
                      size="mini"
                      type="success"
                      :plain="true"
                      v-if="scope.row.edit"
                      @click="handleSave(scope.$index, scope.row)"
                      style="margin-right: 5px"
                      >保存</el-button
                    >
                  </div>
                  <!-- 添加控制 -->
                  <div
                    v-if="scope.row.add != undefined && scope.row.add"
                    style="display: inline-block"
                  >
                    <!-- 保存 -->
                    <el-button
                      size="mini"
                      type="success"
                      :plain="true"
                      v-if="scope.row.edit"
                      @click="handleSave(scope.$index, scope.row)"
                      >保存</el-button
                    >
                  </div>
                  <!-- 全局控制删除 -->
                  <el-button
                    size="mini"
                    v-if="is_delete && scope.row.add == undefined"
                    :plain="true"
                    type="danger"
                    @click="handleDeleteIt(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {save} from "@/api/topology.js"
export default {
  data() {
    return {
      topologyData: {},
      title: "",
      open: false,
      // 采集数据字典
      dataAcquisitionMode: [],
      shareTypeList: [],
      tags: [],
      table_columns: [
        {
          prop: "setter",
          label: "设置者tag",
          input: "selectTag",
          selectName: "selectTag",
        },
        {
          prop: "settee",
          label: "被设置者tag",
          input: "selectTag",
          selectName: "selectTag",
        },
        {
          prop: "dataAcquisitionMode",
          label: "获取方式",
          input: "select",
          selectName: "data_acquisition_mode",
        },
        {
          prop: "condition",
          label: "条件",
          input: "textarea",
        },
        {
          prop: "point",
          label: "点位/字段",
          input: "input",
        },
        {
          prop: "shareType",
          label: "点位类型",
          input: "select",
          selectName: "share_type",
        },
        {
          prop: "assignment",
          label: "赋值",
          input: "input",
        },
      ],
      table_data: [],
      new_date_json: {}, //数据结构
      is_edit: true, //是否可编辑
      is_delete: true, //是否可删除
    };
  },
  methods: {
    changeSelect(val, type) {
      if (type === "dataAcquisitionMode") {
        if (val < 2) {
          this.$message.warning("可以无需填写‘点位/字段’和‘赋值’");
        }
      }
    },
    async submitForm() {
      let datas = JSON.parse(this.topologyData.data);
      datas.mutualList = [...this.table_data];
      this.topologyData.data = datas;
      await save(Object.assign({}, this.topologyData)).then((res) => {
        if (res.code === 200) {
          this.$message.success("配置成功");
        }
      });
      this.cancel();
      this.$emit("ok");
    },
    //编辑
    handleEdit(index, row) {
      row.edit = true;
    },
    //删除
    handleDeleteIt(index, row) {
      this.table_data.splice(index, 1);
      this.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    //保存
    handleSave(index, row) {
      if (!row.setter) {
        this.$message.warning("请填写设置者tag");
        return;
      }
      if (!row.settee) {
        this.$message.warning("请填写被设置者tag");
        return;
      }
      if (row.settee === row.setter) {
        this.$message.warning("设置者tag与被设置者不能相同");
        return;
      }
      if (!row.condition) {
        this.$message.warning("请填写条件");
        return;
      }
      if (!row.dataAcquisitionMode) {
        this.$message.warning("请填写获取方式");
        return;
      } else {
        if (row.dataAcquisitionMode > 1) {
          if (!row.point) {
            this.$message.warning("请填写点位/字段");
            return;
          }
          if (!row.assignment) {
            this.$message.warning("请填写赋值");
            return;
          }
        }
      }
      row.edit = false;
      delete this.table_data[index].add;
      this.$message({
        message: "保存成功！",
        type: "success",
      });
    },
    handleAdd() {
      var addDataJson = {};
      for (var key in this.new_date_json) {
        if (key === "edit") {
          delete addDataJson[key];
        } else if (key === "add") {
          delete addDataJson[key];
        } else {
          addDataJson[key] = "";
        }
      }
      addDataJson.edit = true;
      addDataJson.add = true;
      this.table_data.push(addDataJson);
    },
    dictIt(type) {
      if (type === "data_acquisition_mode") {
        return this.dataAcquisitionMode;
      }
      if(type ==="share_type"){
        return this.shareTypeList;
      }
      return [];
    },
    dictFormat(type, val) {
      if (type === "data_acquisition_mode") {
        return this.selectDictLabel(this.dataAcquisitionMode, val);
      }
      if(type==="share_type"){
        return this.selectDictLabel(this.shareTypeList,val);
      }
      return val;
    },
    
    init(row) {
      this.title = "设置交互参数";
      this.topologyData = Object.assign({}, row);
      this.open = true;
      if (JSON.parse(row.data).mutualList) {
        this.initEditAttribute(JSON.parse(row.data).mutualList);
      } else {
        this.initEditAttribute([]);
      }
      let datas = Object.assign({}, JSON.parse(row.data));
      for (let s of datas.pens) {
        if (s.tags.length > 0) {
          this.tags.push(s.tags[0]);
        }
      }
      this.getDicts("data_acquisition_mode").then((response) => {
        this.dataAcquisitionMode = response.data;
      });
      this.getDicts("share_type").then((response) => {
        this.shareTypeList = response.data;
      });
    },
    cancel() {
      this.title = "";
      this.open = false;
      this.tags = [];
      this.table_data = [];
    },
    //初始化编辑属性
    initEditAttribute(val) {
      var self = this;
      var edit = self.edit;
      let [...dataArray] = val;
      if (dataArray.length > 0) {
        //添加编辑事件
        for (var index in dataArray) {
          dataArray[index]["edit"] = false;
          this.table_data.push(dataArray[index]);
        }

        if (Object.keys(this.new_date_json).length === 0) {
          //新增时，初始化数据结构
          this.initAddDataJson(dataArray[0]);
        }
      }
    },
    initAddDataJson(dataArray) {
      //新增时，初始化数据结构
      var dataJson = dataArray;
      var newDateJson = {};
      for (var key in dataJson) {
        if (key === "edit") {
          newDateJson[key] = "true";
        } else {
          newDateJson[key] = "";
        }
      }
      newDateJson["add"] = true;
      this.new_date_json = newDateJson;
    },
  },
};
</script>
<style>
</style>