<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="my-form"
    >
      <el-form-item label="商户名称" prop="posName">
        <el-input v-model="form.posName" placeholder="请输入商户名称" />
      </el-form-item>
      <el-form-item label="联系人" prop="linkMan">
        <el-input v-model="form.linkMan" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city" placeholder="请输入城市" />
      </el-form-item>
      <el-form-item label="地址信息" prop="address">
        <el-input
          type="textarea"
          v-model="form.address"
          placeholder="请输入地址信息"
          :rows="4"
        />
      </el-form-item>
      <el-form-item label="视频广告" v-if="form.videoPath">
        <div class="info-container">
          <video
            :src="form.videoPath"
            class="avatar"
            controls="controls"
          ></video>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="submitForm"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getShanghu, updateShanghu, addShanghu } from "@/api/netEwm/shanghu";
import { getPoster } from "@/api/netEwm/poster";
import { mapGetters } from "vuex";
import { getCode } from "@/api/login.js";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        posName: [
          { required: true, message: "商户名称不能为空", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
        ],
        linkMan: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        address: [
          { required: true, message: "地址信息不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (!this.shanghuId) {
      this.$modal.msgError("您不是商家！");
      return;
    }
    this.getInfo();
  },
  computed: {
    ...mapGetters(["shanghuId"]),
  },
  methods: {
    getInfo() {
      getShanghu(this.shanghuId).then((response) => {
        if (response.data.posterId) {
          getPoster(response.data.posterId).then((info) => {
            this.form = {
              ...response.data,
              ...{ videoPath: this.baseUrl + info.data.videoPath },
            };
          });
        } else {
          this.form = response.data;
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (!this.shanghuId) return;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateShanghu(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-form {
  margin: auto;
  width: 1000px;
}
</style>
