<template>
  <div class="main-content cancelList m20">
    <!--头部-查询-->
    <div class="content-header">
      <searchHeader title="查询" />
      <div class="body search-body">
        <el-row class="mb10">
          <el-col :span="7">
            <label class="label-name_1">节假日名称：</label>
            <div class="search-input-box_1">
              <el-input
                v-model="searchForm.customParamMap.holidayName"
                size="small"
                clearable
                type="text"
                class="search-input"
                placeholder="请输入节假日名称"
                @keyup.enter.native="search"
              />
            </div>
          </el-col>
          <el-col :span="11" :offset="1">
            <div class="btn-box">
              <el-button type="primary" size="mini" @click="search">查询</el-button>
              <el-button size="mini" @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--body-查询结果-->
    <div class="content-body">
      <div class="body">
        <el-row>
          <el-col :offset="1" :span="6">
            <el-button type="primary" size="mini" @click="addDialog = true">新增</el-button>

            <!--  ps: 预留导入名单功能， 未实现  -->
<!--            <el-button type="primary" size="mini" @click="fileImportDialog = true">导入名单</el-button>  -->
          </el-col>
        </el-row>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          tooltip-effect="dark"
          class="table-style"
          :fit="true"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
          @sort-change="sortChange"
        >
          <el-table-column prop="index" label="序号" min-width="50" align="center" />
          <el-table-column prop="holidayName" label="节假日名称" min-width="150" align="left" />
          <el-table-column prop="holidayDate" :show-overflow-tooltip="true" label="日期" min-width="200" align="left" />
          <el-table-column prop="type" label="标记类型" min-width="200" align="left">
            <template slot-scope="scope">
              <span v-if="scope.row.type === '1'">节假日</span>
              <span v-else-if="scope.row.type ==='2'">工作日</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="100" align="left">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">
          <el-row>
            <el-col :span="23">
              <el-pagination
                :disabled="loading"
                :page-size="pageParam.pageSize"
                :total="pageParam.total"
                :page-sizes="[10, 20, 30, 40,50,100,200]"
                layout="slot,total, sizes, prev, pager, next, jumper"
                @size-change="pageSizeChange"
                @current-change="pageIndexChange"
              >
                <span>
                  第 {{ pageParam.curPage }} 页 /
                  共 {{
                    (pageParam.total !== 0 ? parseInt((pageParam.total + pageParam.pageSize - 1) / pageParam.pageSize) : 1)
                  }} 页
                </span>
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <el-dialog
      title="新增"
      :visible.sync="addDialog"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      center
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="节假日名称" prop="holidayName">
          <el-col :span="11">
            <el-input v-model="ruleForm.holidayName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="日期" required>
          <el-col :span="11">
            <el-form-item prop="holidayDate">
              <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.holidayDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio label="1">节假日</el-radio>
            <el-radio label="2">工作日</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="submitForm">确 认</el-button>
          <el-button :loading="loading" @click="addDialog = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  ps: 预留导入名单功能， 未实现  -->
<!--    <el-dialog
      title="导入名单"
      :visible.sync="fileImportDialog"
      width="30%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div>
        <el-input
          v-model="batchFileName"
          placeholder="点击选择模版文件"
          style="display:inline-block;width:calc(100% - 120px)"
          :readonly="true"
          @click.native="$refs.batchFile.click()"
        />
        <el-button style="width:100px;margin-left:10px" type="primary" @click="$refs.batchFile.click()">浏览</el-button>
        <input :ref="'batchFile'" type="file" style="display:none" accept=".xls,.xlsx" @change="fileChange">
      </div>

      <FakeProgress v-if="showFakeProgress" ref="FakeProgress" style="margin-top: 10px;" />
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="8" align="left">
            <el-button type="primary" @click="downloadFile">下载模版</el-button>
          </el-col>
          <el-col :span="16">
            <el-button :loading="loading" @click="fileImportDialog = false">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="fileImport">确 认</el-button>
          </el-col>
        </el-row>
      </span>
    </el-dialog>-->

  </div>
</template>

<script>
import searchHeader from '@/components/searchHeader'
import FakeProgress from '@/components/FakeProgress'
import { list, save, del } from '@/api/holiday'

