<template>
  <div>
  <el-checkbox-group 
    v-model="checkedReport">
    <el-checkbox v-for="report in reportList" :label="report.reportCode" :key="report.reportCode">{{report.reportName}}</el-checkbox>
  </el-checkbox-group>
  <el-row>
      <el-button type="primary" @click="saveReport">保存</el-button>
  </el-row>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import dayjs from 'dayjs'

const { mapActions: mapReportActions } = createNamespacedHelpers("report");

export default {
  name: "report",
  data() {
    return {
      checkedReport: [],
      reportList: [],
      pageNavi: {
        current: 1,
        size: 200,
        total: 0
      }
    };
  },
  computed: {},
  methods: {
    ...mapReportActions(["getReportList", "getReportCheckedList", "saveCheckedReport"]),
    getList() {
      const pageNumber = this.pageNavi.current || 1;
      const pageSize = this.pageNavi.size;

      this.getReportList({
        pageNumber,
        pageSize
      })
        .then(res => {
          const { records, ...pageNavi } = res;

          this.reportList = records;
          this.pageNavi = pageNavi;
        })
        .catch(err => {
          this.$notify.error(err.msg || err.message);
        });
    },
    getCheckedList() {
      const pageNumber = this.pageNavi.current || 1;
      const pageSize = this.pageNavi.size;
      this.getReportCheckedList({
        pageNumber,
        pageSize
      })
        .then(res => {
          const { records, ...pageNavi } = res;
        
          this.checkedReport = (records || []).map((x) => x.reportCode);
          this.pageNavi = pageNavi;
        })
        .catch(err => {
          this.$notify.error(err.msg || err.message);
        });
    },
    saveReport() {
      if(this.checkedReport.length < 1 ){
        this.$notify.error("请选择在保存");
        return
      }
      this.showLoadding("保存中...");
      this.saveCheckedReport({
        list: this.checkedReport
      })
        .then(res => {
          this.hideLoadding();
         this.$notify.info("保存成功");
        })
        .catch(err => {
          this.hideLoadding();
          this.$notify.error(err.msg || err.message);
        });
    },
    toDetail(row) {
      this.$router.push({
        name: "goods.edit",
        params: { id: row.goodsId }
      });
    },
    changeStatus(row) {
      this.showLoadding("保存中...");
      this.changeGoodsStatus(row)
        .then(res => {
          this.hideLoadding();
          this.$notify.info("保存成功");
          this.search();
        })
        .catch(err => {
          this.hideLoadding();
          this.$notify.error(err.message);
        });
    },
    showLoadding(text) {
      this.loading = this.$loading({
        text,
        lock: true,
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)"
      });
    },
    hideLoadding() {
      if (this.loading) this.loading.close();
    },
    search() {
      this.pageNavi.current = 1;
      this.getList();
    },
    newPage(page) {
      this.$router.replace({ name: "goods.list", query: { page } });
    },
    formateDate(dt) {
      return !dt ? '' : dayjs(dt).format('YYYY-MM-DD HH:mm')
    },
  },
  created() {
    this.pageNavi.current = this.$route.query.page || 1;

    this.getList();
    this.getCheckedList();
  }
};
</script>

<style lang="scss" scoped>
.list {
  .header {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  img {
      width: 100%;
      height: 100%;
    }
}
.system-table-search {
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

.system-table-search li {
  margin-right: 20px;
}

.system-table-search ul {
  font-size: 0;
  white-space: nowrap;
}

.system-table-search ul > li {
  display: inline-block;
}

.flex-h {
  display: flex;
  align-items: center;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>
