<template>
  <div class="sort pagePadding">
    <div
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <el-row :gutter="10">
        <el-col :span="24" style="padding: 0 0 18px 0">
          <el-col :span="4">
            <el-select
              v-model="parmValue.status"
              filterable
              clearable
              :size="searchSize"
              placeholder="请选择状态"
              style="width: 100%"
            >
              <el-option
                v-for="item in statusList"
                :key="'status' + item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-input
              :size="searchSize"
              v-model="parmValue.cat_name"
              :maxlength="40"
              placeholder="分类名称"
            ></el-input>
          </el-col>
          <el-col :span="3" style="width: 152px">
            <el-button
              type="primary"
              :size="searchSize"
              @click="searchList"
              icon="el-icon-search"
            ></el-button>
            <el-button type="warning"  v-if="powers.some((item) => item == '024')" :size="searchSize" @click="restSearch">
              重置
            </el-button>
          </el-col>
          <el-col :span="3" style="width: 195px; float: right">
            <el-button
             v-if="powers.some((item) => item == '002')"
              type="primary"
              :size="searchSize"
              style="float: right; margin-left: 5px"
              @click="searchList"
            >
              刷新
            </el-button>
            <el-button
             v-if="powers.some((item) => item == '003')"
              type="success"
              :size="searchSize"
              style="float: right"
              @click="openModal('add', false, false)"
            >
              添加
            </el-button>
          </el-col>
        </el-col>
      </el-row>
      <treeTable
        v-loading="loading"
        :data="tableData"
        :columns="columns"
        @again="again"
        @statusConfirm="statusConfirm"
        @openModal="openModal"
        @setNewProfit="setNewProfit"
      ></treeTable>
      <div
        class="Pagination"
        style="text-align: right; margin-top: 10px"
        v-show="count > 0"
      >
        <el-pagination
          :size="searchSize"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="parmValue.page"
          :page-sizes="[10, 15, 20, 30, 40]"
          :page-size="parmValue.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <add-edit
        :showModel="showModel"
        :id="modelId"
        :isDetail="isDetail"
        :isApproval="approval"
        @refresh="searchList"
        @cancel="showModel = false"
      ></add-edit>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import statusList from "@/assets/js/statusList";
