<!--
  @description: 合格供应库需要申报
  @author: qink
  @routerPath:
  @date:  2020/4/9 16:04
-->
<template>
  <div>
    <!--查询条件-->
    <div class="crud_menu_title clearfix">
      <span class="icon-line fl">查询条件</span>
      <span class="fr pointer" @click="handleToggleSearch">
        <el-link
          :underline="false"
          :class="toggleSearchStatus ? 'arrow-is-active' : ''"
          type="primary"
          class="toggleSearchStatus icon el-icon-arrow-down"
        />
        {{ toggleSearchStatus ? "收起高级查询" : "展开高级查询" }}
      </span>
    </div>
    <!-- 搜索条件 -->
    <section :class="{ SearchContent_show: toggleSearchStatus }" class="clearfix SearchContent">
      <div class="SearchContent_leftInput fl">
        <el-form
          ref="searchForm"
          :model="searchForm"
          inline
          label-width="108px"
          label-position="left"
        >
          <el-form-item ref="supplierName" label="供应商名称" prop="supplierName">
            <el-input v-model="searchForm.supplierName" placeholder="请输入" style="width:220px" />
          </el-form-item>
          <el-form-item ref="linkerName" label="经办人" prop="linkerName">
            <el-input v-model="searchForm.linkerName" placeholder="请输入" style="width:220px" />
          </el-form-item>
          <el-form-item ref="linkerTel" label="联系电话" prop="linkerTel">
            <el-input v-model="searchForm.linkerTel" placeholder="请输入" style="width:220px" />
          </el-form-item>
          <el-form-item ref="regcapital" label="注册资金(万元)" prop="tenderPrice">
            <p style="display:flex;width: 220px">
              <el-input v-model="searchForm.regcapitalBegin" placeholder="请输入" />~
              <el-input v-model="searchForm.regcapitalEnd" placeholder="请输入" />
            </p>
          </el-form-item>
          <el-form-item ref="supplierType" label="类别" prop="supplierType">
            <el-select v-model="searchForm.supplierType" placeholder="请选择" style="width:220px;">
              <el-option
                v-for="item in supplierTypeCodeGroup"
                :key="item.typecode"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供货范围">
            <el-input v-model.trim="searchForm.supplyScope" style="width: 220px" @focus="dialogData.dialog=true" />
          </el-form-item>
          <el-form-item ref="businesslicence" label="营业执照代码" prop="businesslicence">
            <el-input v-model="searchForm.businesslicence" placeholder="请输入" style="width:220px" />
          </el-form-item>
          <el-form-item ref="createTime" label="注册日期" prop="createTime">
            <el-date-picker
              v-model="searchForm.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:220px"
              @change="handleCreateTime"
            />
          </el-form-item>
          <el-form-item ref="areaValue" label="所属地区" prop="areaValue">
            <el-input v-model="searchForm.areaValue" placeholder="请输入" style="width:220px" />
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-button type="primary" @click="onSearch">
          查询
        </el-button>
        <el-button plain type="info" @click="resetForm('searchForm')">
          重置
        </el-button>
      </div>
    </section>
    <!--查询结果-->
    <div class="crud_menu_title">
      <span class="icon-line">查询结果</span>
    </div>
    <!-- 列表 -->
    <section>
      <el-table ref="smallTable" :data="tableData">
        <el-table-column
          type="index"
          label="序号"
          fixed
          width="60px"
          align="center"
        />
        <el-table-column
          prop="supplierName"
          fixed
          label="供应商名称"
          min-width="260"
        >
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="examineSupplierInfo(scope.row)"
            >
              {{ scope.row.supplierName }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="linkerName"
          label="经办人"
          min-width="75"
        />
        <el-table-column
          header-align="center"
          label="联系电话"
          prop="linkerTel"
          min-width="110"
        />
        <el-table-column
          header-align="center"
          prop="tenderNo"
          label="类别"
          min-width="110"
        >
          <template slot-scope="scope">
            {{ filterDictText(supplierTypeCodeGroup,scope.row.supplierType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="供货范围"
          prop="supplyScope"
          min-width="110"
        />
        <el-table-column
          label="申报单位"
          prop="departNames"
          min-width="110"
        />
        <el-table-column
          label="来源"
          prop="qualificationsType"
          align="center"
          width="110"
        >
          <template slot-scope="scope">
            {{ filterDictText(supplierQualificationsTypeGroup,scope.row.qualificationsType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="注册资金(万元)"
          prop="regcapital"
          align="right"
          width="110"
        />
        <el-table-column
          label="所属地区"
          prop="areaValue"
          min-width="110"
        />
        <el-table-column
          label="营业执照代码"
          prop="businesslicence"
          min-width="130"
        />
        <el-table-column
          label="注册日期"
          prop="createTime"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime && $Moment(scope.row.createTime).format(momentDateTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          header-align="center"
          label="操作"
          fixed="right"
          align="center"
          width="80">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="see(scope.row)">查看</el-link>
          </template>
        </el-table-column>-->
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </section>
    <!-- 供货范围 -->
    <category-tree-dialog :dialog-data="dialogData" @categoryTreeInfo="categoryTreeInfo" />
    <!-- 供应商信息查看-弹框 -->
    <editorDeclarationDetailDialong ref="supplierInfo" />
  </div>
</template>
<script>
/* api */
import { listSupplierRepositoryPagesByOrganization, listSupplierRepositoryPagesByOrganizationAll } from '@api/supplier/declaraTionrecord'/* 公用方法*/
import { filterObj, restoreInitialValue, filterDictText } from '@/assets/js/utils'// 常用方法
/* 混入 */
import { ListMixin } from '@/mixins/ListMixin' // 分页
import { declareHegSupperGroupMixin } from '../editorDeclaration/mixins/declareHegSupperGroupMixin'
import { supplierGroupMixin } from '../mixins/supplierGroupMixin'

/* 组件 */
import pagination from '@comp/common/pagination/pagination' // 分页
import categoryTreeDialog from '@/views/common/tools/categoryTree-dialog'// 供货范围
import editorDeclarationDetailDialong from '@/views/supplier/editorDeclaration/editorDeclarationContent/editorDeclarationDetail-dialog'// 供应商信息查看
export default {
  name: 'SupplierQualifiedChilerdnList',
  components: {
    categoryTreeDialog, // 供货范围
    pagination, // 分页
    editorDeclarationDetailDialong // 供应商信息查看-弹框
  },
  mixins: [ListMixin, declareHegSupperGroupMixin, supplierGroupMixin],
  data() {
    return {
      // 弹窗-展示/隐藏状态 true 展示/false 隐藏
      dialogData: {
        title: '供货范围',
        dialog: false, // 产品分类
        selectCodes: [] // 当前选中的供货范围Code
      },
      searchForm: {
        areaValue: '',
        businesslicence: '', // 所属地区
        createTime: [], // 注册时间
        createTimeBegin: '', // 营业执照/统一社会信用代码
        createTimeEnd: '', // 注册日期 开始
        declarationDepartIds: '', // 注册日期 结束
        departId: '', // 申报单位ids
        isOperation: '', // 组织结构id
        linkerName: '', // 经办人
        linkerTel: '', // 联系电话
        qualificationsType: '', // 来源
        regcapitalBegin: '', // 注册资金 开始
        regcapitalEnd: '', // 注册资金 结束
        supplierName: '', // 供应商名称
        supplierType: '', // 类别
        supplyScope: '', // 应范围名称
        supplyScopeId: '' // 供应范围id
      },
      tableData: [],
      activeName: '' // 接收父组件传入tab页选中状态1 合格供应商 2合格供应商（含下级）
    }
  },
  created() {
    // 获取供应商信息所有字典
    this.initKey()
    // 获取字典-申报记录部分
    this.getDeclarationDictionariesGroup()
  },
  methods: {
    filterDictText,
    // 查看
    see() {
      this.$router.push('/supperManagement/wareHousingAuditeds')
    },
    // 供货范围选择/清空
    categoryTreeInfo(data) {
      this.searchForm.supplyScope = data.labels
      this.searchForm.supplyScopeId = data.keys
      this.dialogData.selectCodes = data.keys.split(',')
    },
    // 组装搜索数据
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      // 删除不需要的参数
      delete param.createTime
      return filterObj(param)
    },
    // 获取数据
    loadData(id, name) {
      if (typeof id === 'string') {
        this.activeName = name
        this.searchForm.departId = id
      }
      const params = this.getQueryParams() // 查询条件
      // 不包含下级
      if (params.departId && this.activeName === '1') {
        listSupplierRepositoryPagesByOrganization(params).then(response => {
          this.tableData = response.data.records
          this.paginationData.total = response.data.total
        }).catch(() => {})
      }
      // 包含下级机构
      if (params.departId && this.activeName === '2') {
        this.tableData = []
        listSupplierRepositoryPagesByOrganizationAll(params).then(response => {
          this.tableData = response.data.records
          this.paginationData.total = response.data.total
        }).catch(() => {})
      }
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.loadData('', this.activeName)
    },
    // 重置
    resetForm() {
      const id = this.searchForm.departId
      restoreInitialValue(this.searchForm)
      this.searchForm.departId = id
      // 获取列表信息
      this.onSearch()
    },
    // 处理搜索时间格式
    handleCreateTime(val) {
      if (val) {
        this.searchForm.createTimeBegin = this.$Moment(val[0]).format(this.momentDate)// 创建开始时间
        this.searchForm.createTimeEnd = this.$Moment(val[1]).format(this.momentDate)// 创建结束时间
      }
    },
    // 供应商信息-弹框
    examineSupplierInfo(row) {
      this.$refs.supplierInfo.open(row.supplierId)// 供应商主键id
    }
  }
}
</script>
<style lang="less" scoped>
</style>
