<template>
  <div class="data-search">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="模块名称:">
        <el-input
          v-model="queryForm.name"
          placeholder="请选择模块名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属分类:">
        <el-select
          v-model="queryForm.category_id"
          clearable
          class="m-2"
          placeholder="请选择分类"
          size="large"
        >
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模块状态:">
        <el-select
          v-model="queryForm.status"
          class="m-2"
          placeholder="请选择模板块态"
          size="large"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">
          <svg-icon icon-class="search" /> 搜索</el-button
        >
        <el-button type="success" @click="onCreate">
          <svg-icon icon-class="edit" /> 创建模块</el-button
        >
      </el-form-item>
    </el-form>
    <el-dialog
      :visible.sync="dialogVisible"
      append-to-body
      v-el-drag-dialog
      :close-on-click-modal="false"
      width="30%"
      custom-class="prod-verify"
      title="创建模块"
    >
      <el-form
        :model="moduleForm"
        :rules="moduleRules"
        ref="moduleRef"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="模块名称:" prop="name">
          <el-input
            style="width: 220px"
            v-model="moduleForm.name"
            placeholder="请选择模块名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类:" prop="category_id">
          <el-cascader
            v-model="moduleForm.category_id"
            clearable
            :options="categoryList"
            :props="props"
            :show-all-levels="false"
            @change="onChangeCategory"
            placeholder="请选择模块分类"
          />
          <!-- <el-select
            v-model="moduleForm.category_id"
            clearable
            class="m-2"
            placeholder="请选择分类"
            size="large"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select> -->
        </el-form-item>
        <el-form-item label="模块状态:" prop="status">
          <el-select
            v-model="moduleForm.status"
            class="m-2"
            placeholder="请选择模板块态"
            size="large"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeModule">取 消</el-button>
        <el-button type="primary" @click="submitModule">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dataInfo from "./dataInfo.vue";
import elDragDialog from "@/directive/el-drag-dialog";
import {
  searchTemplateCategory,
  createTemplate,
  getAllList,
  treeCategory
} from "@/api/template";
export default {
  components: {
    dataInfo,
  },
  directives: { elDragDialog },
  props: {
    queryForm: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 10,
          name: "",
          category_id: "",
          status: "",
        };
      },
    },
  },
  data() {
    return {
      statusOptions: [
        {
          value: "",
          label: "请选择状态",
        },
        {
          value: 5,
          label: "启用",
        },
        {
          value: 6,
          label: "停用",
        },
      ],
      categoryList: [],
      dialogVisible: false,
      moduleForm: {
        name: "",
        status: 5,
        category_id: "",
      },
      props: {
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true,
      },
      moduleRules: {
        name: [{ required: true, message: "请输模块名称", trigger: "blur" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        category_id: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.initCategoryList();
  },
  methods: {
    onChangeCategory(){},
    /* 取消新增 */
    closeModule() {
      this.dialogVisible = false;
      this.moduleForm = {
        name: "",
        status: 5,
        category_id: "",
      };
    },
    /* 确定新增模块*/
    submitModule() {
      this.$refs.moduleRef.validate((valid) => {
        if (valid) {
          this.moduleForm.category_id = this.moduleForm.category_id[this.moduleForm.category_id.length - 1];
          createTemplate(this.moduleForm).then((res) => {
            if (res.status !== 200) return;
            this.$message.success("创建成功！");
            this.dialogVisible = false;
            this.moduleForm = {
              name: "",
              status: 5,
              category_id: "",
            };
            this.onSubmit();
          });
        }
      });
    },
    /* 获取分类 */
    async initCategoryList() {
      let _this = this;
      let res = await treeCategory();
      this.categoryList = res.data; //this.processDataForCascader(res.data);
    },
    /*    initCategory() {
      let _this = this;
      searchTemplateCategory({ page: 1, pageSize: 999, status: 5 }).then(
        (res) => {
          if (res.status != 200) return;
          _this.categoryList = res.data.dataList;
        }
      );
    }, */
    onCreate(e) {
      this.dialogVisible = true;
      /* let _this = this;
      var a = document.createElement("a");
      a.href = "#/document/create?type=module";
      a.target = "_blank";
      a.click(); */
    },

    //搜索
    onSubmit() {
      this.$emit("bindSetQuery", this.$props.queryForm);
    },
  },
};
</script>

<style lang="scss">
@import "./dataSearch.scss";
</style>
