<template>
  <div class="cmain">
    <el-form :model="queryParams" ref="queryForm" @submit.native.prevent :inline="true" label-width="auto">
      <el-form-item label="内容分类" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择">
          <el-option label="新闻资讯" value="新闻资讯"></el-option>
          <el-option label="通知公告" value="通知公告"></el-option>
          <el-option label="工作职位" value="工作职位"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="response.rows" border :key="key" @row-click="select">
      <el-table-column width="55" align="center">
        <template slot-scope="scope">
          <el-checkbox :checked="scope.row.check"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" />
      <el-table-column label="栏目" prop="type" align="center" v-if="queryParams.type == '新闻资讯'" width="150" />
      <el-table-column label="发布企业" prop="enterpriseName" align="center" v-if="queryParams.type == '工作职位'" />
      <el-table-column label="工作类型" prop="type" align="center" v-if="queryParams.type == '工作职位'" width="150">
        <template slot-scope="scope">
          {{ scope.row.type == 0 ? '全职' : '兼职' }}
        </template>
      </el-table-column>
      <template slot="empty">
        <el-empty></el-empty>
      </template>
    </el-table>
    <pagination v-if="response.total > 0" :total="response.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <div class="mfooter">
      <el-button type="primary" @click="setSelect()" :disabled="!form.contentId">确 定</el-button>
      <el-button @click="$layer.close(layerid)">取 消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'selectUrl',
  data() {
    return {
      columnList: [],
      response: {},
      form: {},
      key: true, //解决el-table 表体数据发生变化时，未重新渲染问题
      queryParams: {
        pageNum: 1,
        pageSize: 8,
        type: '新闻资讯',
        title: null
      }
    };
  },
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layerid: {
      type: String
    }
  },
  watch: {
    'queryParams.type'(val) {
      this.getList();
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.get({ url: '/work/banner/selectUrl', data: this.queryParams }).then((response) => {
        this.response = response;
      });
    },
    //选择栏目
    handleChange(value) {
      this.queryParams.columnId = value[value.length - 1]; //栏目id
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    },
    select(row) {
      this.response.rows.forEach((item) => {
        item.check = false;
      });
      row.check = true;
      this.key = !this.key;
      this.form.contentId = row.id;
      this.form.contentTitle = row.title;
    },
    setSelect() {
      this.$parent.form.contentTitle = this.form.contentTitle;
      this.$parent.form.contentId = this.form.contentId;
      this.$parent.form.contentType = this.queryParams.type;
      this.$layer.close(this.layerid);
    }
  }
};
</script>
<style lang="scss">
.el-table tr {
  cursor: pointer;
}
</style>
