<template>
  <div class="eibs-tab">
    <div style="text-align: right">
      <c-button size="small" type="primary" @click="uclAdd()"> 新增 </c-button>
    </div>

    <el-form-item label="" label-width="0" prop="uclList">
      <c-table :columnsConfig="columns" :list="model.uclList">
        <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="uclInfo(scope.$index, scope.row)"
            >
              <span>详情</span>
            </button>
            <c-button
                style="margin-left: 5px"
                size="small"
                type="primary"
                @click="uclEdit(scope.$index, scope.row)"
            >
              修改
            </c-button>
            <c-button
                style="margin-left: 5px"
                size="small"
                type="primary"
                @click="uclDelete(scope.$index, scope.row)"
            >
              删除
            </c-button>
          </template>
        </c-table-column>
      </c-table>
    </el-form-item>

    <el-dialog
        :title="
        '柜员组信息：' +
        (operate === 'details' ? '详情' : operate === 'edit' ? '修改' : '新增')
      "
        :visible.sync="uclDialog"
        top="10vh"
        width="80%"
        :destroy-on-close="true"
        :before-close="handleClose"
    >
      <m-ucl-inf ref="ucl" :ucl="ucl" :operate="operate"></m-ucl-inf>
      <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="editUcl" v-if="operate === 'edit'"
        >保 存</c-button
        >
        <c-button type="primary" @click="saveUcl" v-if="operate === 'add'"
        >保 存</c-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UclInfo from "./UclInfo";
import Ucl from "./Ucl";

import {
  addUclData,
  updateUclData,
  deleteUclData,
} from "@/service/test/usr";

export default {
  name: "UclList",
  inject: ["root"],
  props: ["model"],
  components: {
    "m-ucl-inf": UclInfo,
  },
  data() {
    return {
      uclDialog: false,
      ucl: null,
      operate: "",
      operateIdx: 0,
      columns: [
        { label: '默认的机构标志', prop: 'usrdef', width: 'auto' },
        { label: '用户ID', prop: 'usr', width: 'auto' },
        { label: '用户所在机构和用户名称', prop: 'mannam', width: 'auto' },
        { label: '机构INR', prop: 'branchinr', width: 'auto' },
        { label: '用户可作业务的列表', prop: 'objlst', width: 'auto' },
        { label: '是否参与任务分配', prop: 'assignflg', width: 'auto' },
      ],
    };
  },
  methods: {
    /**
     * 信息详情
     */
    uclInfo(index, row) {
      this.ucl = { ...row };
      this.operate = "details";
      this.operateIdx = index;
      this.uclDialog = true;
    },
    /**
     * 新增
     */
    uclAdd() {
      this.ucl = new Ucl().data;
      this.ucl.usr=this.model.extkey;
      this.operate = "add";
      this.uclDialog = true;
    },
    /**
     * 修改
     */
    uclEdit(index, row) {
      this.ucl = { ...row };
      this.operate = "edit";
      this.operateIdx = index;
      this.uclDialog = true;
    },
    /**
     * 删除
     */
    uclDelete(index, row) {
      this.$confirm("是否真的删除？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        console.log(row.branchinr)
        deleteUclData(row.usr, row.branchinr).then((res) => {
          if (res) {
            this.model.uclList.splice(index, 1);
            this.$message.success("删除成功！");
          } else {
            this.$message.error("删除失败！");
          }
        });
      });
    },
    cancel() {
      this.handleClose();
    },
    editUcl() {
      this.$refs.ucl.$refs.modelForm.validate((validated) => {
        if (validated) {
          updateUclData(this.model.inr,this.ucl)
              .then((res) => {
                if (res) {
                  this.$message.success("修改柜员组信息成功！");
                  //TODO model.uclList回填
                  this.model.uclList = res.uclList;
                  this.handleClose();
                }
              })
              .catch((error) => {
                this.$message.error("修改柜员组信息失败！");
              });
        }
      });
    },

    saveUcl() {
      for (const key in this.ucl) {
        if (Object.hasOwnProperty.call(this.ucl, key)) {
          const v = this.ucl[key];
          if (typeof v === 'string' && v === '') {
            this.ucl[key] = " "
          }
        }
      }
      if (this.root.type === "add") {
        this.model.uclList.push(this.ucl);
        this.handleClose();
      } else {
        this.$refs.ucl.$refs.modelForm.validate((validated) => {
          if (validated) {
            addUclData(this.model.inr,this.ucl)
                .then((res) => {
                  if (res) {
                    this.$message.success("保存柜员组信息成功！");
                    //TODO model.uclList回填
                    this.model.uclList = res.uclList;
                    this.handleClose();
                  }
                })
                .catch((error) => {
                  this.$message.error("保存柜员组信息失败！");
                });
          }
        });
      }
    },

    handleClose(done) {
      this.uclDialog = false;
      if (done && typeof done === "function") {
        done();
      }
    },
  },
};
</script>

<style>
</style>