<template>
  <div class="customer-wrap">
    <el-radio-group
      v-model="selectedTab"
      class="header-radio"
      @input="handleTabChange"
    >
      <el-radio-button
        label="1"
        :disabled="isPublic"
        :class="{ 'btn-disabled': isPublic }"
      >零售部</el-radio-button>
      <el-radio-button
        label="2"
        :disabled="isPrivate"
        :class="{ 'btn-disabled': isPrivate }"
      >公司部</el-radio-button>
    </el-radio-group>

    <div class="content-box">
      <div class="form-box">
        <el-form ref="searchForm" :model="searchForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="客群名称" prop="groupName" label-width="80px">
                <el-input
                  v-model="searchForm.groupName"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="统计日期" prop="dt" label-width="80px">
                <el-date-picker
                  v-model="searchForm.dt"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  :picker-options="pickerOptions"
                  @change="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div>
        <el-button type="primary" @click="handleDownload">导出</el-button>
      </div>

      <div class="main_table">
        <el-table
          :key="tableKey"
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          max-height="650"
        >
          <el-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            align="center"
            :prop="item.prop"
            :label="item.label"
            show-overflow-tooltip
            :width="item.width || 120"
          >
            <template slot-scope="scope">
              <span v-if="item.dict">{{ item.dict[scope.row[item.prop]] || '-' }}</span>
              <span v-else>{{ scope.row[item.prop] || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleView(scope.row)">客户明细</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="->,total,prev,pager,next,sizes"
          :total="total"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGroupPerformanceLsList,
  getGroupPerformanceGsList,
  exportGroupPerformanceLs,
  exportGroupPerformanceGs
} from '@/api/group/performance';
import { retailColumns, publicColumns } from './list';
import { mapGetters } from 'vuex';
import { downloadFiles } from '@/utils';

export default {
  name: 'GroupPerformanceList',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const today = new Date();
          today.setHours(0, 0, 0, 0);
          return time.getTime() >= today.getTime();
        }
      },
      selectedTab: '1',
      loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      tableColumns: [],
      tableKey: 'group-performance-1',
      searchForm: {
        groupName: '',
        dt: ''
      }
    };
  },
  computed: {
    ...mapGetters(['roles']),
    isPublic() {
      return this.roles.includes('headPublic');
    },
    isPrivate() {
      return this.roles.includes('headPrivate');
    }
  },
  created() {
    const date = new Date();
    date.setDate(date.getDate() - 1);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    this.searchForm.dt = `${year}-${month}-${day}`;
    if (this.isPublic) {
      this.selectedTab = '2';
    } else if (this.isPrivate) {
      this.selectedTab = '1';
    }
    this.updateColumns();
    this.getList();
  },
  methods: {
    updateColumns() {
      this.tableColumns = this.selectedTab === '1' ? retailColumns : publicColumns;
      this.tableKey = `group-performance-${this.selectedTab}`;
    },
    getList() {
      this.loading = true;
      const api = this.selectedTab === '1' ? getGroupPerformanceLsList : getGroupPerformanceGsList;
      api({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.rows;
        this.total = res.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleTabChange() {
      this.updateColumns();
      this.pageNum = 1;
      this.getList();
    },
    handleSearch() {
      this.pageNum = 1;
      this.getList();
    },
    handleReset() {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      this.searchForm = {
        groupName: '',
        dt: `${year}-${month}-${day}`
      };
      this.pageNum = 1;
      this.getList();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getList();
    },
    handleView(row) {
      this.$router.push({
        path: '/center/groupPerformance/custom',
        query: {
          type: this.selectedTab,
          dt: row.dt,
          groupId: row.groupId,
          groupName: row.groupName,
          groupMode: row.groupMode
        }
      });
    },
    handleDownload() {
      const api = this.selectedTab === '1' ? exportGroupPerformanceLs : exportGroupPerformanceGs;
      const fileName = this.selectedTab === '1' ? '零售客群业绩汇总' : '公司客群业绩汇总';
      api(this.searchForm).then(res => {
        downloadFiles(res, `${fileName}_${new Date().getTime()}.xlsx`);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 3px 8px 0 #00000017;

  .header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;

    .btn-disabled {
      ::v-deep .el-radio-button__inner {
        background-color: #e7e7e7;
      }
    }

    .el-radio-button {
      flex: 1;

      ::v-deep .el-radio-button__inner {
        width: 100%;
        border: none;
        font-weight: 400;
        letter-spacing: 0.44px;
        line-height: 25px;
        font-size: 16px;
        color: #666666;
        padding: 11px 0 12px 0;
      }

      ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #4886f8;
        font-weight: 400;
        color: #ffffff;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}

.content-box {
  padding: 20px 24px 24px;
}

.main_table {
  margin-top: 15px;
}

::v-deep .el-date-editor,
::v-deep .el-input,
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-pagination {
  margin-top: 15px;
}
</style>
