<template>
  <!-- 生产时间配置页面 -->
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="searchBtn">
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("1002") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          icon="ios-build"
          @click="edit()"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="dele()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"
        @on-current-change="handleRowChange"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
      <!-- 添加弹框 -->
      <Modal
        class="newModalClass"
        :title="$t('1002')"
        v-model="addmodal"
        :styles="{ width: '700px' }"
      >
        <div class="modal_body" style="height:400px!important;">
          <div style="width:280px;float:left;height:400px;overflow-y:scroll">
            <template>
              <Tree
                :data="treeContents"
                ref="tree"
                show-checkbox
                multiple
                selected
                @on-check-change="getList()"
              ></Tree>
            </template>
          </div>
          <div style="width:360px;float:left;height:100%;padding-left:5px;">
            <!-- 日历名称 -->
            <div class="filter">
              <label>
                <i>*</i>
                {{ this.$t("901093") }}：
              </label>
              <Input
                clearable
                type="text"
                class="searchInput"
                v-model="addobj.calendarname"
              />
            </div>
            <!-- 休息类型 -->
            <div class="filter">
              <label>
                <i>*</i>
                {{ this.$t("900866") }}：
              </label>
              <Select
                multiple
                clearable
                filterable
                label-in-value
                class="searchSelect nowropStyle"
                v-model="addobj.resttype"
              >
                <Option
                  v-for="item in resttypeList"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
            <!-- 备注 -->
            <div class="filter">
              <label>{{ this.$t("1030") }}：</label>
              <Input
                clearable
                type="text"
                class="searchInput"
                v-model="addobj.note"
              />
            </div>
          </div>
        </div>
        <div slot="footer">
          <Button type="text" size="large" @click="closeadd()">{{
            $t("1033")
          }}</Button>
          <Button type="primary" size="large" @click="adddata()">{{
            $t("1011")
          }}</Button>
        </div>
      </Modal>
      <!-- 编辑弹框 -->
      <Modal
        class="newModalClass"
        :title="$t('1003')"
        v-model="editmodal"
        :styles="{ width: '700px' }"
      >
        <div class="modal_body" style="height:400px!important;">
          <div style="width:280px;float:left;height:400px;overflow-y:scroll">
            <template>
              <Tree
                v-if="flag"
                :data="treeContents"
                ref="tree"
                show-checkbox
                multiple
                checked
                @on-check-change="getList()"
              >
              </Tree>
            </template>
          </div>
          <div style="width:360px;float:left;height:100%;padding-left:5px;">
            <!-- 日历名称 -->
            <div class="filter">
              <label>
                <i>*</i>
                {{ this.$t("901093") }}：
              </label>
              <Input
                clearable
                type="text"
                class="searchInput"
                v-model="editobj.calendarname"
              />
            </div>
            <!-- 休息类型 -->
            <div class="filter">
              <label><i>*</i>{{ this.$t("900866") }}：</label>
              <Select
                multiple
                clearable
                filterable
                label-in-value
                class="searchSelect nowropStyle"
                v-model="editobj.resttype"
              >
                <Option
                  v-for="item in resttypeList"
                  :value="item.id"
                  :key="item.id"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
            <!-- 备注 -->
            <div class="filter">
              <label>{{ this.$t("1030") }}：</label>
              <Input
                clearable
                type="text"
                class="searchInput"
                v-model="editobj.note"
              />
            </div>
          </div>
        </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 moment, { relativeTimeThreshold } from "moment";