export default {
  components: {
    searchHeader,
    FakeProgress
  },
  data() {
    return {
      batchFileName: '',
      addDialog: false,
      fileImportDialog: false,
      showFakeProgress: false,
      searchForm: {
        paramMap: {},
        likeParamMap: {},
        customParamMap: {
          holidayName: ''
        }
      },
      ruleForm: {
        holidayName: '',
        holidayDate: '',
        type: '',
        year: ''
      },
      rules: {
        holidayName: [
          { required: true, message: '请输入节假日名称', trigger: 'blur' }
        ],
        holidayDate: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ]
      },
      loading: false,
      tableData: [],
      pageParam: {
        orderField: 'holiday_date',
        curPage: 1,
        total: 0,
        pageSize: 10
      }
    }
  },
  watch: {
  },
  mounted() {
    this.search()
  },
  methods: {
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.ruleForm.year = this.ruleForm.holidayDate.substring(0, 4)
          save(this.ruleForm).then(() => {
            this.loading = false
            this.addDialog = false
            this.$message({
              message: '新增成功!',
              type: 'success'
            })
            this.search()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    del(row) {
      del(row.id).then(() => {
        this.$message({
          message: '删除成功!',
          type: 'success'
        })
        this.search()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
    },
    // 下载模版
    downloadFile() {
      // const name = 'py_company_list.xls'
      const name = ''
      window.open(`/aiccs/${name}`)
    },
    fileChange() {
      this.batchFileName = this.$refs.batchFile.files[0].name
    },
    async fileImport() {
      const file = this.$refs.batchFile.files
      const form = new FormData()
      form.append('file', file[0])
      this.loading = true
      this.showFakeProgress = true
      // return importBlacklist(form).then(async({ code, data, msg }) => {
      //   this.loading = false
      //   this.showFakeProgress = false
      //   this.fileImportDialog = false
      //   this.$message({
      //     message: '导入成功!',
      //     type: 'success'
      //   })
      //   this.loadPage()
      // }).catch(() => {
      //   this.loading = false
      //   this.showFakeProgress = false
      // })
    },
    sortChange({ column, prop, order }) {
      this.searchForm.orderField = prop
      this.searchForm.orderingRule = order === 'ascending' ? 'asc' : 'desc'
      this.search()
    },
    resetSearchForm() {
      this.searchForm = {
        orderField: '',
        orderingRule: '',
        paramMap: {},
        likeParamMap: {},
        customParamMap: {
          holidayName: ''
        }
      }
    },
    // 搜索
    search() {
      this.pageParam.paramMap = {
        paramMap: {},
        likeParamMap: {},
        customParamMap: {}
      }
      for (const key in this.searchForm) {
        if (typeof this.searchForm[key] === 'string') {
          this.pageParam.paramMap[key] = this.searchForm[key]
        } else {
          for (const _key in this.searchForm[key]) {
            if (this.searchForm[key][_key]) {
              if (!this.pageParam.paramMap[key]) {
                this.pageParam.paramMap[key] = {}
              }
              this.pageParam.paramMap[key][_key] = this.searchForm[key][_key]
            }
          }
        }
      }
      this.pageParam.curPage = 1
      this.loadPage()
    },
    // 当前分页改变
    pageIndexChange(curPage) {
      this.pageParam.curPage = curPage
      this.loadPage()
    },
    // 分页大小改变
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize
      this.loadPage()
    },
    // 加载分页
    loadPage() {
      if (this.loading) return
      this.loading = true
      const data = JSON.parse(JSON.stringify({
        ...this.pageParam,
        ...this.pageParam.paramMap
      }))
      list(data).then(res => {
        this.loading = false
        const list = []
        let i = 1
        const pageStart = (this.pageParam.curPage - 1) * this.pageParam.pageSize
        res.data.records.forEach(each => {
          each.index = pageStart + i++
          list.push(each)
        })
        this.tableData = list
        this.pageParam.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search-body {
  .el-col {
    display: flex;
    align-items: baseline;
  }
}

.main-content.cancelList {
  background: #fff;
  padding: 10px;

  .content-header {
    background: white;

    .label-name_1 {
      text-align: right;
      display: inline-block; //转成行内快，才可定义宽度
      width: 220px;
      font-size: $table-content-font-size;
    }

    .body {
      padding: 20px 0;
      border-top: none;
      margin-bottom: 40PX;
    }
  }

  .content-body {
    background: white;
  }

  .header {
    .title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  }

  .page-box {
    margin: 10PX;

    .el-pagination {
      text-align: right;
    }
  }

  .dialog-box {
    padding-right: 20px;
    text-align: right;
  }

  .last_row {
    border-bottom: 1px solid $color-border;
  }

  .custom {
    width: 100%;
  }

  .span-content {
    display: block;
    text-indent: 1em;
  }
}

.mb10 {
  margin-bottom: 10px;
}

.content-body {
  background: #fff;

  /deep/ .el-table .warning-row {
    background: #eaf4fe !important;
  }
}

.flex-content {
  /deep/ .el-form-item__content {
    display: flex;
  }
}

.content-body {
  background: #fff;

  /deep/ .el-table .warning-row {
    background: #eaf4fe !important;
  }

  /deep/ .el-table .sort-caret.descending {
    border-top-color: #fff !important;
  }

  /deep/ .el-table .sort-caret.ascending {
    border-bottom-color: #fff !important;
  }
}
</style>
