<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">值班表</div>
      </el-col>
    </el-row>

    <!-- 分割线 -->
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">
    <div style="margin: 20px 0;"></div>

    <!--下拉选择框 添加按钮 -->
    <el-row>
      <el-col :span="6">
        <el-select
          v-model="watchValue"
          @change="changeWatchPeople"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button
          type="primary"
          @click="dialogFormVisible = true;form = {};"
        >添加值班人员</el-button>
      </el-col>
    </el-row>

    <div style="margin: 20px 0;"></div>
    <hr style="background-color: #CCCCCC;height: 1px;border: 0;">

    <!-- 表格区域 -->
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%;font-size: 14px;"
        highlight-current-row
        height="520"
      >
        <el-table-column
          prop="dutyName"
          label="姓名"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dutyDept"
          label="部门"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dutyPhone"
          label="电话"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button
              type="warning"
              size="mini"
              @click="amendWatchPeople(row)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deleteWatchPeople(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 新增值班人员弹窗 -->
    <el-dialog
      title="新增值班人员"
      :visible.sync="dialogFormVisible"
      center
      style="width:90%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="80px"
      >
        <el-form-item
          label="值班时间"
          prop="todayWork"
        >
          <el-select v-model="form.todayWork">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="姓名"
          prop="dutyName"
        >
          <el-input v-model="form.dutyName"></el-input>
        </el-form-item>

        <el-form-item
          label="部门"
          prop="dutyDept"
        >
          <el-input v-model="form.dutyDept"></el-input>
        </el-form-item>

        <el-form-item
          label="电话"
          prop="dutyPhone"
        >
          <el-input v-model="form.dutyPhone"></el-input>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="addWatchPeople('form')"
        >确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改值班人员弹窗 -->
    <el-dialog
      title="修改值班人员"
      :visible.sync="dialogFormVisible2"
      center
      style="width:90%"
    >
      <el-form
        :model="form"
        label-width="80px"
      >
        <el-form-item label="值班时间">
          <el-select v-model="form.todayWork">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="form.dutyName"></el-input>
        </el-form-item>

        <el-form-item label="部门">
          <el-input v-model="form.dutyDept"></el-input>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="form.dutyPhone"></el-input>
        </el-form-item>

      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="hangdleAmendWatchPeople"
        >确 定</el-button>
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogFormVisible: false, // 添加弹窗控制
      dialogFormVisible2: false, // 修改弹窗控制
      tableData: [], // 人员列表
      form: {
        dutyName: "", // 姓名
        dutyPhone: "", // 电话
        dutyDept: "", // 部门
        todayWork: "", // 哪天值班，1代表今天，2代表明天
      },
      // 验证规则
      rules: {
        dutyName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        dutyPhone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        dutyDept: [{ required: true, message: "请输入部门", trigger: "blur" }],
        todayWork: [
          { required: true, message: "请选择值班时间", trigger: "change" },
        ],
      },
      watchValue: 1,
      options: [
        { id: 1, value: "今天值班" },
        { id: 2, value: "明天值班" },
      ],
    };
  },
  mounted() {
    this.getDutyList();
  },
  methods: {
    // 获取 值班安排列表
    async getDutyList() {
      let params = {
        todayWork: this.watchValue,
      };
      let res = await this.$axios({
        url: "/diseaseRight/dutyArrangement/listOfGroup",
        method: "get",
        params,
      });
      // console.log(res);
      if (res.data.success) {
        this.tableData = res.data.data[0].list;
      } else {
        console.log("获取 值班安排列表 失败");
      }
    },
    // 添加值班人员
    addWatchPeople(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let res = await this.$axios({
            method: "post",
            url: "/diseaseRight/dutyArrangement/save",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: this.form,
          });
          // console.log(res);
          if (res.data.success) {
            this.getDutyList();
            this.$message.success("添加成功!");
          } else {
            this.$message.error("添加失败!");
          }
        } else {
          console.log("提交失败!!");
          return false;
        }
      });
    },
    // 修改值班人员
    amendWatchPeople(row) {
      this.dialogFormVisible2 = true;
      this.form = { ...row };
      this.form.todayWork = this.form.todayWork - 0;
    },
    // 修改值班人员请求
    async hangdleAmendWatchPeople() {
      this.dialogFormVisible2 = false;
      let res = await this.$axios({
        method: "put",
        url: "/diseaseRight/dutyArrangement/update",
        headers: {
          "Admin-Token": sessionStorage.getItem("token"),
        },
        data: this.form,
      });
      // console.log(res);
      if (res.data.success) {
        this.getDutyList();
        this.$message.success("修改成功!");
      } else {
        this.$message.error("修改失败!");
      }
    },
    // 删除值班人员
    deleteWatchPeople(id) {
      this.$confirm("确定删除吗?", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$axios({
            method: "delete",
            url: "/diseaseRight/dutyArrangement/delete",
            headers: {
              "Admin-Token": sessionStorage.getItem("token"),
            },
            data: [id],
          });
          // console.log(res);
          if (res.data.success) {
            this.$message.success("删除成功");
            this.getDutyList();
          } else {
            this.$message.error("删除失败!");
          }
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    // 下拉框改变数值
    changeWatchPeople(val) {
      this.watchValue = val;
      this.getDutyList();
    },
  },
};
</script>

<style  scoped>
.first-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.tag {
  width: 108px;
  height: 40px;
  font-size: 24px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: bold;
  color: #000000;
  line-height: 54px;
}
.el-button.btnupload {
  margin: 0;
  width: 180px;
  height: 40px;
  border-radius: 5px;
  font-size: 14px;
}
</style>