<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--机构数据-->
      <el-col :span="5" :xs="24">
        <div class="search-container">
          <el-input
            v-model="filterText"
            placeholder="请输入机构名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="tree-container">
          <el-tree
            class="filter-tree"
            :data="treedata"
            node-key="value"
            highlight-current
            :props="defaultProps"
            default-expand-all
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            accordion
            @node-click="clicktreenode"
            ref="tree">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span :title="data.label" class="show-ellipsis">{{
                    data.label
                  }}</span>
              </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="19" :xs="24">
        <el-form :model="searches" ref="queryForm" size="small" :inline="true"  label-width="68px">
          <el-form-item label="检查项" prop="userName">
            <el-input
              v-model="searches.ruleItemName"
              placeholder="请输入用户名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="refresh"
            />
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              plain
              @click="onEdit()"
              v-hasPermi="['system:user:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              size="mini"
              plain
              @click="dakai"
              v-hasPermi="['system:user:add']">
              {{spread ? "收起所有行" : "展开所有行" }}</el-button>
          </el-col>
<!--          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
        </el-row>

        <el-table
          :data="tableData"
          border
          :default-expand-all="spread"
          v-if="fresh">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.pointDtoList"
                border
                style="width: 100%">
                <el-table-column
                  prop="pointNum"
                  label="检查要点编号"
                  width="100">
                </el-table-column>
                <el-table-column prop="pointName" label="检查要点">
                </el-table-column>
                <el-table-column prop="areaName" label="检查区域">
                </el-table-column>
                <el-table-column prop="dataTypeName" label="数据类型">
                </el-table-column>
                <el-table-column prop="degreeRiskName" label="风险等级">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="itemNum" label="检查项编号"> </el-table-column>
          <el-table-column prop="itemName" label="检查项"> </el-table-column>
          <el-table-column prop="itemDesc" label="标准及要求">
          </el-table-column>
          <el-table-column prop="pointNums" label="检查要点数量">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width">

            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="showdialog(scope.row.id)"
                v-hasPermi="['system:user:edit']"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="deldata(scope.row.id)"
                v-hasPermi="['system:user:remove']"
              >删除</el-button>

