<template>
  <el-dialog v-model="dialogVisible" title="选择图片" width="50%">
    <el-container>
      <el-aside style="background-color: #fff; border-right: 1px solid #ccc" width="150px">
        <el-button @click="addtype">新增分类</el-button>
        <ul style="padding-left: 0; margin: 0">
          <li
            style="cursor: pointer; width: 90%; margin: 10px 0"
            v-for="item in options"
            :key="item.id"
            :class="[activedata == item.id ? 'activedata' : '']"
            @click="changeEvent(item.id)"
          >
            <div style="display: flex; align-items: center; justify-content: space-between">
              {{ item.name }}
              <div>
                <span
                  @click="edittype(item)"
                  v-if="activedata == item.id && item.isSystem != 1"
                  style="color: #999"
                >
                  修改
                </span>
                &nbsp;
                <span
                  @click="deletetype(item.id)"
                  v-if="activedata == item.id && item.isSystem != 1"
                  style="color: #999"
                >
                  删除
                </span>
                &nbsp;
              </div>
            </div>
          </li>
        </ul>
      </el-aside>
      <el-main>
        <imageComponent
          v-if="activedata"
          @onSelectImage="onSelectImage"
          @getList="getList"
          :activedata="activedata"
          :list="dataImages"
        ></imageComponent>
        <mypagination
          :total="total"
          v-if="activedata"
          @gopageEvent="handleCurrentChange"
        ></mypagination>
      </el-main>
    </el-container>
    <template #footer>
      <div style="text-align: center">
        <el-button type="success" @click="Confirm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
  <myDialog :title="title" width="20%" ref="myDialogRef" @Confirm="subitgood">
    <el-input v-model="typedata" placeholder="输入分类" />
  </myDialog>
</template>

<script>
import API from "./addImgconfig/gallery";
import API2 from "./addImgconfig/picture";
import myDialog from "./myDialog.vue";
import imageComponent from "./addImgconfig/imageComponent.vue";
import mypagination from "./addImgconfig/mypagination.vue";
export default {
  components: {
    imageComponent,
    mypagination,
    myDialog,
  },
  data() {
    return {
      dialogVisible: false,
      dialogTableVisibles: false,
      selectImage: [],

      files: [],
      dataImages: [],
      options: [],
      fileList: [],
      editId: "",
      // 新增分类
      typedata: "",
      showUpload: false,
      page: 1,
      total: 0,
      pageSize: 18,
      activedata: "",
      title: "新增分类",
    };
  },
  async mounted() {
    await this.getType();
    // this.getList();
  },
  methods: {
    async subitgood() {
      if (this.typedata) {
        let res = "";
        if (this.title == "新增分类") {
          res = await API.add({
            sort: "1",
            name: this.typedata,
          });
        } else {
          res = await API.update({
            sort: "1",
            name: this.typedata,
            id: this.editId,
          });
        }
        if (res.code == 200) {
          this.getType();
          ElMessage({
            type: "success",
            message: "成功",
          });
          this.$refs.myDialogRef.close();
          this.typedata = "";
        }
      }
    },
    changeEvent(id) {
      this.page = 1;
      this.pageSize = 18;
      this.activedata = id;
      this.getList();
    },
    handleCurrentChange(i) {
      this.page = i;
      this.getList();
    },
    Confirm() {
      this.dialogVisible = false;
      console.log(1111111111111, this.selectImage);
      this.$emit("successEvent", this.selectImage);
    },
    handleBeforeRemove(file, fileList) {
      let index = this.files.findIndex((ele) => ele.name == file.name);
      this.files.splice(index, 1);
    },
    handleSuccess(response, file, fileList) {
      this.files.push(file);
    },
    async deletetype(id) {
      ElMessageBox.confirm("删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await API.deleteByIds(id);
          if (res.code == 200) {
            ElMessage({
              type: "success",
              message: "成功",
            });
            this.getType();
          }
        })
        .catch(() => {});
    },
    addtype() {
      this.title = "新增分类";
      this.$refs.myDialogRef.open();
    },
    show() {
      this.dialogVisible = true;
    },
    edittype(item) {
      this.editId = item.id;
      this.typedata = item.name;
      this.title = "修改分类";
      this.$refs.myDialogRef.open();
    },

    async getList() {
      const res = await API2.getPage({
        pictureClassifyId: this.activedata,
        page: this.page,
        size: this.pageSize,
      });
      this.dataImages = res.records;
      this.total = res.totalRow;
    },
    async getType() {
      const res = await API.getList({});
      this.options = res;
      this.activedata = res[0].id;
      this.getList();
    },
    onSelectImage(d) {
      this.selectImage = [d];
    },
  },
};
</script>
<style scoped>
.activedata {
  color: #1890ff;
  /* background-color: #f6f7f8; */
}

.uplocation {
  cursor: pointer;
  /* position: absolute; */
  /* bottom: 20px; */
}
</style>
