<template>
  <div class="flex h-full w-full flex-col gap-4">
    <!-- 顶部搜索 -->
    <div class="w-ful flex items-center justify-between">
      <div class="flex items-center gap-4">
        <el-button
          type="primary"
          size="small"
          :loading="exportLoading"
          @click="exportExcel"
          v-hasPermi="['market:evaluatereport:export']"
          >导出</el-button
        >
        <div class="text-[#909399]">
          评价次数：<span class="take-total-num">{{ total }}次</span>
        </div>
        <div class="text-[14px] text-[#909399]">
          统计时间段：{{ searchForm.time[0] }} ~ {{ searchForm.time[1] }}
        </div>
      </div>
      <div class="flex items-center" v-hasPermi="['market:evaluatereport:query']">
        <el-form ref="searchForm" inline size="small" :model="searchForm">
          <el-form-item>
            <el-select style="width: 130px" v-model="searchForm.type">
              <el-option
                v-for="(v, key) in searchType"
                :key="key"
                :label="v"
                :value="key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入关键字"
              clearable
              @keyup.native.enter="handleSearch"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <y-date-picker
              v-model="searchForm.time"
              align="right"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </y-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-popover placement="bottom" trigger="click" v-hasPermi="['market:evaluatereport:query']">
        <div class="w-full">
          <el-form ref="searchForm2" inline size="small" :model="searchForm2">
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.pjOption"
                clearable
                placeholder="请选择评价选项"
              >
                <el-option
                  v-for="(v, key) in dict.pjOption"
                  :key="key"
                  :label="key"
                  :value="v"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 180px"
                filterable
                clearable
                v-model="searchForm2.sectionName"
                placeholder="请选择部门"
              >
                <el-option
                  v-for="v in deptList"
                  :key="v.id"
                  :label="v.name"
                  :value="v.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 180px"
                v-model="searchForm2.hallName"
                filterable
                clearable
                placeholder="请选择大厅"
              >
                <el-option
                  v-for="v in hallList"
                  :key="v.id"
                  :label="v.hallName"
                  :value="v.hallName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.pjSource"
                clearable
                placeholder="请选择评价来源"
              >
                <el-option
                  v-for="(v, key) in dict.pjSource"
                  :key="key"
                  :label="key"
                  :value="v"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                style="width: 150px"
                v-model="searchForm2.pjType"
                clearable
                placeholder="请选择评价指向"
              >
                <el-option
                  v-for="(v, key) in dict.pjType"
                  :key="key"
                  :label="key"
                  :value="v"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="text" slot="reference">
          高级搜索
          <i class="el-icon-d-arrow-right"></i>
        </el-button>
      </el-popover>
    </div>
    <div class="main max-w-[1396px] flex-1">
      <div>
        <y-table
          ref="MyTable"
          :loading="loading"
          :data="tableData"
          :column="column"
          border
          tooltip-effect="dark"
          :max-height="580"
          :row-key="(row) => row.id"
          @selection-change="handleSelectionChange"
        ></y-table>
      </div>
      <y-pagination
        :total="total"
        :page.sync="page"
        :size.sync="size"
        @change="getEvaluateList"
      ></y-pagination>
    </div>
    <!-- 详情 -->
    <EvaluateDetails :show.sync="show" :info="detailsInfo"></EvaluateDetails>
  </div>
</template>