<!--              <k-btn-tip-->
<!--                type="text"-->
<!--                :tip="'将删除检查项及其下所有检查要点,确定删除？'"-->
<!--                @click="deldata(scope.row.id)"-->
<!--              >删除</k-btn-tip-->
<!--              >-->
            </template>
          </el-table-column>
        </el-table>

        <pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </pagination>
      </el-col>
    </el-row>

    <!--  检查项弹窗  -->
    <el-dialog
      :title="edit == 1 ? '新增检查项' : '编辑检查项'"
      :visible.sync="dialogVisible"
      width="60%"
      :show-close="true"
      @open="lookdialog"
      @close="
            (dialogVisible = false),
              (formdetail = {
                id: null,
                itemName: null,
                itemDesc: null,
                itemNum: null,
                pointDtoList: [],
              })
          ">
      <div>
        <div class="box">
          <p>检查项</p>
          <div class="search">
            <div>
              <span><span style="color:red;">*</span> 检查项编号：</span>
              <el-input
                v-model="formdetail.itemNum"
                maxlength="200"
                type="number"
                placeholder="请输入内容"
                @blur="check"
                clearable
              ></el-input>
            </div>
            <div>
              <span><span style="color:red;">*</span> 检查项：</span>
              <el-input
                v-model="formdetail.itemName"
                maxlength="50"
                placeholder="请输入内容"
                clearable
              ></el-input>
            </div>
            <div>
              <span><span style="color:red;">*</span> 标准及要求：</span>
              <el-input
                v-model="formdetail.itemDesc"
                maxlength="200"
                placeholder="请输入内容"
                clearable
              ></el-input>
            </div>
          </div>
        </div>
        <div class="box">
          <p>检查要点</p>
          <div style="margin-bottom: 10px">
            <el-button type="primary" @click="onEdit1(-1)">新增</el-button>
          </div>
          <el-table
            :data="formdetail.pointDtoList"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="pointNum"
              label="检查要点编号"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="pointName" label="检查要点">
            </el-table-column>
            <el-table-column prop="areaName" label="检查区域">
            </el-table-column>
            <el-table-column prop="safeTypeName" label="安防类型">
            </el-table-column>
            <el-table-column prop="reformDay" label="整改期限">
            </el-table-column>
            <el-table-column prop="dataTypeName" label="数据类型">
            </el-table-column>
            <el-table-column prop="degreeRiskName" label="风险等级">
            </el-table-column>
            <el-table-column prop="remark" label="备注"> </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="onEdit1(scope.$index, scope.row)"
                >编辑</el-button
                >
                <k-btn-tip
                  type="text"
                  :tip="'将删除该条检查要点,确定删除？'"
                  @click="delitem(scope.$index)"
                >删除</k-btn-tip
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-dialog
        width="50%"
        title="新增检查要点"
        :visible.sync="dataVisible"
        :show-close="false"
        append-to-body
      >
        <div>
          <el-form
            ref="form"
            :model="formData"
            :rules="formDataRules"
            label-width="110px"
            class="formbox"
          >
            <el-form-item label="检查要点编号" prop="pointNum">
              <el-input
                v-model="formData.pointNum"
                type="number"
                laceholder="请输入检查要点编号"
                @blur="check()"
                @input="formData.pointNum = Number(formData.pointNum)"
              ></el-input>
            </el-form-item>
            <el-form-item label="检查要点" prop="pointName">
              <el-input
                v-model="formData.pointName"
                placeholder="请输入检查要点"
                @blur="check()"
                maxlength="100"
              ></el-input>
            </el-form-item>
            <el-form-item label="检查区域" prop="areaId">
              <el-select
                v-model="formData.areaId"
                placeholder="请选择检查区域"
                clearable
                @change="getareaname"
              >
                <el-option
                  v-for="item in selectarr1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!--                <el-form-item label="采集点名称"
                          prop="nfcBindId">
              <el-select v-model="formData.nfcBindId"
                         placeholder="请选择采集点名称"
                         clearable>
                <el-option v-for="item in selectarr7"
                           :key="item.id"
                           :label="item.collectionAreaName"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item label="安防类型" prop="safeType">
              <el-select
                v-model="formData.safeType"
                placeholder="请选择安防类型"
                clearable
                @change="getsafename"
              >
                <el-option
                  v-for="item in selectarr2"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="整改期限" prop="reformDay">
              <el-select
                v-model="formData.reformDay"
                placeholder="请选择整改期限"
                clearable
              >
                <el-option
                  v-for="item in selectarr3"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="查验方法" prop="inspection">
              <el-select
                v-model="formData.inspection"
                placeholder="请选择查验方法"
                clearable
              >
                <el-option
                  v-for="item in selectarr4"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型" prop="dataType">
              <el-select
                v-model="formData.dataType"
                placeholder="请选择数据类型"
                clearable
                @change="getdataname"
              >
                <el-option
                  v-for="item in selectarr5"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间类型" prop="timeType">
              <el-select
                v-model="formData.timeType"
                placeholder="请选择时间类型"
                clearable
              >
                <el-option
                  v-for="item in selectarr6"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="风险等级" prop="degreeRisk">
              <k-select
                v-model="formData.degreeRisk"
                url="/dict/find/dict"
                :params="{ dictCode: 'degree_risk' }"
                placeholder="请选择风险等级"
                @select="getdegreeRiskname"
              ></k-select>
              <!-- <el-select v-model="formData.timeType"
                         placeholder="请选择风险登记"
                         clearable>
                <el-option v-for="item in selectarr6"
                           :key="item.value"
                           :label="item.name"
                           :value="item.value"></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="数据来源" prop="businessType">
              <!-- <k-select-constant name="PointBusinessType"
                          v-model="formData.businessType"
                          placeholder="请选择机构类型"></k-select-constant> -->
              <k-select
                v-model="formData.businessType"
                url="/dict/find/dict"
                :params="{ dictCode: 'point_business_type' }"
                placeholder="请选择数据来源"
              ></k-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                v-model="formData.remark"
                maxlength="200"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button
                @click="
                  (dataVisible = false),
                    (formData = {
                      pointNum: null,
                      pointName: null,
                      areaId: null,
                      areaName: null,
                      safeType: null,
                      safeTypeName: null,
                      reformDay: null,
                      inspection: null,
                      dataType: null,
                      dataTypeName: null,
                      timeType: 0,
                      remark: null,
                      id: null,
                      nfcBindId: null,
                      ruleId: null,
                      degreeRisk: null,
                      businessType:null,
                    })
                "
              >取 消</el-button
              >
              <el-button
                type="primary"
                @click="onaddSubmit()"
                v-if="formindex == -1"
              >添 加</el-button
              >
              <el-button
                type="primary"
                @click="onsaveSubmit()"
                v-if="formindex != -1"
              >保 存</el-button
              >
            </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
            <el-button
              @click="
                (dialogVisible = false),
                  (formdetail = {
                    id: null,
                    itemName: null,
                    itemDesc: null,
                    itemNum: null,
                    pointDtoList: [],
                  })
              "
            >取 消</el-button
            >
            <el-button type="primary" @click="onSubmit()">{{
                edit == 1 ? "添 加" : "保 存"
              }}</el-button>
          </span>
    </el-dialog>


  </div>
