<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      class="popup"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after"> </template>
    </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: "700px",
      },
      modalData: {},
      settingId: "",
      form: {},
      fileList: [],
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modal.resetFields();
        });
      }
    },
  },
  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: (row) => {
          console.log(row);
          this.modalData = {
            ownerId: row.ownerId,
            title: "",
            module: row.module,
            type: 0,
            status: true,
            app: 1,
            img: "",
          };
          this.fileList = [];
          this.modalConfig.title = "添加轮播图";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "编辑轮播图";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.modalData = row;
      this.fileList = row.img.split(",").map((item) => {
        return {
          name: "轮播图",
          url: item,
        };
      });
    },
  },
  computed: {
    modalCols() {
      return [
        {
          label: "轮播图名称",
          prop: "title",
          type: "Input",
          required: true,
          maxlength: "30",
          rules: {
            required: true,
            message: "请输入轮播图名称",
            trigger: "blur",
          },
        },
        // {
        //   label: "分类",
        //   prop: "type",
        //   maxlength: "30",
        //   rules: {
        //     required: true,
        //     message: "请输入轮播图名称",
        //     trigger: "blur",
        //   },
        //   type: "jsx",
        //   render: () => {
        //     return (
        //       <el-select
        //         v-model={this.modalData.type}
        //         placeholder="请选择销售单位"
        //       >
        //         {[
        //           { label: "菜市场", value: 0 },
        //           {
        //             label: "云店",
        //             value: 1,
        //           },
        //         ].map((item) => {
        //           return (
        //             <el-option
        //               label={item.label}
        //               value={item.value}
        //             ></el-option>
        //           );
        //         })}
        //       </el-select>
        //     );
        //   },
        // },
        {
          label: "状态",
          prop: "status",
          maxlength: "30",
          type: "jsx",
          render: () => {
            return (
              <el-switch
                v-model={this.modalData.status}
                active-text="启用"
                inactive-text="禁用"
              />
            );
          },
        },
        {
          label: "应用",
          prop: "app",
          maxlength: "30",
          rules: {
            required: true,
            message: "请输入轮播图名称",
            trigger: "blur",
          },
          type: "jsx",
          render: () => {
            return (
              <el-select
                v-model={this.modalData.app}
                placeholder="请选择销售单位"
              >
                {[
                  { label: "用户", value: 1 },
                  {
                    label: "商家",
                    value: 2,
                  },
                  {
                    label: "专员",
                    value: 3,
                  },
                ].map((item) => {
                  return (
                    <el-option
                      label={item.label}
                      value={item.value}
                    ></el-option>
                  );
                })}
              </el-select>
            );
          },
        },
        {
          label: "轮播图",
          prop: "img",
          required: true,
          rules: {
            required: true,
            message: "请上传商品图片",
            trigger: "blur",
          },
          type: "jsx",
          render: () => {
            const handleAvatarSuccess = (res, file, fileList) => {
              console.log(res, fileList);
              this.modalData.img = fileList
                .map((item) => {
                  return item.response.data;
                })
                .join(",");
              console.log(this.modalData.img);
              this.$refs.modal.validate();
            };
            const handleRemove = (file, fileList) => {
              console.log(file, fileList);
              this.modalData.img = fileList
                .map((item) => {
                  return item.response.data;
                })
                .join(",");
            };
            return (
              <el-upload
                class="upload-demo"
                drag
                limit={3}
                action={this.$api.mer_admin.uploadFile()}
                {...{
                  props: {
                    "on-success": handleAvatarSuccess,
                    "on-remove": handleRemove,
                  },
                }}
                headers={{
                  token: "Bearer " + this.$cookie.get("token"),
                }}
                multiple={true}
                file-list={this.fileList}
                list-type="picture"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            );
          },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          submit: true,
          handle: () => {
            console.log(this.modalData);
            if (this.isAdd) {
              this.$api.mer_admin.bannerAdd(this.modalData).then((res) => {
                this.toggle();
                this.$emit("queryList");
              });
            } else {
              this.$api.mer_admin.bannerUpdate(this.modalData).then((res) => {
                this.toggle();
                this.$emit("queryList");
              });
            }
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
.popup ::v-deep .el-dialog__body {
  overflow-y: scroll !important;
  height: 65vh !important;
}
</style>