<template>
  <div class="main-content m20">
    <!--头部-查询-->
    <div class="content-header">
      <div class="body search-body">
        <el-row style="margin-bottom:10px">
          <el-col :span="12">
            <label class="label-name" style="width: 220px">统一社会信用代码：</label>
            <div class="search-input-box" style="width: calc(100% - 220px)">
              <el-input v-model="searchForm.searchUscc" clearable size="mini" type="text" class="search-input" placeholder="请输入统一社会信用代码" @keyup.enter.native="search" />
            </div>
          </el-col>
          <el-col :span="12">
            <label class="label-name">主体名称（精确）：</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.searchName" clearable size="mini" type="text" class="search-input" placeholder="请输入主体名称（精确）" @keyup.enter.native="search" />
            </div>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <label class="label-name">注册号：</label>
            <div class="search-input-box">
              <el-input v-model="searchForm.searchRegno" clearable size="mini" type="text" class="search-input" placeholder="请输入注册号" @keyup.enter.native="search" />
            </div>
          </el-col>
          <el-col :span="6" :offset="1">
            <div class="btn-box" style="font-size: 14px">
              <el-button type="primary" size="mini" @click="search">查询</el-button>
              <el-button size="mini" @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          :row-class-name="tableRowClassName"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 95%;padding: 0;margin:0 auto"
          :fit="true"
        >
          <!-- <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="saccount" label="账号" min-width="150" align="left" />
          <el-table-column prop="spwd" :show-overflow-tooltip="true" label="密码" min-width="150" align="left" />

        </el-table>

        <!--分页多选组件-->
        <!-- <pageSelector :selection="selection" :columns="selectionColumn" @removeCallback="removeCallback" /> -->
      </div>
    </div>

  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import pageSelector from '@/components/PageSelector'
