<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" v-if="form.shopState == '003'">
          <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="23">
            <el-form-item
              v-if="form.shopState == '003'"
              label="不通过原因"
              prop="examineReason"
            >
              {{ form.examineReason }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
            v-if="form.shopState == '001'"
            type="success"
            icon="el-icon-check"
            v-hasPermi="['shop:audit:toAudit']"
            style="margin-left: 550px"
            @click="handleAudit(form.merchantId)"
            >审核
          </el-button>
        </el-form-item>
      </el-form>

      <el-dialog
        :title="title"
        :visible.sync="open"
        width="500px"
        append-to-body
      >
        <el-form
          ref="formAudit"
          :model="formAudit"
          label-width="120px"
        >
          <el-form-item label="审核结果">
            <el-radio v-model="formAudit.shopState" label="002">通过</el-radio>
            <el-radio v-model="formAudit.shopState" label="003">不通过</el-radio>
          </el-form-item>
          <el-form-item label="原因" v-if="formAudit.shopState == '003'">
            <el-input
              type="textarea"
              :rows="2"
              v-model="formAudit.examineReason"
              placeholder="请输入不通过的原因"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import { merchantInfo,handleAudit } from "@/api/merchant/adminMerchant";
export default {
  name: "info",
  data() {
    return {
      imgPrefix: "http://fresh-life.oss-cn-shanghai.aliyuncs.com/",
      instoreImgList: [],
      professionImgList: [],
      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: '',
        }
      },
      formAudit: {},
      // 弹出层标题
      title: "",
      open: false,
    };
  },
  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)
        });
      }
    },
    backButton() {
      this.$emit("goList");
      this.$refs["form"].resetFields();
    },
    reset() {
      this.formAudit = {
        merchantId: null,
        examineReason: null,
      };
      this.resetForm("formAudit");
    },
    /** 审核按钮操作 */
    handleAudit(shopId) {
      this.reset();
      this.formAudit.merchantId = shopId;
      this.open = true;
      this.title = "审核";
    },
    /** 提交按钮 */
    submitForm() {
      if (this.formAudit.shopState == null ) {
        this.$message.error("审核结果必选")
        return;
      }
      if (this.formAudit.merchantId != null) {
        handleAudit(this.formAudit).then(res => {
          if (res. code == 200) {
            this.$message.success("审核成功");
          } else {
            this.$message.error(res.msg)
          }
          this.open = false;
          this.init(this.formAudit.merchantId);
          console.log(res)
        }).catch(err => {
          console.log(err)
          this.$message.error("操作失败")
        })

      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  },
};
</script>

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