<template>
  <div>
    <Row :gutter="16">
      <Col span="4" class="left_block">
        <div>添加报告模板</div>
        <div
          :class="{
            block_item: true,
            select_item: block_index == i,
          }"
          v-for="(v, i) in templatelist"
          :key="i"
          @click="selectItem(i)"
        >
          <span>
            {{ v.title }}
          </span>
        </div>
        <Button type="success" long @click="addModule()">添加</Button>
      </Col>
      <Col span="16" class="right_block">
        <div class="filter" style="line-height: 40px">
          <label>模块标题：</label>
          <Input v-model="module_title" style="width: 200px" />
        </div>
        <div class="filter" style="line-height: 40px">
          <label>模块标题：</label>
          <Select v-model="type" style="width: 200px">
            <Option :value="1">设备综合效率分析</Option>
            <Option :value="2">设备切片分析</Option>
            <Option :value="3">设备稼动率分析</Option>
            <Option :value="4">生产效率分析</Option>
            <Option :value="5">设备产出分析</Option>
            <Option :value="6">停机状态分析</Option>
          </Select>
        </div>
        <div class="filter searchBtn">
          <Button
            v-if="operate_type == 1"
            type="success"
            class="twoWord"
            icon="md-add-circle"
            @click="add()"
          >
            添加
          </Button>
          <Button
            v-if="operate_type == 2"
            type="warning"
            class="twoWord"
            icon="ios-create-outline"
            @click="edit()"
          >
            修改
          </Button>
          <Button
            v-if="operate_type == 1 || operate_type == 2"
            type="error"
            class="twoWord"
            icon="md-close-circle"
            @click="del()"
          >
            删除
          </Button>
        </div>
        <div style="padding: 20px">
          <div v-for="(v, i) in piclist" :key="i" v-if="type - 1 == i">
            <img :src="v" style="width: 100%" />
          </div>
        </div>
        <div class="filter" v-show="type != 1">
          <label>统计坐标：</label>
          <Select v-model="coordinates" style="width: 200px">
            <Option :value="1">单台设备统计</Option>
            <Option :value="2">按天统计</Option>
            <Option :value="3">按周统计</Option>
            <Option :value="4">自定义分组统计</Option>
          </Select>
        </div>
        <div>
          <div class="filter">
            <label>请选择统计范围：</label>
            <Button
              :type="range == 1 ? 'primary' : 'default'"
              @click="range = 1"
            >
              产线
            </Button>
            <Button
              style="margin-left: 20px"
              :type="range == 2 ? 'primary' : 'default'"
              @click="range = 2"
            >
              小组
            </Button>
          </div>
        </div>
        <div
          style="padding-left: 100px; height: 300px; overflow-y: scroll"
          v-if="range == 1"
        >
          <Tree :data="treedata" show-checkbox multiple ref="tree"></Tree>
        </div>
        <div
          style="padding-left: 100px; height: 300px; overflow-y: scroll"
          v-else-if="range == 2"
        >
          <CheckboxGroup v-model="border">
            <Checkbox v-for="(v, i) in gropList" :label="v.groupId" :key="i">{{
              v.title
            }}</Checkbox>
          </CheckboxGroup>
        </div>
        <div
          class="filter"
          style="line-height: 40px"
          v-show="type == 3 || type == 4 || type == 6"
        >
          <label>标准值：</label>
          <InputNumber v-model="standard" style="width: 200px" :min="0" />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      templatelist: [],
      block_index: -1,
      block_select: {},

      // 操作类型 添加 or 修改
      operate_type: 0,

      module_title: "",
      type: 1,
      coordinates: 1,
      range: 1,
      treedata: [],
      piclist: [
        require("../../../static/images/zonghe.png"),
        require("../../../static/images/qiepian.png"),
        require("../../../static/images/jiadonglv.png"),
        require("../../../static/images/shengchanxiaolv.png"),
        require("../../../static/images/chanchu.png"),
        require("../../../static/images/tingji.png"),
      ],
      gropList: [],
      border: [],
      standard: null,
    };
  },
  mounted() {
    this.initTree();
    this.initGroup();
    // 获取详情数据
    this.getSetting();
  },
  methods: {
    // 添加一个模板
    addModule() {
      this.module_title = "";
      this.type = 1;
      this.coordinates = 1;
      this.range = 1;
      this.border = [];
      this.standard = null;
      this.initTree();
      this.operate_type = 1;
    },
    initTree(selected) {
      let params = {
        id: 0,
        nc: 1,
      };
      this.axios
        .request({
          url: "/config/MonthReport/GetSectionTreeForMonthReport",
          params,
          method: "get",
        })
        .then((res) => {
          if (res.data.ret == 1) {
            if (res.data.data.children.length) {
              if (selected) {
                let arr = res.data.data.children;
                this.bindTree(arr, selected);
                console.log(arr);
                this.treedata = arr;
              } else {
                this.treedata = res.data.data.children;
              }
            } else {
              this.treedata = [];
            }
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    bindTree(tree, selected) {
      tree.forEach((v) => {
        if (selected.indexOf(v.id) != -1) {
          v.checked = true;
        }
        if (v.children.length) {
          this.bindTree(v.children, selected);
        }
      });
    },
    initGroup() {
      let params = {
        tab: 1,
      };
      this.axios
        .request({
          url: "/dashboard/DashboardMachineGroup/GetMachineGroup",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            this.gropList = [];
            if (data && Array.isArray(data) && data.length) {
              this.gropList = data;
            }
          }
        });
    },
    // 获取详情数据
    getSetting() {
      const _this = this;
      let params = {
        id: _this.$route.query.id,
      };
      _this.axios
        .request({
          url: "/config/MonthReportTemplate/GetTemplate",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            _this.templatelist = [];
            if (data && Array.isArray(data) && data.length) {
              _this.templatelist = data;
            }
          }
        });
    },
    // 选中某一项
    selectItem(i) {
      const _this = this;
      let { templatelist } = this;
      _this.block_index = i;
      _this.block_select = templatelist[i];
      _this.operate_type = 2;
      _this.module_title = _this.block_select.title;
      _this.type = _this.block_select.templateId;
      _this.coordinates = _this.block_select.axios;
      _this.range = _this.block_select.tab;
      if (_this.block_select.tab == 1) {
        _this.initTree(_this.block_select.machines);
        _this.border = [];
      } else {
        _this.initTree();
        _this.border = _this.block_select.machines;
      }
      _this.standard = _this.block_select.val;
    },
    // 确认添加
    add() {
      const _this = this;
      if (!_this.module_title) {
        _this.$Message.error("请输入模块标题");
        return false;
      }
      if (!_this.type) {
        return false;
      }
      if (_this.range == 1) {
        if (!_this.$refs.tree.getCheckedNodes().length) {
          _this.$Message.error("请选择产线层级");
          return false;
        }
      } else if (_this.range == 2) {
        if (!_this.border.length) {
          _this.$Message.error("请选择小组");
          return false;
        }
      }
      if (
        _this.type == 2 ||
        _this.type == 3 ||
        _this.type == 4 ||
        _this.type == 5 ||
        _this.type == 6
      ) {
        if (!_this.coordinates) {
          return false;
        }
      }
      if (_this.type == 3 || _this.type == 4 || _this.type == 6) {
        if (!_this.standard && _this.standard !== 0) {
          _this.$Message.error("请输入标准值");
          return false;
        }
      }

      let { templatelist } = this;
      templatelist.push({
        title: _this.module_title,
        templateId: _this.type,
        axios: _this.coordinates,
        tab: _this.range,
        machines:
          _this.range == 1
            ? _this.$refs.tree.getCheckedNodes().map((v) => {
                return v.id;
              })
            : _this.border,
        val: _this.standard ? parseInt(_this.standard) : 0,
      });
      let data = {
        parentId: _this.$route.query.id,
        templateId: templatelist,
      };
      _this.axios
        .request({
          url: "/config/MonthReportTemplate/Add",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success(_this.$t(result.msg));
            _this.reload();
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 确认修改
    edit() {
      const _this = this;

      if (!_this.module_title) {
        _this.$Message.error("请输入模块标题");
        return false;
      }
      if (!_this.type) {
        return false;
      }
      if (_this.range == 1) {
        if (!_this.$refs.tree.getCheckedNodes().length) {
          _this.$Message.error("请选择产线层级");
          return false;
        }
      } else if (_this.range == 2) {
        if (!_this.border.length) {
          _this.$Message.error("请选择小组");
          return false;
        }
      }
      if (
        _this.type == 2 ||
        _this.type == 3 ||
        _this.type == 4 ||
        _this.type == 5 ||
        _this.type == 6
      ) {
        if (!_this.coordinates) {
          return false;
        }
      }
      if (_this.type == 3 || _this.type == 4 || _this.type == 6) {
        if (!_this.standard && _this.standard !== 0) {
          _this.$Message.error("请输入标准值");
          return false;
        }
      }

      let { block_select } = this;
      console.log(block_select);

      let data = {
        axios: _this.coordinates,
        machines:
          _this.range == 1
            ? _this.$refs.tree.getCheckedNodes().map((v) => {
                return v.id;
              })
            : _this.border,
        parentId: _this.$route.query.id,
        tab: _this.range,
        templateId: _this.type,
        title: _this.module_title,
        val: _this.standard ? parseInt(_this.standard) : 0,
        id: block_select.id,
      };
      _this.axios
        .request({
          url: "/config/MonthReportTemplate/Modify",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success(_this.$t(result.msg));
            _this.reload();
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 确认删除
    del() {
      const _this = this;
      let { block_select } = this;
      let params = {
        parentId: _this.$route.query.id,
        templateId: block_select.templateId,
        id: block_select.id,
      };
      _this.axios
        .request({
          url: "/config/MonthReportTemplate/Del",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success(_this.$t(result.msg));
            _this.reload();
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
  },
};
</script>

 <style lang="less" scoped>
.select_item {
  background-color: #347ab8 !important;
}
.left_block {
  overflow-y: scroll;
  .block_item {
    background-color: #6699cc;
    color: #fff;
    cursor: pointer;
  }
  div {
    height: 40px;
    line-height: 40px;
    color: #222;
    margin: 20px 10px;
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
  }
}
.right_block {
  border-left-color: #6699cc;
  overflow-y: scroll;
  background-color: #fff;
  margin-left: 30px;
}
.searchBtn button {
  margin-right: 15px;
}
</style>
