<template>
  <div>
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item" style="width: 230px">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="station"
              placeholder="请选择"
              popper-class="select"
              @change="getTableData()"
            >
              <el-option
                v-for="item in stationArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="query-actions" style="margin-left: 50px">
        <button class="btn green" @click="insertItem()">新增</button>
      </div>
    </div>
    <div class="df-table">
      <el-table :data="tableData" class="custom-table" height="85vh">
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="id" align="center" label="风机编号" />
        <el-table-column prop="projectid" align="center" label="期次" />
        <el-table-column prop="lineid" align="center" label="线路" />
        <el-table-column prop="model" align="center" label="风机型号" />
        <el-table-column prop="name" align="center" label="风机名称" />
        <el-table-column prop="longitude" align="center" label="经度" />
        <el-table-column prop="latitude" align="center" label="纬度" />
        <el-table-column prop="manufacturer" align="center" label="风机厂商" />
        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="getPoint(scope)">测点</el-button>
            <el-button type="text" @click="editItem(scope)">编辑</el-button>
            <el-button type="text" @click="deleteItem(scope)" disabled
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增编辑 -->
    <div>
      <el-dialog
        :title="dialogTitle"
        v-model="dialogShow"
        width="50%"
        top="15vh"
        custom-class="modal"
        :close-on-click-modal="true"
      >
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          size="default"
        >
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['station--name--']}：`"
              prop="station"
            >
              <el-select
                v-model="station"
                placeholder="请选择"
                popper-class="select"
                disabled="stationdisabled"
              >
                <el-option
                  v-for="item in stationArray"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="`${ruleForm['id--name--']}：`" prop="id">
              <el-input
                v-model="ruleForm.id"
                :placeholder="`请输入${ruleForm['id--name--']} eg:MHS_FDC`"
                type="input"
                :disabled="codedisabled"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item :label="`${ruleForm['name--name--']}：`" prop="name">
              <el-input
                v-model="ruleForm.name"
                :placeholder="`请输入${ruleForm['name--name--']} eg:麻黄山01号风机`"
                type="input"
              />
            </el-form-item>
            <el-form-item
              :label="`${ruleForm['model--name--']}：`"
              prop="model"
            >
              <el-input
                v-model="ruleForm.model"
                :placeholder="`请输入${ruleForm['model--name--']} eg:UP82`"
                type="input"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['longitude--name--']}：`"
              prop="longitude"
              type="input"
            >
              <el-input
                v-model="ruleForm.longitude"
                :placeholder="`请输入${ruleForm['longitude--name--']}`"
                type="input"
              />
            </el-form-item>
            <el-form-item
              :label="`${ruleForm['latitude--name--']}：`"
              prop="latitude"
            >
              <el-input
                v-model="ruleForm.latitude"
                :placeholder="`请输入${ruleForm['latitude--name--']}`"
                type="input"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['projectid--name--']}：`"
              prop="projectid"
              type="input"
            >
              <el-input
                v-model="ruleForm.projectid"
                :placeholder="`请输入${ruleForm['projectid--name--']} eg:MHS01_GC`"
                type="input"
              />
            </el-form-item>
            <el-form-item
              :label="`${ruleForm['lineid--name--']}：`"
              prop="lineid"
            >
              <el-input
                v-model="ruleForm.lineid"
                :placeholder="`请输入${ruleForm['lineid--name--']} eg:MHS01_XL`"
                type="input"
              />
            </el-form-item>
          </div>
          <div class="inlineItem">
            <el-form-item
              :label="`${ruleForm['manufacturer--name--']}：`"
              prop="manufacturer"
            >
              <el-input
                v-model="ruleForm.manufacturer"
                :placeholder="`请输入${ruleForm['manufacturer--name--']}`"
                type="input"
              />
            </el-form-item>
          </div>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="info" size="medium" @click="cancel"
              >取消</el-button
            >
            <el-button
              type="success"
              size="medium"
              @click="submit('ruleFormRef')"
              >提交</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 查看测点 -->
    <div>
      <el-dialog
        title="测点数据"
        v-model="dialogPoint"
        width="70%"
        top="15vh"
        @close="close"
        custom-class="modal"
      >
        <div class="query mg-b-8">
          <div class="query-items">
            <div class="query-item" style="width: 150px">
              <el-input
                v-model="searchwidget"
                size="small"
                clearable
                placeholder="部件"
                @change="filterDataWidget"
              />
            </div>
            <div class="query-item" style="width: 150px">
              <el-input
                v-model="searchpointdes"
                size="small"
                clearable
                placeholder="测点描述"
                @change="filterDataPointDes"
              />
            </div>
            <div class="query-item" style="width: 150px">
              <div class="lable">测点类型：</div>
              <div class="search-input">
                <el-select v-model="pointtype" @change="getPointByType">
                  <el-option key="AI" value="AI" label="AI" />
                  <el-option key="DI" value="DI" label="DI" />
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <div class="df-table">
          <el-table :data="filterPointData" class="custom-table" height="55vh">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50"
            />
            <el-table-column
              prop="widget"
              align="center"
              label="部件"
              width="150"
            />
            <el-table-column prop="point" align="center" label="测点名" />
            <el-table-column prop="pointdes" align="center" label="测点描述" />
            <el-table-column
              prop="uniformcode"
              align="center"
              label="统一编码"
              width="120"
            />
            <el-table-column
              prop="model"
              align="center"
              label="风机型号"
              width="120"
            />
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      station: "",
      stationdisabled: false, //场站是否可编辑
      option: null, //新增true 编辑false
      stationArray: [],
      tableData: [],
      dialogTitle: "", //编辑或新增标题
      dialogShow: false, //编辑弹窗
      dialogPoint: false, //测点弹窗
      codedisabled: false,
      pointtype: "AI", //测点类型
      pointData: [], //测点数据
      filterPointData: [],
      searchwidget: "",
      searchpointdes: "",
      ruleForm: {
        station: "",
        "station--name--": "场站",
        id: "",
        "id--name--": "风机编号",
        name: "",
        "name--name--": "风机名称",
        model: "",
        "model--name--": "风机型号",
        projectid: "",
        "projectid--name--": "期次",
        lineid: "",
        "lineid--name--": "线路",
        longitude: "",
        "longitude--name--": "经度",
        latitude: "",
        "latitude--name--": "经度",
        manufacturer: "",
        "manufacturer--name--": "风机厂商",
      },
      rules: {
        name: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        id: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        station: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        model: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        manufacturer: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        projectid: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
        lineid: [
          {
            required: true,
            message: "不可为空",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.getChangeZhan();
  },

  methods: {
    // 获取场站列表
    getChangeZhan() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/station/all",
        success(res) {
          that.stationArray = res.data;
          that.station = that.stationArray[0].id;
          that.getTableData();
        },
      });
    },

    // 获取场站列表
    getTableData() {
      const that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "basic/windturbine/all",
        data: {
          station: that.station,
        },
        success(res) {
          that.tableData = res.data;
        },
      });
    },

    // 取消新增或编辑
    cancel() {
      this.dialogShow = false;
    },

    // 关闭测点弹窗
    close(){
       this.dialogPoint = false;
    },

    //新增
    insertItem() {
      this.resetForm();
      this.dialogShow = true;
      this.dialogTitle = "新增";
      this.codedisabled = false;
      this.stationdisabled = false;
    },

    // 编辑某一条
    editItem({ row }) {
      for (let key in row) {
        if (key !== "time") {
          this.ruleForm[key] = row[key];
        }
      }
      this.dialogShow = true;
      this.dialogTitle = "编辑";
      this.codedisabled = true;
      this.stationdisabled = true;
    },

    // 提交编辑或者新增数据
    submit(formName = "") {
      const that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {};
          for (let key in that.ruleForm) {
            if (key.indexOf("--name--") === -1) {
              data[key] = that.ruleForm[key];
            }
          }
          that.API.request({
            method: "POST",
            subUrl: "basic/windturbine/" + (that.option ? "insert" : "edit"),
            data,
            success() {
              that.BASE.showMsg({
                type: "success",
                msg: `${that.option ? "新增" : "编辑"}成功`,
              });
              that.dialogShow = false;
              that.getChangeZhan();
            },
          });
        } else {
          return false;
        }
      });
    },

    //查看测点
    getPoint(row) {
      const that = this;
      that.API.requestData({
        subUrl: "point/list",
        data: {
          wtId: row.row.id,
        },
        success(res) {
          that.pointData = res.data;
          that.filterPoint();
          that.dialogPoint = true;
        },
      });
    },

    //根据测点类型查看
    getPointByType() {
      this.filterPoint();
    },

    //过滤AI/DI
    filterPoint() {
      this.filterPointData = [];
      this.pointData.forEach((el) => {
        if (el.pointtype == this.pointtype) this.filterPointData.push(el);
      });
    },

    //输入过滤
    filterDataWidget() {
      this.searchpointdes = '';
      this.filterPointData = [];
      if (this.searchwidget) {
        this.pointData.forEach(el => {
          if (
            el.widget.indexOf(this.searchwidget) !== -1 &&
            this.pointtype == el.pointtype
          )
            this.filterPointData.push(el);
        });
      } else {
        this.filterPoint();
      }
    },
     //输入过滤
    filterDataPointDes() {
      this.searchwidget= '';
      this.filterPointData = [];
      if (this.searchpointdes) {
        this.pointData.forEach(el => {
          if (
            el.pointdes.indexOf(this.searchpointdes) !== -1 &&
            this.pointtype == el.pointtype
          )
            this.filterPointData.push(el);
        });
      } else {
        this.filterPoint();
      }
    },


    // 渲染 rules 中文描述
    renderRules() {
      for (let key in this.rules) {
        this.rules[key].forEach((ele) => {
          ele.message = `${this.ruleForm[key + "--name--"]}` + ele.message;
        });
      }
    },

    // 重置表单并且重置表单效验
    resetForm() {
      this.dialogTitle = "";
      this.ruleForm.id && delete this.ruleForm.id;
      for (let key in this.ruleForm) {
        if (key.indexOf("--name--") === -1) {
          this.ruleForm[key] = "";
        }
      }
    },
  },
};
</script>


<style lang="less" scpoed>
.el-form {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 20px;
  .inlineItem {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    height: 80px;
    .el-form-item {
      width: 100%;
      margin-bottom: 40px;
      margin-top: 40px;
      display: flex;
      justify-items: center;

      .el-input__count {
        background: rgba(83, 98, 104, 0.2);
        color: #b3bdc0;
      }
      .el-input {
        width: 220px;
      }
      .el-select {
        width: 220px;
      }
    }
  }
}
</style>
