<template>
  <div class="displsy-mod">
    <div class="header_flex">
      <div>
        <el-button size="mini" type="primary" :disabled="!headOffice" @click="edit('添加')" v-role="4006002">添加
        </el-button>
        <small v-show="!headOffice">分店只能查看充值类别不能操作</small>
      </div>
      <div>

        <el-button size="mini" type="primary" v-if="headOffice" @click="download()">下载模板</el-button>
        <el-button size="mini" type="warning" v-if="headOffice" @click="infoDialog = true">导入</el-button>
        <el-button size="mini" type="success" v-if="headOffice" @click="exit()">导出</el-button>
      </div>
    </div>
    <hr />
    <el-table :data="list" stripe style="width: 100%" :header-cell-style="{
        background: 'linear-gradient(#6cb3ff, #1873d4)',
        color: '#eeeeee',
      }">
      <el-table-column align="center" prop="rechargeTypeNum" label="充值编码" min-width="100" sortable> </el-table-column>

      <el-table-column align="center" prop="rechargeTypeName" label="充值名称" min-width="120" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" label="状态" min-width="100" v-role="4006005">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" :disabled="!headOffice" active-text="启用 " inactive-text="停用" :active-value="1" :inactive-value="0" inactive-color="#cccccc" class="demo" @change="state(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="firstAmount" label="首充金额" min-width="80" sortable></el-table-column>
      <el-table-column align="center" prop="typeRatio" label="充值提成" min-width="80" sortable></el-table-column>
      <el-table-column align="center" prop="rechargeMoney" label="续充金额" min-width="80" sortable></el-table-column>
      <el-table-column align="center" prop="discount" label="享受折扣( % )" min-width="150" sortable></el-table-column>
      <el-table-column align="center" prop="giftMoney" label="赠送金额" min-width="80" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.donateType==0">固</span>
          <span v-if="scope.row.donateType==1">比</span>
          <span>{{scope.row.giftMoney}}</span>
          <span v-if="scope.row.donateType==1">%</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="discountFreeAmount" label="赠送折扣( % )" min-width="140" sortable></el-table-column>
      <el-table-column align="center" prop="startDates" label="开始日期" min-width="105" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="stopDates" label="结束日期" min-width="105" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="validTime" label="有效期(月)" min-width="80" sortable></el-table-column>
      <el-table-column align="center" prop="founderStaff" label="创建人" min-width="80" sortable></el-table-column>
      <el-table-column align="center" prop="storeName" label="所属门店" min-width="80" :show-overflow-tooltip="true" sortable></el-table-column>
      <el-table-column align="center" prop="founderDatetime" label="创建时间" :show-overflow-tooltip="true" min-width="105" sortable></el-table-column>
      <el-table-column align="center" prop="modifyBy" label="最近操作人" min-width="80" sortable></el-table-column>
      <el-table-column align="center" prop="modifyDatetime" label="操作时间" :show-overflow-tooltip="true" min-width="105" sortable></el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="160">
        <template slot-scope="scope" fixed="right">
          <el-button :disabled="!headOffice" @click="edit(scope.row)" size="mini" type="primary" v-role="4006003">修改</el-button>
          <el-button :disabled="!headOffice" size="mini" type="primary" @click="del(scope.row)" plain v-role="4006004">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 10px">
      <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="queryForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <el-dialog title="搜索" :visible.sync="searchDialog">
      <el-form :model="searchForm">
        <el-form-item label="充值名称搜索:" label-width="120px">
          <div class="searchDiv">
            <el-input size="medium" v-model="searchForm.rechargeTypeName" placeholder="输入要查询的用充值类别名称" clearable></el-input>
          </div>
        </el-form-item>
        <el-form-item label="根据状态搜索:" label-width="120px">
          <div class="searchDiv">
            <el-radio-group v-model="searchForm.state" fill="#f78989">
              <el-radio :label="1" @click.native.prevent="clickitem(1)" size="medium" type="primary">启用中</el-radio>
              <el-radio :label="0" @click.native.prevent="clickitem(0)" size="medium" type="primary">已停用</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" plain @click="searchDialog = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="search((searchDialog = false))">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="导入表格" :visible.sync="infoDialog" :close-on-click-modal="false">
      <excel @fileData="fileData" @infoDialogV="infoDialogV"></excel>
    </el-dialog>
    <el-dialog title="导入提示" :visible.sync="infoErrorDialog">
      <span>以下导入 充值名称 存在重复 , 请检查修改后重新导入</span>
      <el-table :data="infoList">
        <el-table-column align="center" prop="rechargeTypeNum" label="充值编码" min-width="120" sortable> </el-table-column>
        <el-table-column align="center" prop="rechargeTypeName" label="充值类别" min-width="120" :show-overflow-tooltip="true" sortable>
          <template slot-scope="scope">{{
            scope.row.type == 2 ? "活动卡" : "折扣卡"
          }}</template>
        </el-table-column>
        <el-table-column align="center" prop="rechargeTypeName" label="充值名称" min-width="120" :show-overflow-tooltip="true" sortable></el-table-column>

        <el-table-column align="center" label="状态" min-width="100" v-role="4006005">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" active-text="启用 " inactive-text="停用" :active-value="1" :inactive-value="0" inactive-color="#cccccc" class="demo" @change="state(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="typeRatio" label="充值提成" min-width="110" sortable>
        </el-table-column>
        <el-table-column align="center" prop="rechargeMoney" label="续充金额" min-width="110" sortable>
        </el-table-column>
        <el-table-column align="center" prop="discount" label="享受折扣( % )" min-width="150" sortable>
        </el-table-column>
        <el-table-column align="center" prop="giftMoney" label="赠送金额" min-width="110" sortable>
        </el-table-column>
        <el-table-column align="center" prop="giftMoney" label="赠送折扣" min-width="110" sortable>
        </el-table-column>
        <el-table-column align="center" prop="giftMoney" label="开始日期" min-width="110" sortable></el-table-column>
        <el-table-column align="center" prop="giftMoney" label="结束日期" min-width="110" sortable></el-table-column>
        <el-table-column align="center" prop="validTime" label="有效期(月)" min-width="130" sortable>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" plain @click="infoErrorDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
    <edit ref="edit" @editData="editData"></edit>
  </div>
