<template>
  <div class="customer-wrap">
    <el-radio-group
      v-model="selectedTab"
      class="header-radio"
      @input="handleChange"
    >
      <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="taskTop">
      <div class="taskTop_left">
        <div
          class="taskTop_left_item"
          :class="[isActive1 ? 'active' : '']"
          @click="handleMyApprove('1')"
        >
          行政区域报表
          <i v-if="isActive1" class="el-icon-arrow-down" />
        </div>
        <div
          class="taskTop_left_item"
          :class="[isActive2 ? 'active' : '']"
          @click="handleMyApprove('2')"
        >
          行政区域热力图
          <i v-if="isActive2" class="el-icon-arrow-down" />
        </div>
        <div
          class="taskTop_left_item special_item"
          :class="[isActive3 ? 'active' : '']"
          @click="handleMyApprove('3')"
        >
          自建名单网格报表
          <i v-if="isActive3" class="el-icon-arrow-down" />
        </div>
        <div
          class="taskTop_left_item special_item"
          :class="[isActive4 ? 'active' : '']"
          @click="handleMyApprove('4')"
        >
          自绘地图网格报表
          <i v-if="isActive4" class="el-icon-arrow-down" />
        </div>
        <div
          class="taskTop_left_item special_item"
          :class="[isActive5 ? 'active' : '']"
          @click="handleMyApprove('5')"
        >
          自绘地图网格热力图
          <i v-if="isActive5" class="el-icon-arrow-down" />
        </div>
        <div
          v-if="is965"
          class="taskTop_left_item special_item"
          :class="[isActive6 ? 'active' : '']"
          @click="handleMyApprove('6')"
        >
          网格整体业绩
          <i v-if="isActive6" class="el-icon-arrow-down" />
        </div>
        <div
          v-if="is965"
          class="taskTop_left_item special_item"
          :class="[isActive7 ? 'active' : '']"
          @click="handleMyApprove('7')"
        >
          客户授权
          <i v-if="isActive7" class="el-icon-arrow-down" />
        </div>
      </div>
    </div>
    <div
      v-if="isActive1 || isActive3 || isActive4 || isActive6 || isActive7"
      class="content-box"
    >
      <div v-if="!isActive6" class="form-box">
        <el-form ref="searchForm" :model="searchForm">
          <el-row>
            <el-col v-if="isActive1" :span="5">
              <el-form-item label="镇/街道" prop="town" label-width="80px">
                <el-input
                  v-model="searchForm.town"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="isActive1" :span="5">
              <el-form-item
                v-show="selectedTab == '1'"
                label="村/社区"
                prop="village"
                label-width="80px"
              >
                <el-input
                  v-model="searchForm.village"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="isActive4" :span="5">
              <el-form-item
                label="区域类型"
                prop="shapeType"
                label-width="80px"
              >
                <el-select
                  v-model="searchForm.shapeType"
                  clearable
                  @change="handleSearch"
                  @clear="handleSearch"
                >
                  <el-option
                    v-for="item in shapeTypeList"
                    :key="item.label"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-if="isActive4" :span="5">
              <el-form-item
                label="区域名称"
                prop="shapeName"
                label-width="80px"
              >
                <el-input
                  v-model="searchForm.shapeName"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="isActive3 || isActive4" :span="5">
              <el-form-item label="网格名称" prop="gridName" label-width="80px">
                <el-input
                  v-model="searchForm.gridName"
                  clearable
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="isActive3" :span="5">
              <el-form-item label="网格类型" prop="gridType" label-width="80px">
                <el-select
                  v-model="searchForm.gridType"
                  clearable
                  @change="handleSearch"
                  @clear="handleSearch"
                >
                  <el-option
                    v-for="item in gridTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </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="handleRest">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <el-button
          v-if="!isActive7"
          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 || 100"
          >
            <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
            v-if="!isActive7"
            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>
    <HotEchart v-if="isActive2" :selected-tab="selectedTab" />
    <PersonHotEchart v-if="isActive5" :selected-tab="selectedTab" />
  </div>
