<template>
  <div class="app-container">
    <div class="mymain-container">
      <div class="btn-group clearfix">
        <div class="fl">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addOrEditParent('add')"
            >添加分类</el-button
          >
        </div>
        <div class="fr">
          <el-input
            placeholder="请输入分类名称进行搜索"
            v-model="screenForm.keyword"
            size="small"
            style="width: 240px"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              size="small"
              @click="getListByScreen"
            ></el-button>
          </el-input>
        </div>
      </div>

      <div class="table">
        <el-table
          :data="dataList"
          row-key="categoryId"
          border
          default-expand-all
          :tree-props="{ children: 'children' }"
        >
          <el-table-column
            prop="name"
            label="分类名称"
            min-width="150"
          ></el-table-column>
          <el-table-column
            align="center"
            label="分类图片"
            prop="imgUrl"
            width="80"
          >
            <template slot-scope="scope">
              <el-image
                style="
                  width: 40px;
                  height: 40px;
                  display: block;
                  margin: 0 auto;
                "
                :src="$showImgUrl(scope.row.imgUrl)"
                :preview-src-list="[$showImgUrl(scope.row.imgUrl)]"
                fit="cover"
              >
                <div slot="error" style="height: 100%; font-size: 40px">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            min-width="160"
          ></el-table-column>
          <!-- <el-table-column align="center" prop="goodsNum" label="商品数"></el-table-column> -->
          <el-table-column
            align="center"
            prop="sortNum"
            label="排序"
          ></el-table-column>
          <!-- <el-table-column
            align="center"
            prop="companyName"
            label="商户"
            min-width="120"
          ></el-table-column> -->
          <el-table-column align="center" label="状态" class-name="status-col">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status ? 'success' : 'danger'">{{
                scope.row.status ? "显示" : "隐藏"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="right" label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                v-if="scope.row.level == 1"
                @click="addOrEditChild('add', scope.row.categoryId)"
              ></el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                v-if="scope.row.level == 1"
                @click="addOrEditParent('edit', scope.row.categoryId)"
              ></el-button>
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                v-if="scope.row.level == 2"
                @click="addOrEditChild('edit', scope.row.categoryId)"
              ></el-button>
              <el-popconfirm
                style="margin-left: 10px"
                title="确定删除吗？"
                @confirm="handleDelete(scope.row.categoryId)"
              >
                <el-button
                  slot="reference"
                  size="mini"
                  icon="el-icon-delete"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增编辑 一级分类 -->
    <el-dialog
      :title="addParentFormType == 'add' ? '添加一级分类' : '编辑一级分类'"
      :visible.sync="addParentFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addParentForm"
        :model="addParentForm"
        :rules="addParentFormRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="一级分类" prop="oneClassify">
          <el-input
            type="text"
            placeholder="请输入一级分类名称"
            v-model="addParentForm.oneClassify"
            maxlength="10"
            show-word-limit
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类图片" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            style="height: 122px"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
          >
            <img
              v-if="addParentForm.imgUrl"
              :src="$showImgUrl(addParentForm.imgUrl)"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="税务编号" prop="taxNumber">
          <el-input
            placeholder="请输入税务编号"
            v-model="addParentForm.taxNumber"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="税率" prop="taxPercent">
          <el-input
            placeholder="请输入税率"
            v-model="addParentForm.taxPercent"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="addParentForm.status">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            placeholder="请输入排序"
            v-model.number="addParentForm.sort"
            style="width: 250px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddParentForm">取 消</el-button>
        <el-button type="primary" @click="submitAddParentForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增编辑 二级分类 -->
    <el-dialog
      :title="addChildFormType == 'add' ? '添加二级分类' : '编辑二级分类'"
      :visible.sync="addChildFormVisible"
      :show-close="false"
      width="40%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addChildForm"
        :model="addChildForm"
        :rules="addChildFormRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="一级分类" prop="oneClassify">
          <el-select
            v-model="addChildForm.oneClassify"
            placeholder="请选择一级分类"
            disabled
            style="width: 250px"
          >
            <el-option
              :label="item.name"
              :value="item.categoryId"
              v-for="(item, index) in classifyList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="twoClassify">
          <el-input
            type="text"
            placeholder="请输入二级分类名称"
            v-model="addChildForm.twoClassify"
            maxlength="10"
            show-word-limit
            style="width: 250px"
          ></el-input>
        </el-form-item>

        <el-form-item label="工单大类" prop="orderType">
          <el-select
            v-model="addChildForm.orderType"
            placeholder="请选择工单大类"
            style="width: 250px"
            @change="changeOrderType()"
          >
            <el-option
              :label="item.name"
              :value="item.number"
              v-for="(item, index) in orderMainType"
              :key="index"
            >
              <span style="color: #8492a6">{{ item.number }}</span>
              <span style="margin-left: 10px">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工单小类" prop="smallType">
          <el-select
            v-model="addChildForm.smallType"
            placeholder="请选择工单小类"
            style="width: 250px"
            :disabled="!addChildForm.orderType"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in orderSmallType"
              :key="index"
            >
              <span style="color: #8492a6">{{ item.id }}</span>
              <span style="margin-left: 10px">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工单类型" prop="workOrderType">
          <el-radio-group v-model="addChildForm.workOrderType">
            <el-radio :label="'INSTALL'">安装</el-radio>
            <el-radio :label="'REPAIR'">维修</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="分类图片" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            style="height: 122px"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
          >
            <img
              v-if="addChildForm.imgUrl"
              :src="$showImgUrl(addChildForm.imgUrl)"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="税务编号" prop="taxNumber">
          <el-input
            placeholder="请输入税务编号"
            v-model="addChildForm.taxNumber"
            style="width: 250px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="税率" prop="taxPercent">
          <el-input
            placeholder="请输入税率"
            v-model="addChildForm.taxPercent"
            style="width: 250px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="addChildForm.status">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input
            placeholder="请输入排序"
            v-model.number="addChildForm.sort"
            style="width: 250px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAddChildForm">取 消</el-button>
        <el-button type="primary" @click="submitAddChildForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  getClassifyList,
  addClassify,
  editClassify,
  deleteClassify,
  getClassifyDetail,
  getSmallType,
} from "@/api/goods";
import { ORDER_MAIN_TYPE } from "@/utils/select_data";