import { commonPage } from '@/api/company'
import { getaccountPwd} from '@/api/aiceps.js'
import { getConstant, getOrgTreeList } from '@/api/system'
import { parseTime } from '@/utils'
import FakeProgress from '@/components/FakeProgress'
export default {
  components: {
    pageSelector: pageSelector,
    searchHeader,
    FakeProgress
  },
  data() {
    return {
      showFakeProgress: false,
      importType: 'address',
      addressEntList: [],
      addressSearchType: '',
      addressAbnDialog: false,
      fileList: [],
      bustypeOptions: [],
      orgOptions: [],
      showMore: false,
      nextLoading: false,
      templateDialog1: false,
      templateDialog: false,
      uploadPath: `${process.env.VUE_APP_BASE_API}/bizSpeList/fileParamExplain`,
      reportYearList: [{
        value: '2020',
        label: '当前年度'
      }, {
        value: '2020,2019',
        label: '连续两年未报年报'
      }, {
        value: '2020,2019,2018',
        label: '连续三年未报年报'
      }],
      reasonList: [{
        value: '1',
        label: '未按照《企业信息公示暂行条例》第八条规定的期限公示年度报告的'
      }, {
        value: '3',
        label: '公示企业信息隐瞒真实情况、弄虚作假的'
      }],
      selection: [],
      selectionColumn: [{ label: '序号', type: 'index', minWidth: '30px' }, { label: '统一社会信用代码/注册号', prop: 'uscc', minWidth: '100px' }, { label: '主体名称', prop: 'entname', minWidth: '100px' }, { label: '法定代表人', prop: 'name', minWidth: '50px' }],
      searchForm: {
        entertype: 'company',
        searchUscc: '',
        searchName: '',
        reportYear: '',
        regulatory: '',
        searchRegno:''
      },
      searchForm2: {
        entertype: 'company',
        addressSearchType: 'like'
      },
      pageParam2: {
        customParamMap: { entertype: 'company' },
        curPage: 1,
        total: 0,
        pageSize: 10
      },
      loading: false,
      showFixed: false,
      tableData: [],
      pageParam: {
        customParamMap: { entertype: 'company' },
        curPage: 1,
        total: 0,
        pageSize: 10
      },
      showReprtYear: false,
      showRegEntryUserName: false,
      reasonOptions: []
    }
  },
  computed: {
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    }
  },
  watch: {
    'searchForm.reportYear': {
      handler(newValue, oldValue) {
        if (this.$util.isNotEmpty(newValue)) {
          this.searchForm.includeType = ''
        }
      }
    },
    'searchForm.includeType': {
      handler(newValue, oldValue) {
        if (this.$util.isNotEmpty(newValue)) {
          this.searchForm.reportYear = ''
        }
      }
    }
  },
  mounted() {
    this.getbustypeOptions()
    this.getOrgOptions()
    // this.loadPage()
    window.addEventListener('scroll', this.handleScroll, true)
    // 加载企业列入原因
    getConstant('CD71').then(res => {
      if (res.code === 0) {
        const list = []
        res.data.forEach(each => {
          list.push({
            value: each.code,
            label: each.name
          })
        })
        this.reasonList = list
      }
    })
  },
  methods: {
    parseTime(...args) {
      return parseTime(...args)
    },
    showMoreCriteria() {
      this.showMore = !this.showMore
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 重置搜索表单
    resetSearchForm() {
      this.searchForm = {
        entertype: 'company',
        searchUscc: '',
        searchName: '',
        reportYear: '',
        regulatory: '',
        regEntryUserName: '',
        includeType: '',
        searchRegno:'',
        dom: ''
      }
    },
    // 重置搜索表单
    resetSearchForm2() {
      this.searchForm2 = {
        entertype: 'company',
        addressSearchType: 'like',
        dom: '',
        regorgs: [],
        suporgs: [],
        acceptRegorgs: []

      }
    },
    reasonFormatter(row) {
      return this.$util.enumFormatter(this.reasonList, row.includeType)
    },
    getOrgOptions() {
      getOrgTreeList().then(res => {
        if (res.code === 0) {
          this.orgOptions = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getbustypeOptions() {
      getRegulatory().then(res => {
        if (res.code === 0) {
          this.bustypeOptions = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (scrollTop > 80) {
        this.showFixed = true
      } else {
        this.showFixed = false
      }
    },
    selectBlur(e) {
      this.searchForm.reportYear = e.target.value
      // this.$set(this.searchForm, 'reportYear', e.target.value)
    },
    // 搜索
    search() {
      // 重置
      this.selection = []
      this.pageParam.customParamMap = this.searchForm
      this.pageParam.curPage = 1
      if (this.$util.isNotEmpty(this.searchForm.reportYear)) {
        this.showReprtYear = true
      } else {
        this.showReprtYear = false
      }
      if (this.$util.isNotEmpty(this.searchForm.regEntryUserName)) {
        this.showRegEntryUserName = true
      } else {
        this.showRegEntryUserName = false
      }
      this.loadPage()
    },
    // 分页多选插件回调
    removeCallback(index, row) {
      this.$refs.multipleTable.toggleRowSelection(row, false)
    },
    // 全选按钮事件
    selectAll() {
      const table = this.$refs.multipleTable
      for (const i in table.data) {
        const each = table.data[i]
        table.toggleRowSelection(each, true)
      }
    },
    // 分页多选插件回调
    removeCallback2(index, row) {
      this.$refs.addressEntList.toggleRowSelection(row, false)
    },
    // 全选按钮事件
    selectAll2() {
      const table = this.$refs.addressEntList
      for (const i in table.data) {
        const each = table.data[i]
        table.toggleRowSelection(each, true)
      }
    },
    // 选项变更事件
    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)
        }
      }
      console.log(this.selection)
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      getaccountPwd(this.pageParam).then(res => {
        this.loading = false
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.accountPwdLogonNewlist.forEach(each => {
          each.index = pageStart + i++
          list.push(each)
        })
        this.tableData = list
        this.pageParam.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) {
              this.$refs.multipleTable.toggleRowSelection(each, true)
            }
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  padding: 10pt;
  margin-bottom: 50px;
  background: #fff;
  .content-header{
    background: white;
    .label-name {
      text-align: right;
      display: inline-block;
      width: 220px;
      font-size: $table-content-font-size;
    }
    .el-select{
      width: calc(100% - 221px) !important;
    }
    .search-input-box{
      display: inline-block;
      width: calc(100% - 220px);
    }
    .search-input{
      cursor: pointer;
      width: 100%;
    }
    .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;
    }
  }
  .prompt{
    color: #F53633;
  }
.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">
.addRadio{
  .el-radio__label{
    font-size: 16px;
  }
}
</style>
