<template>
   <div class="app-container">

      <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="addContract">新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
         </el-col>
      </el-row>

      <el-table v-loading="loading" :data="contractList">
         <el-table-column label="合同名称" prop="contractName" :show-overflow-tooltip="true" />
         <el-table-column label="状态" align="center" key="status_dictText" prop="status_dictText"
            :show-overflow-tooltip="true" />
         <el-table-column label="合同类别" align="center" key="category_dictText" prop="category_dictText"
            :show-overflow-tooltip="true" />
         <el-table-column label="合同编码" prop="busNo" :show-overflow-tooltip="true" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
               <el-tooltip content="修改" placement="top">
                  <el-button link type="primary" icon="Edit" @click="editContract(scope.row)"></el-button>
               </el-tooltip>
               <el-tooltip content="删除" placement="top">
                  <el-button link type="primary" icon="Delete" @click="handelDel(scope.row)"></el-button>
               </el-tooltip>
            </template>
         </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize" @pagination="getList" />


      <!-- 添加或修改合同对话框 -->
      <el-dialog :title="title" v-model="open" width="1200px" append-to-body class="tenant-option-dialog">
         <el-form ref="contractRef" :model="form" label-width="180px" class="three-column-form">
            <div class="form-grid">
               <el-form-item label="合同名称" prop="contractName">
                  <el-input v-model="form.contractName" placeholder="请输入合同名称" clearable />
               </el-form-item>
               <el-form-item label="合同编码" prop="busNo">
                  <el-input v-model="form.busNo" placeholder="请输入合同编码" clearable />
               </el-form-item>
               <el-form-item label="状态" prop="statusEnum">
                  <el-input v-model="form.statusEnum" placeholder="请输入状态" clearable />
               </el-form-item>
               <el-form-item label="合同类别" prop="categoryEnum">
                  <el-select v-model="form.categoryEnum" placeholder="请选择合同类别" clearable>
                    <el-option
                      v-for="category in category_enum"
                      :key="category.value"
                      :label="category.label"
                      :value="category.value"
                    />
                  </el-select>
               </el-form-item>
               <el-form-item label="机构" prop="orgId">
                  <el-input v-model="form.orgId" placeholder="请输入机构" clearable />
               </el-form-item>
               <el-form-item label="是否医保" prop="ybFlag">
                  <el-input v-model="form.ybFlag" placeholder="请输入是否医保" clearable />
               </el-form-item>
               <el-form-item label="优先使用标志" prop="sort">
                  <el-input v-model="form.sort" placeholder="请输入优先使用标志" clearable />
               </el-form-item>
               <el-form-item label="医保区划" prop="admVs">
                  <el-input v-model="form.admVs" placeholder="请输入医保区划代码" clearable />
               </el-form-item>
               <el-form-item label="医保PrvKey" prop="cliPrvKey">
                  <el-input v-model="form.cliPrvKey" placeholder="请输入医保PrvKey" clearable type="password"
                     show-password />
               </el-form-item>
               <el-form-item label="医保PubKey" prop="cliPubKey">
                  <el-input v-model="form.cliPubKey" placeholder="请输入医保PubKey" clearable />
               </el-form-item>
               <el-form-item label="服务端公钥" prop="serverPubKey">
                  <el-input v-model="form.serverPubKey" placeholder="请输入服务端公钥" clearable />
               </el-form-item>
               <el-form-item label="授权范围" prop="scope">
                  <el-input v-model="form.scope" placeholder="请输入授权范围" clearable />
               </el-form-item>
               <el-form-item label="授权类型" prop="grantType">
                  <el-input v-model="form.grantType" placeholder="请选择授权类型" clearable />
               </el-form-item>
               <el-form-item label="医保账号" prop="username">
                  <el-input v-model="form.username" placeholder="请输入医保账号" clearable />
               </el-form-item>
               <el-form-item label="医保密码" prop="password">
                  <el-input v-model="form.password" placeholder="请输入医保密码" clearable type="password" show-password />
               </el-form-item>
               <el-form-item label="客户端ID" prop="clientId">
                  <el-input v-model="form.clientId" placeholder="请输入客户端ID" clearable />
               </el-form-item>
               <el-form-item label="客户端密钥" prop="clientSecret">
                  <el-input v-model="form.clientSecret" placeholder="请输入客户端密钥" clearable type="password"
                     show-password />
               </el-form-item>
               <el-form-item label="机构代码" prop="fixmedinsCode">
                  <el-input v-model="form.fixmedinsCode" placeholder="请输入机构代码" clearable />
               </el-form-item>
               <el-form-item label="机构名称" prop="fixmedinsName">
                  <el-input v-model="form.fixmedinsName" placeholder="请输入机构名称" clearable />
               </el-form-item>
            </div>
         </el-form>
         <template #footer>
            <div class="dialog-footer" style="margin-top: 15px;">
               <el-button type="primary" @click="submitForm">确 定</el-button>
               <el-button @click="cancel">取 消</el-button>
            </div>
         </template>
      </el-dialog>

   </div>
