<template>
  <div class="oo-page">
    <div class="oo-server">
      <h3 class="page-name" v-show="$customs.flag">{{title}}</h3>
      <div class="table-search">
        <Form :model="model" :label-width="120" ref="searchForm">
          <Row :gutter="15">
            <i-col span="6">
              <FormItem label="服务器厂商:" prop="vendorLike">
                <!-- <Input v-model="model.commandLike" placeholder="请输入命令" clearable></Input> -->
                <Select v-model="model.vendorLike" clearable>
                  <Option v-for="item in vendorList" :value="item" :key="item">{{ item }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="服务器型号:" prop="modelLike">
                <Select v-model="model.modelLike" clearable>
                  <Option v-for="item in modelList" :value="item" :key="item">{{ item }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="操作系统:" prop="osLike">
                <Select v-model="model.osLike" clearable>
                  <Option v-for="item in osList" :value="item" :key="item">{{ item }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <!-- <i-col span="6">
              <FormItem label="运行OO流ID:" prop="oouuidLike">
                <Select v-model="model.oouuidLike" clearable>
                  <Option v-for="item in flowIdList" :value="item" :key="item">{{ item }}</Option>
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <br />
          <Row :gutter="15">
            <i-col span="6">
              <FormItem label="脚本服务器:" prop="scriptServerEntity">
                <Select v-model="model.scriptServerEntity" clearable>
                  <Option v-for="item in scriptServerIdList" :value="item.id" :key="item">{{ item.ip }}</Option>
                </Select>
              </FormItem>
            </i-col>
            <i-col span="6">
              <FormItem label="安装方式:" prop="typeLike">
                <Select v-model="model.typeLike" clearable>
                  <Option v-for="item in typeList" :value="item" :key="item">{{ item }}</Option>
                </Select>
              </FormItem>
            </i-col>-->
            <i-col span="6">
              <div class="table-search-btns">
                <Button type="primary" icon="ios-search" @click="searchTable">搜索</Button>
                <Button
                  type="primary"
                  icon="ios-refresh"
                  @click="resetSearch"
                  style="margin-left:10px"
                >重置</Button>
              </div>
            </i-col>
          </Row>
        </Form>
      </div>
      <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
        <template slot="form" scope="props">
          <model-form
            v-show="!$customs.flag"
            :model="props.obj"
            :action="props.action"
            :tableVm="props.tableVm"
            @closeModal="props.closeModal"
            :tableInfo="props.tableInfo"
            :vendorList="vendorList"
            :modelList="modelList"
            :osList="osList"
            :scriptServerIdList="scriptServerIdList"
            :flowIdList="flowIdList"
            :typeList="typeList"
            ref="form"
          ></model-form>
          <model-form-hisens
            v-show="$customs.flag"
            :model="props.obj"
            :action="props.action"
            :tableVm="props.tableVm"
            @closeModal="props.closeModal"
            :tableInfo="props.tableInfo"
            :vendorList="vendorList"
            :modelList="modelList"
            :osList="osList"
            :scriptServerIdList="scriptServerIdList"
            :flowIdList="flowIdList"
            :typeList="typeList"
            ref="form"
          ></model-form-hisens>
        </template>
      </cs-dynamic-table>
      <Modal
        v-model="modelFlag"
        title="服务器管理"
        width="80"
        :mask-closable="false"
        @on-cancel="closeModal"
      >
        <div slot="footer"></div>
      </Modal>
      <Modal
        v-model="roleFlag"
        title="分组权限管理"
        width="30"
        :mask-closable="false"
        @on-cancel="closeRole"
      >
        <div slot="footer"></div>
      </Modal>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ModelForm from "./configuration-form.vue";
import ModelFormHisens from "@/views/customs/hisense/configuration-form.vue";

@Component({
  components: {
    ModelForm,
    ModelFormHisens
  }
})
export default class Server extends Vue {
  private model: any = {
    vendorLike: [],
    modelLike: [],
    osLike: [],
    oouuidLike: [],
    scriptServerId: "",
    typeLike: []
  };
  private activeModel: any = {
    id: "",
    name: "",
    resSet: []
  };
  private roleModel: any = {
    id: "",
    name: "",
    resSet: [],
    roleIds: []
  };

  private assignRole: any = {
    name: "",
    roles: []
  };
  vendorList: Array<any> = [];
  modelList: Array<any> = [];
  osList: Array<any> = ["windows XP"];
  scriptServerIdList: Array<any> = [];
  flowIdList: Array<any> = [
    // { name: "6fb8954b-494b-4258-bc09-83142a0a6e03", id: "1" },
    // { name: "0f5ef8ac-60ca-4099-bab9-cf8666345dcb", id: "2" },
    // { name: "a580dbd9-5717-4698-ae31-a5caa446975f", id: "3" }
  ];
  typeList: Array<any> = ["pxe", "镜像"];

  allList: Array<any> = ["vendor", "model", "os", "type"];
  modelFlag: boolean = false;
  roleFlag: boolean = false;
  title: any = "";
  private csTable: any = {
    formWidth: this.$customs.flag ? 80 : 35,
    parentVm: this,
    dataSrc:
      this.$msPrefix.automation + "/api/v1/data/list/bareMachineConfigEntity",
    delSrc:
      this.$msPrefix.automation +
      "/api/v1/data/delete/bareMachineConfigEntity/",
    batchDelUri:
      this.$msPrefix.automation + "/api/v1/data/batch/bareMachineConfigEntity",
    dataProp: "data.content",
    postMethod: true,
    pageableProp: {
      pageSize: "data.size",
      total: "data.totalElements",
      currentPage: "data.number"
    },
    showIndex: true,
    successBack: this.getAllList,
    emptyModel: {
      vendor: "",
      model: "",
      os: "",
      flowId: "",
      type: "",
      script_server_id: "",
      scriptLocation: "",
      scriptName: "",
      createTime: ""
    },
    search: {
      show: false,
      prop: "",
      value: "",
      placeholder: "输入服务器厂商搜索"
    },
    columns: [
      {
        type: "selection",
        width: 60,
        align: "center"
      },
      {
        key: "vendor",
        title: "厂商",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "model",
        title: "型号",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "os",
        title: "操作系统",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "ip",
        title: "脚本服务器",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom",
        render: (h, params) => {
          let value = params.row.scriptServerEntity
            ? params.row.scriptServerEntity.ip
            : "";
          return h("span", value);
        }
      },
      // {
      //   key: "scriptLocation",
      //   title: "脚本位置",
      //   align: "center",
      //   ellipsis: true,
      //   tooltip: true,
      //   sortable:'custom'
      // },
      {
        key: "type",
        title: "安装方式",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "createTime",
        title: "时间标签",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "action",
        title: "操作",
        minWidth: 200,
        align: "center",
        render: (h, params) => {
          let menus = [
            {
              icon: "ios-eye",
              action: "detail",
              label: "查看",
              type: "primary"
            },
            {
              icon: "ios-create-outline",
              action: "update",
              label: "编辑",
              type: "primary"
            },
            {
              icon: "md-trash",
              action: "delete",
              label: "删除",
              type: "error"
            }
          ];
          let clickEvent = this.clickEvent;
          return h("div", [
            h("CsButton", {
              props: {
                actions: menus,
                click: clickEvent,
                data: params.row,
                size: "small",
                styleCss: "marginRight:5px",
                disabled: params.row._disabled
              }
            })
          ]);
        }
      }
    ]
  };

  addToGroup() {}

  sync(item) {
    item.loading = true;
    this.getApiData(
      "get",
      this.$msPrefix.automation + "/api/v1/res/server/sync",
      {},
      res => {
        item.loading = false;
        this.$tools.message("success", "同步成功");
      },
      err => {}
    );
  }

  clickEvent(name: string, obj: any) {
    if (name == "delete") {
      (this.$refs.child as any).handleDelete(obj.id);
    } else {
      (this.$refs.child as any).formInfo.title =
        name == "update" ? "编辑" : "详情";
      (this.$refs.child as any).formInfo.action =
        name == "update" ? "update" : "detail";
      (this.$refs.child as any).formInfo.model = _.cloneDeep(obj);
      if ((this.$refs.child as any).formInfo.model.scriptServerEntity) {
        (this.$refs.child as any).formInfo.model.scriptServerId = (this.$refs
          .child as any).formInfo.model.scriptServerEntity.id;
      }
      console.log("test", (this.$refs.child as any).formInfo.model);
      (this.$refs.child as any).dialogVisible = true;
      (this.$globalFun() as any).getMethod('show')
    }
  }

  getPostData() {
    var data = _.cloneDeep(this.model);
    if (data.scriptServerEntity) {
      data = JSON.parse(
        JSON.stringify(data).replace(
          /scriptServerEntity/g,
          "scriptServerEntity.id"
        )
      );
    }
    var postData = {};
    this.filterData(postData, data);
    this.csTable.postData = postData;
  }
  filterData(postData, data) {
    var keys = Object.keys(data);
    keys.forEach(item => {
      if ([0, false].includes(data[item]) || (data[item] && data[item])) {
        postData[item] = ["" + data[item]];
      }
    });
  }

  searchTable() {
    this.getPostData();
    console.error(this.csTable.postData);
    (this.$refs.child as any).getData();
  }
  resetSearch() {
    (this.$refs.searchForm as any).resetFields();
  }
  closeRole() {
    this.roleFlag = !1;
  }
  closeModal() {
    this.modelFlag = !1;
  }
  camel(str, firstUpper) {
    let ret = str.toLowerCase();
    ret = ret.replace(/_([\w+])/g, function(all, letter) {
      return letter.toUpperCase();
    });
    if (firstUpper) {
      ret = ret.replace(/\b(\w)(\w*)/g, function($0, $1, $2) {
        return $1.toUpperCase() + $2;
      });
    }
    return ret.charAt(0).toLowerCase() + ret.slice(1);
  }
  getAllList() {
    this.getApiData(
      "post",
      this.$msPrefix.automation + "/api/v1/data/list/scriptServerEntity",
      {},
      res => {
        if (res.rtnCode == 0) {
          console.error("res.data.content-----", res.data.content);
          this.scriptServerIdList = res.data.content;
        }
      }
    );

    this.allList.forEach(element => {
      this.getApiData(
        "get",
        this.$msPrefix.automation +
          "/api/v1/res/bareMachineConfig/findListByKey?type=" +
          element,
        {},
        res => {
          let list = this.camel(element, true) + "List";
          if (!["flowIdList", "typeList"].includes(list)) {
            if (res.data.length > 0) {
              this[list] = res.data;
            }
          }
        }
      );
    });
  }

  getFlowList() {
    this.getApiData(
      "get",
      this.$msPrefix.automation +
        "/api/v1/res/bareMachineConfig/getDeployFlows",
      {},
      res => {
        if (res.rtnCode == 0) {
          this.flowIdList = res.data;
        }
      }
    );
  }

  mounted() {
    // this.getAllList();
    this.getFlowList();
    this.title = (this.$globalFun() as any).getMethod('title')
  }
}
</script>


