<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="供应商编号" prop="supplierNo">
              <el-input v-model="queryParams.supplierNo" placeholder="请输入供应商编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input v-model="queryParams.enterpriseName" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="人员规模" prop="membershipSize">
              <el-input v-model="queryParams.membershipSize" placeholder="请输入人员规模" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="固定电话" prop="fixedPhone">
              <el-input v-model="queryParams.fixedPhone" placeholder="请输入固定电话" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="传真" prop="fax">
              <el-input v-model="queryParams.fax" placeholder="请输入传真" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="网址" prop="url">
              <el-input v-model="queryParams.url" placeholder="请输入网址" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="邮政编码" prop="postCode">
              <el-input v-model="queryParams.postCode" placeholder="请输入邮政编码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="邮箱" prop="mailbox">
              <el-input v-model="queryParams.mailbox" placeholder="请输入邮箱" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="办公地址-省" prop="officeProvince">
              <el-input v-model="queryParams.officeProvince" placeholder="请输入办公地址-省" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="办公地址-市" prop="officeCity">
              <el-input v-model="queryParams.officeCity" placeholder="请输入办公地址-市" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="办公地址-区/县" prop="officeCounty">
              <el-input v-model="queryParams.officeCounty" placeholder="请输入办公地址-区/县" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="办公详细地址" prop="officeAddress">
              <el-input v-model="queryParams.officeAddress" placeholder="请输入办公详细地址" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="营业执照名称" prop="businessName">
              <el-input v-model="queryParams.businessName" placeholder="请输入营业执照名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="统一社会信用代码" prop="socialCreditCode">
              <el-input v-model="queryParams.socialCreditCode" placeholder="请输入统一社会信用代码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="法人姓名" prop="legalPersonName">
              <el-input v-model="queryParams.legalPersonName" placeholder="请输入法人姓名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="法人身份证号" prop="legalPersonId">
              <el-input v-model="queryParams.legalPersonId" placeholder="请输入法人身份证号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="注册资本" prop="registeredCapital">
              <el-input v-model="queryParams.registeredCapital" placeholder="请输入注册资本" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="注册地址-省" prop="businessProvince">
              <el-input v-model="queryParams.businessProvince" placeholder="请输入注册地址-省" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="注册地址-市" prop="businessCity">
              <el-input v-model="queryParams.businessCity" placeholder="请输入注册地址-市" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="注册地址-区/县" prop="businessCounty">
              <el-input v-model="queryParams.businessCounty" placeholder="请输入注册地址-区/县" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="注册详细地址" prop="businessAddress">
              <el-input v-model="queryParams.businessAddress" placeholder="请输入注册详细地址" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="营业执照图片路径" prop="businessLicense">
              <el-input v-model="queryParams.businessLicense" placeholder="请输入营业执照图片路径" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="发票抬头" prop="invoiceHeader">
              <el-input v-model="queryParams.invoiceHeader" placeholder="请输入发票抬头" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="纳税人识别号" prop="taxpayerIdentifier">
              <el-input v-model="queryParams.taxpayerIdentifier" placeholder="请输入纳税人识别号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="开户银行" prop="depositaryBank">
              <el-input v-model="queryParams.depositaryBank" placeholder="请输入开户银行" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="行号" prop="rowNum">
              <el-input v-model="queryParams.rowNum" placeholder="请输入行号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="银行账号" prop="bankAccounts">
              <el-input v-model="queryParams.bankAccounts" placeholder="请输入银行账号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="发票地址" prop="invoiceAddress">
              <el-input v-model="queryParams.invoiceAddress" placeholder="请输入发票地址" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="发票电话" prop="invoiceLandline">
              <el-input v-model="queryParams.invoiceLandline" placeholder="请输入发票电话" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="供货范围" prop="scopeSupply">
              <el-input v-model="queryParams.scopeSupply" placeholder="请输入供货范围" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合作方式" prop="cooperateWay">
              <el-input v-model="queryParams.cooperateWay" placeholder="请输入合作方式" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合作等级" prop="cooperateLevel">
              <el-input v-model="queryParams.cooperateLevel" placeholder="请输入合作等级" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="合同到期时间" prop="contractEndTime">
              <el-date-picker clearable
                v-model="queryParams.contractEndTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择合同到期时间"
              />
            </el-form-item>
            <el-form-item label="供应评分" prop="supplyScore">
              <el-input v-model="queryParams.supplyScore" placeholder="请输入供应评分" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="年销售额" prop="yearSales">
              <el-input v-model="queryParams.yearSales" placeholder="请输入年销售额" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="供应商联系人姓名" prop="supplierName">
              <el-input v-model="queryParams.supplierName" placeholder="请输入供应商联系人姓名" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="供应商联系人电话" prop="supplierPhone">
              <el-input v-model="queryParams.supplierPhone" placeholder="请输入供应商联系人电话" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="供应商登录密码" prop="supplierPassword">
              <el-input v-model="queryParams.supplierPassword" placeholder="请输入供应商登录密码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="经营品类" prop="operatingCategory">
              <el-input v-model="queryParams.operatingCategory" placeholder="请输入经营品类" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="经营品牌" prop="operatingBrand">
              <el-input v-model="queryParams.operatingBrand" placeholder="请输入经营品牌" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="其他客户" prop="otherCustomers">
              <el-input v-model="queryParams.otherCustomers" placeholder="请输入其他客户" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="简称" prop="shortName">
              <el-input v-model="queryParams.shortName" placeholder="请输入简称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="所属行业" prop="industrCategory">
              <el-input v-model="queryParams.industrCategory" placeholder="请输入所属行业" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="所属公司" prop="ownedCompany">
              <el-input v-model="queryParams.ownedCompany" placeholder="请输入所属公司" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="创建时间" prop="created">
              <el-date-picker clearable
                v-model="queryParams.created"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择创建时间"
              />
            </el-form-item>
            <el-form-item label="修改时间" prop="modify">
              <el-date-picker clearable
                v-model="queryParams.modify"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择修改时间"
              />
            </el-form-item>
            <el-form-item label="有效期开始时间" prop="validityFromDate">
              <el-date-picker clearable
                v-model="queryParams.validityFromDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择有效期开始时间"
              />
            </el-form-item>
            <el-form-item label="有效期结束时间" prop="validityToDate">
              <el-date-picker clearable
                v-model="queryParams.validityToDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择有效期结束时间"
              />
            </el-form-item>
            <el-form-item label="行号" prop="rowNo">
              <el-input v-model="queryParams.rowNo" placeholder="请输入行号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="对接次数" prop="abutmentNo">
              <el-input v-model="queryParams.abutmentNo" placeholder="请输入对接次数" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="是否合作" prop="cooperative">
              <el-input v-model="queryParams.cooperative" placeholder="请输入是否合作" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:info:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:info:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:info:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:info:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" border :data="infoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主键ID" align="center" prop="id" v-if="true" />
        <el-table-column label="供应商编号" align="center" prop="supplierNo" />
        <el-table-column label="企业名称" align="center" prop="enterpriseName" />
        <el-table-column label="人员规模" align="center" prop="membershipSize" />
        <el-table-column label="供应商类型" align="center" prop="supplierType" />
        <el-table-column label="合作类型" align="center" prop="cooperationType" />
        <el-table-column label="固定电话" align="center" prop="fixedPhone" />
        <el-table-column label="传真" align="center" prop="fax" />
        <el-table-column label="网址" align="center" prop="url" />
        <el-table-column label="邮政编码" align="center" prop="postCode" />
        <el-table-column label="邮箱" align="center" prop="mailbox" />
        <el-table-column label="办公地址-省" align="center" prop="officeProvince" />
        <el-table-column label="办公地址-市" align="center" prop="officeCity" />
        <el-table-column label="办公地址-区/县" align="center" prop="officeCounty" />
        <el-table-column label="办公详细地址" align="center" prop="officeAddress" />
        <el-table-column label="营业执照名称" align="center" prop="businessName" />
        <el-table-column label="统一社会信用代码" align="center" prop="socialCreditCode" />
        <el-table-column label="法人姓名" align="center" prop="legalPersonName" />
        <el-table-column label="法人身份证号" align="center" prop="legalPersonId" />
        <el-table-column label="注册资本" align="center" prop="registeredCapital" />
        <el-table-column label="注册地址-省" align="center" prop="businessProvince" />
        <el-table-column label="注册地址-市" align="center" prop="businessCity" />
        <el-table-column label="注册地址-区/县" align="center" prop="businessCounty" />
        <el-table-column label="注册详细地址" align="center" prop="businessAddress" />
        <el-table-column label="营业执照图片路径" align="center" prop="businessLicense" />
        <el-table-column label="发票类型" align="center" prop="invoiceType" />
        <el-table-column label="发票抬头" align="center" prop="invoiceHeader" />
        <el-table-column label="纳税人识别号" align="center" prop="taxpayerIdentifier" />
        <el-table-column label="开户银行" align="center" prop="depositaryBank" />
        <el-table-column label="行号" align="center" prop="rowNum" />
        <el-table-column label="银行账号" align="center" prop="bankAccounts" />
        <el-table-column label="发票地址" align="center" prop="invoiceAddress" />
        <el-table-column label="发票电话" align="center" prop="invoiceLandline" />
        <el-table-column label="供货范围" align="center" prop="scopeSupply" />
        <el-table-column label="合作方式" align="center" prop="cooperateWay" />
        <el-table-column label="合作等级" align="center" prop="cooperateLevel" />
        <el-table-column label="合同到期时间" align="center" prop="contractEndTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.contractEndTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="供应状态" align="center" prop="supplyStatus" />
        <el-table-column label="供应评分" align="center" prop="supplyScore" />
        <el-table-column label="年销售额" align="center" prop="yearSales" />
        <el-table-column label="供应商联系人姓名" align="center" prop="supplierName" />
        <el-table-column label="供应商联系人电话" align="center" prop="supplierPhone" />
        <el-table-column label="供应商登录密码" align="center" prop="supplierPassword" />
        <el-table-column label="经营品类" align="center" prop="operatingCategory" />
        <el-table-column label="经营品牌" align="center" prop="operatingBrand" />
        <el-table-column label="其他客户" align="center" prop="otherCustomers" />
        <el-table-column label="简称" align="center" prop="shortName" />
        <el-table-column label="所属行业" align="center" prop="industrCategory" />
        <el-table-column label="类型" align="center" prop="type" />
        <el-table-column label="所属公司" align="center" prop="ownedCompany" />
        <el-table-column label="推送状态" align="center" prop="pushStatus" />
        <el-table-column label="创建时间" align="center" prop="created" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.created, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center" prop="modify" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.modify, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期开始时间" align="center" prop="validityFromDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.validityFromDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期结束时间" align="center" prop="validityToDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.validityToDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行号" align="center" prop="rowNo" />
        <el-table-column label="法人身份证图片路径" align="center" prop="personImageUrl" width="100">
          <template #default="scope">
            <image-preview :src="scope.row.personImageUrl" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="对接次数" align="center" prop="abutmentNo" />
        <el-table-column label="是否合作" align="center" prop="cooperative" />
        <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="handleUpdate(scope.row)" v-hasPermi="['system:info:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:info:remove']"></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-card>
    <!-- 添加或修改供应商信息对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="infoFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="供应商编号" prop="supplierNo">
          <el-input v-model="form.supplierNo" placeholder="请输入供应商编号" />
        </el-form-item>
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="人员规模" prop="membershipSize">
          <el-input v-model="form.membershipSize" placeholder="请输入人员规模" />
        </el-form-item>
        <el-form-item label="固定电话" prop="fixedPhone">
            <el-input v-model="form.fixedPhone" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="传真" prop="fax">
          <el-input v-model="form.fax" placeholder="请输入传真" />
        </el-form-item>
        <el-form-item label="网址" prop="url">
          <el-input v-model="form.url" placeholder="请输入网址" />
        </el-form-item>
        <el-form-item label="邮政编码" prop="postCode">
          <el-input v-model="form.postCode" placeholder="请输入邮政编码" />
        </el-form-item>
        <el-form-item label="邮箱" prop="mailbox">
          <el-input v-model="form.mailbox" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="办公地址-省" prop="officeProvince">
          <el-input v-model="form.officeProvince" placeholder="请输入办公地址-省" />
        </el-form-item>
        <el-form-item label="办公地址-市" prop="officeCity">
          <el-input v-model="form.officeCity" placeholder="请输入办公地址-市" />
        </el-form-item>
        <el-form-item label="办公地址-区/县" prop="officeCounty">
          <el-input v-model="form.officeCounty" placeholder="请输入办公地址-区/县" />
        </el-form-item>
        <el-form-item label="办公详细地址" prop="officeAddress">
          <el-input v-model="form.officeAddress" placeholder="请输入办公详细地址" />
        </el-form-item>
        <el-form-item label="营业执照名称" prop="businessName">
          <el-input v-model="form.businessName" placeholder="请输入营业执照名称" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="socialCreditCode">
          <el-input v-model="form.socialCreditCode" placeholder="请输入统一社会信用代码" />
        </el-form-item>
        <el-form-item label="法人姓名" prop="legalPersonName">
          <el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" />
        </el-form-item>
        <el-form-item label="法人身份证号" prop="legalPersonId">
          <el-input v-model="form.legalPersonId" placeholder="请输入法人身份证号" />
        </el-form-item>
        <el-form-item label="注册资本" prop="registeredCapital">
          <el-input v-model="form.registeredCapital" placeholder="请输入注册资本" />
        </el-form-item>
        <el-form-item label="注册地址-省" prop="businessProvince">
          <el-input v-model="form.businessProvince" placeholder="请输入注册地址-省" />
        </el-form-item>
        <el-form-item label="注册地址-市" prop="businessCity">
          <el-input v-model="form.businessCity" placeholder="请输入注册地址-市" />
        </el-form-item>
        <el-form-item label="注册地址-区/县" prop="businessCounty">
          <el-input v-model="form.businessCounty" placeholder="请输入注册地址-区/县" />
        </el-form-item>
        <el-form-item label="注册详细地址" prop="businessAddress">
          <el-input v-model="form.businessAddress" placeholder="请输入注册详细地址" />
        </el-form-item>
        <el-form-item label="营业执照图片路径" prop="businessLicense">
            <el-input v-model="form.businessLicense" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="发票抬头" prop="invoiceHeader">
          <el-input v-model="form.invoiceHeader" placeholder="请输入发票抬头" />
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="taxpayerIdentifier">
          <el-input v-model="form.taxpayerIdentifier" placeholder="请输入纳税人识别号" />
        </el-form-item>
        <el-form-item label="开户银行" prop="depositaryBank">
          <el-input v-model="form.depositaryBank" placeholder="请输入开户银行" />
        </el-form-item>
        <el-form-item label="行号" prop="rowNum">
          <el-input v-model="form.rowNum" placeholder="请输入行号" />
        </el-form-item>
        <el-form-item label="银行账号" prop="bankAccounts">
          <el-input v-model="form.bankAccounts" placeholder="请输入银行账号" />
        </el-form-item>
        <el-form-item label="发票地址" prop="invoiceAddress">
          <el-input v-model="form.invoiceAddress" placeholder="请输入发票地址" />
        </el-form-item>
        <el-form-item label="发票电话" prop="invoiceLandline">
          <el-input v-model="form.invoiceLandline" placeholder="请输入发票电话" />
        </el-form-item>
        <el-form-item label="供货范围" prop="scopeSupply">
            <el-input v-model="form.scopeSupply" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="合作方式" prop="cooperateWay">
          <el-input v-model="form.cooperateWay" placeholder="请输入合作方式" />
        </el-form-item>
        <el-form-item label="合作等级" prop="cooperateLevel">
          <el-input v-model="form.cooperateLevel" placeholder="请输入合作等级" />
        </el-form-item>
        <el-form-item label="合同到期时间" prop="contractEndTime">
          <el-date-picker clearable
            v-model="form.contractEndTime"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择合同到期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应评分" prop="supplyScore">
          <el-input v-model="form.supplyScore" placeholder="请输入供应评分" />
        </el-form-item>
        <el-form-item label="年销售额" prop="yearSales">
          <el-input v-model="form.yearSales" placeholder="请输入年销售额" />
        </el-form-item>
        <el-form-item label="供应商联系人姓名" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商联系人姓名" />
        </el-form-item>
        <el-form-item label="供应商联系人电话" prop="supplierPhone">
          <el-input v-model="form.supplierPhone" placeholder="请输入供应商联系人电话" />
        </el-form-item>
        <el-form-item label="供应商登录密码" prop="supplierPassword">
          <el-input v-model="form.supplierPassword" placeholder="请输入供应商登录密码" />
        </el-form-item>
        <el-form-item label="经营品类" prop="operatingCategory">
          <el-input v-model="form.operatingCategory" placeholder="请输入经营品类" />
        </el-form-item>
        <el-form-item label="经营品牌" prop="operatingBrand">
            <el-input v-model="form.operatingBrand" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="其他客户" prop="otherCustomers">
            <el-input v-model="form.otherCustomers" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="简称" prop="shortName">
          <el-input v-model="form.shortName" placeholder="请输入简称" />
        </el-form-item>
        <el-form-item label="所属行业" prop="industrCategory">
          <el-input v-model="form.industrCategory" placeholder="请输入所属行业" />
        </el-form-item>
        <el-form-item label="所属公司" prop="ownedCompany">
          <el-input v-model="form.ownedCompany" placeholder="请输入所属公司" />
        </el-form-item>
        <el-form-item label="创建时间" prop="created">
          <el-date-picker clearable
            v-model="form.created"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改时间" prop="modify">
          <el-date-picker clearable
            v-model="form.modify"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择修改时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效期开始时间" prop="validityFromDate">
          <el-date-picker clearable
            v-model="form.validityFromDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择有效期开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效期结束时间" prop="validityToDate">
          <el-date-picker clearable
            v-model="form.validityToDate"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择有效期结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="行号" prop="rowNo">
          <el-input v-model="form.rowNo" placeholder="请输入行号" />
        </el-form-item>
        <el-form-item label="法人身份证图片路径" prop="personImage">
          <image-upload v-model="form.personImage"/>
        </el-form-item>
        <el-form-item label="对接次数" prop="abutmentNo">
          <el-input v-model="form.abutmentNo" placeholder="请输入对接次数" />
        </el-form-item>
        <el-form-item label="是否合作" prop="cooperative">
          <el-input v-model="form.cooperative" placeholder="请输入是否合作" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Info" lang="ts">
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from '@/api/supplier/info';
import { InfoVO, InfoQuery, InfoForm } from '@/api/supplier/info/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const infoList = ref<InfoVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const infoFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: InfoForm = {
  id: undefined,
  supplierNo: undefined,
  enterpriseName: undefined,
  membershipSize: undefined,
  supplierType: undefined,
  cooperationType: undefined,
  fixedPhone: undefined,
  fax: undefined,
  url: undefined,
  postCode: undefined,
  mailbox: undefined,
  officeProvince: undefined,
  officeCity: undefined,
  officeCounty: undefined,
  officeAddress: undefined,
  businessName: undefined,
  socialCreditCode: undefined,
  legalPersonName: undefined,
  legalPersonId: undefined,
  registeredCapital: undefined,
  businessProvince: undefined,
  businessCity: undefined,
  businessCounty: undefined,
  businessAddress: undefined,
  businessLicense: undefined,
  invoiceType: undefined,
  invoiceHeader: undefined,
  taxpayerIdentifier: undefined,
  depositaryBank: undefined,
  rowNum: undefined,
  bankAccounts: undefined,
  invoiceAddress: undefined,
  invoiceLandline: undefined,
  scopeSupply: undefined,
  cooperateWay: undefined,
  cooperateLevel: undefined,
  contractEndTime: undefined,
  supplyStatus: undefined,
  supplyScore: undefined,
  yearSales: undefined,
  supplierName: undefined,
  supplierPhone: undefined,
  supplierPassword: undefined,
  operatingCategory: undefined,
  operatingBrand: undefined,
  otherCustomers: undefined,
  shortName: undefined,
  industrCategory: undefined,
  type: undefined,
  ownedCompany: undefined,
  pushStatus: undefined,
  created: undefined,
  modify: undefined,
  validityFromDate: undefined,
  validityToDate: undefined,
  rowNo: undefined,
  personImage: undefined,
  abutmentNo: undefined,
  cooperative: undefined
}
const data = reactive<PageData<InfoForm, InfoQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    supplierNo: undefined,
    enterpriseName: undefined,
    membershipSize: undefined,
    supplierType: undefined,
    cooperationType: undefined,
    fixedPhone: undefined,
    fax: undefined,
    url: undefined,
    postCode: undefined,
    mailbox: undefined,
    officeProvince: undefined,
    officeCity: undefined,
    officeCounty: undefined,
    officeAddress: undefined,
    businessName: undefined,
    socialCreditCode: undefined,
    legalPersonName: undefined,
    legalPersonId: undefined,
    registeredCapital: undefined,
    businessProvince: undefined,
    businessCity: undefined,
    businessCounty: undefined,
    businessAddress: undefined,
    businessLicense: undefined,
    invoiceType: undefined,
    invoiceHeader: undefined,
    taxpayerIdentifier: undefined,
    depositaryBank: undefined,
    rowNum: undefined,
    bankAccounts: undefined,
    invoiceAddress: undefined,
    invoiceLandline: undefined,
    scopeSupply: undefined,
    cooperateWay: undefined,
    cooperateLevel: undefined,
    contractEndTime: undefined,
    supplyStatus: undefined,
    supplyScore: undefined,
    yearSales: undefined,
    supplierName: undefined,
    supplierPhone: undefined,
    supplierPassword: undefined,
    operatingCategory: undefined,
    operatingBrand: undefined,
    otherCustomers: undefined,
    shortName: undefined,
    industrCategory: undefined,
    type: undefined,
    ownedCompany: undefined,
    pushStatus: undefined,
    created: undefined,
    modify: undefined,
    validityFromDate: undefined,
    validityToDate: undefined,
    rowNo: undefined,
    personImage: undefined,
    abutmentNo: undefined,
    cooperative: undefined,
    params: {
    }
  },
  rules: {
    supplierNo: [
      { required: true, message: "供应商编号不能为空", trigger: "blur" }
    ],
    enterpriseName: [
      { required: true, message: "企业名称不能为空", trigger: "blur" }
    ],
    membershipSize: [
      { required: true, message: "人员规模不能为空", trigger: "blur" }
    ],
    supplierType: [
      { required: true, message: "供应商类型不能为空", trigger: "change" }
    ],
    cooperationType: [
      { required: true, message: "合作类型不能为空", trigger: "change" }
    ],
    fixedPhone: [
      { required: true, message: "固定电话不能为空", trigger: "blur" }
    ],
    fax: [
      { required: true, message: "传真不能为空", trigger: "blur" }
    ],
    url: [
      { required: true, message: "网址不能为空", trigger: "blur" }
    ],
    postCode: [
      { required: true, message: "邮政编码不能为空", trigger: "blur" }
    ],
    mailbox: [
      { required: true, message: "邮箱不能为空", trigger: "blur" }
    ],
    officeProvince: [
      { required: true, message: "办公地址-省不能为空", trigger: "blur" }
    ],
    officeCity: [
      { required: true, message: "办公地址-市不能为空", trigger: "blur" }
    ],
    officeCounty: [
      { required: true, message: "办公地址-区/县不能为空", trigger: "blur" }
    ],
    officeAddress: [
      { required: true, message: "办公详细地址不能为空", trigger: "blur" }
    ],
    businessName: [
      { required: true, message: "营业执照名称不能为空", trigger: "blur" }
    ],
    socialCreditCode: [
      { required: true, message: "统一社会信用代码不能为空", trigger: "blur" }
    ],
    legalPersonName: [
      { required: true, message: "法人姓名不能为空", trigger: "blur" }
    ],
    legalPersonId: [
      { required: true, message: "法人身份证号不能为空", trigger: "blur" }
    ],
    registeredCapital: [
      { required: true, message: "注册资本不能为空", trigger: "blur" }
    ],
    businessProvince: [
      { required: true, message: "注册地址-省不能为空", trigger: "blur" }
    ],
    businessCity: [
      { required: true, message: "注册地址-市不能为空", trigger: "blur" }
    ],
    businessCounty: [
      { required: true, message: "注册地址-区/县不能为空", trigger: "blur" }
    ],
    businessAddress: [
      { required: true, message: "注册详细地址不能为空", trigger: "blur" }
    ],
    businessLicense: [
      { required: true, message: "营业执照图片路径不能为空", trigger: "blur" }
    ],
    invoiceType: [
      { required: true, message: "发票类型不能为空", trigger: "change" }
    ],
    invoiceHeader: [
      { required: true, message: "发票抬头不能为空", trigger: "blur" }
    ],
    taxpayerIdentifier: [
      { required: true, message: "纳税人识别号不能为空", trigger: "blur" }
    ],
    depositaryBank: [
      { required: true, message: "开户银行不能为空", trigger: "blur" }
    ],
    rowNum: [
      { required: true, message: "行号不能为空", trigger: "blur" }
    ],
    bankAccounts: [
      { required: true, message: "银行账号不能为空", trigger: "blur" }
    ],
    invoiceAddress: [
      { required: true, message: "发票地址不能为空", trigger: "blur" }
    ],
    invoiceLandline: [
      { required: true, message: "发票电话不能为空", trigger: "blur" }
    ],
    scopeSupply: [
      { required: true, message: "供货范围不能为空", trigger: "blur" }
    ],
    cooperateWay: [
      { required: true, message: "合作方式不能为空", trigger: "blur" }
    ],
    contractEndTime: [
      { required: true, message: "合同到期时间不能为空", trigger: "blur" }
    ],
    yearSales: [
      { required: true, message: "年销售额不能为空", trigger: "blur" }
    ],
    supplierName: [
      { required: true, message: "供应商联系人姓名不能为空", trigger: "blur" }
    ],
    supplierPhone: [
      { required: true, message: "供应商联系人电话不能为空", trigger: "blur" }
    ],
    supplierPassword: [
      { required: true, message: "供应商登录密码不能为空", trigger: "blur" }
    ],
    operatingCategory: [
      { required: true, message: "经营品类不能为空", trigger: "blur" }
    ],
    operatingBrand: [
      { required: true, message: "经营品牌不能为空", trigger: "blur" }
    ],
    otherCustomers: [
      { required: true, message: "其他客户不能为空", trigger: "blur" }
    ],
    shortName: [
      { required: true, message: "简称不能为空", trigger: "blur" }
    ],
    industrCategory: [
      { required: true, message: "所属行业不能为空", trigger: "blur" }
    ],
    type: [
      { required: true, message: "类型不能为空", trigger: "change" }
    ],
    ownedCompany: [
      { required: true, message: "所属公司不能为空", trigger: "blur" }
    ],
    modify: [
      { required: true, message: "修改时间不能为空", trigger: "blur" }
    ],
    validityFromDate: [
      { required: true, message: "有效期开始时间不能为空", trigger: "blur" }
    ],
    validityToDate: [
      { required: true, message: "有效期结束时间不能为空", trigger: "blur" }
    ],
    rowNo: [
      { required: true, message: "行号不能为空", trigger: "blur" }
    ],
    personImage: [
      { required: true, message: "法人身份证图片路径不能为空", trigger: "blur" }
    ],
    cooperative: [
      { required: true, message: "是否合作不能为空", trigger: "blur" }
    ]
  }
});

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

/** 查询供应商信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listInfo(queryParams.value);
  infoList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  infoFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: InfoVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加供应商信息";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: InfoVO) => {
  reset();
  const _id = row?.id || ids.value[0]
  const res = await getInfo(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改供应商信息";
}

/** 提交按钮 */
const submitForm = () => {
  infoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateInfo(form.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addInfo(form.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: InfoVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除供应商信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delInfo(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('system/info/export', {
    ...queryParams.value
  }, `info_${new Date().getTime()}.xlsx`)
}

onMounted(() => {
  getList();
});
</script>
