？<template>
  <el-container class="row-bg">
    <el-header>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="6">
          <el-button
            type="primary"
            v-if="data && Object.keys(data).length === 0"
            icon="el-icon-circle-plus-outline"
            @click="addRootQuestion"
            >添加问题</el-button
          ><el-button icon="el-icon-delete" @click="clearQuestion"
            >清除问题</el-button
          ></el-col
        >
      </el-row>
    </el-header>
    <el-main>
      <vue2-org-tree
        v-if="data && Object.keys(data).length > 0"
        name="tree"
        :data="data"
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-class-name="labelClassName"
        :render-content="renderContent"
      />
    </el-main>
    <!-- 关联基本信息对话框 -->
    <el-dialog
      :title="baseInfoDialog.title"
      :visible.sync="baseInfoDialog.visible"
      width="60%"
      append-to-body
    >
      <el-row :gutter="20">
        <el-select
          v-model="baseInfoDialog.basicsinfoId"
          style="width: 70%"
          @change="baseInfoChange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in baseInfoList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>

        <el-button
          type="primary"
          icon="el-icon-view"
          style="margin-left: 20px"
          @click="handBaseInfoDetail()"
          >预览</el-button
        >
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="baseInfoConfirm">确 定</el-button>
        <el-button @click="baseInfoCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 关联申请条件对话框 -->
    <el-dialog
      :title="applyDialog.title"
      :visible.sync="applyDialog.visible"
      width="60%"
      append-to-body
    >
      <el-row :gutter="20">
        <el-select
          v-model="applyDialog.applyId"
          style="width: 80%"
          @change="applyChange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in applyList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>

        <el-button
          type="primary"
          icon="el-icon-view"
          style="margin-left: 20px"
          @click="handApplyDetail()"
          >预览</el-button
        >
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="applyConfirm">确 定</el-button>
        <el-button @click="applyCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 关联办理流程对话框 -->
    <el-dialog
      :title="flowDialog.title"
      :visible.sync="flowDialog.visible"
      width="60%"
      append-to-body
    >
      <el-row :gutter="20">
        <el-select
          v-model="flowDialog.flowlimitId"
          style="width: 80%"
          @change="flowChange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in flowList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>

        <el-button
          type="primary"
          icon="el-icon-view"
          style="margin-left: 20px"
          @click="handFlowDetail()"
          >预览</el-button
        >
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="flowConfirm">确 定</el-button>
        <el-button @click="flowCancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改题目对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="classifyDialog.visible"
      width="70%"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item
          v-if="data && Object.keys(data).length > 0"
          label="上一个答案选项"
          prop="preAnsOption"
        >
          <el-select
            v-model="form.entity.parentOptionId"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="dict in preAnsOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目名称" prop="questionTitle">
          <el-input
            v-model="form.entity.name"
            type="textarea"
            placeholder="请输入题目名称"
          />
        </el-form-item>
        <el-form-item label="选项类别" prop="type">
          <el-select v-model="form.entity.type" placeholder="请选择选项类型">
            <el-option
              v-for="(label, value) in dict.typeOptions"
              :key="value"
              :label="label"
              :value="value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.entity.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-divider></el-divider>
        <!--表单添加-->
        <div>
          <el-button size="mini" plain type="success" @click="addListRow()"
            >新增选项</el-button
          >
          <el-table
            :data="form.list"
            border
            style="margin-top: 10px"
            max-height="360"
          >
            <el-table-column label="选项内容" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'list.' + scope.$index + '.name'"
                  :rules="{
                    required: true,
                    message: '选项内容不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input
                    type="textarea"
                    v-model="scope.row.name"
                    placeholder="请输入选项内容"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="常规说明" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'list.' + scope.$index + '.summary'"
                >
                  <el-input
                    type="textarea"
                    v-model="scope.row.summary"
                    placeholder="请输入说明"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="材料关联" width="150" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'list.' + scope.$index + '.materia'"
                >
                  <el-col>
                    <el-link
                      :underline="false"
                      v-if="scope.row.isend === 1"
                      @click="handAddBaseInfo(scope.$index, scope.row)"
                      type="primary"
                      >基本信息关联</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="scope.row.isend === 1"
                      @click="handAddCondition(scope.$index, scope.row)"
                      type="primary"
                      >申请条件关联</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="scope.row.isend === 1"
                      @click="handAddFlow(scope.$index, scope.row)"
                      type="primary"
                      >办理流程关联</el-link
                    >
                    <el-link
                      :underline="false"
                      v-if="scope.row.isend === 1"
                      @click="handAddDatum(scope.$index, scope.row)"
                      type="primary"
                      >材料关联</el-link
                    >
                  </el-col>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <el-checkbox
                    :checked="scope.row.issend === 1"
                    @change="handChangeEnd(checked, scope.$index, scope.row)"
                    >是否终节点</el-checkbox
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handTableDelete(scope.$index, scope.row.optionId)"
                    >删除</el-button
                  >
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  created() {
    this.$post("/classify/add", {}).then((res) => {
      this.dict = Object.assign({}, this.dict, res.data.dict);
    });
    const { basicsId } = this.$route.query;
    //查询是否存在问题，如果没有 则显示创建根问题按钮 否则编辑
    if (!basicsId) return;
    this.basicsId = basicsId;

    this.getTreeList();
  },
  methods: {
    beforeRender(data) {
      return data;
    },

    addRootQuestion() {
      this.title = "添加问题";
      this.classifyDialog.visible = true;
    },

    clearQuestion() {
      this.$confirm("此操作将永久删除全部问题及选项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$post("/classify/removeQuestion", {
            basicsId: this.basicsId,
          }).then((res) => {
            this.data = {};

            this.$message({
              type: "success",
              message: "清除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    handChangeEnd(checked, index, val) {
      console.log("end",checked, index, val);

      if (val.isend === 0) {
        this.temp = val;
        this.temp.isend = 1;
      } else {
        this.temp = val;
        this.temp.isend = 0;
        val.isend = 0;
      }

      //val.isend=1;
    },
    //基本信息预览
    handBaseInfoDetail() {
      let id = this.form.entity.basicsinfoId;
      this.$router.push({
        path: "/basics/info/view",
        query: {
          id: id,
        },
      });
    },
    //新增基本信息
    handAddBaseInfo(index, val) {
      console.log("新增基本信息", index, val);
      //请求当前可选择的基本信息
      let query = {};
      query.basicsId = this.basicsId;
      this.$post("/basics/info/list", query).then((res) => {
        this.baseInfoList = res.data.result;
      });

      //获取当前事项的基本信息，如果有关联 否则
      if (val.basicsinfoId && val.basicsinfoId != 0) {
        //编辑
        this.baseInfoDialog.title = "编辑选择基本信息";
        this.baseInfoDialog.visible = true;
      } else {
        this.baseInfoDialog.visible = true;
      }
      this.baseInfoDialog.index = index;
    },

    baseInfoChange(val) {
      console.log("基本信息选项改变", val);
    },

    baseInfoConfirm(val) {
      console.info("基本信息选项确定", val, this.baseInfoDialog.basicsinfoId);
      this.form.list[this.baseInfoDialog.index].basicsinfoId =
        this.baseInfoDialog.basicsinfoId;

      this.baseInfoDialog.visible = false;
    },

    baseInfoCancel(val) {
      console.info("基本信息选项取消", val);

      this.baseInfoDialog.visible = false;
    },

    //申请条件预览
    handApplyDetail() {
      let id = this.form.entity.applyId;
      this.$router.push({
        path: "/accept/view",
        query: {
          id: id,
        },
      });
    },

    //新增申请条件
    handAddCondition(index, val) {
      console.log("新增申请条件", index, val);
      //请求当前可选择的基本信息
      let query = {};
      query.basicsId = this.basicsId;
      this.$post("/accept/list", query).then((res) => {
        this.applyList = res.data.result;
      });

      //获取当前事项的基本信息，如果有关联 否则
      if (val.applyId && val.applyId != 0) {
        //编辑
        this.applyDialog.title = "编辑选择申请条件";
        this.applyDialog.visible = true;
      } else {
        this.applyDialog.visible = true;
      }
      this.applyDialog.index = index;
    },
    applyChange(val) {
      console.log("申请条件选项改变", val);
    },

    applyConfirm(val) {
      console.info("申请条件选项确定", val);

      this.form.list[this.applyDialog.index].applyId =
        this.applyDialog.applyId;

      this.applyDialog.visible = false;
    },

    applyCancel(val) {
      console.info("申请条件选项取消", val);

      this.applyDialog.visible = false;
    },

    //添加流程预览
    handApplyDetail() {
      let id = this.form.entity.flowlimitId;
      this.$router.push({
        path: "/flowlimit/view",
        query: {
          id: id,
        },
      });
    },
    //添加流程
    handAddFlow(index, val) {
      console.log("添加办理流程", index, val);
      //请求当前可选择的基本信息
      let query = {};
      query.basicsId = this.basicsId;
      this.$post("/flowlimit/list", query).then((res) => {
        this.flowList = res.data.result;
      });

      //获取当前事项的基本信息，如果有关联 否则
      if (val.flowlimitId && val.flowlimitId != 0) {
        //编辑
        this.flowDialog.title = "编辑选择办理流程";
        this.flowDialog.visible = true;
      } else {
        this.flowDialog.visible = true;
      }
      this.flowDialog.index = index;
    },
    flowChange(val) {
      console.log("办理流程选项改变", val);
    },

    flowConfirm(val) {
      console.info("办理流程选项确定", val);
       this.form.list[this.flowDialog.index].flowlimitId =
        this.flowDialog.flowlimitId;

      this.flowDialog.visible = false;
    },

    flowCancel(val) {
      console.info("办理流程选项取消", val);

      this.flowDialog.visible = false;
    },

    //添加材料
    handAddDatum(index, val) {
      console.log("添加材料", index, val);
    },

    getTreeList() {
      this.$post("/classify/getListByBasicsId", {
        basicsId: this.basicsId,
      }).then((res) => {
        if (res.data) {
          this.data = res.data;
        }
      });
    },

    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
    },
    renderContent(h, data) {
      let listItems = [];
      if (data.question) {
        let span = 24 / data.question.length;
        for (let i = 0; i < data.question.length; i++) {
          let temp1 = "";

          if (i < data.question.length - 1) {
            //temp1=<p class='centerp'></p>;
            // temp1 = <el-col span='1'><el-divider direction='vertical'></el-divider>  </el-col>;
            //  listItems.push(temp1);
          }

          let temp = (
            <el-col span={span}>
              <p style="font-size:12px;white-space:pre-wrap;line-height:20px">
                {data.question[i].name}
              </p>
            </el-col>
          );
          listItems.push(temp);
        }
      }

      return (
        <div>
          {data.preQuestion && data.preQuestion != "" ? (
            <div>
              <span style="font-size:12px;">{data.preQuestion.name}</span>

              <el-link
                style="float: right;margin-right:5px;margin-left:5px;margin-top:10px;font-size:16px"
                icon="el-icon-edit"
                onClick={() => {
                  this.handleEdit(data);
                }}
              ></el-link>
              <span></span>
              <el-link
                style="float: right;margin-right:5px;margin-left:5px;margin-top:10px;font-size:16px"
                icon="el-icon-folder-add"
                onClick={() => {
                  this.handleAdd(data);
                }}
              ></el-link>

              <el-divider></el-divider>
            </div>
          ) : (
            <div>
              <el-link
                style="float: right;margin-right:5px;margin-left:5px;margin-top:10px;font-size:16px"
                icon="el-icon-edit"
                onClick={() => {
                  this.handleEdit(data);
                }}
              ></el-link>
              <span></span>
              <el-link
                style="float: right;margin-right:5px;margin-left:5px;margin-top:10px;font-size:16px"
                icon="el-icon-folder-add"
                onClick={() => {
                  this.handleAdd(data);
                }}
              ></el-link>

              <el-divider></el-divider>
            </div>
          )}

          <p style="font-size:12px;font-weight:bold;;white-space:pre-wrap;line-height:20px;">
            问题: {data.name}
          </p>

          <el-divider></el-divider>
          <el-row type="flex" justify="center">
            {listItems}
          </el-row>
        </div>
      );
      // return data.label;
    },

    handleEdit(data) {
      this.reset();
      this.$post("/classify/getQuestionById", { classifyId: data.id })
        .then((res) => {
          // console.log(res);
          this.title = "编辑问题";
          this.form.entity = Object.assign(
            {},
            this.form.entity,
            res.data.entity
          );
          this.form.type = this.form.type + "";
          this.form.list = res.data.list;

          this.preAnsOptions = [];
          this.preAnsOptions = res.data.preAnsOptions;
          this.classifyDialog.visible = true;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    handleAdd(data) {
      this.reset();
      this.$post("/classify/checkAddQuestion", { classifyId: data.id })
        .then((res) => {
          this.preAnsOptions = [];
          this.preAnsOptions = res.data.preAnsOptions;
          this.form.entity.parentId = data.id;
          this.classifyDialog.visible = true;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },

    onNodeClick(e, data) {
      //点击新增 需要有菜单选择新增 或者编辑当前节点

      //preAnsOptions

      this.$post("/classify/checkAddQuestion", { classifyId: data.id })
        .then((res) => {
          this.preAnsOptions = [];
          this.preAnsOptions = res.data.preAnsOptions;

          this.form.entity.parentId = data.id;

          this.classifyDialog.visible = true;

          //初始化问题树，由服务端组装
          //this.data = res.data;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });

      console.log(data);
      // alert(data.label);
    },
    //点击加号添加一行数据
    addListRow() {
      let option = Object.assign({}, this.classifyOption);

      this.form.list.push(option);
    },
    handTableDelete(index, optionId) {
      const taht = this;
      this.$confirm(
        '是否确认删除题目选项编号为"' + optionId + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          taht.form.options.splice(index, 1);
          // return delOptions(optionId);
        })
        .then(() => {
          // this.getList();
          this.msgSuccess("删除成功");
        });
    },
    addHeaderCellClassName({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        return "requiredclass";
      }
    },

    cancel() {
      this.classifyDialog.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        entity: {
          id: null,
          name: "",
          basicsId: 0,
          parentId: -1,
          parentOptionId: null,
          type: "1",
          ismust: 0,
          level: 0,
        },
        list: [],
      };
    },
    // 提交表单
    submitForm(ref) {
      this.form.entity.basicsId = this.basicsId;
      const el = this.$refs.form;
      el.validate((valid) => {
        if (!valid) return;
        this.$post("/classify/saveClassify", this.form)
          .then((res) => {
            console.log(res);
            this.getTreeList();
            this.$message.success("保存成功！");
            this.classifyDialog.visible = false;
            this.reset();
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      });
    },
  },

  data() {
    return {
      title: "新增问题",
      basicsId: null,
      temp: {},
      form: {
        entity: {
          id: null,
          name: "",
          basicsId: 0,
          parentId: -1,
          type: "1",
          ismust: "0",
          level: 0,
        },
        list: [],
      },

      classifyOption: {
        id: null,
        classifyId: 0,
        classifyNextId: 0,
        name: "",
        isend: 0,
        basicsinfoId: 0,
        acceptId: 0,
        flowlimitId: 0,
        matterId: 0,
        datumId: 0,
        summaryType: 1,
        summary: "",
      },

      classifyDialog: {
        visible: false,
      },
      baseInfoDialog: {
        visible: false,
        title: "新增基本信息",
        index: 0,
      },
      applyDialog: {
        visible: false,
        title: "新增申请条件",

      },
      flowDialog: {
        visible: false,
        title: "新增办理信息",
      },

      datumDialog: {
        visible: false,
      },

      baseInfoList: [],
      applyList: [],
      flowList: [],
      datumList: [],

      preAnsOptions: [],
      typeOptions: [
        { dictLabel: "单选", dictValue: "1" },
        { dictLabel: "多选", dictValue: "2" },
      ],
      dict: {},

      data: {},
      horizontal: false,
      collapsable: false,
      expandAll: true,
      labelClassName: "bg-white",
    };
  },
};
</script>

<style>
.requiredclass > div.cell::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-divider {
  background-color: #dcdfe6;
  position: relative;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 4px 0;
}

.org-tree-node-label .org-tree-node-label-inner {
  padding: 3px 5px;
  text-align: center;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 15%);
  /* box-shadow: 0 1px 5px rgb(0 0 0 / 15%); */
}

.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}

.centerp {
  float: left;

  width: 50px;

  border-right: 1px dashed black;

  padding-bottom: 1600px; /*关键*/

  margin-bottom: -1600px; /*关键*/
}

/* .box-card {
    width: 480px;
  } */
</style>

<style type="text/css">
.org-tree-node-label {
  white-space: pre-wrap;
}
</style>
