<template>
<!-- 考核维度录入 -->
  <div class="dashboard-container">
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="考核维度名称">
          <el-input
            placeholder="请输入名称"
            v-model="searchInfo.title"
            clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="考核维度状态">
          <el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
            <el-option :value=1 label="正常">正常</el-option>
            <el-option :value=2 label="禁止">禁止</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <div class="gva-btn-list">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="showAdd()">新增</el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column align="left" label="考核维度ID" prop="outId"/>
        <el-table-column align="left" label="考核维度名称" prop="title"/>
        <el-table-column align="left" label="考核维度状态">
            <template #default="scope">
                <el-switch
                    inline-prompt 
                    active-text="正常" 
                    inactive-text="禁止"
                    v-model="scope.row.state"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value=1
                    :inactive-value=2
                    @change="changeVal($event,scope.row.outId)"
                    />
             </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button
              icon="el-icon-edit"
              size="small"
              type="text"
              @click="showEdit(scope.row)"
            >编辑</el-button>
            <el-button
              icon="el-icon-delete"
              size="small"
              type="text"
              @click="deleteOperate(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </div>
      </div>
      <!-- 新增弹框 -->
      <el-dialog :visible.sync="dialogFormVisible" :before-close="closeDialog" title="新增" width="20%">
        <el-form ref="addForm" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="考核维度名称" prop="title">
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog :visible.sync="editDialogFormVisible" :before-close="editCloseDialog" title="修改" width="20%">
        <el-form ref="editForm" :model="editAdd" :rules="editRules" label-width="150px">
          <el-form-item label="考核维度名称" prop="title">
            <el-input v-model="editAdd.title" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer"> 
            <el-button size="small" @click="editCloseDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="editEnterDialog">确 定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import { dutyclasslist,statedutyclass,eitedutyclassinfo,getdutyclassinfo,adddutyclass } from '@/api/duty/dimension'
export default {
  name: 'Dashboard',
  data() {
    return {
      // 查询详情的数据
      editFrom:{},
      // 修改状态提交数据
      switchFrom:{},
      // 删除数据提交
      deleFrom:{},
      // 编辑时数据
      editAdd:{},
      assessList:{},
      // 添加数据
      form:{},
      // 弹窗变量
      dialogFormVisible:false,
      // 修改弹窗
      editDialogFormVisible:false,
      total: 0,
      tableData:[],
      // 条件查询变量
      searchInfo: {
        page: 1,
        pagesize: 10
      },
      // 条件查询变量
      abc:{
        aaa:"111",
        bbb:"222"
      },
      // 添加时验证规则
      rules: {
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      editRules:{
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      }
    }
  },
  created() {
    console.log(this.$store.state.user.token)
    if (this.$store.state.user.token=='') {
      this.$router.push('/login')
    }
    // 页面渲染时获取初始数据
    this.getDataList()
  },
  methods: {
    // 删除操作
    //删除操作
    async deleteOperate(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.deleFrom.state=3;
          this.deleFrom.outid=row.outId;
          const res = await statedutyclass(this.deleFrom)
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            
             this.getDataList()
          }
        })
    },
    // 新增按钮
    showAdd(){
      this.dialogFormVisible=true;
      console.log(this.dialogFormVisible)
    },
    // 编辑按钮
    async showEdit(row){
      this.editFrom.outid=row.outId
      const res = await getdutyclassinfo(this.editFrom)
      this.editAdd = res.data
      this.editDialogFormVisible=true;

    },
    // 开关状态监听
   async changeVal(val,id){
       console.log(val)
      this.switchFrom.outid=id
      if (val==1) {
        this.switchFrom.state=1;
        const res = await statedutyclass(this.switchFrom)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '修改状态成功',
                    showClose: true
                  })
                  this.getDataList()
                }
      } else {
        this.switchFrom.state=2;
        const res = await statedutyclass(this.switchFrom)
                if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '修改状态成功',
                    showClose: true
                  })
                  this.getDataList()
                }
      }
    },
    // 重置搜索条件
    onReset() {
      this.searchInfo = {}
    },
    // 条件搜索
    onSubmit() {
      this.page = 1
      this.pageSize = 10
      this.getDataList()
    },
    // 日期时间戳转日期格式
    formatDate(nS) {     
      return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
    },
   
    // 提交按钮
    async enterDialog(){
      
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          const res = await adddutyclass(this.form)
          if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                    showClose: true
                  })
                }
          this.getDataList();
          this.closeDialog();
        }
      })
    },

    // 编辑提交按钮
    async editEnterDialog(){
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          const res = await eitedutyclassinfo(this.editAdd)
          if (res.code === 0) {
                  this.$message({
                    type: 'success',
                    message: '编辑成功',
                    showClose: true
                  })
                }
          this.getDataList();
          this.editCloseDialog();
        }
      })
    },
    // 添加框关闭
    closeDialog() {
      console.log("closeDialog")
      this.initForm()
      this.dialogFormVisible = false
    },
    // 修改框关闭
    editCloseDialog() {
      this.editInitForm()
      this.editDialogFormVisible = false
    },
    // 添加重置表单
    initForm() {
      console.log("initForm")
      this.$refs.addForm.resetFields()
      this.form = {}
      console.log(this.form)
    },
    // 修改重置表单
    editInitForm() {
      this.$refs.editForm.resetFields()
      this.editAdd = {}
    },
    // 改变pageSize
    handleSizeChange(val) {
      this.searchInfo.pagesize=val
      this.getDataList(this.searchInfo)
    },
    // 改变page
    handleCurrentChange(val) {
      this.searchInfo.page=val
      this.getDataList(this.searchInfo)
    },
    // 获取初始数据
    async getDataList() {
      const res = await dutyclasslist(this.searchInfo)
      this.tableData = res.data.list
      this.total = res.data.total
      this.searchInfo.page = res.data.page
      this.searchInfo.pagesize = res.data.pageSize
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
