<template>
  <div id="jobfairlist">
    <!-- <el-row :span="24" :gutter="10" class="search">
      <el-col :span="5" class="searchInput">
        <el-input placeholder="请输入主办方" v-model="keyword" class="input-with-select"> </el-input>
      </el-col>
      <el-col :span="2" style="padding-bottom: 0.5rem;">
        <el-button type="info" circle icon="el-icon-search icons"></el-button>
      </el-col>
    </el-row> -->
    <el-table :data="list" border style="width: 100%">
      <!-- <el-table-column fixed type="index" label="序号" width="80" align="center"> </el-table-column> -->
      <el-table-column prop="title" label="双选会名称" width="200">
        <template v-slot="scoped">
          <el-row>
            <el-col :span="24">
              <el-link type="primary" @click="$router.push({ path: '/jobs/jobfair/info', query: { id: type === 'my' ? scoped.row.fairid : scoped.row.id } })">
                {{ scoped.row.title }}
              </el-link>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="organizer" label="主办方" width="150"></el-table-column>
      <el-table-column prop="city" label="城市" width="120"></el-table-column>
      <el-table-column prop="schname" label="学校" width="150" sortable></el-table-column>
      <el-table-column prop="time" label="时间" width="150" sortable></el-table-column>
      <el-table-column prop="booth" label="展位号" width="150" sortable v-if="type === 'my'"></el-table-column>
      <el-table-column prop="status" label="状态" v-if="type === 'my'" sortable>
        <template v-slot="scoped">
          {{ `${scoped.row.status}` === '1' ? '审核成功' : `${scoped.row.status}` === '0' ? '未审核' : '审核失败' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template v-slot="scoped">
          <span v-if="type === 'my'">
            <el-row>
              <el-col :span="24">
                <el-button
                  v-if="`${scoped.row.status}` !== '1'"
                  type="text"
                  size="small"
                  @click="$router.push({ path: '/jobs/jobfair/detail', query: { id: scoped.row.id } })"
                  >修改信息
                </el-button>
                <el-button v-else type="text" size="small" :disabled="true">已参加</el-button>
              </el-col>
              <el-col :span="24">
                <el-button v-if="`${scoped.row.status}` === '1'" type="text" size="small" @click="toFeedback(scoped.row)">上传回执</el-button>
              </el-col>
              <el-col :span="24">
                <el-button v-if="`${scoped.row.status}` !== '1'" size="mini" type="text" @click="handleDelete(scoped.row.id)">删除</el-button>
              </el-col>
            </el-row>
          </span>
          <span v-else>
            <el-button v-if="scoped.row.type === '2'" type="text" size="small" :disabled="true">专场双选会/组团</el-button>
            <el-button v-if="scoped.row.type === '1'" type="text" size="small" :disabled="true">不支持企业申请参加</el-button>
            <span v-else>
              <span v-if="scoped.row.is_join === '已申请'"> {{ scoped.row.is_join }}</span>
              <el-button @click="$router.push({ path: '/jobs/jobfair/detail', query: { fair_id: scoped.row.id } })" type="text" size="small" v-else>
                申请入驻
              </el-button>
            </span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="row_pagination">
      <el-col :span="24">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="totalRow"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="上传回执" :visible.sync="dialog" width="30%" center>
      <el-row style="text-align:center;">
        <el-col :span="24">
          <upload :url="`/files/corp/receipt/${info.id}/upload`" :limit="1" :data="info.receipt_letter" type="receipt_letter" @upload="uploadSuccess"></upload>
        </el-col>
        <el-col :span="24" style="padding-top:1rem">
          <el-button type="primary" @click="saveReceipt()">保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;存</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
export default {
  name: 'jobfairlist',
  props: {
    type: { type: String, defalut: 'none' },
    dataList: { type: Array, defalut: () => [] },
    totalRow: { type: Number, defalut: 20 },
  },
  components: {
    upload,
  },
  data: () => ({
    keyword: '',
    currentPage: 1,
    list: [],
    info: {},
    dialog: false,
  }),
  created() {},
  watch: {
    dataList: {
      handler(val) {
        this.$set(this, `list`, val);
      },
    },
  },
  computed: {},
  methods: {
    selectInfo(selection) {
      //选择/全选方法,删除或者其他批量操作使用
      let ids = [];
      selection.map(item => {
        ids.push(item.id);
      });
      this.$emit('selectInfo', { type: this.type, ids: ids });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('changePage', { type: this.type, currentPage: this.currentPage });
    },
    toFeedback(item) {
      this.$set(this, `info`, item);
      this.dialog = true;
    },
    handleDelete(id) {
      this.$emit('delete', { id: id });
    },
    uploadSuccess({ type, data }) {
      this.$set(this.info, `${type}`, { name: data.name, uri: data.uri });
    },
    saveReceipt() {
      this.$emit(`receipt`, this.info);
      this.$set(this, `info`, {});
      this.$set(this, `dialog`, false);
    },
  },
};
</script>

<style lang="less" scopedd>
.row_pagination {
  text-align: right;
  margin-top: 1rem;
}
</style>
