<template>
  <div class="main-content m20">
    <div class="content-header body">
      <el-row style="margin-bottom:10px">
        <el-col :span="9">
          <el-row>
            <label class="label-name_1">企业名称：</label>
            <div class="search-input-box_2">
              <el-input v-model="searchForm.paramMap.entname" clearable type="text" class="search-input" placeholder="请输入名称" @keyup.enter.native="search"/>
            </div>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <label class="label-name_1">注册号/统一社会信用代码：</label>
            <div class="search-input-box_1">
              <el-input v-model="searchForm.paramMap.uniscid" clearable type="text" class="search-input" placeholder="请输入注册号/统一社会信用代码" @keyup.enter.native="search"/>
            </div>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
            <label class="label-name_1">列入机关：</label>
            <el-select v-model="searchForm.paramMap.decorg" clearable size="mini" placeholder="请选择列入机关" class="custom">
              <el-option
                v-for="item in orgMarketList"
                :key="item.orgNumber"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10px">
        <el-col :span="9">
          <el-row>
            <label class="label-name_1">列入原因：</label>
            <el-select v-model="searchForm.paramMap.serillrea" clearable size="mini" placeholder="请选择列入原因" class="custom">
              <el-option
                v-for="item in reasonList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <label class="label-name_3">列入日期：</label>
            <el-date-picker
              v-model="searchForm.customParamMap.abntime"
              size="mini"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="custom"
            />
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
            <label class="label-name_1">移出机关：</label>
            <el-select v-model="searchForm.paramMap.remdecorg" clearable size="mini" placeholder="请选择移出机关" class="custom">
              <el-option
                v-for="item in orgMarketList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10px">
        <el-col :span="9">
          <el-row>
            <label class="label-name_3">移出日期：</label>
            <el-date-picker
              v-model="searchForm.customParamMap.remdate"
              size="mini"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="custom"
            />
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row>
            <label class="label-name_3">管理片区：</label>
            <el-cascader
              v-model="searchForm.customParamMap.sliceId"
              :show-all-levels="false"
              size="mini"
              class="custom"
              style="width: 100%"
              :options="sliceOptions"
              :props="{ checkStrictly: true }"
              clearable
              filterable
            />
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
            <label class="label-name_1">主体类型：</label>
            <el-select v-model="searchForm.customParamMap.entType" clearable size="mini" placeholder="请选择主体类型" class="custom">
              <el-option
                v-for="item in entTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10px">
         <el-col :span="1" :offset="3">
          <div class="btn-box" style="font-size: 14px;float:right;">
            <el-button size="mini" type="primary" @click="search" :loading="loading">查询</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row style="margin-bottom:10px">
      <el-col :offset="22">
        <el-button type="primary" size="mini" @click="exportExcel" :loading="loading">导出Excel</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" :offset="1">
        <el-table
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          @sort-change="sortChange"
        >
          <el-table-column prop="index" label="序号" min-width="50" align="center"/>
          <el-table-column prop="uniscid" label="统一社会信用代码/注册号" min-width="120" align="left"/>
          <el-table-column prop="entname" :show-overflow-tooltip="true" label="企业名称" min-width="130" align="left"/>
          <el-table-column prop="lostcreditexplain" :show-overflow-tooltip="true" label="列入原因" min-width="120" align="left"/>
          <el-table-column prop="abntime" :show-overflow-tooltip="true" label="列入日期" min-width="80" align="left"/>
          <el-table-column prop="remdate" :show-overflow-tooltip="true" label="移出时间" min-width="100" align="left"/>
          <el-table-column prop="remdecorgCn" :show-overflow-tooltip="true" label="移出决定机关" min-width="100" align="left"/>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="13">
        <el-pagination
          :disabled="loading"
          :page-size="pageParam.pageSize"
          :total="pageParam.total"
          :page-sizes="[10, 20, 30]"
          layout="slot,total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChange"
          @current-change="pageIndexChange"
          :current-page="pageParam.curPage"
        >
          <span>
            第 {{ pageParam.curPage }} 页/共 {{ (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1) / pageParam.pageSize) : 1) }} 页
          </span>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRegorgList } from '@/api/punishment'
import { getNewCD73, illegalSearch, exportIllegalSearch } from '@/api/illegal'
import { getSliceTreeList } from '@/api/system'

