<template>
  <div class="app-container">
    <div v-if="!isAddGoodsShow">
      <div class="mymain-container">
        <div class="btn-group clearfix">
          <div class="fl">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addClassification('add')">添加分类</el-button>
          </div>
        </div>

        <div class="table">
          <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
            <el-table-column align="center" label="分类主标题" prop="mainTitle"></el-table-column>
            <el-table-column align="center" label="分类副标题" prop="subTitle"></el-table-column>
            <el-table-column align="center" label="状态" prop="status" width="100">
              <template slot-scope="scope">
                {{ scope.row.status ? "开启" : "关闭" }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="排序" prop="sortNum" width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sortNum" size="small" class="sort-input" type="number" @change="changeSort(scope.row)" ></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建日期" prop="createTime" width="160"></el-table-column>
            <el-table-column align="center" label="操作" width="250">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="addClassification('edit', scope.row.goodsNewsCategoryId)">编辑</el-button>
                <el-button type="primary" size="mini" @click="setUp(scope.row)">配置</el-button>
                <el-popconfirm style="margin-left: 10px" :title="scope.row.status?'确定关闭吗?':'确定开启吗?'" @onConfirm="closeItem(scope.row)">
                  <el-button slot="reference" size="mini">{{ scope.row.status ? "关闭" : "开启" }}</el-button>
                </el-popconfirm>
                <el-popconfirm style="margin-left: 10px" title="确定删除吗？" @onConfirm="deleteItem(scope.row)">
                  <el-button slot="reference" size="mini" type="danger">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 新增编辑分类 -->
      <el-dialog :title="addFormType == 'add' ? '添加分类' : '编辑分类'" :visible.sync="addFormVisible" :show-close="false" width="40%" :close-on-click-modal="false">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="left" label-width="80px">
          <el-form-item label="主标题" prop="mainTitle">
            <el-input placeholder="请输入主标题" v-model="addForm.mainTitle" style="width: 250px" maxlength="4" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="副标题" prop="subTitle">
            <el-input placeholder="请输入副标题" v-model="addForm.subTitle" style="width: 250px" maxlength="6" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input placeholder="请输入排序" v-model="addForm.sort" style="width: 250px" type="number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAddForm">取 消</el-button>
          <el-button type="primary" @click="submitAddForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getModuleList,
  getNewclassify,
  addNewclassify,
  getNewclassifyDetail,
  editNewclassifyDetail,
  changeNewclassify,
  deleteNewclassify
} from "@/api/goods";
import { status } from 'nprogress';

export default {
  data() {
    return {
      // companyWechatId: "", // 企业微信id
      editId: "", // 商品新维度分类id
      pageNum: 1, // 页号
      pageSize: -1, // 页大小(-1不分页)
      isAddGoodsShow: false,
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      listTotal: 0, // 列表总数
      addFormVisible: false, // 添加/编辑分类
      addFormType: "add",
      addForm: {
        mainTitle: "", // 主标题
        subTitle: "", // 副标题
        sort: '',
      },
      addFormRules: {
        mainTitle: [
          { required: true, message: "请输入主标题", trigger: "blur" },
        ],
        subTitle: [
          { required: true, message: "请输入副标题", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getNewclassify();
  },

  methods: {
    // 分页获取商品新维度分类
    getNewclassify() {
      this.listLoading = true;
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getNewclassify(params).then((res) => {
        this.dataList = res.data.records;
        this.listLoading = false;
      });
    },

    // 添加分类
    addClassification(type, id) {
      this.addFormType = type;
      if (type == "add") {
        this.addFormVisible = true;
      } else {
        this.editId = id;
        getNewclassifyDetail({newsCategoryId: id}).then((res) => {
          this.addForm.mainTitle = res.data.mainTitle;
          this.addForm.subTitle = res.data.subTitle;
          this.addForm.sort = res.data.sortNum;
          this.addFormVisible = true;
        });
      }
    },

    // 提交分类
    submitAddForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.addFormType == "edit") {
            const params = {
              goodsNewsCategoryId: this.editId, // 商品新维度分类id
              mainTitle: this.addForm.mainTitle, // 分类主标题
              subTitle: this.addForm.subTitle, // 分类副标题
              sortNum: this.addForm.sort,
            };
            editNewclassifyDetail(params).then((res) => {
              this.$successMsg("编辑成功");
              this.getNewclassify();
              this.cancelAddForm();
            })
          } else {
            const params = {
              mainTitle: this.addForm.mainTitle,
              subTitle: this.addForm.subTitle,
              sortNum: this.addForm.sort,
            };
            addNewclassify(params).then((res) => {
              this.$successMsg("添加成功");
              this.getNewclassify();
              this.cancelAddForm();
            })
          }
        }
      });
    },

    // 取消 新增编辑分类
    cancelAddForm() {
      this.addFormVisible = false;
      this.$refs.addForm.resetFields();
      this.addForm.mainTitle = '';
      this.addForm.subTitle = '';
      this.addForm.sort = '';
    },

    // 关闭
    closeItem(item) {
      const status=!item.status
      const params = {
        goodsNewsCategoryId: item.goodsNewsCategoryId, // 商品新维度分类id
        status: status, // 状态 true:开启,false:关闭
      };
      changeNewclassify(params).then(res => {
        this.$successMsg();
        this.getNewclassify();
      })
    },

    // 删除
    deleteItem(item) {
      deleteNewclassify({
        goodsNewsCategoryId: item.goodsNewsCategoryId
      }).then(res => {
        this.$successMsg();
        this.getNewclassify();
      })
    },

    // 配置
    setUp(item) {
      this.$router.push({
        path: "/goods/newclassify_set",
        query: {
          item
        },
      });
    },

    changeSort(item) {
      const params = {
        goodsNewsCategoryId: item.goodsNewsCategoryId,
        sortNum: item.sortNum
      };
      editNewclassifyDetail(params).then((res) => {
        this.getNewclassify();
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.sort-input {
  width: 60px;
  ::v-deep input {
    text-align: center;
  }
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
::v-deep input[type='number'] {
  -moz-appearance: textfield;
}
</style>