<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()"
          :disabled="tableData1.length == 1"
          >{{ $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>

      <!-- 添加弹框 -->
      <Modal
        :title="$t(1002)"
        v-model="addmodal"
        :styles="{ width: '650px' }"
        class="newModalClass"
      >
        <!-- 班制名称 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(200214) }}：
          </label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="addobj.classname"
            class="searchInput"
          />
        </div>
        <!-- 执行班次 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(200215) }}：
          </label>
          <Select
            clearable
            multiple
            label-in-value
            class="searchSelect"
            v-model="addobj.performshift"
          >
            <Option
              v-for="item in classtimeList"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <!-- 班制描述 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(100411) }}：
          </label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="addobj.describe"
            class="searchInput"
          />
        </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="confirmAdd()"
              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(200214) }}：
          </label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="editobj.classname"
            class="searchInput"
          />
        </div>
        <!-- 执行班次 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(200215) }}：
          </label>
          <Select
            clearable
            multiple
            label-in-value
            class="searchSelect "
            v-model="editobj.performshift"
          >
            <Option
              v-for="item in classtimeList"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
        </div>
        <!-- 班制描述 -->
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(100411) }}：
          </label>
          <Input
            clearable
            id="input1"
            type="text"
            v-model="editobj.describe"
            class="searchInput"
          />
        </div>
        <!-- 底部区域 -->
        <div slot="footer" class="footer">
          <div>
            <Button
              type="text"
              size="large"
              @click="closeedit()"
              v-text="$t(1033)"
            >
              {{ $t("1033") }}</Button
            >
            <Button
              type="primary"
              size="large"
              @click="editdata()"
              v-text="$t(1011)"
            >
              {{ $t("1011") }}</Button
            >
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      loading: false, // 加载状态
      total: 0, // 总条数
      page: 1, // 当前页数
      pagesize: 10, // 每页显示条数
      detailobj: {},
      editobj: {},
      obj: {},
      // 弹框表单对象
      addobj: {
        classname: "", // 班制名称
        performshift: 0, // 执行班制
        describe: "" // 班制描述
      },
      addmodal: false, // 添加弹框
      editmodal: false, // 编辑弹框
      tableData1: [], // table 表格数据
      classtimeList: [],
      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(200214), // 班制名称
          key: "name",
          width: "200px"
        },
        {
          title: this.$t(100045), // 班次
          key: "train",
          width: "360px"
        },
        {
          title: this.$t(1020), // 创建时间
          key: "addTime",
        },
        {
          title: this.$t(100040), // 创建人
          key: "uid"
        },
        {
          title: this.$t(100411), // 班制描述
          key: "describe"
        }
      ]
    };
  },
  created() {
    this.Search();
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
  },
  // 事件处理函数
  methods: {
    // 监听搜索事件
    Search() {
      this.page = 1;
      this.pageszie = 10;
      this.tableSearch();
    },
    tableSearch() {
      var params = {
        page: this.page,
        pageSize: this.pagesize
      };
      axios
        .request({
          url: "/Config/Frequency/FrequencySelect",
          params,
          method: "get"
        })
        .then(res => {
          this.total = res.data.total;
          this.tableData1 = res.data.data;
        });
    },
    // 执行班次类别接口
    GetAllFrequency() {
      axios
        .request({
          url: "/Config/ProjectShift/GetAllFrequency",
          method: "get"
        })
        .then(res => {
          this.classtimeList = [];
          if (res.data.ret === 1) {
            this.classtimeList = res.data.data;
          }
        });
    },
    // 监听添加事件
    add() {
      this.addmodal = true;
      // 置空数据
      this.addobj = {
        classname: "",
        performshift: "",
        describe: ""
      };
      this.GetAllFrequency();
    },
    // 弹框关闭事件
    closeadd() {
      this.addmodal = false;
    },
    // 弹框确定事件
    confirmAdd() {
      if (!this.addobj.classname) {
        this.$Message.error(this.$t("200240"));
        return false;
      } else if (!this.addobj.performshift) {
        this.$Message.error(this.$t("200241"));
        return false;
      } else if (
        this.addobj.describe === "" ||
        this.addobj.describe === undefined
      ) {
        this.$Message.error(this.$t("200242"));
        return false;
      }
      let data = {
        name: this.addobj.classname, // 班制名称
        train: this.addobj.performshift.join(","), // 执行班次
        describe: this.addobj.describe // 班制描述
      };
      axios
        .request({
          url: "/Config/Frequency/FrequencyAdd", // 请求接口路径待定
          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));
          }
        });
    },
    // 监听编辑事件
    edit() {
      if (
        this.detailobj === undefined ||
        this.detailobj.uid === undefined ||
        this.detailobj.uid === null ||
        this.detailobj.uid === ""
      ) {
        this.$Message.error(this.$t("1043"));
        return false;
      }
      this.GetAllFrequency();
      // 赋值操作
      this.editobj.classname = this.detailobj.name; // 班制名称
      this.editobj.performshift = this.detailobj.train1.split(',').map(Number); // 班次  .toString() .splice(',')
      this.editobj.describe = this.detailobj.describe; // 班制描述
      this.editmodal = true;
    },
    closeedit() {
      this.editmodal = false;
    },
    editdata() {
      if (!this.editobj.classname) {
        this.$Message.error(this.$t("200240"));
        return false;
      } else if (
        this.editobj.performshift === 0 ||
        this.editobj.performshift === "" ||
        this.editobj.performshift === undefined
      ) {
        this.$Message.error(this.$t("200241"));
        return false;
      } else if (
        this.editobj.describe === "" ||
        this.editobj.describe === undefined
      ) {
        this.$Message.error(this.$t("200242"));
        return false;
      }
      //  组装请求参数
      let data = {
        id: this.detailobj.id,
        name: this.editobj.classname, // 班制名称
        train: this.editobj.performshift.join(","), // 执行班次
        describe: this.editobj.describe // 班制描述
      };
      axios
        .request({
          url: "/Config/Frequency/FrequencyUpdate",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.$Message.success(this.$t("1060"));
            this.editmodal = false;
            this.Search();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 监听删除事件
    Delete() {
      if (
        this.detailobj === undefined ||
        this.detailobj.uid === undefined ||
        this.detailobj.uid === null ||
        this.detailobj.uid === ""
      ) {
        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/Frequency/FrequencyDelete",
                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;
      // console.log(this.detailobj);
    }
  }
};
</script>

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