<template>
  <el-card
    shadow="always"
    :body-style="{ padding: '20px', background: '#fff' }"
  >
    <div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-row type="flex" justify="center">
          <el-col :span="23" >
            <!--              <el-form-item label="收款信息"> </el-form-item>-->
            <div style="color: #888888; font-size: 16px; padding: 20px 40px">
              店铺信息
            </div>
          </el-col>
        </el-row>
        <div style="background-color: #e4e8f2; padding-top: 20px">

          <el-row type="flex" justify="center">
            <el-col :span="9">
              <el-form-item label="手机号" prop="user.phonenumber">
                {{ form.user.phonenumber }}
              </el-form-item>

            </el-col>
            <el-col :span="14">
              <el-form-item label="联系人" prop="user.userName ">
                {{ form.user.userName }}
              </el-form-item>

            </el-col>
          </el-row>
          <el-row type="flex" justify="center">

            <el-col :span="9">
              <el-form-item label="法人身份证号" prop="info.legalPersonNo">
                {{ form.info.legalPersonNo }}
              </el-form-item>
            </el-col>
            <el-col :span="14">

            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="9">
              <el-form-item label="手持身份证（反面）" prop="info.legalPersonBackImg">
                <el-image
                  style="width: 100px; height: 100px;border-radius:8px;"
                  :src="form.info.legalPersonBackImg"
                  :preview-src-list="[form.info.legalPersonBackImg]"
                  alt="手持身份证（反面）"
                >
                  <div slot="error">
                    <img src="../../../assets/images/image_placeholder.png" />
                  </div>
                </el-image>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="手持身份证（正面）" prop="info.legalPersonFrontImg">
                <el-image
                  style="width: 100px; height: 100px;border-radius:8px;"
                  :src="form.info.legalPersonFrontImg"
                  :preview-src-list="[form.info.legalPersonFrontImg]"
                  alt="手持身份证（正面）"
                >
                  <div slot="error">
                    <img src="../../../assets/images/image_placeholder.png" />
                  </div>
                </el-image>
              </el-form-item>
            </el-col>
          </el-row>


        </div>

        <el-row type="flex" justify="center">
          <el-col :span="23" >
            <!--              <el-form-item label="收款信息"> </el-form-item>-->
            <div style="color: #888888; font-size: 16px; padding: 20px 40px">
              收款信息
            </div>
          </el-col>
        </el-row>

        <div style="background-color: #e4e8f2; padding-top: 20px">

          <el-row type="flex" justify="center">
            <el-col :span="9">
              <el-form-item label="户名" prop="bank.userName">
                {{ form.bank.userName }}
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="账号" prop="bank.bankAccount">
                {{ form.bank.bankAccount }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="9">
              <el-form-item label="开户行" prop="bank.bankBranchName">
                {{ form.bank.bankBranchName }}
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="开户行卡联行号" prop="bank.bankBranchCode">
                {{ form.bank.bankBranchCode }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row type="flex" justify="center">
          <el-col :span="23">
            <el-form-item label="业务经理" prop="promoter">
              {{ form.promoter }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="23">
            <el-form-item label="申请时间" prop="createTime">
              {{ form.createTime }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center" >
          <el-col :span="9">
            <el-form-item label="审核时间" prop="examineTime">
              {{ form.examineTime }}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="审核人" prop="examineUserName">
              {{ form.examineUserName }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center">
          <el-col :span="9">
            <el-form-item label="保证金" prop="bondMoney">
              {{ form.bondMoney + '元'}}
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="评分" prop="score">
              {{ form.score }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center" v-if="form.businessState == '002'">
          <el-col :span="9">
            <el-form-item label="营业状态" prop="businessState">
              <template slot-scope="businessState">
                <span v-if="form.businessState == '001'" >已上架</span>
                <span v-if="form.businessState == '002'" >已下架</span>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="下架时间" prop="closeTime">
              {{ form.closeTime }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="center" v-if="form.businessState == '002'">
          <el-col :span="23">
            <el-form-item label="下架原因" prop="closeReason">
              {{ form.closeReason }}
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>

    </div>
  </el-card>
</template>

<script>
import { merchantInfo } from "@/api/merchant/adminMerchant";
export default {
  name: "info",
  data() {
    return {

      form: {
        merchantId: '',
        merchantName: '',
        detail: '',
        houseNumber: '',
        merchantPhone: '',
        longitude: '',
        latitude: '',
        shopState: '',
        promoter: '',
        examineUser: '',
        examineReason: '',
        examineTime: '',
        user: {
          userId: '',
          userName: '',
          nickName: '',
          phonenumber: '',

        },
        info: {
          merchantId: '',
          businessNum: "3232323232",
          businessImg: "http://fresh-life.oss-cn-shanghai.aliyuncs.com/uploadimages/2022/01/05/1641380107965.jpeg",
          businessLicenseImg: null,
          legalPersonNo: "3212332424232",
          legalPersonFrontImg: "http://fresh-life.oss-cn-shanghai.aliyuncs.com/uploadimages/2022/01/05/1641380113551.jpeg",
          legalPersonBackImg: "http://fresh-life.oss-cn-shanghai.aliyuncs.com/uploadimages/2022/01/05/1641380118175.jpeg"
        },
        bank: {
          merchantId: '',
          userName: '',
          bankBranchName: '',
          bankBranchCode: '',
          bankImg: '',
          bankAccount: '',
        }
      },
    };
  },
  created() {
    console.log("----------",this.$route.query.merchantId)
    this.init(this.$route.query.merchantId);
  },
  methods: {
    init(merchantId) {
      if (merchantId != undefined) {
        merchantInfo(merchantId).then((data) => {
          console.log(data)
          this.form = data.data;
        }).catch(err => {
          console.log(err)
        });
      }
    },


  },
};
</script>

<style scoped>
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
</style>
