// 添加/修改
<template>
  <el-dialog
    :title="isEdit ? '编辑小程序容器授权' : '添加小程序容器授权'"
    width="800px"
    :visible.sync="visible"
    :destroy-on-close="false"
    :close-on-click-modal="false"
    :center="true"
  >
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      label-position="left"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备id" prop="productId" required>
            <el-input v-model="form.productId" placeholder="请输入设备id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备sn" prop="deviceId" required>
            <el-input v-model="form.deviceId" placeholder="请输入设备sn" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="appid" prop="appId" required>
            <el-input v-model="form.appId" placeholder="请输入appid" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="abcp_appid" prop="hostAppId" required>
            <el-input v-model="form.hostAppId" placeholder="请输入abcp_appid" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="首页图片" prop="homePageUrl">
            <el-upload
              name="file"
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :http-request="
                (event) => {
                  doUploadAvatar(event, 'homePageUrl');
                }
              "
              :before-upload="beforeAvatarUpload"
              :auto-upload="true"
              accept="image/png,image/gif,image/jpg,image/jpeg"
            >
              <img
                v-if="!form.homePageUrl"
                class="upload-img"
                src="../../../assets/K8-img.png"
                alt=""
              />
              <div v-else class="upload-img">
                <img :src="form.homePageUrl" />
                <span class="del-img" @click.stop="handleRemove('homePageUrl')"
                  >x</span
                >
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="启动页" prop="startPageUrl">
            <el-upload
              name="file"
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :http-request="
                (event) => {
                  doUploadAvatar(event, 'startPageUrl');
                }
              "
              :before-upload="beforeAvatarUpload"
              :auto-upload="true"
              accept="image/png,image/gif,image/jpg,image/jpeg"
            >
              <img
                v-if="!form.startPageUrl"
                class="upload-img"
                src="../../../assets/K8-img.png"
                alt=""
              />
              <div v-else class="upload-img">
                <img :src="form.startPageUrl" />
                <span class="del-img" @click.stop="handleRemove('startPageUrl')"
                  >x</span
                >
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" :loading="submitLoading" @click="submit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setTitleList } from "@/api/K8ContainerList";
import { pictureLocal } from "@/api/ordinary_user";
export default {
  data() {
    return {
      form: {
        productId: "",
        deviceId: "",
        appId: "",
        hostAppId: "",
        homePageUrl: "",
        startPageUrl: "",
      },
      rules: {
        productId: [{ required: true, message: "不能为空!", trigger: "blur" }],
        deviceId: [{ required: true, message: "不能为空!", trigger: "blur" }],
        appId: [{ required: true, message: "不能为空!", trigger: "blur" }],
        hostAppId: [{ required: true, message: "不能为空!", trigger: "blur" }],
      },
      visible: false,
      submitLoading: false,
      isEdit: false,
    };
  },
  created() {},
  methods: {
    open(obj) {
      this.visible = true;
      this.submitLoading = false;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
        if (obj && Object.keys(obj).length > 0) {
          this.form = JSON.parse(JSON.stringify(obj));
          this.isEdit = true;
        } else {
          this.isEdit = false;
        }
      });
    },
    submit(e) {
      console.log(this.form);
      if (this.form.homePageUrl == "" || this.form.homePageUrl == null) {
        this.form.homePageUrl =
          "https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/20231211/450472580353097728.png";
      }
      if (this.form.startPageUrl == "" || this.form.startPageUrl == null) {
        this.form.startPageUrl =
          "https://tx.hz-hanghui.com:8088/yx-fyzd/file/upload/imagesnew/20231211/450472580353097728.png";
      }
      e.preventDefault();
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        if (this.submitLoading) {
          return;
        }
        this.submitLoading = true;
        const res = {
          productId: this.form.productId,
          deviceId: this.form.deviceId,
          appId: this.form.appId,
          hostAppId: this.form.hostAppId,
          homePageUrl: this.form.homePageUrl,
          startPageUrl: this.form.startPageUrl,
          id: this.isEdit ? this.form.id : undefined,
        };
        await setTitleList(res);
        this.visible = false;
        this.$emit("success");
        this.submitLoading = false;
      });
    },
    handleRemove(type) {
      if (type) {
        this.form[type] = null;
      }
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
        return;
      }
    },
    doUploadAvatar(obj, type) {
      this.listLoading = true;
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        this.value = res.data;
        this.listLoading = false;
        this.$set(this.form, type, res.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-select {
  width: 100%;
}
.avatar-uploader .upload-default {
  border: 1px dashed #d9d9d9;
  border-radius: 0;
  cursor: pointer;
  width: 70px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-default .avatar-uploader-icon {
  color: #8c939d;
  width: 22px;
  height: 18px;
  font-size: 20px;
  margin-top: 24px;
}
.upload-default .el-upload__text {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #ced3e3;
}
.upload-img {
  width: 63px;
  height: 91px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    // border-radius: 12px;
  }
  .del-img {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #83878f;
    color: #fff;
    position: absolute;
    top: -12px;
    right: -10px;
    border-radius: 48%;
    line-height: 18px;
  }
}
</style>
