<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">

      <el-form-item label="公司名称(个人)" prop="companyName">
        <el-input v-model="queryParams.companyName" placeholder="请输入公司名称(个人)" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['official:businessPartner:remove']">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="slideshowList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键id" align="center" prop="id" v-if="false" />
      <el-table-column label="公司名称(个人)" width="130" align="center" prop="companyName" />
      <el-table-column label="地址" width="230" align="center" prop="address" />
      <el-table-column label="联系电话" width="110" align="center" prop="phoneNumber" />
      <el-table-column label="电子邮箱" width="180" align="center" prop="email" />
      <el-table-column label="擅长方向" align="center" prop="fieldType" />
      <el-table-column label="优势概念" align="center" prop="advantageConcept">
        <template slot-scope="{ row }">
          <div class="multiple-line-content-show" style="cursor: pointer;" @click="dialogContent(row.advantageConcept, '优势概念')" v-html="row.advantageConcept"></div>
        </template>
      </el-table-column>
      <el-table-column label="合作意向概述" align="center" prop="cooperationIntention">
        <template slot-scope="{ row }">
          <div class="multiple-line-content-show" style="cursor: pointer;" @click="dialogContent(row.cooperationIntention, '合作意向概述')" v-html="row.cooperationIntention"></div>
        </template>
      </el-table-column>
      <el-table-column label="附件" width="400" align="center" prop="imageurl">
        <template slot-scope="{ row }" v-if="row.imageurl">
          <div class="line-content-show" style="cursor: pointer;" v-for="(url, index) in row.imageurl.split(',')" :key="'file'+ index" @click="handleDownFile(url)">
            {{ getFileName(url) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['official:businessPartner:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script>
  import {
    listPartnerSupplier,
    delPartnerSupplier,
    downFile
  } from '@/api/official/partnerSupplier'

  export default {
    name: 'FeedBack',
    data() {
      return {
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        slideshowList: [],
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          propertiesType: 1,
          companyName: undefined
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 获取文件名称
      getFileName(name) {
        // 如果是url那么取最后的名字 如果不是直接返回
        if (name.lastIndexOf('/') > -1) {
          return name.slice(name.lastIndexOf('/') + 1)
        } else {
          return name
        }
      },
      handleDownFile(url) {
        downFile(url).then(res => {
          // 通过a标签打开新页面下载文件
          const downLoadName = this.getFileName(url)
          const a = document.createElement('a')
          a.href = URL.createObjectURL(res)
          // a标签里有download属性可以自定义文件名
          a.setAttribute('download', downLoadName)
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        })
      },
      /** 查询新闻信息
  列表 */
      getList() {
        this.loading = true
        listPartnerSupplier(this.queryParams).then(response => {
          this.slideshowList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          captionName: undefined
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids
        this.$modal
          .confirm('是否确认删除编号为"' + ids + '"的数据项？')
          .then(() => {
            this.loading = true
            return delPartnerSupplier(ids)
          })
          .then(() => {
            this.loading = false
            this.getList()
            this.$modal.msgSuccess('删除成功')
          })
          .catch(() => {})
          .finally(() => {
            this.loading = false
          })
      },
      dialogContent(feedContent, title) {
        this.$alert(feedContent, title, {
          confirmButtonText: '确定',
          callback: action => {}
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .multiple-line-content-show p {
    margin: 0;
  }
  // 修改对话框高度
  ::v-deep .el-dialog {
    height: 92%;
    overflow: hidden;
  }
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0;
    height: 89%;
    overflow-y: auto;
  }
</style>
