<template>
  <div class="app-container main-panel">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入店铺名称"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行名称" prop="bankName">
            <el-input
              v-model="form.bankName"
              placeholder="请输入银行名称"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商户logo" prop="logo">
            <ImageUpload :isShowTip="false" :limit="1">
              <template #tip> （提示：点击图片修改） </template>
            </ImageUpload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡账户名" prop="bankCardName">
            <el-input
              v-model="form.bankCardName"
              placeholder="请输入银行卡账户名"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否默认店铺">
            <el-radio-group v-model="form.isDefault">
              <el-radio key="N" label="N" value="N">否</el-radio>
              <el-radio key="Y" label="Y" value="Y">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡卡号" prop="bankCardNo">
            <el-input
              v-model="form.bankCardNo"
              placeholder="请输入银行卡卡号"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属商户" prop="merchantId">
            <el-select v-model="form.merchantId" placeholder="请选择所属商户">
              <el-option
                v-for="item in merchantOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.status !== 'A'"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信支付商户号" prop="wxMchId">
            <el-input
              v-model="form.wxMchId"
              placeholder="请输入微信商户号，为空则资金进入平台账户"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人姓名" prop="contact">
            <el-input
              v-model="form.contact"
              placeholder="请输入联系人姓名"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信支付APIv2" prop="wxMchId">
            <el-input
              v-model="form.wxApiV2"
              placeholder="请输入微信支付APIv2，为空则资金进入平台账户"
              maxlength="32"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入联系人电话"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="微信支付证书" prop="wxCertPath">
            <el-upload
              class="upload-cert"
              :action="uploadAction"
              :file-list="uploadFiles"
              :auto-upload="true"
              :show-file-list="false"
              :headers="uploadHeader"
              :on-success="handleUploadCertSuccess"
            >
              <div class="file-name">{{ wxCertPath }}</div>
              <el-button type="primary" icon="el-icon-upload2" size="mini"
                >点击上传</el-button
              >
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺详细地址" prop="address">
            <el-input
              v-model="form.address"
              placeholder="请输入店铺详细地址"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付宝appId" prop="alipayAppId">
            <el-input
              v-model="form.alipayAppId"
              placeholder="请输入微信商户号，为空则资金进入平台账户"
              maxlength="100"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="营业时间" prop="hours">
            <el-input
              v-model="form.hours"
              placeholder="请输入店铺营业时间"
              maxlength="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付宝应用私钥" prop="alipayPrivateKey">
            <el-input
              v-model="form.alipayPrivateKey"
              placeholder="请输入微信支付APIv2，为空则资金进入平台账户"
              maxlength="10000"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺纬度" prop="latitude">
            <el-input
              v-model="form.latitude"
              placeholder="请输入店铺纬度，为空则程序自己计算"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付宝公钥" prop="alipayPublicKey">
            <el-input
              v-model="form.alipayPublicKey"
              placeholder="请输入微信支付APIv2，为空则资金进入平台账户"
              maxlength="10000"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="店铺经度" prop="longitude">
            <el-input
              v-model="form.longitude"
              placeholder="请输入店铺经度，为空则程序自己计算"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注信息">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入备注信息内容"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="营业执照" prop="license">
            <ImageUpload :isShowTip="false" :limit="1">
              <template #tip> （提示：点击图片修改） </template>
            </ImageUpload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="统一社会信用码" prop="creditCode">
            <el-input
              v-model="form.creditCode"
              placeholder="请输入统一社会信用代码"
              maxlength="200"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio key="A" label="A" value="A">启用</el-radio>
              <el-radio key="N" label="N" value="N">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import ImageUpload from "@/components/ImageUpload";

export default {
  name: "Info",
  components: {
    ImageUpload,
  },
  data() {
    return {
      form: {},
    };
  },
};
</script>
<style scoped>
.main-panel {
  border: none;
}
.common-dialog >>> .el-upload--picture-card {
  width: 60px;
  height: 50px;
  line-height: 60px;
}
.upload-cert >>> .el-upload {
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.upload-cert .file-name {
  width: 700px;
  text-align: left;
}
</style>
