<template>
  <ai-list isTabs class="list">
    <template #content>
      <div class="statistics-top">
        <div class="statistics-top__item">
          <span>招聘单位总数</span>
          <h2 style="color: #2266FF;">{{ staData.countCompany || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>招聘岗位总数</span>
          <h2 style="color: #22AA99;">{{ staData.countTotal || 0 }}</h2>
        </div>
        <div class="statistics-top__item">
          <span>招聘人员总数</span>
          <h2 style="color: #F8B425">{{ staData.countUser || 0 }}</h2>
        </div>
      </div>
      <div class="content">
        <ai-search-bar bottomBorder>
          <template slot="left">
            <!-- 性别下拉选择框 -->
            <ai-select v-model="searchObj.gender" placeholder="请选择性别" clearable @change=";(page.current = 1), getList()" :selectList="dict.getDict('JobGender')"></ai-select>
          </template>

          <!-- 搜索 -->
          <template slot="right"> <el-input v-model="searchObj.title" size="small" placeholder="请输入单位名称" clearable @keyup.enter.native=";(page.current = 1), getList()" @clear=";(page.current = 1), (searchObj.title = ''), getList()" suffix-icon="iconfont iconSearch"/></template>
        </ai-search-bar>

        <ai-search-bar style="margin-top: 16px;">
          <!-- 添加 -->
          <template #left>
            <el-button type="primary" icon="iconfont iconAdd" size="small" @click="add('')">添加</el-button>
            <el-button icon="iconfont iconDelete" size="small" @click="toDelete()" :disabled="ids.length == 0">删除</el-button>
          </template>

          <!-- 导入导出 -->
          <template #right>
            <ai-import :instance="instance" :dict="dict" type="appjob" name="招工就业" @success="getList(), $message.success('导入成功!')">
              <el-button icon="iconfont iconImport">导入</el-button>
            </ai-import>

            <ai-download :instance="instance" url="/app/appjob/listExport" :params="param" fileName="招工就业模板" />
          </template>
        </ai-search-bar>

        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @selection-change="(v) => (ids = v.map((e) => e.id))" @getList="getList">
          <!-- 是否启用 -->
          <el-table-column label="是否启用" slot="status" align="center" width="80">
            <template v-slot="{ row }">
              <el-switch v-model="row.status" @change="onChange(row)" active-value="1" inactive-value="0" active-color="#5088FF" inactive-color="#D0D4DC"> </el-switch>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" align="center" width="140" slot="options">
            <template slot-scope="{ row }">
              <el-button type="text" @click="add(row.id)">编辑</el-button>
              <el-button type="text" @click="toDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </div>
    </template>
  </ai-list>
</template>

<script>
export default {
  name: 'list',
  // 组件
  components: {},
  props: {
    params: Object,
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      tableData: [],
      page: {
        size: 10,
        current: 1,
        total: 0,
      },
      searchObj: {
        gender: '',
        title: '',
      },
      colConfigs: [
        { type: 'selection' },
        { prop: 'companyName', label: '单位名称', width: '180px' },
        { prop: 'title', label: '招聘岗位', width: '150px' },
        { prop: 'total', label: '招聘人数', width: '80px' },
        { prop: 'education', label: '学历', width: '80px' },
        {
          prop: 'gender',
          label: '性别',
          width: '60px',
          render: (h, { row }) => {
            return h('span', null, this.dict.getLabel('JobGender', row.gender))
          },
        },
        { prop: 'age', label: '年龄' },
        { prop: 'salary', label: '薪酬待遇' },
        { prop: 'linkName', label: '联系人', width: '80px' },
        { prop: 'linkPhone', label: '联系方式' },
        { prop: 'createUserName', label: '添加人' },
        { prop: 'createTime', label: '添加日期', width: '160px' },
        { slot: 'status', label: '是否启用' },
      ],
      staData: [],
      ids: [],
    }
  },
  // 计算
  computed: {
    param() {
      let params = {}
      //导出搜索条件
      if (this.ids.length) {
        params = {
          ...params,
          ids: this.ids,
        }
      } else {
        params = {
          ...params,
          ...this.searchObj,
        }
      }
      return params
    },
  },
  // 监听
  watch: {},

  // 实例创建后
  created() {
    this.dict.load('JobGender').then(() => {
      this.getList()
      this.getStaData()
    })
  },

  // 实例创建后
  onShow() {},
  // 实例渲染后
  mounted() {
    this.dict.load('JobGender').then(() => {
      this.$nextTick(() => this.getList())
    })
  },
  // 方法
  methods: {
    getList() {
      this.instance
        .post(`/app/appjob/list`, null, {
          params: {
            ...this.page,
            ...this.searchObj,
            type: 0
          },
        })
        .then((res) => {
          if (res.code == 0) {
            // console.log(res.data.records)
            this.tableData = res.data.records
            this.page.total = res.data.total
          }
        })
        .catch(() => {})
    },

    // 添加
    add(id) {
      this.$emit('change', {
        type: 'Add',
        params: {
          id: id || '',
        },
      })
    },

    // 删除
    toDelete(id) {
      this.$confirm('删除后不可恢复，是否要删除该事项?').then(() => {
        this.instance
          .post('/app/appjob/delete', null, {
            params: { ids: id || this.ids.join(',') },
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
              this.getStaData()
            }
          })
      })
    },

    // 启用停用
    onChange(row) {
      this.instance.post(`/app/appjob/setStatus?id=${row.id}&status=${row.status}`).then((res) => {
        if (res.code == 0) {
          this.$message.success(+row.status ? '已启用' : '不启用')
          this.getList()
        }
      })
    },

    // 统计
    getStaData() {
      this.instance.post('/app/appjob/statistic').then((res) => {
        if (res?.data) {
          this.staData = res.data
          
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .list {
    ::v-deep .ai-list__content {
      padding: 0!important;

      .ai-list__content--right-wrapper {
        background: transparent!important;
        box-shadow: none!important;
        margin: 0!important;
        padding: 0 0 12px!important;
      }
    }
    .statistics-top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      & > div {
        flex: 1;
        height: 96px;
        line-height: 1;
        margin-right: 20px;
        padding: 16px 24px;
        background: #FFFFFF;
        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
        border-radius: 4px;

        &:last-child {
          margin-right: 0;
        }

        h3 {
          font-size: 24px;
        }

        span {
          display: block;
          margin-bottom: 16px;
          color: #888888;
          font-size: 16px;
        }
      }
    }

    .content {
      padding: 16px;
      background: #FFFFFF;
      box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
    }
  }
</style>
