<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <SearchHeader title="查询" />
      <div class="body search-body">
        <el-row style="margin-bottom:30px">
          <el-col :span="10" >
            <label class="label-name_1">经营地址：</label>
            <div class="search-input-box_1">
              <el-input v-model="searchForm2.dom" size="mini" type="text" class="search-input" placeholder="请输入经营地址" @keyup.enter.native="search" />
            </div>
          </el-col>
          <el-col :span="8" class="mb10">
            <label class="label-name">是否是精确查询：</label>
            <el-radio v-model="searchForm2.addressSearchType" label="like">模糊</el-radio>
            <el-radio v-model="searchForm2.addressSearchType" label="eq">精确</el-radio>
          </el-col>
          <el-col :span="6" class="mb10">
            <el-button
              size="mini"
              style="margin-left: 10px;"
              type="primary"
              icon="el-icon-search"
              :loading="nextLoading"
              @click="addressBatchSearch"
            >查询</el-button>
            <el-button
              size="mini"
              style="margin-left: 10px;"
              @click="resetSearchForm2"
            >重置</el-button>
          </el-col>
        </el-row>

        <el-row style="margin-bottom:-60px" >
          <el-col :span="12" style="text-align: left">
            <el-select v-model="option" @change="optionchange(option)" type="text" placeholder="请选择筛选项"  style="margin-left: 31px" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button size="mini" style="margin-left: 31px" @click="selectAll2">全选</el-button>
            <el-button size="mini" @click="$util.toggleSelect($refs.addressEntList)" style="margin-right:20px">反选</el-button>
            <el-button type="primary" size="mini" @click="checkebaseinfo()">办理</el-button>
          </el-col>
          <el-col :span="12" class="mb10" style="text-align: right">
            <el-button size="mini" :loading="nextLoading" type="primary" @click="batchQueryShow">导入名单</el-button>
            <el-button size="mini" :loading="nextLoading" type="primary" @click="downloadFile" style="margin-right:31px">下载模版</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="addressEntList"
          v-loading="nextLoading"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          :data="addressEntList"
          tooltip-effect="dark"
          style="width: 95%;padding: 0;margin:10px auto"
          :fit="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column class="no" type="selection" min-width="30" align="center" />
          <el-table-column prop="index" label="序号" min-width="40" align="center" />
          <el-table-column prop="uscc" label="统一社会信用代码/注册号" min-width="150" align="left" />
          <el-table-column prop="entname" :show-overflow-tooltip="true" label="主体名称" min-width="150" align="left" />
          <el-table-column prop="dom" :show-overflow-tooltip="true" label="经营地址" min-width="150" align="left" />
          <el-table-column prop="regorgCn" :show-overflow-tooltip="true" label="登记机关" min-width="120" align="left" />
          <el-table-column prop="isnb" :show-overflow-tooltip="true" label="是否年报" min-width="90" align="left" />
          <el-table-column prop="islock" label="是否锁定" min-width="90" align="left" />
          <el-table-column prop="isabn" :show-overflow-tooltip="true" label="是否有地址列异记录" min-width="90" align="left" />
          <el-table-column prop="" :show-overflow-tooltip="true" label="详情" min-width="90" align="left">
            <template slot-scope="scope">
              <el-link type="primary" @click="queryDetails(scope.row)">详情</el-link>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-row class="bl0">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
              <el-pagination
                :disabled="nextLoading"
                :page-size="pageParam2.pageSize"
                :total="pageParam2.total"
                :page-sizes="[10, 20, 30, 40,50,100,200,500]"
                layout="slot,total, sizes, prev, pager, next, jumper"
                @size-change="pageSizeChange2"
                @current-change="pageIndexChange2"
              >
                <span>
                  第 {{ pageParam2.curPage }} 页 /
                  共 {{ (pageParam2.total !== 0 ? parseInt((pageParam2.total + pageParam2.pageSize - 1)/pageParam2.pageSize) : 1) }} 页
                </span>
              </el-pagination>
            </el-col>
          </el-row>
        </span>
      </div>
    </div>

    <el-dialog
      title="批量导入"
      :visible.sync="batchQueryDialogShow"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-input
          v-model="batchFileName"
          placeholder="点击选择模版文件"
          style="display:inline-block;width:calc(100% - 120px)"
          :readonly="true"
          @click.native="$refs.batchFile.click()"
        />
        <el-button style="width:100px;margin-left:10px" type="primary" @click="$refs.batchFile.click()">浏览</el-button>
        <input :ref="'batchFile'" type="file" style="display:none" accept=".xls,.xlsx" @change="fileChange">
      </div>
      <FakeProgress v-if="showFakeProgress" ref="FakeProgress" style="margin-top: 10px;" />
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="24">
            <el-button :loading="loading" @click="batchQueryDialogShow = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="batchQuery">新 增</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>

    <el-dialog
      title="校验结果"
      :visible.sync="resultAddressDialogShow"
      width="20%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div style="margin-bottom:20px; display:inline-block; width:80%">
        <span style="font-size: 20px;">可发起数量：{{enableSize}}</span>
      </div>
      <div style="margin-bottom:20px; display:inline-block; width:80%">
        <span style="font-size: 20px;">不可发起数量：{{disableSize}}</span>
        <el-link
          style="margin-top: 10px; margin-left:10px; font-size: medium"
          type="primary"
          @click="exportNoCanExcel"
        >下载失败名单</el-link>
      </div>
      <div style="">
        <el-button :loading="loading" @click="resultAddressDialogShow = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addressLoadPage">继续发起</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="detailTitle"
      :visible.sync="showDetails"
      width="80%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
        <el-tab-pane label="锁定记录" name="entlock">
          <el-table v-loading="detailsLoading" :data="entLockList">
            <el-table-column label="序号" prop="index" min-width="30" />
            <el-table-column label="锁定日期" prop="" show-overflow-tooltip />
            <el-table-column label="锁定类型" prop="" show-overflow-tooltip />
            <el-table-column label="锁定原因" prop="" min-width="150" show-overflow-tooltip />
            <el-table-column label="锁定人员" prop="" show-overflow-tooltip />
            <el-table-column label="锁定时间" prop="" show-overflow-tooltip />
            <el-table-column label="锁定单位" prop="" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="地址列异记录" name="tsabn">
          <el-table v-loading="detailsLoading" :data="abnList">
            <el-table-column label="序号" prop="index" min-width="30" />
            <el-table-column label="列入原因" prop="spereasons" min-width="150" show-overflow-tooltip />
            <el-table-column label="列入日期" prop="abntime" show-overflow-tooltip />
            <el-table-column label="列入作出决定机关" prop="intoDecorg" min-width="100" show-overflow-tooltip />
            <el-table-column label="异常状态" prop="operatestatus" show-overflow-tooltip />
            <el-table-column label="移出日期" prop="remdate" show-overflow-tooltip />
            <el-table-column label="移出决定机关" prop="reDecorg" show-overflow-tooltip />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import SearchHeader from '@/components/searchHeader'
