<template>
  <div>
    <el-card class="el-card">
      <el-form :model="filterQuery" class="query-form" size="mini" label-width="100px" v-show="showSearch">
        <el-row>
          <el-col :span="8">
            <el-form-item class="query-form-item" label="接口分类名称:">
              <el-input v-model="filterQuery.name" placeholder="接口分类名称"
                        style="width: 90%"
                        clearable="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item class="query-form-item" label="创建时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="actDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 90%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item class="query-form-item" label="更新时间:">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="auditDateRange"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 90%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <div class="top-right-btn">
        <el-button-group>
          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询
          </el-button
          >
          <el-button type="primary" icon="el-icon-plus" @click="add(null,'add')"
          >新增接口分类
          </el-button
          >
        </el-button-group>
      </div>
      <el-divider style="margin: 15px"></el-divider>
      <el-table v-loading="loading" :data="list" style="width: 100%" highlight-current-row
                border
                @current-change="handleSelectionChange">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="接口分类名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="备注" prop="remark" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="printOrder(scope.row,'add')"
            >新增接口
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.stop="reviewOrder(scope.row,'edit')"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native.stop="rollback(scope.row)"
            >删除
            </el-button
            >

          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :limit.sync="filterQuery.limit"
        :page.sync="filterQuery.page"
        @pagination="getList"
      ></pagination>
    </el-card>

    <el-tabs type="border-card" style="margin: 15px">
      <!--单据业务详情-->
      <el-tab-pane>
        <span slot="label"> {{ currentRow == null ? '' : currentRow.name }}</span>
        <el-form :inline="true" :model="bizQuery" class="query-form" size="mini">
          <el-form-item class="query-form-item" label="接口名称:">
            <el-input
              v-model="bizQuery.name"
              placeholder="请输入接口名称"
              clearable
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="onBizReset"
              >重置
              </el-button>
              <el-button type="primary" @click="onBizSubmit"
                         icon="el-icon-search"
              >查询
              </el-button>
            </el-button-group>
          </el-form-item>
        </el-form>

        <el-table v-loading="bizDetailLoading" :data="bizDetailList" style="width: 100%" border
                  row-key="id"
        >
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            label="接口名称"
            prop="name"

            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="接口地址"

            prop="path"
          ></el-table-column>
          <el-table-column
            label="权限标识"

            prop="perms"
          ></el-table-column>
          <el-table-column
            label="接口文档"
            prop="docUrl"

          >
            <template slot-scope="scope">
              <el-link v-if="scope.row.docUrl != '' && scope.row.docUrl != null" type="primary" :href="scope.row.docUrl"
                       target="_blank">文档链接
              </el-link>
            </template>
          </el-table-column>

          <el-table-column
            label="创建时间"
            prop="createTime"

          ></el-table-column>

          <el-table-column
            label="更新时间"
            prop="updateTime"

          ></el-table-column>
          <el-table-column
            label="备注"
            prop="remark"

          ></el-table-column>


          <el-table-column label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.stop="upload(scope.row,'edit')"
              >编辑
              </el-button
              >

              <el-button
                type="text"
                size="small"
                @click.native.stop="rollback(scope.row,1)"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="bizTotal>0"
          :total="bizTotal"
          :page.sync="bizQuery.page"
          :limit.sync="bizQuery.limit"
          @pagination="getBizDetailList"
        />
      </el-tab-pane>

    </el-tabs>
    <el-dialog
      :title="formMap[formName]"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="subFormVisible"
      :before-close="hideForm"
      width="60%"
      top="5vh"
    >
      <el-form
        :model="subData"
        ref="dataForm"
        :rules="formRules"
        label-width="130px"
      >
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="接口名称" prop="name" class="query-form-item">
              <el-input
                v-model="subData.name"
                style="width: 80%"
                auto-complete="off"
                placeholder="请输入接口分类名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el-col">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker clearable size="small"
                              v-model="subData.createTime"
                              type="datetime"
                              style="width: 80%"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择创建时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item
              label="备注"
              prop="remark"
              class="query-form-item"
            >
              <el-input
                v-model="subData.remark"
                style="width: 80%"
                placeholder="请输入接口备注"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="hideForm">取消</el-button>
        <el-button type="primary" @click.native="forInvSubmit()"
        >提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="formMap[formName]"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="subFormVisible1"
      :before-close="hideForm1"
      width="60%"
      top="5vh"
    >
      <el-form
        :model="subData"
        ref="dataForm"
        :rules="formRules"
        label-width="130px"
      >
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="接口名称" prop="name" class="query-form-item">
              <el-input
                v-model="subData.name"
                style="width: 80%"
                auto-complete="off"
                placeholder="请输入接口名称"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" class="el-col">
            <el-form-item label="权限标识" prop="perms">
              <el-input
                v-model="subData.perms"
                style="width: 80%"
                placeholder="请输入权限标识"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item
              label="接口地址"
              prop="path"
              class="query-form-item"
            >
              <el-input
                v-model="subData.path"
                style="width: 80%"
                placeholder="请输入接口地址"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el-col">
            <el-form-item
              label="接口文档"
              prop="docUrl"
              class="query-form-item"
            >
              <el-input
                v-model="subData.docUrl"
                style="width: 80%"
                placeholder="请输入接口文档"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el-row" type="flex">
          <el-col :span="12" class="el-col">
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker clearable size="small"
                              v-model="subData.createTime"
                              type="datetime"
                              style="width: 80%"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择创建时间">
              </el-date-picker>
            </el-form-item>

          </el-col>

          <el-col :span="12" class="el-col">
            <el-form-item
              label="备注"
              prop="remark"
              class="query-form-item"
            >
              <el-input
                v-model="subData.remark"
                style="width: 80%"
                placeholder="请输入接口备注"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="hideForm1">取消</el-button>
        <el-button type="primary" @click.native="forInvSubmit1()"
        >提交
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {getSortList, insertLicense, deleteLicense, updateLicense} from "@/api/system/sysicense";