import mixinPage from "@/mixins/elPaginationHandle";
import asyncRequest from "@/apis/service/goodStore/sort";
import addEdit from "./addEdit";
import { mapGetters } from "vuex";
import treeTable from "@/components/tree-table/index";
export default {
  name: "sort",
  data() {
    return {
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
          show: true,
        },
        {
          label: "商品规格",
          prop: "spec",
          show: true,
        },
        {
          label: "预算>成本(%)",
          prop: "in_rate",
          show: false,
        },
        {
          label: "成本>售价(%)",
          prop: "out_rate",
          show: false,
        },
        {
          label: "最低毛利(%)",
          prop: "low_rate",
          show: false,
        },
        {
          label: "单品修改下限(%)",
          prop: "rate",
          show: false,
        },

        {
          label: "审核状态",
          prop: "ex_status",
          show: true,
        },
        {
          label: "状态",
          prop: "status",
          show: true,
        },
        {
          label: "创建时间",
          prop: "addtime",
          show: true,
        },
        {
          label: "操作",
          prop: "desc",
          show: true,
        },
      ],
      statusList: statusList,
      loading: true,
      showModel: false,
      approval: false,
      isDetail: false,
      modelId: 0,
      parmValue: {
        status: "", //状态
        cat_name: "", // 分类名称
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
      count: 0, // 总条数
      tableData: [],
    };
  },
  mixins: [mixinPage],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find((item) => item.menu_route == "sort") ||
        {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  mounted() {
    this.searchList();
  },
  components: {
    addEdit,
    treeTable,
  },
  methods: {
    restSearch() {
      this.parmValue = {
        status: "", //状态
        cat_name: "", // 分类名称
        page: 1, // 页码
        size: 10, // 每页显示条数
      };
      this.searchList();
    },
    openModal(id, isDetail, approval) {
      this.showModel = true;
      this.modelId = id;
      this.isDetail = isDetail;
      this.approval = approval;
      console.log(this.modelId, this.isDetail, this.approval, this.showModel);
    },
    async setNewProfit(e) {
      console.log(e);
      // let edit = true;
      await this.$confirm(
        "毛利率修改会在次日零点生效！",
        "确定要修改毛利率？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          let res = await asyncRequest.catarateadd(e);
          if (res.code === 0) {
            this.$notify.success({
              title: "毛利率修改成功！",
              message: "毛利率修改会在次日零点生效!",
            });
            this.searchList();
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async deleteById(id) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.delete({ id });
          if (res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList();
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
    async again(id) {
      await this.$confirm("确定要提交审核？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await asyncRequest.again({ id: id });
          if (res.code === 0) {
            this.$notify.success({
              title: "提交成功",
              message: "",
            });
            this.searchList();
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },

    async searchList() {
      this.loading = true;
      let res = await asyncRequest.list(this.parmValue);
      if (res.code === 0 && res.data) {
        this.tableData = [];
        let list = res.data.list;
        list = list.map((v1) => {
          v1 = this.dealwidthListDate(v1, 1);
          return v1;
        });

        this.tableData = list;
        this.count = Number(res.data.count);
      } else {
        this.tableData = [];
        this.count = 0;
      }
      this.loading = false;
    },
    dealwidthListDate(v1, level) {
      v1.level = level;
      v1.spec = v1.spec.join();
      v1.open = false;
      v1.rateEdit = false;
      v1.addtime = v1.addtime.replaceAll(".000", "");
      if (v1.rateinfo) {
        if (v1.rateinfo.in_rate) {
          v1.in_rate = v1.rateinfo.in_rate;
          v1.in_rate_new = v1.rateinfo.in_rate;
          this.columns[2].show = true;
        }
        if (v1.rateinfo.low_rate) {
          v1.low_rate = v1.rateinfo.low_rate;
          v1.low_rate_new = v1.rateinfo.low_rate;
          this.columns[3].show = true;
        }

        if (v1.rateinfo.out_rate) {
          v1.out_rate = v1.rateinfo.out_rate;
          v1.out_rate_new = v1.rateinfo.out_rate;
          this.columns[4].show = true;
        }

        if (v1.rateinfo.rate) {
          v1.rate = v1.rateinfo.rate;
          v1.rate_new = v1.rateinfo.rate;
          this.columns[5].show = true;
        }
      }
      if (v1.in_rate || v1.low_rate || v1.rate || v1.out_rate) {
        v1.rateEdit = true;
      }
      if (v1.child && v1.child.length > 0) {
        v1.hasChildren = false;
        v1.child.map((v2) => {
          v2 = this.dealwidthListDate(v2, level + 1);
          return v2;
        });
      } else {
        v1.hasChildren = false;
        v1.children = [];
      }
      v1.children = v1.child;
      return v1;
    },
    async statusConfirm(id, status, ex_status) {
      if (ex_status === "1") {
        await this.$confirm(`确定要改为${status === "1" ? "禁用" : "启用"}？`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            this.loading = true;
            const model = {
              id: id,
              status: status === "1" ? "0" : "1",
            };
            const res = await asyncRequest.status(model);
            if (res.code === 0) {
              this.loading = false;
              this.$notify.success({
                title: "状态修改成功！",
                message: "",
              });
              await this.searchList();
            } else {
              this.loading = false;
            }
          })
          .catch(() => {
            console.log("取消");
          });
      } else {
        if (status === "0") {
          this.$message.warning("只有审核通过的分类，才能启用！");
        }
      }
    },
  },
};
</script>
   <style lang="scss" scoped>
.sort {
}
</style>
   