<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="工程名称" prop="proName">
        <el-input
          v-model="queryParams.proName"
          placeholder="请输入工程名称"
          clearable v-no-whitespace
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工程类型" prop="proType">
        <el-select v-model="queryParams.proType" placeholder="请选择工程类型" clearable>
          <el-option v-for="item in proTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="工程状态" prop="proStatus">
        <el-select v-model="queryParams.proStatus" placeholder="请选择工程状态" clearable>
          <el-option v-for="item in proStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="考勤状态" prop="isEnable">
        <el-select v-model="queryParams.isEnable" placeholder="请选择考勤状态" clearable>
          <el-option
            v-for="item in checkingInStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </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="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableData" fit highlight-current-row style="width: 100%">
      <!-- 多选 -->
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column
        v-for="(column, index) in tableColumns"
        show-overflow-tooltip
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        align="center"
      >
        <template v-slot="scope" v-if="column.prop == 'isEnable'">
          <span v-if="scope.row.isEnable">
            <el-switch v-model="scope.row.isEnable2" @change="changeSwitch(scope.row)"></el-switch>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="mini" icon="el-icon-edit" @click="edit(scope.row)">编辑</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"
    />

    <el-dialog title="打卡配置" :visible.sync="open" width="60%" append-to-body :close-on-click-modal="false">
      <ClockInConfig ref="clockInConfig" :items="mapItems" v-on:closeMain="closeMain"></ClockInConfig>
    </el-dialog>
  </div>
</template>

<script>
import { dictTableOption } from '@/api/tool/select'
import ClockInConfig from './components/ClockInConfig'
import { getAttendanceConfigurationList, enabledOrNot } from '@/api/checkInAdmin/index'
import { indexContinuous } from '@/utils/bonus'

export default {
  components: {
    ClockInConfig,
  },
  data() {
    return {
      open: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        proName: '', // 工程名称
        proType: '', // 工程类型
        proStatus: '', // 工程状态
        isEnable: '', // 考勤状态
      },
      proTypeOptions: [], // 工程类型
      proStatusOptions: [], // 工程状态
      // 考勤状态
      checkingInStatusOptions: [
        { label: '关闭', value: '0' },
        { label: '启用', value: '1' },
      ],
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '工程名称', prop: 'proName' },
        { label: '工程类型', prop: 'proType' },
        { label: '工程状态', prop: 'proStatus' },
        { label: '上班打卡时间', prop: 'upperWorkTime' },
        { label: '下班打卡时间', prop: 'belowWorkTime' },
        { label: '考勤说明', prop: 'checkingInDesc' },
        { label: '打卡点', prop: 'clockName' },
        { label: '考勤开关', prop: 'isEnable' },
      ],
      // 表格数据
      tableData: [],
      mapItems: {
        open: 'false',
      },
    }
  },
  created() {
    this.getProType()
    this.getStatus()
    this.getList()
  },
  methods: {
    indexContinuous,
    // 查询
    handleQuery() {
      console.log('查询')
      this.getList()
    },
    // 重置
    handleReset() {
      console.log('重置')
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        console.log('查询参数', this.queryParams)
        const res = await getAttendanceConfigurationList(this.queryParams)
        console.log('🚀 ~ 获取列表 ~ res:', res)
        this.tableData = res.rows
        this.total = res.total
        this.tableData.forEach(item => {
          let checkingInDescList = []
          if (item.isEnable) {
            if (item.isEnable == '1') {
              item.isEnable2 = true
            } else {
              item.isEnable2 = false
            }
          } else {
            item.isEnable2 = false
          }
          if (item.monday && item.monday == '1') {
            checkingInDescList.push('周一')
          }
          if (item.tuesday && item.tuesday == '1') {
            checkingInDescList.push('周二')
          }
          if (item.wednesday && item.wednesday == '1') {
            checkingInDescList.push('周三')
          }
          if (item.thursday && item.thursday == '1') {
            checkingInDescList.push('周四')
          }
          if (item.friday && item.friday == '1') {
            checkingInDescList.push('周五')
          }
          if (item.saturday && item.saturday == '1') {
            checkingInDescList.push('周六')
          }
          if (item.sunday && item.sunday == '1') {
            checkingInDescList.push('周日')
          }
          if (checkingInDescList.length > 0) {
            item.checkingInDesc = '每' + checkingInDescList.join('、') + '为工作日'
          } else {
            item.checkingInDesc = ''
          }
        })
      } catch (error) {
        console.log('🚀 ~ file: index.vue ~ line 94 ~ getList ~ error', error)
      }
    },
    //获取工程类型
    getProType() {
      const params = {
        dictType: 'sys_pro_type',
        dictValue: '',
      }
      dictTableOption(params).then(response => {
        console.log('🚀 ~ dictTableOption ~ response:', response)
        this.proTypeOptions = response.data
      })
    },
    //获取工程类型
    getStatus() {
      const params = {
        dictType: 'sys_pro_status',
        dictValue: '',
      }
      dictTableOption(params).then(response => {
        console.log('🚀 ~ dictTableOption ~ response:', response)
        this.proStatusOptions = response.data
      })
    },
    // 编辑
    edit(row) {
      console.log('编辑', row)
      this.open = true
      this.$nextTick(() => {
        this.$refs.clockInConfig.handleEdit(row)
      })
    },
    // 开关
    async changeSwitch(row) {
      console.log('开关', row)
      try {
        const params = { proId: row.proId, isEnable: row.isEnable2 ? '1' : '0' }
        console.log('🚀 ~ changeSwitch ~ params:', params)
        const res = await enabledOrNot(params)
        console.log('🚀 ~ changeSwitch ~ res:', res)
        this.getList()
      } catch (error) {
        console.log('🚀 ~ file: index.vue ~ line 94 ~ getList ~ error', error)
      }
    },
    closeMain() {
      console.log('closeMain')
      this.open = false
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped></style>
