<template>
  <!-- 休息类型管理页面 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="searchBtn">
        <Button
          type="success"
          icon="md-add-circle"
          class="twoWord"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          @click="edit()"
          icon="ios-create-outline"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          icon="md-close-circle"
          class="twoWord"
          @click="Delete()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData1"
        :columns="tableColumns1"
        @on-current-change="handleRowChange"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            show-elevator
            show-sizer
            show-total
            @on-change="changePage"
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>

      <!-- 添加弹框 -->
      <Modal
        :title="$t(1002)"
        v-model="addmodal"
        :styles="{ width: '650px' }"
        class="newModalClass"
      >
        <!-- 休息类型名称 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800327) }}：
          </label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="addobj.typename"
            class="searchInput"
          />
        </div>
        <!-- 休息适用范围 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800328) }}：
          </label>
          <Select
            clearable
            label-in-value
            class="searchSelect"
            v-model="addobj.type1"
            @on-change="addtypechange"
          >
            <!-- <Option :value="9" id="每天">{{ $t("900887") }}</Option> -->
            <Option :value="1" id="周一">{{ $t("900461") }}</Option>
            <Option :value="2" id="周二">{{ $t("900462") }}</Option>
            <Option :value="3" id="周三">{{ $t("900463") }}</Option>
            <Option :value="4" id="周四">{{ $t("900464") }}</Option>
            <Option :value="5" id="周五">{{ $t("900465") }}</Option>
            <Option :value="6" id="周六">{{ $t("900466") }}</Option>
            <Option :value="7" id="周日">{{ $t("900467") }}</Option>
            <Option :value="8" id="节假日">{{ $t("900867") }}</Option>
          </Select>
        </div>
        <!-- 休息开始时间 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800329) }}：
          </label>
          <DatePicker
            v-if="addobj.type1 === 8"
            type="datetime"
            v-model="addobj.bingdate"
            class="searchInput"
          ></DatePicker>
          <TimePicker
            v-else-if="addobj.type1 !== 8"
            type="time"
            v-model="addobj.bingtime"
            placeholder
            class="searchInput"
          ></TimePicker>
        </div>
        <!-- 休息结束时间 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800330) }}：
          </label>
          <DatePicker
            v-if="addobj.type1 === 8"
            type="datetime"
            v-model="addobj.enddate"
            class="searchInput"
          ></DatePicker>
          <TimePicker
            v-else-if="addobj.type1 !== 8"
            type="time"
            v-model="addobj.endtime"
            placeholder
            class="searchInput"
          >
          </TimePicker>
        </div>
        <!-- 底部区域 -->
        <div slot="footer" class="footer">
          <div>
            <Button
              type="text"
              size="large"
              @click="closeadd()"
              v-text="$t(1033)"
            >
              {{ $t("1033") }}</Button
            >
            <Button
              type="primary"
              size="large"
              @click="adddata()"
              class="myBtn"
              :loading="loading"
            >
              <span v-if="!loading">{{ $t(1011) }}</span>
              <span v-else>Loading...</span>
            </Button>
          </div>
        </div>
      </Modal>

      <!-- 编辑弹框 -->
      <Modal
        class="newModalClass"
        :title="$t('1003')"
        v-model="editmodal"
        :styles="{ width: '650px' }"
      >
        <!-- 休息类型名称 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800327) }}：
          </label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="editobj.typename"
            class="searchInput"
          />
        </div>
        <!-- 休息适用范围 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800328) }}：
          </label>
          <Select
            clearable
            label-in-value
            class="searchSelect"
            v-model="editobj.type1"
            @on-change="edittypechange"
          >
            <!-- <Option :value="9" id="每天">{{ $t("900887") }}</Option> -->
            <Option :value="1" id="周一">{{ $t("900461") }}</Option>
            <Option :value="2" id="周二">{{ $t("900462") }}</Option>
            <Option :value="3" id="周三">{{ $t("900463") }}</Option>
            <Option :value="4" id="周四">{{ $t("900464") }}</Option>
            <Option :value="5" id="周五">{{ $t("900465") }}</Option>
            <Option :value="6" id="周六">{{ $t("900466") }}</Option>
            <Option :value="7" id="周日">{{ $t("900467") }}</Option>
            <Option :value="8" id="节假日">{{ $t("900867") }}</Option>
          </Select>
        </div>
        <!-- 开始时间 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800329) }}：
          </label>
          <DatePicker
            v-if="editobj.type1 === 8"
            type="datetime"
            v-model="editobj.bingdate"
            placeholder
            class="searchInput"
          ></DatePicker>
          <TimePicker
            v-else-if="editobj.type1 !== 8"
            type="time"
            v-model="editobj.bingtime"
            placeholder
            class="searchInput"
          ></TimePicker>
        </div>
        <!-- 结束时间 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(800330) }}：
          </label>
          <DatePicker
            v-if="editobj.type1 === 8"
            type="datetime"
            v-model="editobj.enddate"
            placeholder
            class="searchInput"
          ></DatePicker>
          <TimePicker
            v-else-if="editobj.type1 !== 8"
            type="time"
            v-model="editobj.endtime"
            placeholder
            class="searchInput"
          ></TimePicker>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="closeedit()">{{
            $t("1033")
          }}</Button>
          <Button type="primary" size="large" @click="editdata()">{{
            $t("1011")
          }}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      total: 0, // 总条数
      page: 1, // 当前页数
      pagesize: 10, // 每页显示条数
      tableData1: [], // 表格数据
      addmodal: false, // 增加对话框
      editmodal: false, // 编辑对话框
      // 弹框表单对象
      addobj: {
        type1: ""
      },
      editobj: {},
      typename: "", // 休息类型名称
      startTime: "", // 开始时间
      endTime: "", // 结束时间
      detailobj: {},
      tableColumns1: [
        {
          type: "sort",
          title: this.$t(1008),
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          }
        },
        {
          title: this.$t(300101), // 类型名称
          key: "name"
        },
        {
          title: this.$t(1049), // 开始时间
          key: "startTime"
        },
        {
          title: this.$t(1050), // 结束时间
          key: "endTime"
        },
        {
          title: this.$t(800283), // 类型
          key: "range",
          render: (h, params) => {
            var statusText = "";
            if (params.row.range === 1) {
              statusText = this.$t(900461);
            } else if (params.row.range == 2) {
              statusText = this.$t(900462);
            } else if (params.row.range == 3) {
              statusText = this.$t(900463);
            } else if (params.row.range == 4) {
              statusText = this.$t(900464);
            } else if (params.row.range == 5) {
              statusText = this.$t(900465);
            } else if (params.row.range == 6) {
              statusText = this.$t(900466);
            } else if (params.row.range == 7) {
              statusText = this.$t(900467);
            } else if (params.row.range == 8) {
              statusText = this.$t(900867);
            } 

            return h("div", {
              domProps: { innerHTML: statusText }
            });
          }
        },
        {
          title: this.$t(1020), // 创建时间
          key: "addTime"
        },
        {
          title: this.$t(100040), // 创建人
          key: "uid"
        }
      ]
    };
  },
  created() {
    this.Search();
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  // 事件处理函数
  methods: {
    Search() {
      this.page = 1;
      this.pagesize = 10;
      this.tableSearch();
    },
    tableSearch() {
      this.detailobj = {};
      var params = {
        page: this.page,
        pageSige: this.pagesize
      };
      axios
        .request({
          url: "/Config/RestType/Select",
          params,
          method: "get"
        })
        .then(res => {
          this.total = res.data.total;
          this.tableData1 = res.data.data;
        });
    },
    //  监听添加事件
    add() {
      this.addmodal = true;
      this.addobj = {
        // 置空数据
        typename: "",
        type1: "",
        bingdate: "",
        bingtime: "",
        enddate: "",
        endtime: ""
      };
    },
    // 添加弹框确定
    adddata() {
      if (!this.addobj.typename) {
        this.$Message.error(this.$t("800331"));
        return false;
      } else if (!this.addobj.type1) {
        this.$Message.error(this.$t("800332"));
        return false;
      }
      if (this.addobj.type1 === 8) {
        if (this.addobj.bingdate === "" || this.addobj.bingdate === undefined) {
          this.$Message.error(this.$t("800287"));
          return false;
        } else if (
          this.addobj.enddate === "" ||
          this.addobj.enddate === undefined
        ) {
          this.$Message.error(this.$t("800288"));
          return false;
        } else if (this.addobj.bingdate > this.addobj.enddate) {
          this.$Message.error(this.$t("800289"));
          return false;
        }
      } else {
        if (this.addobj.bingtime === "" || this.addobj.bingtime === undefined) {
          this.$Message.error(this.$t("800287"));
          return false;
        } else if (
          this.addobj.endtime === "" ||
          this.addobj.endtime === undefined
        ) {
          this.$Message.error(this.$t("800288"));
          return false;
        } else if (this.addobj.bingtime > this.addobj.endtime) {
          this.$Message.error(this.$t("800289"));
          return false;
        }
      }
      // 组装请求参数
      let data = {
        name: this.addobj.typename, // 休息名称
        range: this.addobj.type1, // 适用范围  1工作日2周六3周日4节假日
        startTime:
          this.addobj.type1 === 8
            ? moment(this.addobj.bingdate).format("YYYY-MM-DD HH:mm:ss")
            : this.addobj.bingtime, // 开始时间
        endTime:
          this.addobj.type1 === 8
            ? moment(this.addobj.enddate).format("YYYY-MM-DD HH:mm:ss")
            : this.addobj.endtime // 结束时间
      };
      axios
        .request({
          url: "/Config/RestType/Add", // 请求接口路径
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1055")); // 提示
            this.addmodal = false; // 隐藏
            this.Search(); // 刷新
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 弹框取消事件
    closeadd() {
      this.addmodal = false; // 隐藏
    },
    // 休息适用范围切换事件(添加)
    addtypechange() {
      if (this.detailobj.type1 === 8 && this.addobj.type1 !== 8) {
        this.addobj.bingtime = "";
        this.addobj.bingdate = "";
        this.addobj.endtime = "";
        this.addobj.enddate = "";
      }
      if (this.detailobj.type1 !== 8 && this.addobj.type1 === 8) {
        this.addobj.bingtime = "";
        this.addobj.bingdate = "";
        this.addobj.endtime = "";
        this.addobj.enddate = "";
      }
    },
    // 休息适用范围切换事件(编辑)
    edittypechange() {
      if (this.detailobj.type1 === 8 && this.editobj.type1 !== 8) {
        this.editobj.bingtime = "";
        this.editobj.bingdate = "";
        this.editobj.endtime = "";
        this.editobj.enddate = "";
      }
      if (this.detailobj.type1 !== 8 && this.editobj.type1 === 8) {
        this.editobj.bingtime = "";
        this.editobj.bingdate = "";
        this.editobj.endtime = "";
        this.editobj.enddate = "";
      }
    },

    // 监听编辑事件
    edit() {
      const _this = this;
      if (this.detailobj === undefined || this.detailobj.id === undefined) {
        this.$Message.error(this.$t("1043"));
        return false;
      }
      _this.editobj.typename = this.detailobj.name;
      _this.editobj.type1 = parseInt(this.detailobj.range);
      _this.editobj.bingtime = this.detailobj.startTime;
      _this.editobj.bingdate = this.detailobj.startTime;
      _this.editobj.endtime = this.detailobj.endTime;
      _this.editobj.enddate = this.detailobj.endTime;
      this.editmodal = true; // 显示
    },
    // 编辑确定事件
    editdata() {
      if (
        this.editobj.typename === 0 ||
        this.editobj.typename === "" ||
        this.editobj.typename === undefined
      ) {
        this.$Message.error(this.$t("800331"));
        return false;
      } else if (
        this.editobj.type1 === 0 ||
        this.editobj.type1 === "" ||
        this.editobj.type1 === undefined
      ) {
        this.$Message.error(this.$t("800332"));
        return false;
      }
      if (this.editobj.type1 === 8) {
        if (
          this.editobj.bingdate === "" ||
          this.editobj.bingdate === undefined
        ) {
          this.$Message.error(this.$t("800287"));
          return false;
        } else if (
          this.editobj.enddate === "" ||
          this.editobj.enddate === undefined
        ) {
          this.$Message.error(this.$t("800288"));
          return false;
        } else if (this.editobj.bingdate > this.editobj.enddate) {
          this.$Message.error(this.$t("800289"));
          return false;
        }
      } else {
        if (
          this.editobj.bingtime === "" ||
          this.editobj.bingtime === undefined
        ) {
          this.$Message.error(this.$t("800287"));
          return false;
        } else if (
          this.editobj.endtime === "" ||
          this.editobj.endtime === undefined
        ) {
          this.$Message.error(this.$t("800288"));
          return false;
        } else if (this.editobj.bingtime > this.editobj.endtime) {
          this.$Message.error(this.$t("800289"));
          return false;
        }
      }
      // 组装请求参数
      let data = {
        id: this.detailobj.id, // id
        name: this.editobj.typename, // 休息类型名称
        range: this.editobj.type1, // 休息适用范围
        startTime:
          this.editobj.type1 === 8
            ? moment(this.editobj.bingdate).format("YYYY-MM-DD HH:mm:ss")
            : this.editobj.bingtime, // 开始时间
        endTime:
          this.editobj.type1 === 8
            ? moment(this.editobj.enddate).format("YYYY-MM-DD HH:mm:ss")
            : this.editobj.endtime // 结束时间
      };
      axios
        .request({
          url: "/Config/RestType/Update",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1060"));
            this.editmodal = false;
            this.tableSearch();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听删除事件
    Delete() {
      if (this.detailobj === undefined || this.detailobj.id === undefined) {
        this.$Message.error(this.$t("1043"));
        return false;
      } else {
        let params = {
          id: this.detailobj.id
        };
        this.$Modal.confirm({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            axios
              .request({
                url: "/Config/RestType/Delete",
                params,
                method: "get"
              })
              .then(res => {
                if (res.data.ret === 1) {
                  this.$Message.success(this.$t("1058")); // 提示
                  this.Search(); // 刷新
                  this.detailobj = {};
                } else {
                  this.$Message.error(this.$t(res.data.msg));
                }
              });
          }
        });
      }
    },
    // 点击表格事件
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    // 页码改变的回调，返回改变后的页码
    changePage(value) {
      this.page = value;
      this.tableData1 = this.tableSearch(this.page, this.pagesize);
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData1 = this.tableSearch(this.page, this.pagesize);
    },
    closeedit() {
      this.editmodal = false;
    }
  }
};
</script>

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