<template>
  <section class="list">
    <ai-list>
      <!-- 标题 -->
      <ai-title slot="title" title="招工就业" isShowBottomBorder />

      <template #custom>
        <!-- 卡片 -->
        <el-row type="flex" class="staDataPane">
          <div class="boxItem">
            <div>招聘单位总数</div>
            <b>{{ staData.countCompany || 0 }}</b>
          </div>

          <div class="boxItem">
            <div>招聘岗位总数</div>
            <b>{{ staData.countTotal || 0 }}</b>
          </div>

          <div class="boxItem">
            <div>招聘人员总数</div>
            <b>{{ staData.countUser || 0 }}</b>
          </div>
        </el-row>

        <!-- 内容 -->
        <div class="mainPane">
          <ai-search-bar>
            <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>
            <!-- 添加 -->
            <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>
  </section>
</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,
          },
        })
        .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()
            }
          })
      })
    },

    // 启用停用
    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
          // console.log(this.staData)
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.list {
  height: 100%;

  ::v-deep .ai-list__content {
    padding: 0 16px 16px !important;
    box-sizing: border-box;

    .ai-list__content--wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }

  ::v-deep .staDataPane {
    width: 100%;
    gap: 16px;
    padding-top: 10px;

    .boxItem {
      flex: 1;
      min-width: 0;
      height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      color: #333;
      border: 1px solid #eee;
      background: #fff;

      b {
        font-size: 20px;
        font-family: DINAlternate-Bold, DINAlternate,serif;
      }
    }
  }

  ::v-deep .mainPane {
    background: #fff;
    border: 1px solid #eee;
    padding: 12px 16px;
  }

  .WhereaboutsConfigForm {
    flex-wrap: wrap;

    .el-select {
      width: 100%;

      ::v-deep .el-tag__close.el-icon-close {
        background: transparent;
      }
    }
  }
}
</style>
