<template>
  <div class="eibs-tab">
    <div style="text-align: right">
      <c-button size="small" type="primary" @click="adrAdd()"> 新增 </c-button>
    </div>
    <el-form-item label="" label-width="0" prop="ptaList">
      <c-table :columnsConfig="columns" :list="model.ptaList">
        <c-table-column fixed="right" prop="op" label="操作" width="200px">
          <template slot-scope="{ scope }">
            <button
              class="el-button el-button--default el-button--small"
              style="margin-left: 0"
              size="small"
              :disabled="false"
              @click.prevent="adrInfo(scope.$index, scope.row)"
            >
              <span>详情</span>
            </button>
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="adrEdit(scope.$index, scope.row)"
            >
              修改
            </c-button>
            <c-button
              style="margin-left: 5px"
              size="small"
              type="primary"
              @click="adrDelete(scope.$index, scope.row)"
            >
              删除
            </c-button>
          </template>
        </c-table-column>
      </c-table>
    </el-form-item>

    <el-dialog
      :title="
        '地址信息：' +
        (operate === 'details' ? '详情' : operate === 'edit' ? '修改' : '新增')
      "
      :visible.sync="adrDialog"
      top="10vh"
      width="80%"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <m-adr-info ref="adr" :adr="adr" :operate="operate"></m-adr-info>
      <span slot="footer" class="dialog-footer">
        <button
          class="el-button el-button--default el-button--small"
          style="margin-left: 0"
          size="small"
          :disabled="false"
          @click.prevent="cancel"
        >
          <span>取 消</span>
        </button>
        <c-button type="primary" @click="cancel" v-if="operate === 'details'"
          >确 定</c-button
        >
        <c-button type="primary" @click="editAdr" v-if="operate === 'edit'"
          >保 存</c-button
        >
        <c-button type="primary" @click="saveAdr" v-if="operate === 'add'"
          >保 存</c-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Adr from "./Adr.js";
import AdrInfo from "./AdrInfo.vue";

import {
  addAdrData,
  updateAdrData,
  deleteAdrData,
} from "~/service/test/pty.js";

export default {
  name: "AdrList",
  components: {
    "m-adr-info": AdrInfo,
  },
  inject: ["root"],
  props: ["model"],
  data() {
    return {
      adrDialog: false,
      adr: null,
      operate: "",
      operateIdx: 0,
      columns: [
        { label: "地址使用代码", prop: "usgpat", width: "auto" },
        { label: "地址状态", prop: "adrstapat", width: "auto" },
        { label: "地址关键字", prop: "extkey", width: "auto" },
        { label: "通知行SWIFT代码", prop: "bic", width: "auto" },
        { label: "名称1", prop: "nam1", width: "auto" },
        { label: "名称2", prop: "nam2", width: "auto" },
        { label: "名称3", prop: "nam3", width: "auto" },
        { label: "街道1", prop: "str1", width: "auto" },
        { label: "街道2", prop: "str2", width: "auto" },
        { label: "地址1", prop: "adr1", width: "auto" },
        { label: "地址2", prop: "adr2", width: "auto" },
        { label: "地址3", prop: "adr3", width: "auto" },
      ],
    };
  },
  methods: {
    /**
     * 详情
     */
    adrInfo(index, row) {
      this.adr = { ...row };
      this.operate = "details";
      this.operateIdx = index;
      this.adrDialog = true;
    },
    /**
     * 新增
     */
    adrAdd() {
      this.adr = new Adr().data;
      this.operate = "add";
      this.adrDialog = true;
    },
    /**
     * 修改
     */
    adrEdit(index, row) {
      this.adr = { ...row };
      this.operate = "edit";
      this.operateIdx = index;
      this.adrDialog = true;
    },
    /**
     * 删除
     */
    adrDelete(index, row) {
      this.$confirm("是否真的删除？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        deleteAdrData(row).then((res) => {
          if (res) {
            this.model.ptaList.splice(index, 1);
            this.$message.success("删除成功！");
          } else {
            this.$message.error("删除失败！");
          }
        });
      });
    },
    cancel() {
      this.handleClose();
    },
    editAdr() {
      this.$refs.adr.$refs.modelForm.validate((validated) => {
        if (validated) {
          updateAdrData(this.model.inr, this.adr)
            .then((res) => {
              if (res.inr) {
                this.$message.success("修改地址信息成功！");
                // this.model.ptaList.splice(this.operateIdx, 1, this.adr);
                this.model.ptaList = res.ptaList;
                this.handleClose();
              }
            })
            .catch((error) => {
              this.$message.error("修改地址信息失败！");
            });
        }
      });
    },
    /**
     * Adr新增有2种情况
     * 1. pty的新增界面下，此时pty的inr为空，adr需要在pty插入之后，才能执行新增，
     *    所以我们在这里不能直接调用新增接口，将adr添加到ptaList中，随着这个pty一起传入接口。
     * 2. pty的修改界面下，可直接新增 ；
     */
    saveAdr() {
      for (const key in this.adr) {
        if (Object.hasOwnProperty.call(this.adr, key)) {
          const v = this.adr[key];
          if (typeof v === 'string' && v === '') {
            this.adr[key] = " "
          }
        }
      }
      if (this.root.type === "add") {
        this.model.ptaList.push(this.adr);
        this.handleClose();
      } else {
        this.$refs.adr.$refs.modelForm.validate((validated) => {
          if (validated) {
            addAdrData(this.model.inr, this.adr)
              .then((res) => {
                if (res && res.inr) {
                  this.$message.success("保存地址信息成功！");
                  this.model.ptaList = res.ptaList;
                  this.handleClose();
                }
              })
              .catch((error) => {
                this.$message.error("保存地址信息失败！");
              });
          }
        });
      }
    },
    handleClose(done) {
      this.adrDialog = false;
      if (done && typeof done === "function") {
        done();
      }
    },
  },
};
</script>

<style>
.paginationLable {
  display:none;
}
</style>