<template>
  <div class="from-clues">
    <div class="from-clues-header">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-form-item v-if="BASE_API.THEME=='jg'">
          <Breadcrumb />
        </el-form-item>
        <el-row class="mb-5">
          <el-col :span="4">
            <el-form-item label="业务号：" prop="ywh">
              <el-input v-model="form.ywh" class="width100" clearable placeholder="业务号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="业务名称" prop="ywmc">
              <el-input v-model.trim="form.rolesName" class="width100" clearable placeholder="业务名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始日期" prop="startTime">
              <el-date-picker type="date" class="width100" placeholder="开始日期" :picker-options="pickerOptionsStart"
                clearable v-model="form.startTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束日期" prop="endTime">
              <el-date-picker type="date" class="width100" placeholder="结束日期" :picker-options="pickerOptionsEnd" clearable
                v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <!-- 操作按钮 -->
          <el-col :span="4" class="btnColRight">
            <btn nativeType="cz" @click="resetForm">重置</btn>
            <btn nativeType="cx" @click="handleSearch">查询</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <lb-table :pagination="false" @size-change="handleSizeChange" :calcHeight="200"
        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="listdata"
        row-key="dictid">
      </lb-table>
    </div>
  </div>
</template>
<script>
  import {
    getUuid,
    judgeSort,
    realMove,
    findParents,
    removeTreeListItem,
  } from "@/utils/operation";
  import { getRolesById, getAuthorityListAction } from "@/api/authorityManage";
  import { getUserRoles } from "@/api/personnelManage";
  import data from "./data";
  import { getMenuInfo } from "@/api/user";
  import { api, getAction, deleteAction } from "@/api/manageApi";
  import tableMixin from "@/mixins/tableMixin.js";
  import EditDialog from "./edit-dialog.vue";
  import Roleslistdiglog from "./roleslistdiglog.vue";
  import { mapGetters } from "vuex";
  import { updateOrder } from "@/api/orders"
  export default {
    name: "menus",
    mixins: [tableMixin],
    components: {
      EditDialog,
      Roleslistdiglog,
    },
    data () {
      return {
        // 开始结束日期限制
        pickerOptionsStart: {
          disabledDate: (time) => {
            if (this.form.endTime) {
              return time.getTime() >= new Date(this.form.endTime).getTime()
            }
          }
        },
        // 结束日期限制
        pickerOptionsEnd: {
          disabledDate: (time) => {
            if (this.form.startTime) {
              return time.getTime() < new Date(this.form.startTime).getTime()
            }
          }
        },
        listdata: [],
        setlistdata: [],
        // 表单
        form: {
          ywh: '',
          ywmc: '',
          startTime: '',
          endTime: '',
          currentPage: 1
        },
        tableData: {
          columns: [
            {
              label: "序号",
              type: "index",
              width: "50",
              index: this.indexMethod,
            },
          ]
            .concat(data.columns())
            .concat({
              prop: "state",
              label: "状态",
              width: '120',
              render: (h, scope) => {
                return (
                  <div>
                    <span class='adopt' v-show={scope.row.state == 3}>上报失败</span>
                    <span class='adopt' v-show={scope.row.state == 2}>上报成功</span>
                    <span class='warehousing' v-show={scope.row.state == 1}>接入上报异常</span>
                  </div>
                )
              }
            })
            .concat([]),
        },
        data: [],
      }
    },
    created () {
      this.getTableData();
    },
    mounted () { },
    methods: {
      //查询
      searchQuery () {
        if (this.form.rolesName) {
          this.listdata = this.childrenFn(this.setlistdata, this.form.rolesName);
        } else {
          this.getTableData()
        }
      },
      childrenFn (arr, key) {
        let searchTree = [];
        arr.forEach((item, index) => {
          if (item.name.indexOf(key) != -1) {

            searchTree.push(item);
          }
        });
        if (searchTree != undefined && searchTree.length != 0) {
          return judgeSort(searchTree);
        }
      },
      // 获取角色列表
      getTableData () {
        getRolesById([1, 2])
          .then((res) => {
            this.listdata = res.content;
            this.listdata = judgeSort(this.listdata);
            this.setlistdata = res.content;
          })
          .catch((e) => console.error(e));
      },


    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  // @import "~@/styles/public.scss";

  /deep/.el-button.is-disabled.el-button--text {
    width: 64px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
  }
</style>