<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="190px"
      class="popup"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "编辑品牌",
        show: false,
        width: "60%",
      },
      modalData: {},
      value1: "",
      ProductData: {},
      fileList: [],
    };
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: () => {
          this.$nextTick(() => {
            this.modalData = {};
          });
          this.isAdd = true;
        },
        update: (row) => {
          this.fileList = [];
          this.modalData = JSON.parse(JSON.stringify(row));
          console.log(row);

          this.isAdd = false;
        },
      };
    },
    init(row) {},
  },
  computed: {
    modalCols() {
      return [
        {
          label: "品牌名称",
          prop: "name",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入品牌名称" },
        },
        {
          label: "品牌ID",
          prop: "id",
          type: "Input",
          disabled: true,
          width: "300px",
          rules: { required: true, message: "请输入品牌ID" },
        },
        {
          label: "品牌LOGO",
          prop: "logo",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入品牌宣传语" },
          type: "jsx",
          render: () => {
            const handleChange = (file, fileList) => {
              // console.log(fileList);
            };
            const handleAvatarSuccess = (res, file, fileList) => {
              this.modalData.logo = res.data;
              console.log(res, fileList);
            };
            const handleRemove = (file, fileList) => {
              console.log(file, fileList);
            };
            return (
              <div style="display: flex;">
                <el-upload
                  class="upload-demo"
                  action={this.$api.mer_admin.uploadFile()}
                  {...{
                    props: {
                      "on-change": handleChange,
                      "on-success": handleAvatarSuccess,
                      "on-remove": handleRemove,
                    },
                  }}
                  headers={{
                    token: "Bearer " + this.$cookie.get("token"),
                  }}
                  multiple={true}
                  file-list={this.fileList}
                  // list-type="picture"
                >
                  <el-button size="small" type="primary">
                    <i class="el-icon-upload"></i>点击上传
                  </el-button>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
                <div style="margin-left:20px">
                  <el-image
                    style="width: 100px; height: 100px"
                    src={this.modalData.logo}
                    preview-src-list={[this.modalData.logo]}
                  ></el-image>
                </div>
              </div>
            );
          },
        },
        {
          label: "品牌首页：",
          prop: "status",
          type: "Input",
          width: "300px",
          type: "jsx",
          render: () => {
            return (
              <el-switch
                active-value="1"
                inactive-value="0"
                v-model={this.modalData.homepageStatus}
                active-text="开启"
                inactive-text="禁用"
              ></el-switch>
            );
          },
        },
        {
          label: "宣传语",
          prop: "tagline",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入品牌宣传语" },
        },
        {
          label: "首页背景",
          prop: "background",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请添加背景首页" },
          type: "jsx",
          render: () => {
            const handleChange = (file, fileList) => {
              // console.log(fileList);
            };
            const handleAvatarSuccess = (res, file, fileList) => {
              this.modalData.background = res.data;
            };
            const handleRemove = (file, fileList) => {
              console.log(file, fileList);
            };
            return (
              <div style="display: flex;">
                <el-upload
                  class="upload-demo"
                  action={this.$api.mer_admin.uploadFile()}
                  {...{
                    props: {
                      "on-change": handleChange,
                      "on-success": handleAvatarSuccess,
                      "on-remove": handleRemove,
                    },
                  }}
                  headers={{
                    token: "Bearer " + this.$cookie.get("token"),
                  }}
                  multiple={true}
                  file-list={this.fileList}
                  // list-type="picture"
                >
                  <el-button size="small" type="primary">
                    <i class="el-icon-upload"></i>点击上传
                  </el-button>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
                <div style="margin-left:20px">
                  <el-image
                    style="width: 100px; height: 100px"
                    src={this.modalData.background}
                    preview-src-list={[this.modalData.background]}
                  ></el-image>
                </div>
              </div>
            );
          },
        },
        {
          label: "视频",
          prop: "video",
          type: "Input",
          width: "300px",
          type: "jsx",
          rules: { required: true, message: "请添加视频" },
          render: () => {
            const handleChange = (file, fileList) => {
              // console.log(fileList);
            };
            const handleAvatarSuccess = (res, file, fileList) => {
              this.modalData.video = res.data;
              console.log(res, fileList);
            };
            const handleRemove = (file, fileList) => {
              console.log(file, fileList);
            };
            return (
              <div style="display: flex;">
                <el-upload
                  class="upload-demo"
                  action={this.$api.mer_admin.uploadFile()}
                  {...{
                    props: {
                      "on-change": handleChange,
                      "on-success": handleAvatarSuccess,
                      "on-remove": handleRemove,
                    },
                  }}
                  headers={{
                    token: "Bearer " + this.$cookie.get("token"),
                  }}
                  multiple={true}
                  file-list={this.fileList}
                  // list-type="picture"
                >
                  <el-button size="small" type="primary">
                    <i class="el-icon-upload"></i>点击上传
                  </el-button>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
                <div style="margin-left:20px">
                  <video
                    id="videoPlayer"
                    width="200px"
                    height="100px"
                    object-fit="fill"
                    muted="muted"
                    loop
                    controls
                  >
                    <source src={this.modalData.video} type="video/mp4" />
                  </video>
                </div>
              </div>
            );
          },
        },
        {
          label: "联系电话（仅用户可见）",
          prop: "contactPhone",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入联系电话" },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认",
          type: "primary",
          loading: this.isLoading,
          submit: true,
          handle: () => {
            console.log(this.modalData);
            this.$api.mer_admin
              .editBrandInfo(this.modalData)
              .then((res) => {
                console.log(res);
                this.toggle();
                this.$emit("getList");
              })
              .catch((err) => {
                console.log(err);
              });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.popup ::v-deep .el-dialog__body {
  overflow-y: scroll !important;
  height: 65vh !important;
}
</style>