</template>

<script>
import edit from "./components/edit";
import excel from "@/components/excel";
import {
  addrecType,
  editrecType,
  delrecType,
  recTypeNewPages,
  recTypeStates,
  recTypeDownloads,
  recTypeImports,
  recTypeExports,
} from "@/api/storeManage.js";
export default {
  components: {
    excel,
    edit,
  },
  rechargeTypeName: "",
  data() {
    return {
      searchDialog: false, //搜索弹窗开关
      refreshtext: false, //搜索提示字符
      headOffice: false, //是否总店
      infoErrorDialog: false, //导入保存提示弹窗开关
      infoList: [], //导入报错列表
      searchForm: {
        //搜索表单
        rechargeTypeName: "",
        state: 1,
      },
      sessionStorageData: {}, //门店参数合集
      list: [], //主数组
      total: 0, //分页总条数
      queryForm: {
        //查询表单
        pageSize: 10,
        pageNum: 1,
      },
      infoDialog: false, //上传文件弹窗开关
    };
  },
  methods: {
    //下载模板方法
    download() {
      recTypeDownloads().then((res) => {
        let blob = new Blob([res]);
        console.log(blob);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "充值促销模板.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    //导出方法
    //导出方法
    exit() {
      if (this.searchForm.rechargeTypeName == "") {
        delete this.searchForm.rechargeTypeName;
      }
      recTypeExports(this.searchForm).then((res) => {
        let blob = new Blob([res]);
        var a = document.createElement("a");
        var url = window.URL.createObjectURL(blob);
        console.log(url);
        a.href = url;
        a.download = "充值促销导出表.xlsx";
        a.click();
        window.URL.revokeObjectURL(url);
      });
    },
    //上传文件方法
    fileData(v) {
      var fileData = new FormData();
      if (v == null) {
        this.$alert("请选择需要上传的文件", "提示", {
          confirmButtonText: "确定",
          confirmButtonClass: "confirmbtnFalses",
          type: "warning",
          center: true,
          callback: (action) => {},
        });
      } else {
        fileData.append("multipartFile", v);
        recTypeImports(fileData).then((res) => {
          if (res.rows != undefined) {
            this.infoList = res.rows;
            this.infoErrorDialog = true;
          } else {
            if (res.code == "000000") {
              this.$message.success({
                message: res.message,
              });
              this.getData();
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: (action) => {},
              });
            }
          }
        });
      }
    },
    //返回上传文件弹窗状态
    infoDialogV(v) {
      this.infoDialog = v;
    },
    //搜索方法
    search() {
      //条件搜索
      this.searchForm.storeId = sessionStorage.getItem("parentId");
      recTypeNewPages(this.searchForm).then((res) => {
        if (res.code == "000000") {
          this.searchTrue = true;
          this.list = res.pageInfo.list;
          this.total = res.pageInfo.total;
          if (res.pageInfo.total == 0) {
            this.$message.warning({
              message: "没有找到符合条件的充值类别",
            });
          }
        } else {
          this.$alert(res.message, "提示", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //选择/取消单选方法
    clickitem(e) {
      e === this.searchForm.state
        ? (this.searchForm.state = null)
        : (this.searchForm.state = e);
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        cancelButtonClass: "cancelbtnFalses",
        confirmButtonClass: "confirmbtnFalses",
      })
        .then(() => {
          delrecType({ id: row.id }).then((res) => {
            if (res.code == "000000") {
              this.getData();
              this.$message.success({
                message: "删除成功!",
              });
            } else {
              this.$alert(res.message, "提示", {
                confirmButtonText: "确定",
                confirmButtonClass: "confirmbtnFalses",
                type: "warning",
                center: true,
                callback: (action) => {},
              });
            }
          });
        })
        .catch(() => {
          this.$message.info({
            message: "已取消操作！",
          });
        });
    },
    //打开添加/修改弹窗
    edit(form) {
      this.$refs.edit.show(form);
    },
    //状态改变方法
    state(row) {
      var state = {
        id: row.id,
        state: row.state,
      };
      recTypeStates(state)
        .then((res) => {
          //console.log(res);
          this.getData();
          if (res.code == "000000") {
            if (row.state == 1) {
              this.$message.success({
                message: "状态启用!",
              });
            } else {
              this.$message.success({
                message: "状态停用!",
              });
            }
          }
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    //分页方法
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      if (this.searchTrue == true) {
        this.search();
      } else {
        this.getData();
      }
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val;
      if (this.searchTrue == true) {
        this.search();
      } else {
        this.getData();
      }
    },
    //添加/修改返回方法
    editData() {
      if (this.searchTrue == true) {
        this.search();
      } else {
        this.getData();
      }
    },
    //获取数据
    async getData() {
      this.queryForm.type = 2;
      this.queryForm.storeId = sessionStorage.getItem("parentId");
      recTypeNewPages(this.queryForm)
        .then((res) => {
          if (this.refreshtext == true) {
            this.$message.success({
              message: "已刷新最新数据",
            });
            this.refreshtext = false;
            this.searchTrue = false;
          }
          this.list = res.pageInfo.list;
          this.total = res.pageInfo.total;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
  },
  created() {
    this.headOffice =
      sessionStorage.getItem("headOffice") * 1 == 1 ? true : false;
    console.log(this.headOffice);
    let list = JSON.parse(sessionStorage.getItem("list"));
    this.sessionStorage = JSON.parse(
      sessionStorage.getItem("sessionStorageData")
    );
    list.forEach((item) => {
      if (item.id == 4006001) {
        this.getData();
      }
    });
  },
};
</script>
<style scoped>
.el-button {
  margin-bottom: 10px;
}

.el-input {
  width: 200px;
}
</style>
