<template>
  <div class="common-page-content">
    <div class="common-search-container" ref="contentPanel">
      <el-form
        ref="form"
        :model="searchForm"
        label-width="auto"
        label-position="right "
        :inline="true"
        type="flex"
        justify="left"
      >
        <el-form-item label="企业名称">
          <el-input
            size="small"
            v-model="searchForm.supplier_name_"
            clearable
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="container-btn">
        <el-button
          size="small"
          icon="el-icon-search"
          type="danger"
          class="btn btn-plus"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          size="small"
          icon="el-icon-refresh-right"
          class="btn btn-plus"
          @click="clearSearchForm"
        >
          重置
        </el-button>
      </div>
    </div>
    <el-row
      class="common-table-container flex searchPanel"
      :style="SearchPanel"
    >
      <el-col :span="24" class="common-table-wrapper">
        <div class="common-btn-group">
          <!-- <el-button
            size="small"
            slot="reference"
            icon="el-icon-delete"
            type="danger"
            class="btn btn-delete"
            @click="handleDelete"
          >
            {{ this.$t('common.delete') }}
          </el-button> -->
          <!-- <el-button
              size="small"
              icon="el-icon-bottom"
              type="primary"
              plain
              class="btn btn-plus"
            >
              导出数据
            </el-button> -->
        </div>
        <!-- LJ：表格高度自适应需配合样式  btn-pagenation 有按钮有分页  btngroup只有按钮  pagenation只有分页 -->
        <div class="common-table-content btn-pagenation">
          <el-table
            :border="true"
            stripe
            fit
            size="mini"
            v-loading="tableLoading"
            ref="multipleSelection"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" min-width="50px" align="center">
            </el-table-column>
            <el-table-column
              prop="enterpriseCode"
              show-overflow-tooltip
              min-width="110px"
              align="center"
              label="企业编号"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="enterpriseName"
              show-overflow-tooltip
              min-width="130px"
              align="center"
              label="企业名称"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="supplierCode"
              min-width="110px"
              label="供应商编号"
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="supplierName"
              min-width="130px"
              label="供应商名称"
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="categoryName"
              min-width="100px"
              label="供应商分类"
              align="center"
              resizable
            >
            </el-table-column>
            <!-- <el-table-column min-width="150px" align="center" label="操作">
              <template v-slot="{row}">
                <el-button
                  type="primary"
                  icon="el-icon-view"
                  plain
                  @click="handleView(row)"
                  size="small"
                  >查看资质附件</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="common-pagenation">
          <el-pagination
            ref="paginationPanel"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageResult.page"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="pageResult.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageResult.total"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 资质附件 -->
    <el-dialog
      title="资质附件"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="dialogBeforeClose"
    >
      <el-table
        class="down"
        :data="form.accessoryList"
        border
        stripe
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          prop="qualificationCategoryName"
          label="资质类型"
        ></el-table-column>
        <el-table-column prop="name" label="文件名称"></el-table-column>
        <el-table-column prop="size" label="文件大小">
          <template slot-scope="scope">
            <span v-if="scope.row.fileSize">{{ scope.row.fileSize }}</span>
            <template v-else>
              <span v-if="scope.row.size / 1024 / 1024 < 1">{{
                (scope.row.size / 1024).toFixed(2) + 'KB'
              }}</span>
              <span v-else>{{
                (scope.row.size / 1024 / 1024).toFixed(2) + 'MB'
              }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150px" label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="text">
              <a
                target="_blank"
                @click="downloadFile(scope.row.name, scope.row.url)"
                >下载</a
              >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import supplierManger from '@/api/supplierManger.js'
import pagination from '@/components/pagination'
import {TableMixin} from '@/mixins/tableMixin'
import routerManagement from '@/api/BasicDataManagement/routerManagement.js'
import req from '@/request.js'
import utils from '@/utils.js'
export default {
  name: 'DemandEntry',
  components: {
    pagination,
  },
  mixins: [TableMixin],
  data() {
    return {
      currentPage: 1,
      tableMaxHeight: 400,
      loading: false,
      tableLoading: false,
      tableData: [],
      loadingBtn: false,
      multipleSelection: [],
      rejectionReason: '',
      form: {},
      authList: [],
      params: {
        pageBean: {
          page: 1,
          pageSize: 20,
          total: 0,
        },
        sorter: [
          {
            direction: 'DESC',
            property: 'createTime',
          },
        ],
      },
      searchForm: {
        type: 1,
      }, // 顶部搜索对象
      currentDataDel: [], // 删除时排查是否有在审核的数据
      dialogVisible: false,
    }
  },
  created() {
    this.handleSearch()
  },
  methods: {
    getDictName(code, value) {
      return utils.getDictName(code, value)
    },
    //获取数据
    loadData(params) {
      this.tableLoading = true
      this.$http
        .post(
          '${portal}/supplier/bizSupplierEnterprise/v1/queryBySupplier',
          params
        )
        .then((res) => {
          this.tableLoading = false
          const data = (res && res.data) || {}
          this.tableData = data.rows || []
          this.pageResult = {
            page: data.page,
            pageSize: data.pageSize,
            total: data.total,
          }
        })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 1) {
        this.$refs.multipleSelection.toggleRowSelection(
          this.multipleSelection[0],
          false
        )
      }
    },
    handleView(row) {
        this.$http
          .get('${portal}/supplier/bizSupplierEnterprise/v1/getById/' + row.id)
          .then((res) => {
            let data = res.data
            this.form = data
            if (this.form.accessoryList.length != 0) {
              this.form.accessoryList.forEach((val) => {
                this.form.suppliersQualificationList.forEach((item) => {
                  if (val.group == item.id) {
                    val['qualificationCategoryName'] =
                      item.qualificationCategoryName
                  }
                })
              })
            }
          })
        this.dialogVisible = true
      },
    //下载按钮回调
    downloadFile(name, url) {
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      a.download = name
      a.target = '_blank'
      a.href = url
      a.dispatchEvent(event)
    },
    // 删除
    handleDelete() {
      let selection = this.$refs.multipleSelection.selection
      if (selection.length === 0) {
        this.$alert('请选择要删除的数据！', this.$t('common.tips'), {
          confirmButtonText: this.$t('common.confirm'),
          type: 'warning',
        })
      } else {
        let ids = []
        selection.forEach((item) => {
          let str = 'ids=' + item.id
          ids.push(str)
        })
        ids = ids.join('&')
        this.$confirm(this.$t('common.sureDelete'), this.$t('common.tips'), {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning',
        }).then(() => {
          this.tableLoading = true
          supplierManger.delManage(ids).then((res) => {
            this.tableLoading = false
            if (res.data.state) {
              this.$message.success('删除成功！')
              this.handleSearch()
            } else {
              this.$message.error('删除失败！')
            }
          })
        })
      }
    },
    //重置
    clearSearchForm() {
      this.searchForm = {type: 1, reviewStatus: 1}
      this.handleSearch()
    },
    // 顶部搜索
    handleSearch() {
      let obj = this.searchForm
      let querys = []
      for (let i in obj) {
        if (obj[i]) {
          querys.push({
            group: 'main',
            operation:
              i == 'reviewStatus' || i == 'supplier_name_' ? 'LIKE' : 'EQUAL',
            parentGroup: '',
            property: i,
            relation: 'AND',
            value: obj[i],
          })
        }
      }
      this.params.querys = querys
      this.loadData(this.params)
    },
    handleCurrentChange(page) {
      this.params.pageBean = {...this.params.pageBean, page}
      this.loadData(this.params)
    },
    handleSizeChange(pageSize) {
      this.params.pageBean = {...this.params.pageBean, pageSize}
      this.loadData(this.params)
    },
    dialogBeforeClose() {
      this.dialogVisible = false
    },
  },
  computed: {
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px',
      }
    },
  },
}
</script>
  
  <style lang="scss" scoped>
.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-right: 5px;
  }
  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }
  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
  }
  /deep/ i,
  span {
    font-size: 16px;
  }
}

/deep/ .el-tree-node__content {
  padding: 5px 0;
}

/deep/ .el-table thead tr th {
  background-color: #eee !important;
  border-right: 1px solid #dfe2e8 !important;
}
/deep/ .el-table {
  border-collapse: collapse !important;
}
</style>
  