<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :label-width="labelWidth" :class="knowledgeFormClass">
      <Row :gutter="10">
        <Col span="24">
          <Button type="primary" size="small" @click="openModel('vendor')">新增知识库</Button>
          <Divider />
          <Card>
            <Input
              v-if="knowledge"
              v-model="knowledge.knowledgeMark"
              disabled
              type="textarea"
              placeholder="Enter something..."
            />
          </Card>
          <Divider />
          <!-- <List size="large" border>
            <CheckboxGroup v-model="knowledgeIdList" @on-change="chooseOne">
              <ListItem v-for="item in knowledgeList" :value="item" :key="item.id">
                <Input
                  v-model="item.knowledgeMark"
                  disabled
                  type="textarea"
                  placeholder="Enter something..."
                />

                <template slot="action">
                  <Checkbox :label="item.id">
                    <Button type="error" size="small" @click="deleteKnowledge(item)">删除</Button>
                  </Checkbox>
                </template>
              </ListItem>
            </CheckboxGroup>
          </List>-->
        </Col>
        <div class="card">
          <Col span="12" v-for="item in knowledgeList" :value="item" :key="item.id" class="card_in">
            <Card :bordered="true">
              <!-- <p slot="extra">
                <Icon  type="md-close-circle" />
              </p>-->
              <Input
                v-model="item.knowledgeMark"
                disabled
                type="textarea"
                :autosize="{minRows: $customs.flag ? 5 : 10,maxRows:  $customs.flag ? 5 : 10}"
                placeholder="Enter something..."
              />
              <div class="card_button">
                <Button
                  class="card_button_in"
                  type="primary"
                  v-if="item.id!=knowledge.id"
                  size="small"
                  @click="choose(item)"
                >选择</Button>
                <Button
                  class="card_button_in"
                  type="primary"
                  v-if="item.id==knowledge.id"
                  disabled
                  size="small"
                  @click="choose(item)"
                >选择</Button>

                <Button
                  class="card_button_in"
                  type="error"
                  size="small"
                  @click="deleteKnowledge(item)"
                >删除</Button>
              </div>
            </Card>
          </Col>
        </div>
      </Row>
      <Modal
        v-model="myModel.flag"
        :title="myModel.title"
        width="30"
        :mask-closable="false"
        @on-cancel="closeModel"
        @on-ok="confirmModel(myModel.type)"
      >
        <Input
          type="textarea"
          v-model="myModel.message"
          placeholder="请输入知识库内容"
          maxlength="1000"
          show-word-limit
          :autosize="{minRows: 5,maxRows: 5}"
        ></Input>
      </Modal>
      <Divider />
      <Row class="buttonDiv">
        <Button :loading="loading" @click="reset(action)" type="primary">清&nbsp;&nbsp;空</Button>
        <Button :loading="loading" @click="submitForm(action)" type="primary">确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component
export default class knowledge extends Vue {
  model: any;
  @Prop(String) private action!: string;
  @Prop() private tableInfo!: any;
  @Prop() private tableVm!: any;

  single: any = "";
  loading: boolean = false;
  showDialog: boolean = true;
  labelWidth: number = 120;
  rules: any = {};
  knowledgeList: Array<any> = [];
  knowledgeIdList: Array<any> = [];
  knowledge: any = {};
  knowledgeFormClass: any = ""
  choosenKnowledgeId: String = "";
  myModel: any = { flag: false, message: "", title: "", type: "" };

  created() {
    // this.getData();
    this.knowledgeFormClass = (this.$globalFun() as any).getMethod('knowledgeFormClass', this.knowledgeFormClass)
  }

  chooseOne(ids: Array<any>) {
    console.log("ids before", this.knowledgeIdList);
    this.knowledgeIdList = this.knowledgeIdList.filter(id => id);
    ids = ids.filter(id => id);

    if (this.knowledgeIdList.length > 1) {
      let lastChooenId = this.knowledgeIdList[0];
      let chooseId = ids.filter(id => id != lastChooenId);
      this.knowledgeIdList = [];
      this.knowledgeIdList[0] = chooseId[0];
    } else if (this.knowledgeIdList.length > 0) {
      if (ids.length > 0) {
        this.knowledgeIdList[0] = ids[0];
      } else {
        this.knowledgeIdList = [];
      }
    }
  }

  choose(item: any) {
    this.choosenKnowledgeId = item.id;
    this.knowledge = item;

  }

  getData() {
    this.knowledgeIdList = [];
    this.getApiData(
      "post",
      this.$msPrefix.automation +
        "/api/v1/data/list/knowledgeEntity?page=0&size=9999",
      {},
      res => {
        if (res.rtnCode == 0) {
          this.knowledgeList = res.data.content;

          this.knowledgeIdList = [];
          console.log(this.model);
          if (this.model && this.model.knowledge) {
            this.knowledgeIdList[0] = this.model.knowledge.id;
            this.choosenKnowledgeId = this.model.knowledge.id;
            this.knowledge = this.model.knowledge;
          }
          console.log(this.knowledgeIdList);
          //   this.knowledgeList.forEach(item => {
          //       console.log(knowledge,item);
          //   });
        }
      },
      err => {}
    );
  }

