<template>
  <div class="main-content market m20">
    <DetailHead result="信息查询" style="border-top:0;border-left:0;border-right:0" />
    <div class="search-box">
      <el-row>
        <el-col :span="6">
          <div class="search-field">
            <p>市场主体名称</p>
            <el-input v-model="searchForm.entName" placeholder="市场主体名称" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>注册码/统一社会信用代码</p>
            <el-input v-model="searchForm.uniscid" placeholder="注册码/统一社会信用代码" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>法定代表人/负责人</p>
            <el-input v-model="searchForm.leRepName" placeholder="法定代表人/负责人" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>年报状态</p>
            <el-input placeholder="年报状态" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="search-field">
            <p>登记机关</p>
            <el-select v-model="searchForm.regOrg" placeholder="请选择登记机关" style="width:100%" clearable>
              <el-option v-for="each in regOrgOptions" :key="each.id" :label="each.name" :value="each.code" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>片区名称</p>
            <el-input placeholder="片区名称" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>属地机关</p>
            <el-select v-model="searchForm.regionOrg" placeholder="请选择属地机关" style="width:100%" clearable>
              <el-option v-for="each in regOrgOptions" :key="each.id" :label="each.name" :value="each.code" />
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="search-field">
            <p>经营地址</p>
            <el-input v-model="searchForm.addr" placeholder="经营地址" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="search-field">
            <p>经营范围</p>
            <el-input v-model="searchForm.opscope" placeholder="经营范围" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="search-field">
            <p>成立日期</p>
            <el-date-picker v-model="searchForm.estDateStart" placeholder="开始日期" style="width:45%" />至
            <el-date-picker v-model="searchForm.estDateEnd" placeholder="结束日期" style="width:45%" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="search-field">
            <p>核准日期</p>
            <el-date-picker v-model="searchForm.apprDateStart" placeholder="开始日期" style="width:45%" />至
            <el-date-picker v-model="searchForm.apprDateEnd" placeholder="结束日期" style="width:45%" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="search-field">
            <p>业户状态</p>
            <el-input placeholder="业户状态" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>是否国家（省）局执照</p>
            <el-input placeholder="是否国家（省）局执照" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>是否认领</p>
            <el-input placeholder="是否认领" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>是否无照经营</p>
            <el-input placeholder="是否无照经营" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="search-field">
            <p>风险监管级别</p>
            <el-select v-model="searchForm.riskLevel" placeholder="风险监管等级" style="width:100%">
              <el-option v-for="each in riskLevelOptions" :key="'风险等级'+each" :label="each" :value="each" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-field">
            <p>最后检查结果</p>
            <el-input placeholder="经营范围" @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="search-field">
            <p>行业类别</p>
            <el-input placeholder="行业类别" readonly @keyup.enter.native="submitSearch" />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-body">
      <div class="func-box">
        <div class="btn-box">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="submitSearch">查询</el-button>
          <el-button type="info" icon="el-icon-refresh-left" size="mini" @click="resetForm">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailHead from '@/components/DetailHead'
import { getDataType, getBaseCodeList } from '@/api/constant'
export default {
  components: {
    DetailHead
  },
  data() {
    return {
      tableData: [],
      searchForm: {
        entName: null,
        uniscid: null,
        leRepName: null,
        regOrg: '',
        regionOrg: '',
        riskLevel: null,
        addr: null,
        opscope: null,
        estDateStart: null,
        estDateEnd: null,
        busDateStart: null,
        busDateEnd: null
      },
      regOrgOptions: [],
      riskLevelOptions: ['高风险', '较高风险', '中风险', '低风险']
    }
  },
  mounted() {
    // 加载登记机关
    getDataType('registration').then(res => {
      if (res.code === 0) {
        this.regOrgOptions = res.data
      }
    })
  },
  methods: {
    // 重置搜索表单
    resetForm() {
      for (const key in this.searchForm) {
        this.$set(this.searchForm, key, null)
      }
    },
    // 提交查询
    submitSearch() {
      const query = {}
      for (const key in this.searchForm) {
        if (this.$util.isEmpty(this.searchForm[key])) continue
        if (key === 'estDateStart' || key === 'estDateEnd' || key === 'busDateStart' || key === 'busDateEnd') {
          query[key] = this.$util.formatDate.format(this.searchForm[key], 'yyyy-MM-dd')
        } else {
          query[key] = this.searchForm[key]
        }
      }
      const { href } = this.$router.resolve({ path: '/market/search/result', query: query })
      window.open(href)
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{
  padding: 20px;
    >div:not(:first-child){
        margin-top:16px;
    }
    .search-box{
        padding:10px;
        .search-field{
            display:inline-block;
            width:80%;
            >p{
                margin:0 0 10px 0;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                color: #5e5e7a;
                font-size:14PX;
            }
        }
        >.el-row{
           margin-bottom:10px;
        }
    }
    .btn-box{
        text-align:right;
    }
    .main-body{
        padding:16px 0;
        border-top: 1px dashed #70AEFF;
        .header{
            .header-label{
                font-size: 20PX;
                font-family: Microsoft YaHei, Microsoft YaHei-Bold;
                font-weight: bold;
                color: #243668;
                line-height: 32px;
            }
        }
    }
}
/deep/.el-input__inner{
  height: 28px;
}
/deep/.el-input__icon{
  line-height: 28px;
}
</style>
