<template>
  <div class="app-container">
    <el-form :model="searchArray" ref="searchArrayRef" size="small" :inline="true">
      <el-form-item label="频率" prop="frequencyType">
        <el-select
          v-model="searchArray.frequencyType"
          placeholder="请选择频率"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="item in frequencyTypeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位" prop="postId">
        <el-select v-model="searchArray.postId" placeholder="请选择岗位" style="width: 100%" clearable>
          <el-option
            v-for="item in postIdList"
            :key="item.postId"
            :value="item.postId"
            :label="item.postName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchFn">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetFn">重置</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="addFn">新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableData" :height="dyHeight">
      <el-table-column label="序号" prop="xh" width="100">
        <template slot-scope="scope">
          <span>{{ scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="重点工作类别" prop="workType" min-width="100" show-overflow-tooltip />
      <el-table-column label="清单详情" prop="workDetail" min-width="140" show-overflow-tooltip />
      <el-table-column label="反馈标准" prop="feedback" min-width="140" show-overflow-tooltip />
      <el-table-column label="频率" prop="frequencyType" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.frequencyType | formatFilter('frequencyType',frequencyTypeList) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="岗位名称" prop="postName" min-width="100" show-overflow-tooltip />
      <el-table-column label="开启状态" prop="isEnabledShow" min-width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>
            <el-switch v-model="scope.row.isEnabledShow" disabled />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createBy" min-width="100" show-overflow-tooltip />
      <el-table-column label="创建时间" prop="createTime" min-width="100" show-overflow-tooltip />
      <el-table-column label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editFn(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteFn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_end">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        @current-change="currentChangeFn"
        :total="total"
        @size-change="sizeChangeFn"
      ></el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="visibleFlag"
      width="800px"
      append-to-body
      v-if="visibleFlag"
    >
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="重点工作类别" prop="workType">
              <el-select
                v-model="dialogForm.workType"
                placeholder="请选择重点工作类别"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item in workTypeList"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="反馈标准" prop="feedback">
              <el-input
                v-model="dialogForm.feedback"
                placeholder="请输入反馈标准"
                clearable
                style="width:100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="岗位名称" prop="postId">
              <el-select
                v-model="dialogForm.postId"
                placeholder="请选择频率类型"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item in postIdList"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="频率类型" prop="frequencyType">
              <el-select
                v-model="dialogForm.frequencyType"
                placeholder="请选择频率类型"
                clearable
                style="width:100%"
              >
                <el-option
                  v-for="item in frequencyTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="启用状态" prop="isEnabled">
              <el-switch v-model="dialogForm.isEnabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="清单详情" prop="workDetail">
          <el-input
            v-model="dialogForm.workDetail"
            placeholder="请输入清单详情"
            clearable
            style="width:100%"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="dialogOkfn">确 定</el-button>
        <el-button @click="dialogCancelfn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  systemPostOptionselect,
  systemDictDataType,
  workTemplateInsert,
  workTemplateList,
  workTemplateEdit,
  workTemplateDelete
} from "@/api/system/home";
import _ from "lodash";
export default {
  name: "workmngsettingindex",
  data() {
    return {
      frequencyTypeList: [
        {
          label: "每日",
          value: "0"
        },
        {
          label: "每周",
          value: "1"
        },
        {
          label: "每月",
          value: "2"
        },
        {
          label: "每季",
          value: "3"
        },
        {
          label: "每年",
          value: "4"
        }
      ],
      postIdList: [],
      workTypeList: [],

      searchArray: {
        frequencyType: "",
        postId: ""
      },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      loading: false,
      dyHeight: {},

      visibleFlag: false,
      dialogTitle: "",
      dialogForm: {
        id: "",
        workType: "",
        workDetail: "",
        feedback: "",
        frequencyType: "",
        postId: "",
        isEnabled: false
      },
      dialogFormRules: {
        workType: [{ required: true, message: "不能为空", trigger: "blur" }],
        workDetail: [{ required: true, message: "不能为空", trigger: "blur" }],
        feedback: [{ required: true, message: "不能为空", trigger: "blur" }],
        frequencyType: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        postId: [{ required: true, message: "不能为空", trigger: "blur" }],
        isEnabled: [{ required: true, message: "不能为空", trigger: "blur" }]
      }
    };
  },
  created() {
    window.addEventListener("resize", () => {
      this.dyHeight = Number(window.innerHeight) - 330;
    });
    this.dyHeight = Number(window.innerHeight) - 330;
    this.systemPostOptionselectFn();
    this.systemDictDataTypeFn();
    this.resetFn();
  },
  filters: {
    formatFilter(v, type, list) {
      if (type == "frequencyType") {
        let arr = _.filter(list, { value: v });
        return arr[0].label;
      }
    }
  },
  methods: {
    systemPostOptionselectFn() {
      systemPostOptionselect({}).then(response => {
        if (response.code == "200") {
          this.postIdList = response.data;
        } else {
          this.$message.error(response.msg || "操作失败");
        }
      });
    },
    systemDictDataTypeFn() {
      systemDictDataType("work_type").then(response => {
        if (response.code == "200") {
          this.workTypeList = response.data;
        } else {
          this.$message.error(response.msg || "操作失败");
        }
      });
    },
    resetFn() {
      this.searchArray = {
        frequencyType: "",
        postId: ""
      };
      this.searchFn();
    },
    searchFn() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.total = 0;
      this.queryListFn();
    },
    queryListFn() {
      this.loading = true;
      let p = {
        ...this.searchArray,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      workTemplateList(p).then(response => {
        this.loading = false;
        if (response.code == "200") {
          this.tableData = response.rows || [];
          this.total = response.total || 0;
          if (this.tableData.length > 0) {
            _.forEach(this.tableData, function(item, index) {
              item.isEnabledShow = item.isEnabled == "0" ? true : false;
            });
          }
        } else {
          this.$message.error(response.msg || "操作失败");
        }
      });
    },
    currentChangeFn(val) {
      this.pageNum = val;
      this.queryListFn();
    },
    sizeChangeFn(val) {
      this.pageSize = val;
      this.queryListFn();
    },
    addFn() {
      this.dialogTitle = "新增";
      this.dialogForm = {
        id: "",
        workType: "",
        workDetail: "",
        feedback: "",
        frequencyType: "",
        postId: "",
        isEnabled: false
      };
      this.visibleFlag = true;
      // this.$nextTick(() => {
      //   this.$refs.dialogFormRef.resetFields();
      // });
    },
    dialogOkfn() {
      this.$refs["dialogFormRef"].validate(valid => {
        if (valid) {
          let p = { ...this.dialogForm };
          if (p.isEnabled) {
            p.isEnabled = "0";
          } else {
            p.isEnabled = "1";
          }
          let api = "";
          if (this.dialogTitle == "新增") {
            api = workTemplateInsert;
          } else {
            api = workTemplateEdit;
          }
          api(p).then(response => {
            if (response.code == "200") {
              let msg = "";
              if (this.dialogTitle == "新增") {
                msg = "新增成功";
              } else {
                msg = "修改成功";
              }
              this.$message.success(msg);
              this.visibleFlag = false;
              this.resetFn();
            } else {
              this.$message.error(response.msg || "操作失败");
            }
          });
        }
      });
    },
    dialogCancelfn() {
      this.visibleFlag = false;
    },
    editFn(row) {
      this.dialogTitle = "修改";
      let isEnabled = "";
      if (row.isEnabled == "0") {
        isEnabled = true;
      } else {
        isEnabled = false;
      }
      this.dialogForm = {
        id: row.id,
        workType: row.workType,
        workDetail: row.workDetail,
        feedback: row.feedback,
        frequencyType: row.frequencyType,
        postId: row.postId,
        isEnabled: isEnabled
      };
      this.visibleFlag = true;
      // this.$nextTick(() => {
      //   this.$refs.dialogFormRef.resetFields();
      // });
    },
    changeFn(v) {},
    deleteFn(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        workTemplateDelete([row.id]).then(response => {
          if (response.code == "200") {
            this.$message.success("删除成功！");
            this.resetFn();
          } else {
            this.$message.error(response.msg || "操作失败");
          }
        });
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.pagination_end {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
</style>