import axios from "@/libs/api.request";
export default {
  name: "producetime", // 组件不刷新
  data() {
    return {
      flag: false,
      tableData1: [],
      total: 0,
      page: 1,
      pagesize: 10,
      addmodal: false,
      detailobj: {},
      editmodal: false,
      addobj: {
        type1: ""
      },
      editobj: {},
      selectids: "",
      treeContents: [],
      timetype: "time",
      sectionId: "",
      sectionname: "",
      resttypeList: [],
      map: {
        value: "value",
        label: "label",
        children: "children",
        expand: true,
        selected: false
      },
      arrList: [],
      uids: "",
      tableColumns1: [
        {
          type: "index",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "90px"
        },
        {
          title: this.$t("901093"), // 日历名称
          key: "type"
        },
        {
          title: this.$t("901094"), // 日历规则
          key: "typeids"
        },
        {
          title: this.$t("1030"), // 备注
          key: "remark"
        },
        {
          title: this.$t("1020"), // 创建时间
          key: "add_time"
        },
        {
          title: this.$t("100040"), //  创建人
          key: "founder"
        },
        {
          title: this.$t("1038"), // 操作
          key: "",
          render: (h, c) => {
            var Text = "查看设备";
            return h("div", {
              domProps: { innerHTML: Text },
              style: {
                color: "#00FFFF",
                width: "50%",
                height: "36px",
                lineHeight: "36px",
                cursor: "pointer"
              },
              on: {
                click: () => {
                  this.inittree(); // 树形结构接口
                  this.getResttype(); // 调用休息类型接口
                  var params = { guid: c.row.guid };
                  axios
                    .request({
                      url: "/cnc/InformationConfiguration/TimeAllSettingShows",
                      params,
                      method: "get"
                    })
                    .then(res => {
                      let result = res.data.data;
                      if (res.data.ret === 1) {
                        this.arrList = result.sectionids; // 左侧树状结构
                        this.uids = result.type.uid;
                        this.inittree2(result.sectionids);
                        this.flag = true;
                        this.editobj.resttype = result.type.typeids
                          .split(",")
                          .map(Number); // 休息类型
                        this.editobj.calendarname = result.type.type; // 日历名称
                        this.editobj.note = result.type.remark; // 备注
                      } else {
                        this.$Message.error(this.$t(res.data.msg));
                      }
                    });
                  this.editmodal = true;
                }
              }
            });
          }
        }
      ]
    };
  },
  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,
        pageSige: this.pagesize
      };
      axios
        .request({
          url: "/cnc/InformationConfiguration/TimeAllSettingShow",
          params,
          method: "get"
        })
        .then(res => {
          this.total = res.data.total;
          this.tableData1 = res.data.data;
        });
    },
    // 表格点击事件
    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);
    },
    add() {
      this.sectionId = "";
      this.addmodal = true;
      this.addobj = {};
      this.inittree();
      this.getResttype();
    },
    // 增加弹框关闭
    closeadd() {
      this.addmodal = false;
    },
    // 添加弹框确定事件
    adddata() {
      if (this.sectionId === "") {
        this.$Message.error(this.$t("1037"));
        return false;
      }
      if (!this.addobj.calendarname) {
        this.$Message.error(this.$t("901095"));
        return false;
      }
      if (!this.addobj.resttype) {
        this.$Message.error(this.$t("901096"));
        return false;
      }
      let data = {
        sectionids: this.arrList, // 工位id
        type: this.addobj.calendarname, // 日历名称
        typeids: this.addobj.resttype.join(","), // 休息类型
        remark: this.addobj.note // 备注
      };
      axios
        .request({
          url: "/cnc/InformationConfiguration/TimeAllSetting",
          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.$Message.error(this.$t("1043"));
        return false;
      }
      this.getResttype(); // 调用休息类型接口
      // 请求参数
      var params = { guid: this.detailobj.guid };
      this.flag = false;
      this.treeContents = [];
      axios
        .request({
          url: "/cnc/InformationConfiguration/TimeAllSettingShows",
          params,
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1) {
            this.arrList = result.sectionids; // 左侧树状结构
            this.uids = result.type.uid;
            this.inittree2(result.sectionids);
            this.flag = true;
            this.editobj.resttype = result.type.typeids.split(",").map(Number); // 休息类型
            this.editobj.calendarname = result.type.type; // 日历名称
            this.editobj.note = result.type.remark; // 备注
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
      this.editmodal = true;
    },
    // 递归遍历树形结构数据反绑数据
    deepFor(tree, arr) {
      const _this = this;
      tree.forEach(v => {
        if (arr.indexOf(v.value) != -1) {
          _this.$set(v, "checked", true);
        } else {
          _this.$set(v, "checked", false);
        }
        if (v.children.length) {
          v.children = _this.deepFor(v.children, arr);
        } else {
          return [];
        }
      });
      return tree;
    },
    // 编辑弹框关闭
    closeedit() {
      this.editmodal = false;
    },
    // 编辑弹框确定
    editdata() {
      if (this.arrList.length === 0) {
        this.$Message.error(this.$t("1037"));
        return false;
      }
      if (!this.editobj.calendarname) {
        this.$Message.error(this.$t("901095"));
        return false;
      }
      if (
        this.editobj.resttype == "" ||
        this.editobj.resttype == null ||
        this.editobj.resttype == undefined
      ) {
        this.$Message.error(this.$t("901096"));
        return false;
      }
      // 组装请求参数
      let data = {
        guid: this.detailobj.guid,
        add_time: this.detailobj.add_time, // 创建时间
        // uid: this.detailobj.uid,
        uid: this.uids,
        sectionids: this.arrList, //  树形结构
        type: this.editobj.calendarname, // 名称
        typeids: this.editobj.resttype.join(","), // 休息类型
        remark: this.editobj.note // 备注
      };
      axios
        .request({
          url: "/cnc/InformationConfiguration/TimeAllSettingEdit",
          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));
          }
        });
    },
    // 删除事件
    dele() {
      if (this.detailobj === undefined || this.detailobj.uid === undefined) {
        this.$Message.error(this.$t("1043"));
        return false;
      } else {
        let params = { guid: this.detailobj.guid };
        this.$Modal.confirm({
          title: this.$t("1018"),
          content: "",
          width: "290px",
          closable: true,
          okText: this.$t("1004"),
          onOk: () => {
            axios
              .request({
                url: "/cnc/InformationConfiguration/TimeAllSettingDel",
                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));
                }
              });
          }
        });
      }
    },
    // 获取树id
    getList() {
      let node = this.$refs.tree.getCheckedNodes();
      var idArr = [];
      node.forEach(v => {
        if (!(v.children && Array.isArray(v.children) && v.children.length)) {
          idArr.push(v.value);
        }
      });
      if (node.length > 0) {
        node.forEach((item, index) => {
          this.sectionId = node[index].value;
        });
      }
      this.arrList = idArr;
    },
    // 弹框休息类型数据
    getResttype() {
      axios
        .request({
          url: "/Config/RestType/GetAllRestType",
          method: "get"
        })
        .then(res => {
          this.resttypeList = [];
          if (res.data.ret === 1) {
            this.resttypeList = res.data.data;
          }
        });
    },
    inittree() {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.treeContents = res.data.data; // 树形结构
            this.contentTree(this.treeContents);
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 树形
    contentTree(arr) {
      arr.forEach(ele => {
        ele.title = ele.label;
        ele.expand = true;
        if (
          ele.children.length != 0 &&
          ele.children != undefined &&
          ele.children != null
        ) {
          this.contentTree(ele.children);
        }
      });
    },
    inittree2(arr) {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.treeContents = res.data.data; // 树形结构
            this.contentTree2(this.treeContents, arr);
            this.flag = true;
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    }, // 树形
    contentTree2(arr, list) {
      arr.forEach(ele => {
        ele.title = ele.label;
        ele.expand = true;
        if (
          list.some(v => {
            return v == ele.value;
          })
        ) {
          ele.checked = true;
        }
        if (
          ele.children.length != 0 &&
          ele.children != undefined &&
          ele.children != null
        ) {
          this.contentTree2(ele.children, list);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.treeSelect {
  span {
    background: #2d8cf1;
    color: #fff;
    margin: 0;
    padding: 0 4px;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: top;
  }
}
</style>