</template>
<script>
import {
  getCollectList1,
  getCollectList2,
  downloadLs,
  downloadGs,
  getCollectListNm1,
  getCollectListNm2,
  downloadLsNm,
  downloadGsNm,
  getCollectListMap1,
  getCollectListMap2,
  downloadLsMap,
  downloadGsMap,
  getCollectListAll1,
  getCollectListAll2,
  downloadLsAll,
  downloadGsAll,
  getLicenseAuthorization
} from '@/api/grid/performance/collect.js'
import { queryAreas } from '@/api/grid/draw-area.js'
import { mapGetters } from 'vuex'
import { downloadFiles } from '@/utils'
import { cloneDeep, isEmpty } from 'lodash'
import { Message } from 'element-ui'
import {
  privateColumns,
  privateColumnsNew825,
  publicColumns,
  privateColumnsNm,
  publicColumnsNm,
  privateColumnsMap,
  publicColumnsMap,
  privateColumnsAll,
  publicColumnsAll,
  customAuth
} from './list'
import HotEchart from '../hotchart'
import PersonHotEchart from '../personHotchart'

export default {
  components: { HotEchart, PersonHotEchart },
  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: [],
      picktaskDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      pickclaimDateOption: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      searchForm: {
        town: '',
        village: '',
        gridName: '',
        gridType: '',
        dt: ''
      },
      isActive1: true,
      isActive2: false,
      isActive3: false,
      gridTypeList: [
        { label: '菜场', value: '1' },
        { label: '政府单位', value: '2' },
        { label: '事业单位', value: '3' },
        { label: '社区', value: '4' },
        { label: '商圈', value: '5' },
        { label: '企业', value: '6' },
        { label: '市场园区', value: '7' },
        { label: '教育', value: '8' },
        { label: '其他', value: '9' }
      ],
      tableKey: '11',
      isActive4: false,
      isActive5: false,
      shapeTypeList: [],
      isActive6: false,
      isActive7: false
    }
  },
  computed: {
    ...mapGetters(['roles', 'userName', 'deptId']),
    // 对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    // 对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    // 965租户
    is965() {
      return this.userName.slice(0, 3) == 965
    },
    isRetailNew825Tenant() {
      return String(this.deptId || '').slice(0, 3) === '825'
    }
  },
  watch: {
    selectedTab: {
      handler(val) {
        if (val) {
          this.tableColumns = this.getCurrentColumns(val)
          this.tableKey = this.getCurrentTableKey(val)
        }
      },
      immediate: true
    }
  },
  created() {
    const { type, isActive } = this.$route.query
    console.log(type, isActive)
    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'
    }
    if (type) {
      this.selectedTab = type
      this.isActive1 = isActive == '1'
      this.isActive3 = isActive == '3'
      this.isActive4 = isActive == '4'
      this.isActive6 = isActive == '6'
      this.tableColumns = this.getCurrentColumns(type)
      this.tableKey = this.getCurrentTableKey(type)
      for (const key in this.$route.query) {
        delete this.$route.query[key]
      }
    }
    queryAreas().then((res) => {
      if (res.code == 200) {
        this.shapeTypeList = res.data.map((item) => {
          return {
            label: item.layerName,
            value: item.layerId
          }
        })
      }
    })
    this.init()
  },
  methods: {
    getRetailPrivateColumns() {
      return this.isRetailNew825Tenant ? privateColumnsNew825 : privateColumns
    },
    getCurrentColumns(tab) {
      if (tab == '1') {
        return this.isActive1
          ? this.getRetailPrivateColumns()
          : this.isActive3
            ? privateColumnsNm
            : this.isActive4
              ? privateColumnsMap
              : this.isActive7
                ? customAuth
                : privateColumnsAll
      }
      return this.isActive1
        ? publicColumns
        : this.isActive3
          ? publicColumnsNm
          : this.isActive4
            ? publicColumnsMap
            : this.isActive7
              ? customAuth
              : publicColumnsAll
    },
    getCurrentTableKey(tab) {
      if (tab == '1') {
        return this.isActive1
          ? (this.isRetailNew825Tenant ? '11-825' : '11')
          : this.isActive3
            ? '12'
            : this.isActive4
              ? '13'
              : this.isActive7
                ? '15'
                : '14'
      }
      return this.isActive1
        ? '21'
        : this.isActive3
          ? '22'
          : this.isActive4
            ? '23'
            : this.isActive7
              ? '25'
              : '24'
    },
    handleMyApprove(type) {
      this.isActive1 = type == '1'
      this.isActive2 = type == '2'
      this.isActive3 = type == '3'
      this.isActive4 = type == '4'
      this.isActive5 = type == '5'
      this.isActive6 = type == '6'
      this.isActive7 = type == '7'
      if (
        this.isActive1 ||
        this.isActive3 ||
        this.isActive4 ||
        this.isActive6 ||
        this.isActive7
      ) {
        this.tableColumns = this.getCurrentColumns(this.selectedTab)
        this.tableKey = this.getCurrentTableKey(this.selectedTab)
        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 = {
          town: '',
          village: '',
          gridName: '',
          gridType: '',
          dt: `${year}-${month}-${day}`
        }
        this.pageSize = 10
        this.pageNum = 1
        this.init()
      }
    },
    init() {
      this.Loading = true
      const params = {
        ...this.searchForm,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      console.log(params, 'params')
      const Api =
        this.selectedTab == '1'
          ? this.isActive1
            ? getCollectList1
            : this.isActive3
              ? getCollectListNm1
              : this.isActive4
                ? getCollectListMap1
                : this.isActive7
                  ? getLicenseAuthorization
                  : getCollectListAll1
          : this.isActive1
            ? getCollectList2
            : this.isActive3
              ? getCollectListNm2
              : this.isActive4
                ? getCollectListMap2
                : this.isActive7
                  ? getLicenseAuthorization
                  : getCollectListAll2
      Api(params).then((res) => {
        if (res.code == '200') {
          this.tableData = res.rows
          this.total = res.total
          this.Loading = false
        }
      })
    },
    handleChange(val) {
      if (
        this.isActive1 ||
        this.isActive3 ||
        this.isActive4 ||
        this.isActive6 ||
        this.isActive7
      ) {
        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 = {
          town: '',
          village: '',
          gridName: '',
          gridType: '',
          shapeType: '',
          shapeName: '',
          dt: `${year}-${month}-${day}`
        }
        this.pageSize = 10
        this.pageNum = 1
        this.init()
      }
    },
    handleRefersh() {
      this.searchQuery = ''
      this.init()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.init()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.init()
    },
    handleSearch() {
      this.init()
    },

    handleRest() {
      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 = {
        town: '',
        village: '',
        gridName: '',
        gridType: '',
        shapeType: '',
        shapeName: '',
        dt: `${year}-${month}-${day}`
      }
      this.init()
    },

    handleView(row) {
      const isActive = this.isActive1
        ? '1'
        : this.isActive3
          ? '3'
          : this.isActive4
            ? '4'
            : this.isActive6
              ? '6'
              : ''
      this.$router.push({
        path: '/center/performance/custom',
        query: {
          type: this.selectedTab,
          dt: row.dt,
          town: row.town,
          village: row.village,
          regionCode: row.regionCode,
          isActive,
          gridName: row.gridName,
          gridType: row.gridType,
          gridId: row.gridId,
          shapeType: row.shapeType,
          shapeName: row.shapeName,
          shapeId: row.shapeId
        }
      })
    },

    handleDownload() {
      // const {town,village} = this.searchForm;
      const Api =
        this.selectedTab == '1'
          ? this.isActive1
            ? downloadLs
            : this.isActive3
              ? downloadLsNm
              : this.isActive4
                ? downloadLsMap
                : downloadLsAll
          : this.isActive1
            ? downloadGs
            : this.isActive3
              ? downloadGsNm
              : this.isActive4
                ? downloadGsMap
                : downloadGsAll
      const name =
        this.selectedTab == '1'
          ? this.isActive1
            ? '零售行政区域汇总'
            : this.isActive3
              ? '零售自建名单网格汇总'
              : this.isActive4
                ? '零售自绘地图网格汇总'
                : '零售网格整体业绩汇总'
          : this.isActive1
            ? '公司行政区域汇总'
            : this.isActive3
              ? '公司自建名单网格汇总'
              : this.isActive4
                ? '公司自绘地图网格汇总'
                : '公司网格整体业绩汇总'
      Api({
        ...this.searchForm
      }).then((res) => {
        downloadFiles(res, `${name}_${new Date().getTime()}.xlsx`)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.customer-wrap {
  background-color: #ffffff;
  //   padding: 0px 30px 100px 30px;
  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;
      }

      //   &:nth-child(2) {
      //     &::before,
      //     &::after {
      //       content: "";
      //       position: absolute;
      //       top: 50%;
      //       transform: translateY(-50%);
      //       height: 21px;
      //       width: 1px;
      //       background: #ebebeb;
      //       z-index: 1;
      //     }

      //     &::after {
      //       right: 1px;
      //     }
      //   }

      &.is-active {
        &::before,
        &::after {
          content: none;
        }
      }
    }
  }
}

.taskTop {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.taskTop_left {
  display: flex;
}

.taskTop_left_item {
  width: 150px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.special_item {
  width: 190px !important;
}

.el-icon-arrow-down {
  margin-left: 15px;
  font-size: 16px;
  color: rgb(64, 149, 229);
}

.taskTop_right {
  display: flex;
}

.search {
  margin-right: 20px;
}

.active {
  border-bottom: 4px solid rgb(64, 149, 229);
}

.main_table {
  margin-top: 15px;
  // ::v-deep .el-table th.el-table_cell{
  //   height: 67px !important;
  // }
}

.operate-cnt {
  margin: 24px 0 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .top-right-btn {
    margin-right: 24px;
    padding-bottom: 6px;
  }

  .plain-raido-btn {
    ::v-deep .el-radio-button__inner {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #ebebeb;
      border-radius: 0;
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      border: 1px solid #4886f8;
      color: #4886f8;
      background-color: #ffffff;
      box-shadow: none;
    }
  }
}

::v-deep .el-pagination {
  margin-top: 15px;
}
.main {
  padding: 30px 30px 100px 30px;
  background-color: #fff;
  .main_top {
    display: flex;
    justify-content: space-between;
  }

  .fillInformation {
    margin-top: 20px;
  }

  ::v-deep .el-select {
    width: 100%;
  }

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

  .configRulesItem {
    display: flex;
    margin-bottom: 15px;
  }

  .yxjLabel {
    width: 20%;
  }

  .addIcon {
    font-size: 25px;
    line-height: 40px;
    margin-left: 10px;
  }

  .ruleIcon {
    width: 20%;
  }

  .kejlbox {
    display: flex;
    margin-top: 15px;
  }

  .kejlLabel {
    width: 20%;
    margin-right: 15px;
  }
  .item-group {
    position: relative;
    .createBtn {
      position: absolute;
      right: -130px;
      top: 0;
      p {
        color: #666;
        font-size: 12px;
      }
    }
  }

  .formItem {
    .add-btn {
      margin-top: 5px;
    }
  }
}
// .form-box{
//     margin-top: 25px;
// }
.content-box {
  padding: 24px 36px;
  padding-top: 0;
}
.taskTop {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;

  .taskTop_left {
    display: flex;
  }

  .taskTop_left_item {
    width: 150px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
  }

  .el-icon-arrow-down {
    margin-left: 5px;
    font-size: 16px;
    color: rgb(64, 149, 229);
  }
  .active {
    border-bottom: 4px solid rgb(64, 149, 229);
  }
}
</style>
