<template>
  <div class="assess-config">
    <div class="assess-header">
      <div class="query mg-b-8">
        <div class="query-items">
          <div class="query-item">
            <div class="lable">模型：</div>
            <div class="search-input">
              <el-input v-model="content"></el-input>
            </div>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn green mg-l-30" @click="onClickSearch">搜索</button>
          <button class="btn green mg-l-30" @click="onClickCreate">新增</button>
        </div>
      </div>
    </div>
    <div class="assess-bottom">
      <ComTable :data="tableData" height="85vh"></ComTable>
    </div>
    <div>
      <el-dialog
        title="新增模型"
        v-model="isvisiable"
        width="45%"
        top="15vh"
        custom-class="modal"
        :close-on-click-modal="false"
        :before-close="onClickDialogClose"
      >
        <popup-create
          :data="editform"
          :station="stations"
          @onClick="onClickComplete"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ComTable from "@/components/coms/table/table-unpage.vue";
import PopupCreate from "./compoenets/popupcreate.vue";

export default {
  components: { ComTable, PopupCreate },
  data() {
    const that = this;
    return {
      content: "",
      stations: [],
      editform: {},
      isvisiable: false,
      tableData: {
        column: [
          {
            name: "名称",
            field: "name",
            is_light: false,
          },
          {
            name: "时间",
            field: "createdate",
            is_light: false,
          },
          {
            name: "场站",
            field: "wpids",
            is_num: false,
            is_light: false,
          },
          {
            name: "是否启用",
            field: "isenable",
            is_num: false,
            is_light: false,
          },
          {
            name: "操作",
            is_num: false,
            is_light: false,
            width: 100,
            template: () => {
              return (
                "<el-button type='text' style='cursor: pointer;' value='edit'>编辑</el-button>&nbsp" +
                "<el-button type='text' style='cursor: pointer;' value='delete'>删除</el-button>&nbsp" +
                "<el-button type='text' style='cursor: pointer;' value='config'>配置</el-button>&nbsp"
              );
            },
            click(e, row) {
              that.onClickOption(e, row);
            },
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.requestList();
    this.requestStations();
  },
  methods: {
    // 新增按钮
    onClickCreate() {
      this.isvisiable = true;
    },
    // 搜索按钮
    onClickSearch() {
      this.requestList();
    },
    // 弹窗右上角关闭按钮
    onClickDialogClose() {
      this.isvisiable = false;
      this.editform = {};
    },
    // 操作按钮
    onClickOption(e, row) {
      let that = this;
      if ("delete" == e.target.getAttribute("value")) {
        that
          .$confirm("确认删除？")
          .then((_) => {
            that.requestDelete(row);
          })
          .catch((_) => {});
      }
      if ("edit" == e.target.getAttribute("value")) {
        that.isvisiable = true;
        that.editform = row;
      }
    },
    onClickComplete(value) {
      this.isvisiable = false;
      this.requestList();
    },
    // 获取模型数据列表
    requestList() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://10.155.32.4:8034/",
        subUrl: "/evaluation/modelMainList",
        data: {
          name: that.content,
        },
        success(res) {
          if (res.code == 200) that.tableData.data = res.data;
          for (var i in that.tableData.data) {
            that.tableData.data[i].createdate = new Date(
              res.data[i].createdate
            ).formatDate("yyyy-MM-dd");
            that.tableData.data[i].isenable =
              res.data[i].isenable == 1 ? "是" : "否";
          }
        },
      });
    },
    requestStations() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success(res) {
          let array = [];
          res.data.forEach((item) => {
            if (item.id.indexOf("FDC") !== -1) {
              array.push(item);
            }
          });
          that.stations = array;
        },
      });
    },
    // 删除
    requestDelete(row) {
      let that = this;
      that.API.requestData({
        method: "DELETE",
        baseURL: "http://10.155.32.4:8034/",
        subUrl: "/evaluation/delModelMain/" + row.id,
        success(res) {
          if (res.code == 200) that.requestList();
        },
      });
    },
  },
};
</script>

<style lang="less" scope>
.assess-config {
  display: flex;
  flex-direction: column;

  .el-select {
    width: 200px;
  }
  .el-input {
    width: 200px;
  }

  .mg-l-30 {
    margin-left: 30px;
  }

  .assess-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
}
</style>