export default {
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { "x-token": getToken() },

      dataList: [], // 列表数据
      listLoading: true, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        keyword: "", // 关键词
      },

      editParentId: null,
      addParentFormType: "add",
      addParentFormVisible: false,
      addParentForm: {
        oneClassify: "",
        twoClassify: "",
        imgUrl: "",
        taxNumber: "",
        taxPercent: "",
        status: true,
        sort: 0,
      },
      addParentFormRules: {
        oneClassify: [
          { required: true, message: "请填写一级分类名称", trigger: "blur" },
        ],
        imgUrl: [
          { required: true, message: "请上传分类图片", trigger: "change" },
        ],
      },

      editChildId: null,
      addChildFormType: "add",
      addChildFormVisible: false,
      addChildForm: {
        oneClassify: "",
        twoClassify: "",
        orderType: "",
        smallType: "",
        workOrderType: "REPAIR",
        imgUrl: "",
        taxNumber: "",
        taxPercent: "",
        status: true,
        sort: 0,
      },
      addChildFormRules: {
        oneClassify: [
          { required: true, message: "请选择一级分类", trigger: "change" },
        ],
        twoClassify: [
          { required: true, message: "请填写二级分类", trigger: "blur" },
        ],
        workOrderType: [
          { required: true, message: "请选择工单类型", trigger: "change" },
        ],
        imgUrl: [
          { required: true, message: "请上传分类图片", trigger: "change" },
        ],
      },

      classifyList: [],

      orderMainType: ORDER_MAIN_TYPE,
      orderSmallType: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;

      let params = {
        name: this.screenForm.keyword,
      };

      getClassifyList(params).then((res) => {
        this.dataList = res.data;
      });
    },

    // 筛选后重新获取列表
    getListByScreen() {
      this.currentPage = 1;
      this.getList();
    },

    // 打开 新增编辑 一级分类
    addOrEditParent(type, cid) {
      this.addParentFormType = type;
      this.addParentFormVisible = true;
      if (type == "edit") {
        this.editParentId = cid;
        getClassifyDetail({ categoryId: cid }).then((res) => {
          this.addParentForm = {
            oneClassify: res.data.name,
            status: res.data.status,
            imgUrl: res.data.imgUrl,
            taxNumber: res.data.taxNumber,
            taxPercent: res.data.taxPercent,
            sort: res.data.sortNum,
          };
        });
      }
    },

    // 取消 新增编辑 一级分类
    cancelAddParentForm() {
      this.addParentFormVisible = false;
      this.$refs.addParentForm.resetFields();
    },

    // 提交 一级分类
    submitAddParentForm() {
      this.$refs.addParentForm.validate((valid) => {
        if (valid) {
          let params = {
            name: this.addParentForm.oneClassify,
            imgUrl: this.addParentForm.imgUrl,
            taxNumber: this.addParentForm.taxNumber,
            taxPercent: this.addParentForm.taxPercent,
            status: this.addParentForm.status,
            sortNum: this.addParentForm.sort,
          };
          if (this.addParentFormType == "edit") {
            params.categoryId = this.editParentId;
            editClassify(params).then((res) => {
              this.cancelAddParentForm();
              this.getList();
              this.$successMsg("编辑成功");
            });
          } else {
            addClassify(params).then((res) => {
              this.cancelAddParentForm();
              this.getList();
              this.$successMsg("添加成功");
            });
          }
        }
      });
    },

    // 改变大类
    changeOrderType() {
      this.addChildForm.smallType = "";
      this.getSmallType();
    },

    getSmallType() {
      getSmallType({
        mainNumber: this.addChildForm.orderType,
        categoryId: this.addChildForm.oneClassify,
      }).then((res) => {
        this.orderSmallType = res.data;
      });
    },

    // 打开 新增编辑 二级分类
    addOrEditChild(type, cid) {
      this.addChildFormType = type;
      this.addChildFormVisible = true;
      getClassifyList({ name: "" }).then((res) => {
        this.classifyList = res.data;
      });

      if (type == "add") {
        this.addChildForm.oneClassify = cid;
        let item =
          this.dataList[this.$findElem(this.dataList, "categoryId", cid)];
        this.addChildForm.taxNumber = item.taxNumber;
        this.addChildForm.taxPercent = item.taxPercent;
      }

      if (type == "edit") {
        this.editChildId = cid;
        getClassifyDetail({ categoryId: cid }).then((res) => {
          this.addChildForm = {
            oneClassify: res.data.parentId,
            twoClassify: res.data.name,
            orderType: Number(res.data.mainNumber),
            smallType: Number(res.data.smallNumber),
            workOrderType: res.data.workOrderType,
            imgUrl: res.data.imgUrl,
            taxNumber: res.data.taxNumber,
            taxPercent: res.data.taxPercent,
            status: res.data.status,
            sort: res.data.sortNum,
          };
          this.getSmallType();
        });
      }
    },

    // 取消 新增编辑 二级分类
    cancelAddChildForm() {
      this.addChildFormVisible = false;
      this.$refs.addChildForm.resetFields();
    },

    // 提交 二级分类
    submitAddChildForm() {
      this.$refs.addChildForm.validate((valid) => {
        if (valid) {
          let index = this.$findElem(
            ORDER_MAIN_TYPE,
            "number",
            this.addChildForm.orderType
          );
          let mainName = index >= 0 ? ORDER_MAIN_TYPE[index].name : "";

          let index2 = this.$findElem(
            this.orderSmallType,
            "id",
            this.addChildForm.smallType
          );
          let smallName = index2 >= 0 ? this.orderSmallType[index2].name : "";

          let params = {};
          if (this.addChildFormType == "edit") {
            params = {
              categoryId: this.editChildId,
              name: this.addChildForm.twoClassify,
              mainNumber: this.addChildForm.orderType || "",
              mainName: mainName,
              smallNumber: this.addChildForm.smallType || "",
              smallName: smallName,
              workOrderType: this.addChildForm.workOrderType,
              imgUrl: this.addChildForm.imgUrl,
              taxNumber: this.addChildForm.taxNumber,
              taxPercent: this.addChildForm.taxPercent,
              status: this.addChildForm.status,
              sortNum: this.addChildForm.sort,
            };
            editClassify(params).then((res) => {
              this.cancelAddChildForm();
              this.getList();
              this.$successMsg("编辑成功");
            });
          } else {
            params = {
              children: [
                {
                  parentId: this.addChildForm.oneClassify,
                  name: this.addChildForm.twoClassify,
                  mainNumber: this.addChildForm.orderType || "",
                  mainName: mainName,
                  imgUrl: this.addChildForm.imgUrl,
                  taxNumber: this.addChildForm.taxNumber,
                  taxPercent: this.addChildForm.taxPercent,
                  status: this.addChildForm.status,
                  sortNum: this.addChildForm.sort,
                },
              ],
            };
            addClassify(params).then((res) => {
              this.cancelAddChildForm();
              this.getList();
              this.$successMsg("添加成功");
            });
          }
        }
      });
    },

    // 操作 - 删除
    handleDelete(id) {
      deleteClassify({ categoryId: id }).then((res) => {
        this.getList();
        this.$successMsg();
      });
    },

    uploadSuccess(res, file, index) {
      if (this.addParentFormVisible) {
        this.addParentForm.imgUrl = res.data.url;
      } else {
        this.addChildForm.imgUrl = res.data.url;
      }
    },

    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["jpg", "jpeg", "png", "gif"];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg("只支持上传jpg/jpeg/png/gif文件!");
        return false;
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>

<style lang="scss">
.el-image-viewer__wrapper .el-icon-circle-close {
  color: #ffffff !important;
  font-size: 60px;
}
.el-table__row.expanded {
  background: #f5f5f5;
}

th:first-child,
th:last-child {
  text-align: center !important;
}
</style>
