<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
      <el-row :gutter="20">
        <el-col :span="24">
          <h2>门店关系</h2>
        </el-col>

        <el-col :span="12">
          <el-form-item label="账户码" prop="accountCode">
            <el-input
              v-model="formData.accountCode"
              placeholder="请输入账户码"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺类型" prop="businessType">
            <el-radio-group v-model="formData.businessType" disabled>
              <el-radio :label="1">普通店铺</el-radio>
              <el-radio :label="2">总店商家</el-radio>
              <el-radio :label="3">分店商家</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12" v-if="formData.businessType == 3">
          <el-form-item label="总店邀请码" prop="parentBusinessCode">
            <el-input
              v-model="formData.parentBusinessCode"
              placeholder="请输入账户码"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <h2>企业信息</h2>
        </el-col>

        <el-col :span="12">
          <el-form-item label="营业执照" prop="businessLicenseImgs">
            <imagePreview
              v-if="
                formData.businessLicenseImgs &&
                formData.businessLicenseImgs.length > 0
              "
              :src="formData.businessLicenseImgs[0]"
              width="100px"
              height="100px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input
              v-model="formData.enterpriseName"
              placeholder="请输入企业名称"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="统一信用代码" prop="uscCode">
            <el-input
              v-model="formData.uscCode"
              placeholder="请输入统一信用代码"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="经营范围" prop="businessScope">
            <el-input
              v-model="formData.businessScope"
              placeholder="请输入经营范围"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属地区" prop="provinceName">
            <span>{{
              formData.provinceName + formData.cityName + formData.areaName
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input
              v-model="formData.address"
              placeholder="请输入详细地址"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <h2>法人信息</h2>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="法人身份证正面"
            prop="legalIdCardFrontUrl"
            class="imageView"
          >
            <imagePreview
              v-if="formData.legalIdCardFrontUrl"
              :src="formData.legalIdCardFrontUrl"
              width="100px"
              height="100px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="法人身份证反面"
            prop="legalIdCardBackUrl"
            class="imageView"
          >
            <imagePreview
              v-if="formData.legalIdCardBackUrl"
              :src="formData.legalIdCardBackUrl"
              width="100px"
              height="100px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人姓名" prop="legalName">
            <el-input
              v-model="formData.legalName"
              placeholder="请输入法人姓名"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号码" prop="legalIdCard">
            <el-input
              v-model="formData.legalIdCard"
              placeholder="请输入身份证号码"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <h2>店铺信息</h2>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺名称" prop="businessName">
            <el-input
              v-model="formData.businessName"
              placeholder="请输入店铺名称"
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店铺地图选址" prop="latitude">
            <el-input
              :value="formData.latitude + ',' + formData.longitude"
              placeholder=""
              clearable
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客服电话" prop="customerServicePhone">
            <el-input
              v-model="formData.customerServicePhone"
              placeholder="请输入客服电话"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="营业时间" prop="businessHours">
            <el-input
              v-model="formData.businessHours"
              placeholder="请输入营业时间"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="店铺介绍" prop="description">
            <el-input
              v-model="formData.description"
              placeholder="请输入店铺介绍"
              clearable
              type="textarea"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <h2>申请材料</h2>
        </el-col>
        <el-col :span="12">
          <el-form-item label="店招照" prop="image" class="imageView">
            <imagePreview
              v-if="formData.image"
              :src="formData.image"
              width="100px"
              height="100px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="店内营业场所图"
            prop="innerImages"
            class="imageView"
          >
            <template
              v-if="formData.innerImages && formData.innerImages.length > 0"
            >
              <imagePreview
                v-for="(item, index) in formData.innerImages"
                :key="index"
                :src="item"
                width="100px"
                height="100px"
              />
            </template>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="">
            <el-button type="primary" @click="submitForm" :loading="loading"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { businessInfoBase, businessSetPayParamsPage } from "@/api/shop";
export default {
  data() {
    return {
      loading: false,
      info: {},
      formData: {},
      rules: {
        customerServicePhone: [
          { required: true, message: "请输入客服电话", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入店铺介绍", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      businessInfoBase().then((res) => {
        if (res.code == 200) {
          this.info = res.data || {};
          this.formData = { ...res.data };
        }
      });
    },

    submitForm() {
      //   console.log(this.formData);
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true;
          let form = {
            businessId: this.formData.businessId,
            customerServicePhone: this.formData.customerServicePhone,
            businessHours: this.formData.businessHours,
            description: this.formData.description,
          };
          businessSetPayParamsPage(form)
            .then((res) => {
              this.loading = false;
              if (res.code == 200) {
                this.$message.success("保存成功");
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.imageView {
  ::v-deep .el-image {
    margin-right: 20px;
  }
}
::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-range-editor.is-disabled,
::v-deep .el-range-editor.is-disabled input,
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff !important;
  color: rgb(96, 98, 102) !important;
}

</style>
