<template>
  <div>
    <div class="search-wrapper">
      <el-form
        :inline="true"
        :model="searchForm"
        class="search_form"
        style="text-align: left"
      >
        <el-form-item label="类型名称">
          <el-input
            clearable
            v-model="searchForm.name"
            placeholder="请输入类型名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属菜单">
          <el-select
            v-model="searchForm.menuId"
            placeholder="请选择所属菜单"
            clearable
            size="medium"
            @change="init"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              v-for="item in menuList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="addHandle">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrapper">
      <table-template
        :tableData="tableData"
        :tableColumns="tableColumns"
        :loading="loading"
        :pagination="pagination"
        @Jump="jumpPage"
      >
        <el-table-column slot="iconUrl" label="图标" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 30px; height: 30px"
              :src="scope.row.iconUrl"
              :preview-src-list="[scope.row.iconUrl]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column slot="delFlag" label="启用状态" align="center">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.delFlag == 0 || scope.row.delFlag == 1"
              :type="
                scope.row.delFlag == 1
                  ? 'danger'
                  : scope.row.delFlag == 0
                  ? 'success'
                  : ''
              "
              >{{ scope.row.delFlag == 1 ? "禁用" : "启用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="350" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="btn"
              round
              @click="view(scope.row)"
              >编辑</el-button
            >
            <el-button
              @click="delFlagHandle(scope.row)"
              :type="scope.row.delFlag == 0 ? 'warning' : 'success'"
              size="mini"
              round
              slot="reference"
              >{{ scope.row.delFlag == 0 ? "禁用" : "启用" }}
            </el-button>
          </template>
        </el-table-column>
      </table-template>
    </div>

    <el-dialog
      :title="type == 'add' ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="dataForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="dataForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属类型" prop="menuId">
          <el-select
            v-model="dataForm.menuId"
            placeholder="请选择类型"
            clearable
            size="medium"
          >
            <el-option
              v-for="item in menuList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="dataForm.sort" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="图标" prop="iconUrl">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="#"
            :http-request="upload"
          >
            <img
              v-if="dataForm.iconUrl"
              :src="dataForm.iconUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategory,
  shopMenu,
  enableCategory,
  editCategory,
  addCategory,
  iconUpload,
} from "@/api/livingCircle";
import TableTemplate from "@/components/Table";

export default {
  components: { TableTemplate },

  data() {
    return {
      type: "add",
      searchForm: {},
      menuList: [],
      loading: false,
      tableData: [],
      tableColumns: [
        {
          key: "name",
          label: "类型名称",
        },
        {
          key: "menuName",
          label: "所属菜单",
        },
        {
          key: "createTime",
          label: "创建时间",
        },
        {
          key: "iconUrl",
          label: "图标",
          type: "slot",
        },
        {
          key: "delFlag",
          label: "启用状态",
          type: "slot",
        },
        {
          key: "sort",
          label: "排序",
        },
      ],
      pagination: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      rules: {
        name: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
        sort: [{ required: true, message: "请输入类型排序", trigger: "blur" }],
        menuId: [
          { required: true, message: "请输入所属类型", trigger: "blur" },
        ],
        iconUrl: [
          { required: true, message: "请输入类型图标", trigger: "blur" },
        ],
      },
      dataForm: {
        name: "",
        sort: 1,
        iconUrl: "",
        iconUrl1: "",
        menuId: "",
        id: "",
      },
      dialogVisible: false,
    };
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.dataForm = {
          name: "",
          sort: "",
          iconUrl: "",
          iconUrl1: "",
          menuId: "",
          id: "",
        };
      }
    },
  },
  created() {
    this.getMenu();
    this.init();
  },
  methods: {
    getMenu() {
      shopMenu().then((res) => {
        this.menuList = res.data;
      });
    },

    upload(file) {
      this.dataForm.iconUrl = URL.createObjectURL(file.file);
      iconUpload(file.file).then((res) => {
        if (res.code == 200) {
          this.dataForm.iconUrl1 = res.data;
          this.$message.success("上传成功");
        } else {
          this.$message.warning(res.msg || "上传失败");
        }
      });
    },

    init() {
      let params = {
        menuId: this.searchForm.menuId,
        name: this.searchForm.name,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
      };
      getCategory(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data?.list ? res.data.list : [];
          this.pagination.total = res.data?.total;
        } else {
          this.$message.warning(res.msg || "查询列表失败");
        }
      });
    },
    delFlagHandle(row) {
      enableCategory({
        id: row.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.init();
        } else {
          this.$message.warning(res.msg || "操作失败");
        }
      });
    },
    onSearch() {
      this.pagination.currentPage = 1;
      this.init();
    },
    jumpPage() {
      this.init();
    },
    view(row) {
      this.type = "edit";
      this.dialogVisible = true;
      this.dataForm.sort = row.sort;
      this.dataForm.name = row.name;
      this.dataForm.iconUrl = row.iconUrl;
      this.dataForm.menuId = row.menuId;
      this.dataForm.id = row.id;
    },
    confirmHandle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.dataForm.id) {
            let params = {
              id: this.dataForm.id,
              name: this.dataForm.name,
              sort: this.dataForm.sort,
              iconUrl: this.dataForm.iconUrl1,
              menuId: this.dataForm.menuId,
            };
            editCategory(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("编辑成功");
                this.dialogVisible = false;
                this.init();
              } else {
                this.$message.warning(res.msg || "编辑失败");
              }
            });
          } else {
            let params = {
              name: this.dataForm.name,
              sort: this.dataForm.sort,
              iconUrl: this.dataForm.iconUrl1,
              menuId: this.dataForm.menuId,
            };
            addCategory(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.init();
              } else {
                this.$message.warning(res.msg || "新增失败");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    addHandle() {
      this.type = "add";
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';
.btn{
    margin-right 10px
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
