<template>
  <div>
    <div v-if="!dialogVisible">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <!-- <el-form-item label="所属单位:">
          <el-select
            clearable
            v-model.trim="form.company"
            placeholder="请选择单位"
          >
            <el-option
              v-for="item in CompanyList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <Area @click="handleNodeClick"></Area>

        <el-form-item label="统计日期:">
          <el-date-picker
            v-model.trim="form.item"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="ml10"
            icon="el-icon-search"
            @click="onSubmit"
            >查询</el-button
          >
          <el-button
            type="primary"
            class="ml10"
            icon="el-icon-circle-plus-outline"
            >生成</el-button
          >
          <el-button
            type="primary"
            class="ml10"
            icon="el-icon-delete"
            @click="deleteData"
            >删除</el-button
          >
          <el-button
            type="primary"
            class="ml10"
            icon="el-icon-wind-power"
            @click="strategy"
            >策略</el-button
          >
          <el-button type="primary" class="ml10" icon="el-icon-s-promotion"
            >派发</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        stripe
        :data="generateList.data"
        :height="vh"
        border
        style="width: 100%"
        v-loading="isLoading"
        header-cell-class-name="table_header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <template v-for="(item, index) in tableHeaderNetwork">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="index"
            :min-width="item.width"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item.prop]"
                placement="top"
              > -->
              <span v-if="item.prop == 'state'">{{
                scope.row[item.prop] == 0 ? "未生成" : "已生成"
              }}</span>
              <span v-else>{{ scope.row[item.prop] }}</span>
              <!-- </el-tooltip> -->
            </template>
          </el-table-column>
        </template>
      </el-table>
      <el-pagination
        background
        class="mt10"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pageNum"
        :page-sizes="[20, 30, 40, 50, 100]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="generateList.total"
      >
      </el-pagination>
    </div>

    <!-- 策略弹框 -->

    <el-row v-else>
      <el-row>
        <el-col :span="12">
          <el-button
            type="primary"
            class="ml10"
            icon="el-icon-circle-plus-outline"
            @click="ModifyVisible = true"
            >新增</el-button
          >
          <el-button
            type="primary"
            size="mini"
            class="ml10"
            icon="el-icon-sort"
            @click="
              binding = true;
              bindingForm = scope.row;
            "
            >绑定</el-button
          >
          <el-button
            type="primary"
            size="mini"
            class="ml10"
            icon="el-icon-delete"
            @click="deletePolicy(scope.row)"
            >删除</el-button
          >
        </el-col>
        <el-col :span="12" class="flex">
          <svg-icon
            class="back"
            icon-class="back"
            @click="dialogVisible = false"
          />
        </el-col>
      </el-row>
      <el-table
        stripe
        :data="tableData"
        border
        :height="vh + 40"
        v-loading="strategyLoading"
        header-cell-class-name="table_header"
        style="width: 100%"
        class="mt10"
      >
        <el-table-column prop="name" label="策略名称"> </el-table-column>
        <el-table-column prop="time" label="生成时间"> </el-table-column>
        <el-table-column
          prop="content"
          show-overflow-tooltip
          label="策略内容"
          min-width="130"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.content"
              placement="top"
            >
              <span>{{ scope.row.content }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作人"> </el-table-column>
        <!-- <el-table-column prop="content" label="策略内容" min-width="100">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="ml10"
              icon="el-icon-sort"
              @click="
                binding = true;
                bindingForm = scope.row;
              "
              >绑定</el-button
            >
            <el-button
              type="primary"
              size="mini"
              class="ml10"
              icon="el-icon-delete"
              @click="deletePolicy(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
    </el-row>

    <!-- 策略新增 -->
    <el-dialog
      :close-on-click-modal="false"
      title="策略新增"
      :visible.sync="ModifyVisible"
      width="30%"
      height="400px"
    >
      <el-form ref="form" :model="ModifyList" label-width="80px">
        <el-form-item label="策略名称:">
          <el-input clearable v-model.trim="ModifyList.name"></el-input>
        </el-form-item>

        <el-form-item label="策略内容:">
          <el-input
            type="textarea"
            v-model.trim="ModifyList.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ModifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="Modify">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 策略绑定 -->
    <el-dialog
      :close-on-click-modal="false"
      title="策略绑定"
      :visible.sync="binding"
      width="20%"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="符合类型" name="type">
          <el-row class="pane">
            <el-checkbox-group
              v-model="bindingForm.binding.ComplianceType"
              class="checkbox"
            >
              <el-checkbox
                v-for="item in typeList"
                :label="item.id"
                :key="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="指标参数" name="parameter">
          <el-row class="pane">
            <el-checkbox-group
              v-model="bindingForm.binding.parameters"
              class="checkbox"
            >
              <el-checkbox
                v-for="item in parameterList"
                :label="item.id"
                :key="item.id"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-row></el-tab-pane
        >
        <el-tab-pane label="监测点" name="monitor"
          ><div class="pane">
            <el-input
              v-model.trim="filterText"
              placeholder="筛选树"
              clearable
              style="width: 70%"
            ></el-input>
            <el-button
              type="primary"
              @click="filterTexts"
              class="ml10"
              size="mini"
              icon="el-icon-search"
              >查询</el-button
            >
            <el-tree
              ref="tree"
              :data="dataTree"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              :filter-node-method="filterNode"
            >
            </el-tree></div
        ></el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="binding = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  workOrderGenerate,
  strategy,
  addPolicy,
  deletePolicy,
  DeleteWorkOrder,
  bindingSubmit,
  bindingTree,
} from "@/api/Workorder.js";
// import { dictypeData } from "@/api/user";
import Area from "@/views/components/Area/Area.vue";
export default {
  components: { Area },
  props: {},
  data() {
    return {
      vh: undefined,
      form: {
        company: "", //所属单位
        time: "", //时间
        pageNum: 1,
        pageSize: 20,
      },
      //策略绑定
      bindingForm: {
        binding: {
          ComplianceType: [], //符合符合类型
          parameters: [], //指标参数
          monitor: [], //监测点}
        },
      },
      parameterList: [
        //指标参数
        { id: 1, name: "三相电压不平衡度" },
        { id: 2, name: "评率偏差" },
        { id: 3, name: "谐波电压含有率" },
        { id: 4, name: "谐波电压畸变率" },
      ],
      typeList: [
        //符合符合类型
        { id: 1, name: "高铁" },
        { id: 2, name: "光伏" },
        { id: 23, name: "中拼炉" },
        { id: 24, name: "中汽化铁路" },
      ],
      filterText: "", //树过滤字段
      dataTree: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      activeName: "type",
      tableData: [], //策略 表格
      dialogVisible: false, //策略对话框
      ModifyVisible: false, //新增策略
      binding: false, //策略绑定
      ModifyList: {}, //修改策略储存数字
      strategyLoading: true, //策略弹框加载

      isLoading: true,
      generateList: {}, //工单生成数组
      multipleSelection: [], //工单生成多选
      //所属单位数据数据

      CompanyList: [],
      tableHeaderNetwork: [
        { prop: "company", label: "单位" },
        { prop: "station", label: "变电站" },
        { prop: "monitor", label: "监测点" },
        { prop: "team", label: "运维班组" },
        { prop: "describe", label: "问题描述", width: "150" },
        { prop: "time", label: "生成时间" },
        { prop: "state", label: "工单状态" },
      ],
    };
  },
  watch: {
    binding(val) {
      if (this.binding) {
        setTimeout(() => {
          this.$refs.tree.setCheckedKeys(this.bindingForm.binding.monitor);
        }, 100);
      } else {
        (this.activeName = "type"), this.$refs.tree.setCheckedKeys([]);
      }
    },
  },
  created() {
    // this.dictionaries()
    this.onSubmit();
    this.bindingTree();
  },
  mounted() {
    this.vh = document.getElementById("app-main-in").offsetHeight - 165;
  },

  methods: {
    // 字典表
    // dictionaries() {
    //   dictypeData().then(res => {
    //     res.data.forEach(item => {
    //       if (item.name == "单位") {
    //         this.CompanyList = item.children;
    //       }
    //     });
    //   });
    // },
    // 切换选项
    handleNodeClick(data) {
      // console.log(data);
    },
    // 工单生成查询
    onSubmit() {
      this.isLoading = true;
      workOrderGenerate(this.form).then((res) => {
        this.generateList = res.data;
        this.isLoading = false;
      });
    },
    // 工单 生成 删除
    deleteData() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择需要删除的数据!",
          type: "warning",
        });
      } else {
        let data = [];
        this.multipleSelection.forEach((item) => {
          data.push(item.id);
        });
        DeleteWorkOrder({ id: data }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },
    // 点击策略
    strategy() {
      this.tableData = [];
      this.dialogVisible = true;
      this.strategyLoading = true;
      strategy().then((res) => {
        this.tableData = res.data;
        this.strategyLoading = false;
      });
    },
    // 策略 绑定 监测点返回
    bindingTree() {
      bindingTree().then((res) => {
        this.dataTree = res.data;
      });
    },
    // 新增策略
    Modify() {
      addPolicy(this.ModifyList).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.ModifyVisible = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除策略
    deletePolicy(e) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletePolicy({ id: e.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {});
    },
    // 绑定 确定
    determine() {
      this.bindingForm.binding.monitor = this.$refs.tree.getCheckedKeys();
      bindingSubmit(this.bindingForm).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.binding = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    filterTexts() {
      this.$refs.tree.filter(this.filterText);
    },
    // 树筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 表格多选
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val;
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.onSubmit();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.onSubmit();
    },
  },

  computed: {},
};
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
/deep/.el-table .cell {
  text-align: center;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 10px;
}
/deep/.el-dialog {
  margin-top: 200px !important;
}

.flex {
  display: flex;
  align-items: center;
}
.checkbox {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 24px;
}
.pane {
  height: 300px;
  overflow-y: auto;
}

.pane::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  overflow-y: scroll;
  border-radius: 6px;
}
.pane::-webkit-scrollbar-thumb {
  background-color: rgba(11, 135, 131, 0.979);
  border-radius: 4px;
}

.pane::-webkit-scrollbar-track {
  cursor: pointer;
  background-color: rgba(5, 206, 172, 0.286);
  border-radius: 0 px;
}
</style>
<style lang="scss" scoped>
.back {
  margin-right: 10px;
  margin-left: auto;
  font-size: 29px;
  line-height: 32px;
  color: $themeColor;
  cursor: pointer;
  &:hover {
    color: $themeColor;
    opacity: 0.9;
  }
}
</style>