<template>
  <div>
    <el-row>
      <el-col
        :span="24"
        class="first-row"
      >
        <div class="tag">指挥体系</div>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="24"
        class="second-row"
      > </el-col>
    </el-row>
    <hr style="background-color: #cccccc; height: 1px; border: 0" />
    <el-tabs type="border-card">
      <el-tab-pane label="两节疫情防控专班">
        <el-row>
          <el-col
            :span="6"
            class="third-row"
          > </el-col>
          <el-col
            :span="18"
            class="rightBtn"
          >
            <el-button
              type="primary"
              @click="addRowTheme"
            >添加</el-button>
          </el-col>
        </el-row>
        <hr style="background-color: #cccccc; height: 1px; border: 0" />
        <el-row>
          <el-col
            :span="24"
            class=""
          >
            <el-table
              :data="tableThemeData"
              border
              style="width: 100%; font-size: 14px"
              highlight-current-row
              max-height="500"
            >
              <el-table-column
                fixed
                prop="themeName"
                label="主题名称"
                width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="enable"
                label="启用"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    @click="handleThemeModifyClick(scope.row)"
                    type="text"
                    size="small"
                  >修改
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteTitle(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="值班表">
        <el-row>
          <el-col
            :span="6"
            class="third-row"
          >
            <el-upload
              class="upload-demo"
              ref="upload"
              action=""
              accept=".xls,.xlsx"
              :auto-upload="false"
              :limit="1"
              :on-exceed="onexceed"
              :http-request="uploadXLS"
              :with-credentials="true"
            >
              <el-button
                class="btnupload"
                slot="trigger"
                size="small"
                type="primary"
              >值班表</el-button>
              <el-button
                class="btnupload"
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="submitUpload"
              >上传到服务器
              </el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >
                只能上传xls/xlsx文件，且不超过2MB
              </div>
            </el-upload>
            <el-link
              type="primary"
              href="../dist/static/model/dutyRoster.xlsx"
            >模板下载</el-link>
          </el-col>
          <el-col
            :span="18"
            class="rightB"
          >
            <el-button
              type="primary"
              @click="addRow"
            >添加</el-button>
          </el-col>
        </el-row>
        <hr style="background-color: #cccccc; height: 1px; border: 0" />
        <el-row>
          <el-col
            :span="24"
            class="third-row"
          >
            <el-table
              :data="datalist"
              style="width: 100%"
            >
              <el-table-column
                prop="dayOfWeek"
                label="星期"
                align="center"
              >
              </el-table-column>
              <el-table-column
                label="安排"
                align="center"
              >
                <el-table-column
                  prop="leaderName"
                  label="领导名称"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="dutyLevel"
                  label="职务等级"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="dutyName"
                  label="职务名称"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="leaderPhone"
                  label="联系方式"
                  align="center"
                >
                </el-table-column>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="180"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="editRow(scope.$index, scope.row)"
                    type="text"
                    size="small"
                  >修改</el-button>
                  <el-button
                    @click.native.prevent="
                      deleteRow(scope.$index, scope.row, datalist)
                    "
                    type="text"
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="两节疫情防控专班"
      :close-on-click-modal="false"
      :visible.sync="dialogAddThemeFormVisible"
      width="600px"
    >
      <el-form :model="formTheme">
        <el-form-item
          label="主题名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formTheme.themeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="启用"
          :label-width="formLabelWidth"
        >
          <el-radio
            v-model="formTheme.enable"
            label="1"
          >是</el-radio>
          <el-radio
            v-model="formTheme.enable"
            label="2"
          >否</el-radio>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogAddThemeFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addRowThemeAction"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="两节疫情防控专班修改"
      :close-on-click-modal="false"
      :visible.sync="dialogModifyThemeFormVisible"
      width="600px"
    >
      <el-form :model="formThemeModify">
        <el-form-item
          label="主题名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formThemeModify.themeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="启用"
          :label-width="formLabelWidth"
        >
          <el-radio
            v-model="formThemeModify.enable"
            label="1"
          >是</el-radio>
          <el-radio
            v-model="formThemeModify.enable"
            label="2"
          >否</el-radio>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogModifyThemeFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="modifyRowThemeAction"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="值班表修改"
      :close-on-click-modal="false"
      :visible.sync="dialogEditFormVisible"
      width="600px"
    >
      <el-form :model="formRow">
        <el-form-item
          label="星期"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="formRow.dayOfWeek"
            placeholder="请选择星期"
          >
            <el-option
              v-for="item in weekday"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="领导名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formRow.leaderName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="职务等级"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formRow.dutyLevel"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="职务名称"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formRow.dutyName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="联系方式"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="formRow.leaderPhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editRowAction"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="值班表添加"
      :close-on-click-modal="false"
      :visible.sync="dialogAddFormVisible"
      width="600px"
    >
      <el-form
        :model="formAddRow"
        :rules="addRules"
        ref="addForm"
      >
        <el-form-item
          label="星期"
          :label-width="formLabelWidth"
          prop="dayOfWeek"
        >
          <el-select
            v-model="formAddRow.dayOfWeek"
            placeholder="请选择星期"
            @blur="handleSelect"
            ref="xingqi"
          >
            <el-option
              v-for="item in weekday"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="领导名称"
          :label-width="formLabelWidth"
          prop="leaderName"
        >
          <el-input
            v-model="formAddRow.leaderName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="职务等级"
          :label-width="formLabelWidth"
          prop="dutyLevel"
        >
          <el-input
            v-model="formAddRow.dutyLevel"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="职务名称"
          :label-width="formLabelWidth"
          prop="dutyName"
        >
          <el-input
            v-model="formAddRow.dutyName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="联系方式"
          :label-width="formLabelWidth"
          prop="leaderPhone"
        >
          <el-input
            v-model="formAddRow.leaderPhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addRowAction"
        >添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableThemeData: [],
      formTheme: {
        themeName: "",
        enable: "",
      },
      formThemeModify: {
        id: "",
        themeName: "",
        enable: "",
      },
      token: "",
      datalist: [],
      formRow: [],
      formRowEdit: [],
      formAddRow: {
        dayOfWeek: "",
        leaderName: "",
        dutyLevel: "",
        dutyName: "",
        leaderPhone: "",
      },
      addRules: {
        dayOfWeek: [
          {
            required: true,
            message: "请选择【星期】",
            trigger: "blur",
          },
        ],
        leaderName: [
          {
            required: true,
            message: "请选择【领导名称】",
            trigger: "blur",
          },
        ],
        dutyLevel: [
          {
            required: true,
            message: "请选择【职务等级】",
            trigger: "blur",
          },
        ],
        dutyName: [
          {
            required: true,
            message: "请选择【职务名称】",
            trigger: "blur",
          },
        ],
        leaderPhone: [
          {
            required: true,
            message: "请选择【联系方式】",
            trigger: "blur",
          },
        ],
      },
      weekday: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
        {
          value: 5,
          label: "5",
        },
        {
          value: 6,
          label: "6",
        },
        {
          value: 7,
          label: "7",
        },
      ],
      dialogAddThemeFormVisible: false,
      dialogModifyThemeFormVisible: false,
      dialogEditFormVisible: false,
      dialogAddFormVisible: false,
      formLabelWidth: "100px",
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    // 列表
    this.getlist();
    // 两节疫情专班列表
    this.getListTitle();
  },
  methods: {
    // 删除专班主题
    deleteTitle(row) {
      // console.log(row);
      let _this = this;
      _this
        .$confirm("确认删除？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
        .then((_) => {
          // console.log(_);
          let ids = [];
          ids.push(row.id);
          _this
            .$axios({
              method: "delete",
              url: "/diseaseRight/theme/delete",
              headers: {
                "Admin-Token": this.token,
                "Content-type": "application/json; charset=utf-8",
              },
              data: ids,
            })
            .then((res) => {
              if (res.data.success) {
                _this.$message.success(res.data.message);
                // rows.splice(index, 1);
                _this.getListTitle();
              } else {
                _this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              _this.$message.error("【两节疫情防专班】删除异常！");
            });
        })
        .catch((_) => {
          // console.log(_);
        });
    },
    // 专班主题修改
    handleThemeModifyClick(row) {
      // console.log(row);
      this.formThemeModify = JSON.parse(JSON.stringify(row));
      if (row.enable === "是") {
        this.formThemeModify.enable = "1";
      } else {
        this.formThemeModify.enable = "2";
      }
      this.dialogModifyThemeFormVisible = true;
    },
    // 专班主题修改action
    modifyRowThemeAction() {
      let _this = this;
      _this
        .$axios({
          method: "put",
          url: "/diseaseRight/theme/update",
          headers: {
            "Admin-Token": _this.token,
            "Content-type": "application/json; charset=utf-8",
          },
          data: _this.formThemeModify,
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.success) {
            _this.$message.success(res.data.message);
            _this.getListTitle();
            this.dialogModifyThemeFormVisible = false;
            // 添加成功清空对象
            _this.formThemeModify = {
              id: "",
              themeName: "",
              enable: "",
            };
          } else {
            _this.$message.error(res.data.message);
          }
          // 添加成功重新加载列表
          _this.getListTitle();
        })
        .catch((err) => {
          _this.$message.error("【两节疫情防专班】修改异常！");
        });
    },
    // 添加专班主题
    addRowTheme() {
      this.dialogAddThemeFormVisible = true;
    },
    // 添加专班主题action
    addRowThemeAction() {
      if (this.token === "") {
        this.$message.warning("请先登陆！");
        return;
      }
      if (this.formTheme.themeName === "" || this.formTheme.enable === "") {
        this.$message.warning("请填写完整！");
        return;
      }
      let _this = this;
      _this
        .$axios({
          method: "post",
          url: "/diseaseRight/theme/save",
          headers: {
            "Admin-Token": _this.token,
            "Content-type": "application/json; charset=utf-8",
          },
          data: _this.formTheme,
        })
        .then((res) => {
          // console.log(res.data);
          if (res.data.success) {
            _this.$message.success(res.data.message);
            // 添加成功重新加载列表
            _this.getListTitle();
            this.dialogAddThemeFormVisible = false;
            // 添加成功清空对象
            _this.formTheme = {
              themeName: "",
              enable: "",
            };
          } else {
            _this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          _this.$message.error("【两节疫情防专班】添加异常！");
        });
    },
    // 两节疫情专班列表
    getListTitle() {
      let _this = this;
      _this
        .$axios({
          method: "get",
          url: "/diseaseRight/theme/list",
          headers: {
            "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        })
        .then((res) => {
          // console.log(res.data);
          _this.tableThemeData = [];
          if (res.data.success) {
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].enable === "1") {
                _this.tableThemeData.push({
                  id: res.data.data[i].id,
                  themeName: res.data.data[i].themeName,
                  enable: "是",
                });
              } else if (res.data.data[i].enable === "2") {
                _this.tableThemeData.push({
                  id: res.data.data[i].id,
                  themeName: res.data.data[i].themeName,
                  enable: "否",
                });
              }
            }
          } else {
            _this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          _this.$message.error("【两节疫情防专班】列表异常！");
        });
    },
    // 星期选择
    handleSelect() {
      let _this = this;
      _this.$refs.addForm.validateField("dayOfWeek", (val) => {
        if (val !== "") {
          _this.$set(_this.formAddRow, "dayOfWeek", val);
        }
      });
    },
    // 删除当前行
    deleteRow(index, row, rows) {
      // console.log(index, row, rows);
      let _this = this;
      _this
        .$confirm("确认删除？", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
        .then((_) => {
          // console.log(_);
          let ids = [];
          ids.push(row.id);
          _this
            .$axios({
              method: "delete",
              url: "/diseaseRight/dutyArrangementOfUrgent/delete",
              headers: {
                "Admin-Token": _this.token,
                "Content-type": "application/json; charset=utf-8",
              },
              data: ids,
            })
            .then((res) => {
              if (res.data.success) {
                _this.$message.success(res.data.message);
                // rows.splice(index, 1);
                _this.getlist();
              } else {
                _this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              _this.$message.error("【值班表】删除异常！");
            });
        })
        .catch((_) => {
          // console.log(_);
        });
    },
    // 添加行
    addRow() {
      this.dialogAddFormVisible = true;
      setTimeout(() => {
        this.$refs.xingqi.focus();
      }, 200);
    },
    // 执行添加操作
    addRowAction() {
      let _this = this;
      let f = _this.formAddRow;
      if (f.dayOfWeek === "") {
        _this.$message.error("请选择【星期】！");
        return;
      }
      if (
        f.dutyLevel === "" ||
        f.dutyName === "" ||
        f.leaderName === "" ||
        f.leaderPhone === ""
      ) {
        _this.$message.error("请填写完整！");
        return;
      }
      _this
        .$axios({
          method: "post",
          url: "/diseaseRight/dutyArrangementOfUrgent/save",
          headers: {
            "Admin-Token": _this.token,
            "Content-type": "application/json; charset=utf-8",
          },
          data: _this.formAddRow,
        })
        .then((res) => {
          if (res.data.success) {
            _this.dialogAddFormVisible = false;
            _this.getlist();
            _this.$message.success(res.data.message);
            _this.formAddRow = {
              dayOfWeek: "",
              leaderName: "",
              dutyLevel: "",
              dutyName: "",
              leaderPhone: "",
            };
          } else {
            _this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          _this.$message.error("【值班表】添加异常！");
        });
    },
    // 编辑当前行
    editRow(index, row) {
      this.dialogEditFormVisible = true;
      this.formRow = JSON.parse(JSON.stringify(row));
      this.formRowEdit = JSON.parse(JSON.stringify(row));
    },
    compareObj(obj1, obj2) {
      let tf = true;
      Object.keys(obj1).forEach(function (key) {
        if (obj1[key] != obj2[key]) {
          tf = false;
        }
      });
      if (tf) {
        return true;
      } else {
        return false;
      }
    },
    // 执行修改
    editRowAction() {
      let _this = this;
      if (_this.compareObj(_this.formRow, _this.formRowEdit)) {
        _this.$message.warning("数据无变化！");
      } else {
        _this
          .$axios({
            method: "put",
            url: "/diseaseRight/dutyArrangementOfUrgent/update",
            headers: {
              "Admin-Token": _this.token,
              "Content-type": "application/json; charset=utf-8",
            },
            data: _this.formRow,
          })
          .then((res) => {
            if (res.data.success) {
              _this.dialogEditFormVisible = false;
              _this.$message.success(res.data.message);
              _this.getlist();
            } else {
              _this.$message.error(res.data.message);
            }
          })
          .catch((err) => {
            _this.$message.error("【值班表】修改异常！");
          });
      }
    },
    // 获取数据列表
    getlist() {
      let _this = this;
      _this.datalist = [];
      _this.$axios
        .get("/diseaseRight/dutyArrangementOfUrgent/list")
        .then((res) => {
          res = res.data;
          if (res.success) {
            for (var i = 0; i < res.data.length; i++) {
              _this.datalist.push({
                dayOfWeek: res.data[i].dayOfWeek,
                dutyLevel: res.data[i].dutyArrangements[0].dutyLevel,
                dutyName: res.data[i].dutyArrangements[0].leaders[0].dutyName,
                leaderName:
                  res.data[i].dutyArrangements[0].leaders[0].leaderName,
                leaderPhone:
                  res.data[i].dutyArrangements[0].leaders[0].leaderPhone,
                id: res.data[i].dutyArrangements[0].leaders[0].id,
              });
            }
          } else {
            _this.$message.error(res.message);
          }
        })
        .catch((err) => {
          _this.$message.error("【值班表】列表异常！");
        });
    },
    // 文件超出个数限制时的钩子
    onexceed(files, fileList) {
      this.$message.error("只能上传单个文件，您已选择：" + files["0"].name);
    },
    // 上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 覆盖默认的上传行为，可以自定义上传的实现
    uploadXLS(param) {
      let _this = this;
      var form = new FormData();
      form.append("file", param.file);
      _this
        .$axios({
          method: "post",
          url: "/diseaseRight/dutyArrangementOfUrgent/saveByExcel",
          headers: {
            "Admin-Token": _this.token,
            "Content-type": "multipart/form-data",
          },
          data: form,
        })
        .then((res) => {
          res = res.data;
          if (res.success) {
            _this.$message.success("【值班表】导入成功！");
            _this.getlist();
          } else {
            _this.$message.error(res.message);
          }
        })
        .catch((err) => {
          _this.$message.error("【值班表】导入失败！");
        });
    },
  },
};
</script>

<style scoped>
@import url("zhihuitixi.css");
</style>