<!-- Dialog.vue -->
<template>
  <el-dialog :visible.sync="visible" @update:visible="handleUpdateVisible" :title="title + '统一接入方'" :width="width"
    :before-close="beforeClose">
    <el-form ref="formRef" :label-position="'top'" :model="formData" label-width="auto" style="width: 100%"
      class="form-detail-inline-two" inline :disabled="isDisabled">
      <el-form-item label="序号/标识符">
        <el-input v-model="formData.code" />
      </el-form-item>

      <!-- <el-form-item label="应用名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入应用名称">
        </el-input>
      </el-form-item> -->
      <el-form-item label="交换需求联系人" prop="contact">
        <el-input v-model="formData.contact" placeholder="请输入交换需求联系人">
        </el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入联系方式">
        </el-input>
      </el-form-item>
      <el-form-item label="数据来源" prop="dataType">
        <el-radio-group v-model="formData.dataType">
          <el-radio :label="'数据提供方'">数据提供方</el-radio>
          <el-radio :label="'数据接收方'">数据接收方</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属单位/部门" prop="dept">
        <el-input v-model="formData.dept" placeholder="请输入所属单位/部门">
        </el-input>
      </el-form-item>
      <el-form-item label="系统名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入系统名称">
        </el-input>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" max-height="250">
      <el-table-column prop="name" label="IP" width="">
        <template slot-scope="scope">
          <el-input :disabled="isDisabled" v-model="scope.row.ip" placeholder="请输入数据提供方所属单位部门"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="port" label="端口" width="">
        <template slot-scope="scope">
          <el-input :disabled="isDisabled" v-model="scope.row.port" placeholder="请输入数据提供方系统名称" ></el-input>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" plain class="mt-4" style="width: 100%" icon="el-icon-plus" @click="onAddItem"></el-button>

    <el-form :label-position="'left'" :model="formData" label-width="auto" style="width: 100%">
      <el-form-item label="备注" prop="ps">
        <el-input v-model="formData.ps" placeholder="请输入备注" type="textarea" :rows="4">
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getTabAccessList,
  addTabAccessList,
  updateTabAccessList,
  viewTabAccessList,
  delTabAccessList,
  importDataTabAccessList,
} from "@/api/unified-access/access-party-maintenance.js";
import MyForm from "@/components/MyForm";
export default {
  name: "StandardDialog",
  components: {
    MyForm,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "弹窗标题",
    },
    width: {
      type: String,
      default: "60%",
    },
    rowObj: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      tableData: [],
      visible: this.value,
      // 这是传递给表单组件的数据
      formData: {},
      isDisabled: false,
      itemView: {},
      dialogTitle: '',
    };
  },
  watch: {
    value (newVal) {
      this.visible = newVal;
    },
    visible (newVal) {
      this.$emit("input", newVal);
    },
    title: {
      handler (newVal) {
        this.dialogTitle = newVal;
        console.log(this.dialogTitle, "this.dialogTitle");
      },
      deep: true, // 深入监听
      immediate: true,
    },
    rowObj: {
      handler (newVal) {
        this.itemView = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
  },
  mounted () {
    if (this.dialogTitle === "查看") {
      this.isDisabled = true;
    } else {
      this.isDisabled = false;
    }
    if (this.dialogTitle !== "新增") {
      this.getView(this.itemView.id);
    }
  },

  methods: {
    getView (id) {
      this.formData = {}
      viewTabAccessList(id).then((res) => {
        if (+res.code === 200) {
          this.formData = res.data
          this.tableData = JSON.parse(res.data.ip)
        }
      });
    },
    onAddItem () {
      this.tableData.push({})
    },
    deleteRow (index) {
      this.tableData.splice(index, 1)
    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    handleNextStep () {
      this.activeName++;
    },
    handleBackStep () {
      this.activeName--;
    },
    handleUpdateVisible (val) {
      this.visible = val;
    },
    beforeClose (done) {
      this.visible = false;
      this.$emit("before-close", done);
    },
    // 取消按钮处理方法
    handleCancel () {
      this.visible = false;
      this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
    },

    // 确定按钮处理方法
    handleConfirm () {
      this.handleSave();
      // this.visible = false;
      // this.$emit("confirm"); // 可以在父组件监听 'confirm' 事件
    },

    handleSave () {
      console.log(this.formData, "this.formData");
      let pForm = {};
      pForm = { ...this.formData };
      pForm.ip = JSON.stringify(this.tableData);
      // this.formData.forEach((i) => {
      //   pForm[i.fieldName] = i.value;
      // });
      console.log(pForm, "pForm");
      if (this.title === "新增") {
        addTabAccessList({ ...pForm }).then((res) => {
          if (+res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$emit("confirm");
            this.handleCancel();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (this.title === "编辑") {
        updateTabAccessList({ ...pForm, id: this.itemView.id }).then((res) => {
          if (+res.code === 200) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$emit("confirm");
            this.handleCancel();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */

.titel {
  font-size: 18px;
  margin: 20px 0;
}

.mt-4 {
  margin-bottom: 20px;
}
</style>
