<template>
  <!-- 基础页面 -->
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline @submit.native.prevent>
      <el-form-item label="关键字" prop="keyWord">
        <el-input
          v-model="queryParams.keyWord"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
          style="width: 240px"
        />
      </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">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableList" fit highlight-current-row style="width: 100%">
      <!-- 多选 -->
      <!-- <el-table-column type="selection" width="55" align="center" @selection-change="selectionChange" /> -->
      <el-table-column
        type="index"
        width="55"
        label="序号"
        align="center"
        :index="index => (queryParams.pageNum - 1) * queryParams.pageSize + index + 1"
      />
      <!-- :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)" -->
      <el-table-column
        v-for="(column, index) in tableColumns"
        show-overflow-tooltip
        :key="index"
        :label="column.label"
        :prop="column.prop"
        align="center"
      ></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="mini" icon="el-icon-delete" style="color: #f56c6c" @click="handleDelete(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="dialogTitle" :visible.sync="dialogVisible" width="40%">
      <el-form ref="dialogForm" :model="dialogForm" label-width="120px" :rules="dialogRules">
        <el-form-item label="班组名称" prop="teamName">
          <el-input v-model="dialogForm.teamName" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="所属项目部" prop="departId">
          <el-select v-model="dialogForm.departId" placeholder="请选择" clearable style="width: 100%">
            <el-option
              v-for="(item, index) in unitsNameList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班组长" prop="relName">
          <el-input v-model="dialogForm.relName" placeholder="请输入内容" clearable />
        </el-form-item>
        <el-form-item label="联系电话" prop="relPhone">
          <el-input v-model="dialogForm.relPhone" placeholder="请输入内容" clearable maxlength="11" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBmTeamApi, getBmProDepartApi, addBmTeamApi, editBmTeamApi, delBmTeamApi } from '@/api/materialsStation'

export default {
  data() {
    return {
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '' // 关键字
      },

      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '班组名称', prop: 'teamName' },
        { label: '所属项目部', prop: 'departName' },
        { label: '班组长', prop: 'relName' },
        { label: '联系电话', prop: 'relPhone' }
      ],
      // 表格数据
      tableList: [],
      dialogTitle: '新增',
      dialogVisible: false,
      unitsNameList: [], // 所属单位
      isEdit: false, // 是否编辑
      dialogForm: {
        teamName: '', // 班组名称
        departId: '', // 所属单位
        relName: '', // 联系人
        relPhone: '' // 联系电话
      },
      dialogRules: {
        teamName: [{ required: true, message: '请输入班组名称', trigger: 'blur' }],
        departId: [{ required: true, message: '请选择所属项目部', trigger: 'change' }],
        relName: [{ required: true, message: '请输入班组长', trigger: 'blur' }],
        relPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      console.log('列表-查询', this.queryParams)
      const loading = this.$loading({ text: '加载中...' })
      try {
        const params = { ...this.queryParams }
        const res = await getBmTeamApi(params)
        console.log('🚀 ~ 获取列表 ~ res:', res)
        this.tableList = res.data.rows
        this.total = res.data.total
        loading.close()
      } catch (error) {
        console.log('🚀 ~ 获取列表 ~ error:', error)
        this.tableList = []
        this.total = 0
        loading.close()
      }
    },
    // 多选
    selectionChange(val) {
      console.log('selectionChange', val)
    },
    // 获取单位列表
    async getUnitsNameList() {
      try {
        const res = await getBmProDepartApi({ isAll: 0 })
        console.log('🚀 ~ 获取单位列表 ~ res:', res)
        if (res.data && res.data.length > 0) {
          this.unitsNameList = res.data.map(item => ({
            label: item.departName,
            value: item.id
          }))
        }
      } catch (error) {
        console.log('获取单位列表失败', error)
      }
    },
    handleAdd() {
      console.log('新增')
      this.dialogTitle = '新增'
      this.dialogVisible = true
      this.isEdit = false
      this.getUnitsNameList()
      setTimeout(() => {
        this.$refs.dialogForm.resetFields()
      }, 100)
    },
    // 编辑
    handleEdit(row) {
      console.log('编辑', row)
      this.dialogTitle = '编辑'
      this.dialogVisible = true
      this.isEdit = true
      this.getUnitsNameList()
      setTimeout(() => {
        this.$refs.dialogForm.resetFields()
        this.dialogForm = { ...row }
      }, 100)
    },
    // 删除
    handleDelete(row) {
      console.log('删除', row)
      this.$confirm('是否删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delBmTeamApi({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      })
    },
    // 导出数据
    handleExport() {
      try {
        let fileName = `班组管理_${new Date().getTime()}.xLsx`
        let url = 'material/bmTeam/export'
        const params = { ...this.queryParams }
        console.log('🚀 ~ 导出 ~ params:', params)
        this.download(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    },
    // 弹框确认
    dialogConfirm() {
      console.log('dialogConfirm')
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          try {
            const params = { ...this.dialogForm }
            console.log('🚀 ~ dialogConfirm ~ params:', params)
            if (this.isEdit) {
              const res = await editBmTeamApi(params)
            } else {
              const res = await addBmTeamApi(params)
            }
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getList()
          } catch (error) {
            console.log('新增失败', error)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

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