</template>

<script>
//import { mapState, mapMutations } from "vuex";
import {treeJson,tableJson} from './json'
import {treeData} from './api'
export default {
  props: [],
  data() {
    return {
      searches: {
        ruleId: null,
        ruleItemName: null,
      },
      search: {
        ruleId: null,
        ruleItemName: null,
      },
      spread: false,
      fresh: true,
      checked: false,
      item: {
        label: "",
        value: "",
      },
      tableData: [],
      formdetail: {
        id: null,
        itemName: null,
        itemDesc: null,
        ruleId: null,
        itemNum: null,
        pointDtoList: [],
      },
      currentPage: 1,
      total: 0,
      pagesize: 10,
      dialogVisible: false,
      dataVisible: false,
      filterText: "",
      orgtypeId: null,
      treedata: [],
      edit: 1,
      defaultProps: {
        children: "children",
        label: "label",
      },
      nodenum: null,
      formindex: -1,
      formruleID: null,
      formData: {
        pointNum: null,
        pointName: null,
        areaId: null,
        areaName: null,
        safeType: null,
        safeTypeName: null,
        reformDay: null,
        inspection: null,
        dataType: null,
        dataTypeName: null,
        timeType: 0,
        remark: null,
        id: null,
        nfcBindId: null,
        ruleId: null,
      },
      formDataRules: {
        pointNum: [{ required: true, message: "请输入检查要点编号" }],
        pointName: [{ required: true, message: "请输入检查要点" }],
        areaId: [{ required: true, message: "请选择检查区域" }],
        reformDay: [{ required: true, message: "请选择整改期限" }],
        inspection: [{ required: true, message: "请选择查验方法" }],
        dataType: [{ required: true, message: "请选择数据类型" }],
        timeType: [{ required: true, message: "请选择时间类型" }],
        nfcBindId: [{ required: true, message: "请选择采集点名称" }],
        degreeRisk: [{ required: true, message: "请选择风险等级" }],
      },
      selectarr1: [],
      selectarr2: [],
      selectarr3: [],
      selectarr4: [],
      selectarr5: [],
      // selectarr7: [],
      selectarr6: [
        {
          name: "无",
          value: 0,
        },
        {
          name: "时分",
          value: 1,
        },
      ],
      degreeRiskList: [],
    };
  },

  components: {},

  // computed: {
  //   ...mapState(["org", "loginUser"]),
  // },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },

    // 'formData.orgId'(val){
    //     if(val){
    //         this.fillterid(val)
    //     }
    // }
  },

  created() {
    this.OID = this.loginUser.org.id;
    this.getTreeList();
    // await this.getlist()
    // await this.getassetlist();
  },

  mounted() {
    this.treedata = treeJson;
  },

  methods: {
    //...mapMutations([]),
    dakai() {
      this.spread = !this.spread;
      this.fresh = false;
      this.$nextTick(() => {
        this.fresh = true;
      });
    },
    async check() {
      await this.$api.app
        .copycheck({
          ruleId: this.formruleID,
          itemId: this.formdetail.id,
          itemNum: this.formdetail.itemNum,
          pointId: this.formData.id,
          pointNum: this.formData.pointNum,
          pointName: this.formData.pointName,
        })
        .then((v) => {})
        .catch((v) => {
          // if (this.dataVisible) {
            if (v.error == "检查项编号重复!") {
              this.formdetail.itemNum = null;
            } else if (v.error == "要点编号重复!") {
              this.formData.pointNum = null;
            } else if (v.error == "要点名称重复!") {
              this.formData.pointName = null;
            }
          // }
        });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    async refresh() {
      this.currentPage = 1;
      this.getlist();
    },
    async getlist() {
      // const data = await this.$api.app.normlist({
      //   page: this.currentPage - 1,
      //   size: this.pagesize,
      //   ruleId: this.searches.ruleId,
      //   ruleItemName: this.searches.ruleItemName,
      // });
      //假数据
      const data = tableJson;
      console.log(data,22222)
      this.tableData = data.content;
      this.total = data.total;
      this.pagesize = data.size;
      this.spread = false;
    },
    getTreeList(){
      treeData().then(res=>{
        this.treedata = json;
      })
      // this.$api.app.normtree().then((v) => {
      //   this.treedata = v;
      // });
    },
    lookdialog() {
      if (this.edit == 1) {
      }
    },
    fillterid(val) {
      for (let e of this.treedata) {
        if (e.value == val) {
          this.item = {
            label: e.label,
            value: e.value,
          };
          return;
        } else {
          if (e.children && e.children.length > 0) {
            this.fillterid(val);
          }
        }
      }
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getlist();
    },
    clicktreenode(data) {
      console.log(111)
      this.spread = false;
      this.fresh = false;
      this.$nextTick(() => {
        this.fresh = true;
      });
      if (data.id) {
        this.searches.ruleId = data.id;
        this.formruleID = data.id;
        this.orgtypeId = data.orgTypeId;
        this.refresh();
      }
    },
    async getthreearr() {
      const data = await this.$api.app.treeselect();
      console.log(data);
      this.selectarr2 = data.checkTypeList;
      this.selectarr3 = data.rectifyTremList;
      this.selectarr4 = data.checkMethodList;
    },
    async getdatatype() {
      const data = await this.$api.app.dataselect();
      console.log(data);
      this.selectarr5 = data;
    },
    async getareatype() {
      const data = await this.$api.app.areaselect();
      this.selectarr1 = [];
      data.map((v) => {
        if (v.orgType == this.orgtypeId) {
          this.selectarr1.push(v);
        }
      });
      console.log(this.selectarr1);
    },
    // async getdegreeRisk() {
    //   const data = await this.$api.app.areaselect()
    //   this.selectarr1 = []
    //   data.map((v) => {
    //     if (v.orgType == this.orgtypeId) {
    //       this.selectarr1.push(v)
    //     }
    //   })
    //   console.log(this.selectarr1)
    // },
    async onEdit1(val, e) {
      this.getthreearr();
      this.getdatatype();
      this.getareatype();

      if (val == -1) {
        this.formData = {
          pointNum: null,
          pointName: null,
          areaId: null,
          areaName: null,
          safeType: null,
          safeTypeName: null,
          reformDay: null,
          inspection: null,
          dataType: null,
          dataTypeName: null,
          timeType: 0,
          remark: null,
          id: null,
          ruleId: null,
          nfcBindId: null,
          degreeRisk: null,
          degreeRiskName: null,
          businessType:null,
        };
        this.formindex = val;
        this.formData.ruleId = this.formruleID;
      } else {
        this.formindex = val;
        this.formData = JSON.parse(JSON.stringify(e));
        // const data = await this.$api.app.collectionselect(this.formData.areaId);
        // this.selectarr7 = data;
      }
      this.dataVisible = true;
    },
    delitem(val) {
      this.formdetail.pointDtoList.splice(val, 1);
    },
    setName(datas) {
      //遍历树  获取id数组
      for (var i of datas) {
        this.options4.push({
          label: i.label,
          value: i.value,
        }); // 遍历项目满足条件后的操作
        if (i.children) {
          //存在子节点就递归
          this.setName(i.children);
        }
      }
    },
    onEdit() {
      if (this.formruleID == null) {
        this.$message({
          message: "请点击左侧机构树选择具体检查规范再新增",
          type: "warning",
        });
        return;
      }
      this.edit = 1;
      this.tableDataTwo = [];
      this.dialogVisible = true;
    },
    async onSubmit() {
      if (this.formdetail.itemDesc == null || this.formdetail.itemDesc == "") {
        this.$message({
          message: "请填写检查项标准及要求再提交",
          type: "error",
        });
        return;
      }
      if (this.formdetail.itemNum == null || this.formdetail.itemNum == "") {
        this.$message({
          message: "请填写检查项检查项编号再提交",
          type: "error",
        });
        return;
      }
      if (this.formdetail.itemName == null || this.formdetail.itemName == "") {
        this.$message({
          message: "请填写检查项再提交",
          type: "error",
        });
        return;
      }
      this.formdetail.ruleId = this.formruleID;
      await this.$api.app.addnorm(this.formdetail).then((v) => {
        console.log(v);
        this.formdetail = {
          id: null,
          itemName: null,
          itemDesc: null,
          itemNum: null,
          ruleId: null,
          pointDtoList: [],
        };
        this.dialogVisible = false;
        this.getlist();
      });
    },
    onclose() {
      this.dataVisible = false;
      // this.$refs.form.resetFields();
    },
    async showdialog(val) {
      this.edit = 2;
      const data = await this.$api.app.detailnorm(val);
      this.formdetail = data;
      this.dialogVisible = true;
    },
    async nowdialog(val) {
      this.datalist = [];

      const data = await this.$api.rotating.nowdevice(val);
      if (data.items) {
        for (let e of data.items) {
          for (let i of e) {
            this.datalist.push({
              date: this.$moment(data.deviceData.createTime).format(
                "YYYY-MM-DD"
              ),
              status: i,
            });
          }
        }
      }
      this.dataVisible = true;
    },
    async gethisDoor() {
      this.datalist = [];
      this.hisdata.page = this.page1;
      this.hisdata.size = this.pagesize1;
      this.hisdata.orgId = this.OID;
      await this.$api.rotating.historydeviceDoor(this.hisdata).then((v) => {
        this.total1 = v.totalElements;
        this.pagesize1 = v.pageable.pageSize;
        for (let e of v.content) {
          if (e.itemsa) {
            this.datalist.push({
              date: this.$moment(e.createTime).format("YYYY-MM-DD HH:mm:ss"),
              status: e.itemsa.items,
            });
          }
        }
      });
    },
    async historydialog(val) {
      this.hisdata.deviceId = val.deviceId;
      if (val.isMc == 0) {
        await this.gethis();
      } else if (val.isMc == 1) {
        await this.gethisDoor();
      }
      this.dataVisible = true;
    },
    async deldata(val) {
      await this.$api.app.delnorm(val);
      this.getlist();
    },
    onclosedata() {
      this.hisdata = {
        page: 0,
        size: 10,
        deviceId: null,
        createTime: [],
      };
    },
    getsafename(val) {
      for (let i of this.selectarr2) {
        if (i.code == val) {
          this.formData.safeTypeName = i.name;
        }
      }
    },
    getdegreeRiskname(val) {
      // for (let i of this.selectarr2) {
      //   if (i.code == val) {

      //   }
      // }
      console.info("getdegreeRiskname", val);
      if (val) this.formData.degreeRiskName = val.name;
    },
    getdataname(val) {
      for (let i of this.selectarr5) {
        if (i.id == val) {
          this.formData.dataTypeName = i.name;
        }
      }
    },
    async getareaname(val) {
      for (let i of this.selectarr1) {
        if (i.id == val) {
          this.formData.areaName = i.name;
        }
      }
      // if (val) {
      //   const data = await this.$api.app.collectionselect(val);
      //   this.formData.nfcBindId = null;
      //   this.selectarr7 = data;
      // }
    },
    onaddSubmit() {
      this.$refs.form.validate((isValidate) => {
        if (!isValidate) return;
        let obj = {};
        obj = JSON.parse(JSON.stringify(this.formData));
        this.formdetail.pointDtoList.push(obj);
        this.dataVisible = false;
        this.$refs.form.resetFields();
      });
    },
    onsaveSubmit() {
      this.$refs.form.validate((isValidate) => {
        if (!isValidate) return;
        let obj = {};
        obj = JSON.parse(JSON.stringify(this.formData));
        for (let i in this.formdetail.pointDtoList) {
          if (this.formindex == i) {
            this.$set(this.formdetail.pointDtoList, i, obj);
          }
        }
        this.dataVisible = false;
        this.$refs.form.resetFields();
      });
    },
  },
};
</script>
<style lang="scss">
  .tree-container{
    .el-tree-node>.el-tree-node__children{
      overflow: visible!important; /* 添加横向滚动条*/
    }
  }
</style>
<style lang="scss" scoped>
  .tree-container{
    height: calc(100vh - 185px);
    overflow: auto auto;
  }
</style>