import FakeProgress from '@/components/FakeProgress'
import pageSelector from '@/components/PageSelector'
// import { getBasePage } from '@/api/entBase'
import { startTaskRevokeTFraud, importExcel, exportFailExcel, queryEntlockAbnInfo, getBasePage } from '@/api/batchTFraudList'
export default {
  components: {
    pageSelector: pageSelector,
    SearchHeader,
    FakeProgress
  },
  data() {
    return {
      uscc: '',
      entName: '',
      bizSeq: '',
      showDetails: false,
      detailsLoading: false,
      detailTitle: '',
      abnList: [],
      operatestatusList: [{
        value: '0',
        label: '移出'
      }, {
        value: '1',
        label: '列入'
      }, {
        value: '2',
        label: '撤销'
      }, {
        value: '3',
        label: '修改'
      }, {
        value: '4',
        label: '标记严重失信'
      }],
      entLockList: [],
      activeName: 'entlock',
      option: '',
      showFakeProgress: false,
      batchQueryDialogShow: false,
      batchFileName: '',
      prompt: '',
      selection: [],
      selectionColumn: [{ label: '统一社会信用代码/注册号', prop: 'regno' }, { label: '主体名称', prop: 'entname' }, { label: '主体类型', prop: 'enttypeName' }],
      searchForm: {
        entertype: '',
        searchDate: '',
        specause: ''
      },
      loading: false,
      showFixed: false,
      tableData: [],
      // 批量地址核查变量
      searchForm2: {
        entertype: 'company',
        addressSearchType: 'like'
      },
      pageParam2: {
        customParamMap: { entertype: 'company' },
        curPage: 1,
        total: 0,
        pageSize: 10
      },
      nextLoading: false,
      batchAddressDialogShow: false,
      openManyDialogShow: false,
      addressEntList: [],
      currentaddressEntList: [],
      resultAddressDialogShow: false,
      enableList: '',
      disableList: '',
      enableSize: '',
      disableSize: '',
      options: [{
        value: '1',
        label: '筛选出未年报、未锁定且未有地址列异记录'
      }, {
        value: '2',
        label: '筛选出未年报、未锁定且有地址列异记录'
      }, {
        value: '3',
        label: '筛选出未年报、有锁定且未有地址列异记录'
      }, {
        value: '4',
        label: '筛选出未年报、有锁定且有地址列异记录'
      }, {
        value: '5',
        label: '筛选出已年报、未锁定且未有地址列异记录'
      }, {
        value: '6',
        label: '筛选出已年报、未锁定且有地址列异记录'
      }, {
        value: '7',
        label: '筛选出已年报、有锁定且未地址列异记录'
      }, {
        value: '8',
        label: '筛选出已年报、有锁定且有地址列异记录'
      }]
    }
  },
  watch: {
  },
  mounted() {
    // this.loadPage()
    window.addEventListener('scroll', this.handleScroll, true)
  },

  methods: {
    addressBatchSearch() {
      if (this.$util.isEmpty(this.searchForm2.dom)) {
        return this.$message.warning('请输入地址查询')
      }
      this.selection = []
      this.pageParam2.customParamMap = this.searchForm2
      this.$set(this.pageParam2, 'curPage', 1)
      this.enableList = []
      this.addressLoadPage()
    },
    addressLoadPage() {
      if (this.enableList.length > 0) {
        this.resultAddressDialogShow = false
        console.log('222', this.enableList)
        const list = []
        const startIndex = (this.pageParam2.curPage - 1) * this.pageParam2.pageSize
        for (let i = startIndex; i < this.enableList.length && i < (startIndex + this.pageParam2.pageSize); i++) {
          console.log(i, '222')
          this.enableList[i].index = i + 1
          this.enableList[i].uscc = this.enableList[i].uniscid || this.enableList[i].regno
          list.push(this.enableList[i])
        }
        this.addressEntList = list
        this.currentaddressEntList = list
        this.pageParam2.total = this.enableList.length
        const selection = JSON.parse(JSON.stringify(this.selection))
        this.$nextTick(() => {
          for (const i in list) {
            const each = list[i]
            for (const j in selection) {
              if (each.pripid === selection[j].pripid) {
                this.$refs.addressEntList.toggleRowSelection(each, true)
              }
            }
          }
        })
        this.showFakeProgress = false
        this.batchQueryDialogShow = false
      } else {
        this.nextLoading = true
        getBasePage(this.pageParam2).then(res => {
          this.nextLoading = false
          const list = []
          let i = 1
          const pageStart = (this.pageParam2.curPage - 1) * this.pageParam2.pageSize
          res.data.records.forEach(each => {
            each.index = pageStart + i++
            each.uscc = each.uniscid || each.regno
            list.push(each)
          })
          this.addressEntList = list
          this.currentaddressEntList = list
          this.pageParam2.total = res.data.total
          const selection = JSON.parse(JSON.stringify(this.selection))
          this.$nextTick(() => {
            for (const i in list) {
              const each = list[i]
              for (const j in selection) {
                if (each.pripid === selection[j].pripid) {
                  this.$refs.addressEntList.toggleRowSelection(each, true)
                }
              }
            }
          })
        })
      }
    },
    queryDetails(row) {
      this.showDetails = true
      this.detailTitle = row.entname + '-详情'
      this.detailsLoading = true
      queryEntlockAbnInfo(row.pripid).then(res => {
        this.detailsLoading = false
        if (res.code === '0') {
          this.abnList = res.data.abnList
          // 锁定数据暂不赋值
        }
      }).catch(() => {
        this.detailsLoading = false
      })
    },
    // 处理tabs点击事件
    handleTabClick(tab, event) {
      console.log(tab, event)
    },
    // operatestatusList 异常状态格式化
    operatestatusFormat(operatestatus) {
      let name = ''
      this.operatestatusList.forEach(each => {
        if (each.value === operatestatus) {
          name = each.label
        }
      })
      return name
    },
    optionchange(val) {
      console.log(val + '-------------------yazai')
      const list = []
      if (this.$util.isNotEmpty(val)) {
        this.currentaddressEntList.forEach(each => {
          switch (val) {
            case '1':
              if (each.isnb === '否' && each.islock === null && each.isabn === '否') {
                list.push(each)
              }
              break
            case '2':
              if (each.isnb === '否' && each.islock === null && each.isabn === '是') {
                list.push(each)
              }
              break
            case '3':
              if (each.isnb === '否' && each.islock === null && each.isabn === '否') {
                list.push(each)
              }
              break
            case '4':
              if (each.isnb === '否' && each.islock === null && each.isabn === '是') {
                list.push(each)
              }
              break
            case '5':
              if (each.isnb === '是' && each.islock === null && each.isabn === '否') {
                list.push(each)
              }
              break
            case '6':
              if (each.isnb === '是' && each.islock === null && each.isabn === '是') {
                list.push(each)
              }
              break
            case '7':
              if (each.isnb === '是' && each.islock === null && each.isabn === '否') {
                list.push(each)
              }
              break
            case '8':
              if (each.isnb === '是' && each.islock === null && each.isabn === '是') {
                list.push(each)
              }
              break
          }
        })
        this.addressEntList = list
      } else {
        this.addressEntList = this.currentaddressEntList
      }
    },
    // 重置搜索表单
    resetSearchForm2() {
      this.searchForm2 = {
        entertype: 'company',
        addressSearchType: 'like',
        dom: ''
      }
    },
    // 全选按钮事件
    selectAll2() {
      const table = this.$refs.addressEntList
      for (const i in table.data) {
        const each = table.data[i]
        table.toggleRowSelection(each, true)
      }
    },
    // 当前分页改变
    pageIndexChange2(curPage) {
      this.pageParam2.curPage = curPage
      this.addressLoadPage()
    },
    // 分页大小改变
    pageSizeChange2(pageSize) {
      this.pageParam2.pageSize = pageSize
      this.addressLoadPage()
    },
    // 打开批量查询窗口
    batchQueryShow() {
      this.batchQueryDialogShow = true
    },
    // 批量地址核查 -- start
    // 选项变更事件
    handleSelectionChange(selectData) {
      const cancel = []
      if (selectData.length !== this.addressEntList.length) {
        // 找出没有选中的内容
        this.addressEntList.forEach(each => {
          for (const i in selectData) {
            const atom = selectData[i]
            if (atom.pripid === each.pripid) {
              return
            }
          }
          cancel.push(each)
        })
      }
      // 取消选中的内容
      for (const i in cancel) {
        const each = cancel[i]
        let index
        for (const j in this.selection) {
          const select = this.selection[j]
          if (select.pripid === each.pripid) {
            index = parseInt(j)
            break
          }
        }
        if (index !== undefined) {
          this.selection.splice(index, 1)
        }
      }
      // 增加选中内容
      for (const i in selectData) {
        const each = selectData[i]
        let exist = false
        for (const j in this.selection) {
          const select = this.selection[j]
          if (select.pripid === each.pripid) {
            exist = true
            break
          }
        }
        if (!exist) {
          this.selection.push(each)
        }
      }
    },
    fileChange() {
      this.batchFileName = this.$refs.batchFile.files[0].name
    },
    async batchQuery() {
      const file = this.$refs.batchFile.files
      if (!file[0]) {
        this.$message.warning('查询文件不能为空')
        return
      }
      const form = new FormData()
      form.append('file', file[0])
      this.loading = true
      this.showFakeProgress = true
      return importExcel(form).then(async({ code, data, msg }) => {
        console.log(code + '================')
        if (code === 0) {
          this.enableList = data.enableList
          this.disableSize = data.disableSize
          this.disableList = data.disableList
          this.enableSize = data.enableSize
          this.batchQueryDialogShow = false
          this.resultAddressDialogShow = true
          this.$refs.FakeProgress.success()
          this.$refs.EasyTable.reset()
        } else {
          this.$refs.FakeProgress.error()
          this.$message.error(data.message)
          this.loading = false
          this.showFakeProgress = false
        }
        this.$refs.batchFile.value = ''
        this.batchFileName = ''
      }).catch(() => {
        this.loading = false
        this.showFakeProgress = false
      })
    },
    exportNoCanExcel() {
      exportFailExcel(this.disableList).then(res => {
        this.download(res, '校验失败名单')
      }).catch(req => {
        console.log('下载失败', req)
      })
    },
    download(data, fileName) {
      if (!data) {
        return
      }
      const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' }))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName)
      link.click()
    },
    // 下载模版
    downloadFile() {
      const prev = process.env.NODE_ENV === 'development' ? '' : '/aiccs'
      window.open(prev + '/companyModel.xls')
    },
    // 启动待办
    checkebaseinfo() {
      if (this.selection.length === 0) return this.$message.warning('请至少选择一个企业以开启待办')
      let pripids = ''
      this.selection.forEach(each => {
        pripids += (each.pripid + ';')
      })
      startTaskRevokeTFraud(pripids).then(res => {
        if (res.code === 0) {
          this.$router.push({
            path: '/cancel/batchTFraud/batchTFraudAccept',
            query: {
              tasklistid: res.data.tasklistid,
              bizseq: res.data.bizseq,
              workflowId: res.data.workflowId }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-content{
    background: #fff;
    padding: 0!important;
    /* padding: 10pt; */
    .content-header{
      background: white;
      .search-body{
        .el-date-editor {
          width: calc(100% - 229px);
        }
        /deep/ .el-date-editor *{
          font-size: 16px!important;
        }
        /deep/ .el-date-editor .el-range-separator{
          width: 8%!important;
        }
      }
      .label-name_1{
        text-align: right;
        display: inline-block;//转成行内快，才可定义宽度
        width: 180px;
        font-size: $table-content-font-size;
      }
      .search-input-box_1{
        display: inline-block;
        width: calc(100% - 220px);
      }
      .label-name_2{
        text-align: right;
        display: inline-block;//转成行内快，才可定义宽度
        width: 210px;
        font-size: $table-content-font-size;
      }
      .search-input-box_2{
        display: inline-block;
        width: calc(100% - 220px);
      }
      .label-name {
        text-align: right;
        display: inline-block;//转成行内快，才可定义宽度
        width: 220px;
        font-size: $table-content-font-size;
      }

      .search-input-box{
        display: inline-block;
        width: calc(100% - 220px);
        // width: 300px;
      }
      .custom{
        width: calc(100% - 220px);
      }
      .search-input{
        cursor: pointer;
      }
      .body{
        padding: 20px 0 ;
        border-top:none;
        margin-bottom: 40px;
      }
    }
    .content-body{
      background:white;
      margin-bottom: 100px;
    }
    .header{
      /* height: 50PX;
      padding: 15px 10PX; */
      .title{
        font-weight: 600;
        font-size: 1.2rem;
      }
    }
    .page-box{
      margin:10PX;
      .el-pagination{
        text-align: right;
      }
    }
    .mb10{
      margin-bottom: 10px;
    }
  }
  .fixed-bottom {
    position: fixed;
    width: 100%;
    bottom: -10px;
    right: 0;
    z-index: 99;
    padding: 10px;
    /* background: #8bbef6; */
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to bottom, #fff 0%,#8bbef6 100%);
    box-shadow:  1px -4px 4px rgba(0, 21, 41, 0.08);
  }
  .content-body{
    background: #fff;
  }
  /deep/.el-table .warning-row {
    background: #eaf4fe!important;
  }
</style>
<style lang="scss">
  .content-body .el-table-column--selection .cell{
    padding-right: 0px;
  }
  .fixed-bottom {
    .el-pagination {
      text-align: right!important;
    }
  }

</style>