  save() {
    this.cancel();
  }
  deleteKnowledge(item) {
    this.$Modal.confirm({
      title: "提示",
      content: "此操作将永久删除, 是否继续?",
      okText: "确定",
      cancelText: "取消",
      onOk: () => {
        this.getApiData(
          "delete",
          this.$msPrefix.automation +
            "/api/v1/data/delete/knowledgeEntity/" +
            item.id,
          {},
          res => {
            if (res.rtnCode == 0) {
              this.getData();
              this.$tools.message("success", "删除成功！");
            }
          },
          err => {
            this.$Message.error("删除失败！");
          }
        );
      },
      onCancel: () => {
        this.$Message.info("已取消删除");
      }
    });
  }

// 清空所选知识
  reset(action){
    // console.log("qingkong")
     this.choosenKnowledgeId = "";
     this.knowledge={};
    if (this.model) {
      // if (this.knowledgeIdList.length > 0) {
      //   let choosenId = this.knowledgeIdList[0];
      //   if (choosenId) {
      //     let choosenKnowledge = this.knowledgeList.filter(
      //       item => item.id == choosenId
      //     );
      //     this.model.knowledge = choosenKnowledge[0];
      //   }
      // } else {
      //   this.model.knowledge = null;
      // }
      this.model.knowledge = Object.keys(this.knowledge).length!=0 ? this.knowledge : null;

      this.getApiData(
        "post",
        this.$msPrefix.automation + "/api/v1/data/save/bareMachineTaskEntity",
        this.model,
        res => {
          this.loading = !1;
          if (res.rtnCode == 0) {
            // this.getData();
            this.$tools.message("success", "保存成功！");
          }
        },
        err => {
          this.loading = !1;
        }
      );
    } else {
      this.$tools.message("success", "保存成功！");
    }

  }
  /*提交*/
  submitForm(action) {
    console.log(action, this.model);
    // this.save();

    if (this.model) {
      // if (this.knowledgeIdList.length > 0) {
      //   let choosenId = this.knowledgeIdList[0];
      //   if (choosenId) {
      //     let choosenKnowledge = this.knowledgeList.filter(
      //       item => item.id == choosenId
      //     );
      //     this.model.knowledge = choosenKnowledge[0];
      //   }
      // } else {
      //   this.model.knowledge = null;
      // }
      // this.model.knowledge = this.knowledge ? this.knowledge : null;
      this.model.knowledge = Object.keys(this.knowledge).length!=0 ? this.knowledge : null;

      this.getApiData(
        "post",
        this.$msPrefix.automation + "/api/v1/data/save/bareMachineTaskEntity",
        this.model,
        res => {
          this.loading = !1;
          if (res.rtnCode == 0) {
            // this.getData();
            this.cancel();
            this.$tools.message("success", "保存成功！");
          }
        },
        err => {
          this.loading = !1;
        }
      );
    } else {
      this.$tools.message("success", "保存成功！");
      this.cancel();
    }
  }

  openModel(type) {
    this.myModel.type = type;
    this.myModel.title = "知识库";
    this.myModel.flag = true;
  }
  closeModel() {
    this.myModel.flag = !1;
    this.myModel.message = "";
    this.myModel.title = "";
    this.myModel.type = "";
  }
  confirmModel(type) {
    if (this.myModel.message) {
      //   this[type + "List"].push(this.myModel.message);
      //   this.model[type] = this.myModel.message;
      let newKnowledge = { knowledgeMark: this.myModel.message };
      this.getApiData(
        "post",
        this.$msPrefix.automation + "/api/v1/data/save/knowledgeEntity",
        newKnowledge,
        res => {
          if (res.rtnCode == 0) {
            this.$tools.message("success", "新增知识库成功");
          }
          this.myModel.message = "";
          this.myModel.title = "";
          this.myModel.type = "";
          this.myModel.flag = !1;
          this.getData();
        },
        err => {
          this.loading = !1;
          this.myModel.message = "";
          this.myModel.title = "";
          this.myModel.type = "";
          this.myModel.flag = !1;
        }
      );
    } else {
      this.myModel.flag = 1;
      this.$tools.message("error", "请输入知识库内容");
    }
  }

  @Emit("closeModal") close() {}
  cancel() {
    this.close();
    this.choosenKnowledgeId = "";
    this.knowledge = {};
    console.log("返回", this.$refs["knowledge"] as any);
    // (this.$refs.parent as any).resetFields();
    console.log(this.$parent.$parent as any);
    (this.$parent.$parent as any).searchTable();
    // (this.$parent.$parent as any).getData();
  }

  get disabled() {
    return this.action == "knowledge";
  }
}
</script>

<style scoped lang='scss'>
.card {
  overflow-x: auto;
  /* height: 500px; */
  width: 100%;
  display: flex;
  overflow-y: hidden;
  .card_input {
    height: 500px;
  }

  .card_in {
    width: 300px;
    /* height: 500px; */
  }
  .card_button {
    text-align: center;
    .card_button_in {
      margin: 10px;
    }
  }
}

.ivu-card-extra {
  position: absolute;
  right: 1px;
  top: 1px;
}

</style>