</template>

<script setup name="SetContract">
import { getTenantContractPage, getTenantContractDetail, addTenantContract, editTenantContract, delTenantContract } from "@/api/system/tenant";
const { proxy } = getCurrentInstance();

const {
   category_enum
} = proxy.useDict(
  'category_enum'
);

const route = useRoute();

const contractList = ref([]);
const open = ref(false);
const loading = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
   form: {},
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      tenantId: route.params.tenantId,
   },
   rules: {
      contractName: [
         { required: true, message: "合同名称不能为空", trigger: "blur" },
      ],
      busNo: [
         { required: true, message: "合同编码不能为空", trigger: "blur" },
      ],
   }
})

const { queryParams, form, rules } = toRefs(data);

/** 查询列表 */
function getList() {
   loading.value = true;
   getTenantContractPage(queryParams.value).then(response => {
      contractList.value = response.data.records;
      total.value = response.data.total;
      loading.value = false;
   });
}
// 返回按钮
function handleClose() {
   const obj = { path: "/system/basicmanage/tenant" };
   proxy.$tab.closeOpenPage(obj);
}
/** 重置新增的表单以及其他数据  */
function reset() {
   form.value = {
      id: undefined,
      contractName: undefined,
      busNo: undefined,
   };
   proxy.resetForm("contractForm");
}
/** 新增 */
function addContract() {
   reset();
   open.value = true;
   title.value = "新增合同";
}
/** 编辑 */
function editContract(row) {
   reset();
   getTenantContractDetail(row.id).then(response => {
      form.value = {
         ...response.data,
         categoryEnum: String(response.data.categoryEnum)
      };
      open.value = true;
      title.value = "修改合同";
   }
   )
}
/** 提交按钮 */
function submitForm() {
   form.value.tenantId = route.params.tenantId
   proxy.$refs["contractRef"].validate(valid => {
      if (valid) {
         if (form.value.id != undefined) {
            editTenantContract(form.value).then(response => {
               proxy.$modal.msgSuccess("修改成功");
               open.value = false;
               getList();
            });
         } else {
            addTenantContract(form.value).then(response => {
               proxy.$modal.msgSuccess("新增成功");
               open.value = false;
               getList();
            });
         }
      }
   });
}
/** 删除 */
function handelDel(row) {
   proxy.$modal.confirm("确认要删除该合同吗？").then(function () {
      return delTenantContract([row.id]);
   }).then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
   }).catch(() => { });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

getList();
</script>

<style>
.form-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px 15px;
}

.grid-item {
   margin-bottom: 0;
   background: white;
   border-radius: 8px;
   padding: 5px;
   transition: all 0.3s ease;
}

.grid-item :deep(.el-input) {
   width: 100%;
}

/* 描述文本样式 */
.item-description {
   font-size: 12px;
   color: #7f8c8d;
   margin-top: 8px;
   line-height: 1.4;
   padding: 5px;
   background-color: #f9f9f9;
   border-radius: 4px;
}
</style>