export default {
  data() {
    return {
      loading: false,
      user: JSON.parse(sessionStorage.getItem('user')),
      searchForm: {
        paramMap: {},
        likeParamMap: {},
        customParamMap: {}
      },
      orgMarketList: [],
      reasonList: [],
      sliceOptions: [],
      tableData: [],
      exportQueryData: {}, // 导出excel的查询条件, 用于导出excel, 每轮查询成功后赋值
      pageParam: {
        curPage: 1,
        total: 0,
        pageSize: 10,
        orderField: 'illegallistid',
        orderingRule: ''
      },
      entTypeOptions: [
        { value: '0', label: '企业' },
        { value: '1', label: '个体户' },
        { value: '2', label: '农合' }
      ]
    }
  },
  computed: {},
  mounted() {
    this.orgMarketList = getRegorgList()

    // 加载列入原因
    getNewCD73().then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          list.push({
            value: each.code,
            label: each.name
          })
        })
        this.reasonList = list
      }
    })

    // 加载管理片区数据
    getSliceTreeList().then(res => {
      if (res.code === 0) {
        this.sliceOptions = res.data
      }
    })
  },
  methods: {
    // 导出excel
    exportExcel() {
      if (this.pageParam.total === 0) {
        this.$message({
          message: '未查询到数据，无法导出！',
          type: 'warning'
        })
        return
      }
      const data = JSON.parse(JSON.stringify(this.exportQueryData))
      this.loading = true
      exportIllegalSearch(data).then(res => {
        const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '严重违法失信名录名单.xlsx')
        link.click()
      }).finally(() => {
        this.loading = false
      })
    },
    dateFormatter(row, column) {
      return this.$utils.parseTime(row.remdate, '{yyyy}年{mm}月{dd}日')
    },
    sortChange({ column, prop, order }) {
      this.pageParam.orderField = prop
      this.pageParam.orderingRule = order === 'ascending' ? 'asc' : 'desc'
      this.search()
    },
    // 搜索
    search() {
      // 判断是否填写了条件
      let flag = false
      
      // obj的遍历删除值为空的键
      for (const key in this.searchForm.paramMap) {
        if (this.searchForm.paramMap[key] == null || this.searchForm.paramMap[key] == '') {
          delete this.searchForm.paramMap[key];
        }
      }
      // obj的遍历方式一
      for (const key in this.searchForm.paramMap) {
        if (this.searchForm.paramMap[key] !== '' && this.searchForm.paramMap[key] !== null) {
          flag = true
          break
        }
      }
      // obj的遍历方式二
      Object.keys(this.searchForm.customParamMap).forEach(key => {
        if (key === 'sliceId') {
          if (this.searchForm.customParamMap[key].length > 0) {
            flag = true
          }
        } else {
          if (this.searchForm.customParamMap[key] !== '' && this.searchForm.customParamMap[key] !== null) {
            flag = true
          }
        }
      })
      if (!flag) {
        this.$message({
          message: '请至少填写一个查询条件！',
          type: 'warning'
        })
        return
      }
      this.exportQueryData = null
      this.pageParam.curPage = 1
      this.loadPage()
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      let data = {}
      if(this.exportQueryData && JSON.stringify(this.exportQueryData) != "{}" ){
        this.exportQueryData.curPage = this.pageParam.curPage
        this.exportQueryData.pageSize = this.pageParam.pageSize
        data = JSON.parse(JSON.stringify(this.exportQueryData))
      }else{
        data = Object.assign({}, this.pageParam, this.searchForm)
      }
      this.loading = true
      illegalSearch(data).then(res => {
        this.exportQueryData = JSON.parse(JSON.stringify(data))
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          each.uscc = each.uniScId || each.regno
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main-content {
  background: #fff;
  padding: 10pt;

  .content-header {
    background: white;

    .label-name_1 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px;
      font-size: $table-content-font-size;
    }

    .search-input-box_1 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .search-input-box_2 {
      display: inline-block;
      width: calc(100% - 230px);
    }

    .label-name_3 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 140px !important;
      font-size: $table-content-font-size;
    }

    .custom {
      width: calc(100% - 150px);
    }

    .search-input {
      cursor: pointer;
    }

    .body {
      padding: 20px 0;
      border-top: none;
      margin-bottom: 40PX;
    }
  }

  .content-body {
    background: white
  }

  .header {
    .title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .page-box {
    margin: 10PX;
    text-align: right
  }

  .mb10 {
    margin-bottom: 10px;
  }

  .btn-box {
    display: inline-block;
    padding-left: 10px;
  }
}

/deep/ .el-input__inner {
  height: 28px;
}
</style>