const formJson = {
  site_id: "",
  site_name: "",
  describe: "",
  ads: [],
};

export default {
  name: "IoSupSearchOrder",
  data() {
    return {
      check: {},
      subData: {},
      formName: null,
      subFormVisible: false,
      subFormVisible1: false,
      showSearch: true,
      currentRow: null,
      filterQuery: {
        name: "",
        page: 1,
        limit: 10,
        startTime: null,
        endTime: null,
        startAduditTime: null,
        endAduditTime: null,

      },
      invList: [],
      deptList: [],
      list: [],
      total: 0,
      loading: false,
      index: null,
      enableDept: false,
      deleteData: {
        id: "",
        status: 10,
      },
      dialogTableVisible: false,
      formLoading: false,
      dialogVisible: false,
      formData: formJson,
      deleteLoading: false,
      busTypes: [],
      currentRow: {},
      actDateRange: [],
      auditDateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      bizQuery: {
        parentId: null,
        name: null,
        page: 1,
        limit: 10
      },
      bizTotal: 0,
      bizDetailLoading: false,
      bizDetailList: [],
      codeQuery: {
        orderIdFk: null,
        page: 1,
        limit: 10
      },
      codeTotal: 0,
      codeDetailLoading: false,
      codeDetailList: [],
      resultQuery: {
        orderId: null,
        code: null,
        page: 1,
        limit: 10
      },
      formMap: {
        add: "新增",
        edit: "编辑",
      },
      resultTotal: 0,
      resultDetailLoading: false,
      resultDetailList: [],
      acceptQuery: null,
      acceptOrderVisible: false,
    };
  },
  components: {},
  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        name: "",
        page: 1,
        limit: 10,
        startTime: null,
        endTime: null,
        startAduditTime: null,
        endAduditTime: null,
        parentId: 0,

      };
      this.actDateRange = [];
      this.auditDateRange = [];
      this.getList();
    },

    onBizReset() {
      this.bizQuery = {
        parentId: this.bizQuery.parentId,
        name: null,
        page: 1,
        limit: 10
      };
      this.getlower();

    },

    onBizSubmit() {
      this.bizQuery.page = 1;
      this.getlower();
    },


    hideSearch() {
      this.showSearch = !this.showSearch;
    },
    onSubmit() {
      this.loading = true;
      if (this.actDateRange !== null) {
        this.filterQuery.startTime = this.actDateRange[0];
        this.filterQuery.endTime = this.actDateRange[1];
      } else {
        this.filterQuery.startTime = null;
        this.filterQuery.endTime = null;
      }

      if (this.auditDateRange !== null) {
        this.filterQuery.startAduditTime = this.auditDateRange[0];
        this.filterQuery.endAduditTime = this.auditDateRange[1];
      } else {
        this.filterQuery.startAduditTime = null;
        this.filterQuery.endAduditTime = null;
      }
      this.filterQuery.page = 1;
      this.getList();
    },
    //获取订单列表
    getList() {
      this.loading = true;
      this.filterQuery.parentId = 0;
      getSortList(this.filterQuery)
        .then((response) => {
          this.loading = false;
          if (response.code === 20000) {
            this.list = response.data.list || [];
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message);
          }
        })
        .catch((error) => {
          this.$message.error(error.message)
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    handleSelectionChange(val) {
      this.bizQuery.page = 1;
      this.bizQuery.parentId = val.id;
      this.currentRow = val;
      this.getlower();
    },

    getlower() {
      this.bizDetailLoading = true;
      getSortList(this.bizQuery).then((res) => {
        this.bizDetailLoading = false;
        if (res.code == 20000) {
          this.bizDetailList = res.data.list || [];
          this.bizTotal = res.data.total || 0;
        } else {
          this.$message.error(res.message);
          this.bizDetailList = [];
          this.bizTotal = 0;
        }
      }).catch((error) => {
        this.bizDetailLoading = false;
        this.$message.error(error.message);
        this.bizDetailList = [];
        this.bizTotal = 0;

      })

    },
    rollback(row, val) {
      this.$confirm("此操作将删除该接口信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let param = {
          parentId: row.parentId,
          id: row.id
        }
        deleteLicense(param).then((res) => {
          if (res.code == 20000) {
            this.$message.success("删除成功!");
            if (val == 1) {
              this.getlower();
            }
            this.getList();
          } else {
            this.$message.error(res.message);
          }

        })

      }).catch(() => {

      })


    },


    upload(row, formName) {
      this.formName = formName;
      this.check = row;
      this.subData = row;
      this.subFormVisible1 = true;
    },
    reviewOrder(row, formName) {
      this.formName = formName;
      this.check = row;
      this.subData = row;
      this.subFormVisible = true;

    },

    printOrder(row, formName) {
      this.formName = formName;
      this.check = row;
      this.subData = {};
      this.subFormVisible1 = true;
    },

    add(data, formName) {
      this.formName = formName;
      this.subData = {};
      this.check = data;
      this.subFormVisible = true;
    },
    hideForm() {
      this.subFormVisible = false;
    },
    hideForm1() {
      this.subFormVisible1 = false;
    },
    forInvSubmit1() {
      if (this.formName === "add" && this.check == null) {
        //新增接口分类
        this.subData.parentId = 0;
        insertLicense(this.subData)
          .then((res) => {
            if (res.code == 20000) {
              this.$message.success("添加成功!")
              this.subFormVisible1 = false;
              this.getList();
            }
          })
      } else if (this.formName === "add" && this.check != null) {
        //新增子接口
        this.subData.parentId = this.check.id;
        insertLicense(this.subData)
          .then((res) => {
            if (res.code == 20000) {
              this.$message.success("添加成功!")
              this.subFormVisible1 = false;
              this.getList();
            }
          })
      } else if (this.formName === "edit" && this.check.parentId == 0) {
        //编辑接口分类
        updateLicense(this.subData).then((res) => {
          if (res.code == 20000) {
            this.$message.success("修改成功!")
            this.subFormVisible1 = false;
            this.getList();
          }
        })
      } else {
        updateLicense(this.subData).then((res) => {
          if (res.code == 20000) {
            this.$message.success("修改成功!")
            this.subFormVisible1 = false;
            this.getlower();
          }

        })

      }


    },
    forInvSubmit() {
      if (this.formName === "add" && this.check == null) {
        //新增接口分类
        this.subData.parentId = 0;
        insertLicense(this.subData)
          .then((res) => {
            if (res.code == 20000) {
              this.$message.success("添加成功!")
              this.subFormVisible = false;
              this.getList();
            }
          })
      } else if (this.formName === "add" && this.check != null) {
        //新增子接口
        this.subData.parentId = this.check.id;
        insertLicense(this.subData)
          .then((res) => {
            if (res.code == 20000) {
              this.$message.success("添加成功!")
              this.subFormVisible = false;
              this.getList();
            }
          })
      } else if (this.formName === "edit" && this.check.parentId == 0) {
        //编辑接口分类
        updateLicense(this.subData).then((res) => {
          if (res.code == 20000) {
            this.$message.success("修改成功!")
            this.subFormVisible = false;
            this.getList();
          }
        })
      } else {
        updateLicense(this.subData).then((res) => {
          if (res.code == 20000) {
            this.$message.success("修改成功!")
            this.subFormVisible = false;
            this.getlower();
          }

        })

      }


    },


  },
  filters: {},
  mounted() {

  },
  created() {
    this.getList();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>