<script>
import YDatePicker from '@/components/YDatePicker/YDatePicker.vue';
import YTable from '@/components/YTable/YTable.vue';
import YPagination from '@/components/YPagination/YPagination.vue';
import EvaluateDetails from './components/EvaluateDetails.vue';
import { getEvaluateList } from '@/api/market';
import { getDepartment, getHall } from '@/api/site';
import { dataSection } from '@/utils';
import { export2Excel } from '@/utils/exportExcel';
import storage from '@/utils/storage';
let searchType = {
  windowFromnum: '按窗口编号',
  peopleName: '按群众姓名',
  peoplePhone: '按群众手机号'
};
export default {
  components: {
    YDatePicker,
    YTable,
    YPagination,
    EvaluateDetails
  },
  props: {
    curTreeData: {
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      loading: false,
      exportLoading: false,
      searchType,
      size: 10,
      page: 1,
      total: 0,
      searchForm: {
        type: 'windowFromnum',
        keyword: '',
        time: [this.$moment().format('YYYY-MM-DD'), this.$moment().format('YYYY-MM-DD')],
        siteId: storage.get(2, 'siteId')
      },
      searchForm2: {
        pjOption: '', // 评价选项
        sectionName: '', // 部门名称
        hallName: '', // 大厅名称
        pjSource: '', // 评价来源
        pjType: '' // 评价指向
      },
      tableData: [],
      dict: {},
      selectionRows: [],
      detailsInfo: {},
      deptList: [], // 部门列表
      hallList: [], // 大厅列表
      column: [
        {
          type: 'selection',
          width: '50',
          align: 'center',
          reserveSelection: true,
          fixed: 'left'
        },
        {
          type: 'index',
          label: '序号',
          width: '50',
          align: 'center',
          fixed: 'left',
          index: (index) => {
            return index + 1 + (this.page - 1) * this.size;
          }
        },
        {
          label: '站点名称',
          align: 'center',
          width: '150',
          prop: 'siteName'
        },
        {
          label: '身份证号',
          align: 'center',
          width: '150',
          prop: 'peopleIdcard'
        },
        {
          label: '姓名',
          align: 'center',
          width: '150',
          prop: 'peopleName'
        },
        {
          label: '性别',
          align: 'center',
          width: '150',
          prop: 'peopleSex'
        },
        {
          label: '手机号',
          align: 'center',
          width: '150',
          prop: 'peoplePhone'
        },
        {
          label: '评价选项',
          align: 'center',
          width: '150',
          prop: 'pjOption'
        },
        {
          label: '评价标签',
          align: 'center',
          width: '150',
          prop: 'contentTag'
        },
        {
          label: '部门',
          align: 'center',
          width: '150',
          prop: 'sectionName'
        },
        {
          label: '大厅',
          align: 'center',
          width: '150',
          prop: 'hallName'
        },
        {
          label: '评价来源',
          align: 'center',
          width: '150',
          prop: 'pjSource'
        },
        {
          label: '手输意见',
          align: 'center',
          width: '150',
          prop: 'opinion'
        },
        {
          label: '窗口名',
          align: 'center',
          width: '150',
          prop: 'windowName'
        },
        {
          label: '窗口编号',
          align: 'center',
          width: '150',
          prop: 'windowFromnum'
        },
        {
          label: '窗口评价',
          align: 'center',
          width: '150',
          prop: 'pjxt'
        },
        {
          label: '工作人员',
          align: 'center',
          width: '150',
          prop: 'workmanName'
        },
        {
          label: '工号',
          align: 'center',
          width: '150',
          prop: 'workmanNumber'
        },
        {
          label: '评价状态',
          align: 'center',
          width: '150',
          prop: 'evaluatestatus'
        },
        {
          label: '评价指向',
          align: 'center',
          width: '150',
          prop: 'pjType'
        },
        {
          label: '评价时间',
          align: 'center',
          width: '150',
          prop: 'pjTime'
        },

        {
          label: '扩展编号',
          align: 'center',
          width: '150',
          prop: 'extNum'
        },
        {
          label: '操作',
          align: 'center',
          fixed: 'right',
          width: '100',
          formatter: (row) => {
            return (
              <span
                class="primary cursor-pointer"
                v-hasPermi={['market:evaluatereport:details']}
                onClick={() => {
                  this.checkDetails(row);
                }}
              >
                查看详情
              </span>
            );
          }
        }
      ]
    };
  },
  created() {},
  watch: {
    curTreeData: {
      handler(newVal) {
        this.getSite(newVal);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 获取站点
    getSite(data) {
      if (JSON.stringify(data) !== '{}') {
        this.page = 1;
        this.size = 10;
        if (data.type == 'site') {
          this.searchForm.siteId = data.id;
          this.getEvaluateList();
          this.getDepartment();
          this.getHall();
        } else {
          this.tableData = [];
          this.deptList = [];
          this.hallList = [];
          this.total = 0;
        }
      } else {
        this.getEvaluateList();
        this.getDepartment();
        this.getHall();
      }
    },
    // 获取数据函数
    async getData(form = {}) {
      let obj = {
        page: this.page,
        size: this.size,
        pjTimeStart: this.searchForm.time[0],
        pjTimeEnd: this.searchForm.time[1],
        siteId: this.searchForm.siteId
      };
      let val = `%${this.searchForm.keyword}%`;
      obj[this.searchForm.type] = val;

      let res = await getEvaluateList({
        ...obj,
        ...this.searchForm2,
        ...form
      });
      if (res.data.code == 1) {
        return res.data.data;
      } else {
        return {
          data: [],
          total: 0
        };
      }
    },

    // 获取表格数据
    async getEvaluateList(form = {}) {
      this.loading = true;
      let { data, total, dict } = await this.getData(form);
      data.forEach((v) => {
        v.pjTime = this.$moment(v.pjTime).format('YYYY-MM-DD HH:mm:ss');
      });
      this.tableData = data;
      this.total = total;
      this.dict = dict;
      this.loading = false;
    },

    // 获取站点部门
    async getDepartment() {
      let res = await getDepartment({
        page: 1,
        size: -1,
        siteId: this.searchForm.siteId
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.deptList = data;
      }
    },

    // 获取大厅
    async getHall() {
      let res = await getHall({
        page: 1,
        size: -1,
        siteId: this.searchForm.siteId
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        this.hallList = data;
      }
    },

    checkDetails(row) {
      let data = this.$cloneDeep(row);
      this.detailsInfo = data;
      this.show = true;
    },
    handleSelectionChange(rows) {
      this.selectionRows = rows;
    },
    handleSearch() {
      this.page = 1;
      this.$clearSelection('MyTable');
      this.getSite(this.curTreeData);
    },
    // 导出表格
    exportExcel() {
      this.exportLoading = true;
      let table = this.column.filter((v) => v.prop);
      let tHeader = table.map((v) => v.label);
      let filterVal = table.map((v) => v.prop);
      if (this.selectionRows.length) {
        let data = this.$cloneDeep(this.selectionRows);
        export2Excel(
          tHeader,
          filterVal,
          data,
          '评价数据报表' + this.$moment().format('YYYYMMDDHHmmss')
        );
      } else {
        dataSection(this.getData, {}, (data) => {
          if (!data.length) {
            this.$message.warning('暂无数据');
            return;
          }
          data.forEach((v) => {
            v.pjTime = this.$moment(v.pjTime).format('YYYY-MM-DD HH:mm:ss');
          });
          export2Excel(
            tHeader,
            filterVal,
            data,
            '评价数据报表' + this.$moment().format('YYYYMMDDHHmmss')
          );
        });
      }
      this.exportLoading = false;
    }
  }
};
</script>

<style lang="less" scoped>
.take-total-num {
  color: var(--primary);
  font-weight: 600;
}
:deep(.el-form--inline) {
  display: flex;
  align-items: center;
  .el-form-item {
    margin-bottom: 0px;
  }
}
.el-icon-d-arrow-right {
  transform: rotate(90deg);
}
</style>
