<template>
  <div class="main-content market m20">

    <div class="search-box">
      <el-row class="mb10" :gutter="20">
        <el-col :span="12" class="display-flex">
          <label class="label-name" style="display: inline-block;">企业名称:</label>
          <div class="search-input-box" style="display: inline-block;">
            <el-input v-model="searchForm.entName" placeholder="请输入企业名称" clearable @keyup.native.enter="search(1)" />
          </div>
        </el-col>
        <el-col :span="12" class="display-flex">
          <label class="label-name" style="display: inline-block;">注册码/统一社会信用代码:</label>
          <div class="search-input-box" style="display: inline-block;">
            <el-input
              v-model="searchForm.uniscid"
              placeholder="请输入注册码/统一社会信用代码"
              clearable
              @keyup.native.enter="search()"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="search()">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" size="mini" @click="resetSearchForm()">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="main-body ">
      <div class="content">
        <el-row>
          <el-col :offset="23">
            <el-button v-show="tableData.length > 0" type="primary" icon="el-icon-search" size="mini" @click="exportFile()">导出</el-button>
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          :data="tableData"
          class="table-style"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
        >
          <el-table-column
            prop="index"
            label="序号"
            min-width="50"
          />
          <el-table-column
            prop="uniscid"
            label="统一社会信用代码/注册号"
            min-width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <router-link
                style="color: #1A77FF"
                :to="{path:'/comprehensive/details',query:{ pripid: scope.row.pripid }}"
              >
                {{ scope.row.uniscid }}
              </router-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="entName"
            label="主体名称"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            prop="lerep"
            label="法定代表人/负责人"
            min-width="80"
            show-overflow-tooltip
          />
          <el-table-column
            prop="entType"
            label="主体类型"
            min-width="80"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.entType }} &nbsp;
              <el-tag v-show="scope.row.isDraftTab === '1'" type="danger">虚假地址</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="经营地址"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            prop="sliceName"
            label="所在片区"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column
            label="操作"
            min-width="100"
          >
            <template slot-scope="scope">
              <el-link v-show="isShowAssignBtn" type="primary" @click="draftRevoke(scope.row)">取消标记</el-link> &nbsp; &nbsp;
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-row>
            <el-col :span="24" style="text-align:right">
              <el-pagination
                :disabled="loading"
                :page-size="pageParam.pageSize"
                :total="pageParam.total"
                :page-sizes="[10, 20, 30, 40,50,100,200]"
                layout="slot,total, sizes, prev, pager, next, jumper"
                @size-change="pageSizeChange"
                @current-change="pageIndexChange"
              >
                <span>
                  第 {{ pageParam.curPage }} 页 /
                  共 {{ (parseInt((pageParam.total + pageParam.pageSize - 1) / pageParam.pageSize)) }} 页
                </span>
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { entPage, exportEntOwner, removeDraftRevoke } from '@/api/marketAssign'

export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('user')),
      showMore: false,
      tableData: [],
      regOrgOptions: [],
      searchForm: {},
      pageParam: {
        curPage: 1,
        pageSize: 10,
        paramMap: {
          isDraftRevoke: 1
        },
        total: 0
      },
      loading: false,
      removeAssignInfo: {
        assignId: '',
        pripid: '',
        remReason: '',
        phone: ''
      },
      areaSliceOptions: [],
      assignSliceOptions: [],
      changeSliceOptions: [],
      assignType: '' // 可认领类型
    }
  },
  computed: {
    // 是否展示认领、虚假地址按钮
    isShowAssignBtn() {
      return this.user.orgCode.length === 6
    },
    // 是否展示退还按钮
    isShowRemoveBtn() {
      return this.user.orgCode !== '440101'
    }
  },
  mounted() {
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 发起搜索
    search() {
      const form = this['searchForm']
      const pageParam = this['pageParam']
      console.log(pageParam)
      pageParam.curPage = 1
      pageParam.paramMap = {
        ...this.pageParam.paramMap,
        ...form
      }
      this.loadPage()
    },
    // 重置搜索表单
    resetSearchForm() {
      this['searchForm'] = {}
    },
    // 加载分页
    loadPage() {
      const pageParam = this['pageParam']
      this['loading'] = true
      entPage(pageParam).then(res => {
        this['loading'] = false
        if (res.code === 0) {
          let idx = (pageParam.curPage - 1) * pageParam.pageSize
          const list = res.data.records || []
          for (const i in list) {
            const each = list[i]
            each.index = ++idx
            each.uniscid = each.uniscid && each.uniscid.length > 0 ? each.uniscid : each.regno
            each.dom = this.$util.isNotEmpty(each.oploc) ? each.oploc : each.dom
          }
          this['tableData'] = list
          pageParam.total = res.data.total
        }
      })
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 撤销虚假地址
    draftRevoke(row) {
      this.$confirm('是否确认取消标记虚假地址主体?').then(_ => {
        removeDraftRevoke({ pripid: row.pripid }).then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            this.loadPage()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    // 导出结果
    exportFile() {
      this.loading = true
      exportEntOwner(this.pageParam).then(res => {
        const url = window.URL.createObjectURL(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)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content {
  padding: 0;

  > div:not(:first-child) {
    margin-top: 16px;
  }

  .btn-box {
    text-align: right;
  }

  .main-body {
    padding: 16px 0;

    .header {
      .header-label {
        font-size: 20PX;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: bold;
        color: #243668;
        line-height: 32px;
      }
    }
  }
}

.search-box {
  padding: 20px;
  margin-bottom: 40px;
  /* background:#f9f9f9; */
  /* border: 1px solid $color-border; */
  /* padding:15px 50px; */
  .search-field {
    display: inline-block;
    width: 100%;
    display: flex;
    align-items: center;

    > p {
      width: 190px;
      text-align: right;
      display: inline-block;
      margin: 0 0 10px 0;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      color: #5e5e7a;
      font-size: 16PX;
    }
  }
}

.mb10 {
  margin-bottom: 10px;
}

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

/deep/ .label-name {
  font-size: 16px !important;
  text-align: right;
  width: 190px;
}

.search-input-box {
  width: 70% !important;
}

.search-field {
  .el-input {
    width: 70%;
  }
}

.content {
  background: #fff;

  /deep/ .el-table .warning-row {
    background: #eaf4fe !important;
  }
}
</style>
