<template>
  <div class="app-container">
    <div class="filter-container">
      <div style="display: inline-block;margin-right: 5px">当前上班人员:<span style="font-weight: bold;font-size: 16px;color: #F56C6C"> {{ name }}</span>({{ loginName }})</div>
      <el-input size="mini"  v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button size="mini" class="filter-item" type="primary" @click="checkProcessList">
        选择工序
      </el-button>
      <el-button size="mini" class="filter-item" icon="el-icon-refresh" type="primary" @click="tableRefresh">
        刷新
      </el-button>
    </div>
    <div style="height: 400px">
      <el-table
        :height="heightTable"
        size="mini"
        :data="tableData"
        class="elTble"
        v-loading="listLoading"
        @row-contextmenu="rowContextmenu"
        v-el-table-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
        ref="multipleTable"
        tooltip-effect="dark"
        row-key="id"
        style=""
        border
        default-expand-all>
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column label="操作" align="left" width="110px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button v-if="row.workProcess.feedBackContent==0" :disabled="row.pauseStatus==1" @click="handleBackRecord(row)" type="success" size="mini">
              反馈完成
            </el-button>
            <el-button v-if="row.workProcess.feedBackContent==1 && row.taskStatus==0" :disabled="row.pauseStatus==1" @click="handleBackRecordStart(row)" type="primary" size="mini">
              反馈开始
            </el-button>
            <el-button v-if="row.workProcess.feedBackContent==1 && row.taskStatus>0" :disabled="row.pauseStatus==1" @click="handleBackRecord(row)" type="success" size="mini">
              反馈完成
            </el-button>
            <el-button v-if="row.workProcess.feedBackContent==2 && row.taskStatus==0" :disabled="row.pauseStatus==1" @click="handleBackRecordStart(row)" type="primary" size="mini">
              反馈开始
            </el-button>
            <el-button v-if="row.workProcess.feedBackContent==2 && row.taskStatus>0" :disabled="row.pauseStatus==1" @click="handleBackRecord(row)" type="success" size="mini">
              反馈完成
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="印品名称"
          width="110px"
        >
          <template slot-scope="{row}">
            <el-tooltip :content="row.printOrder.orderName" placement="top-start" effect="light">
              <a href="javascript:;" style="color: #20a0ff"  @click="openDetail(row)" class="ellipsis"> {{ row.printOrder.orderName }}</a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="客户名称"
          width="110px"
        >
          <template slot-scope="{row}">
            <el-tooltip :content="row.printOrder.clientName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.printOrder.clientName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号"
          width="110px"
        >
          <template slot-scope="{row}">
            <span class="ellipsis"> {{ row.printBillCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生产状态" align="center" width="110px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <div v-if="row.pauseStatus==0">
              <el-tag size="mini" type="info" v-if="row.taskStatus==0">未开始</el-tag>
              <!--            <el-tag type="warning" type="info" v-if="row.taskStatus==0 && row.pauseStatus==1">暂停</el-tag>-->
              <el-tag size="mini" type="success"  v-if="row.taskStatus==1">生产中</el-tag>
              <el-tag size="mini" type="danger" v-if="row.taskStatus==2">终止</el-tag>
              <el-tag size="mini" type="" v-if="row.taskStatus==5">完成</el-tag>
              <el-tag size="mini" type="su" v-if="row.taskStatus==10">已完成</el-tag>
            </div>
            <div v-if="row.pauseStatus==1">
              <el-tag size="mini" type="warning" v-if="row.taskStatus==0">暂停</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="当前反馈工序"
        >
          <template slot-scope="{row}">
            <span class="ellipsis"> {{ row.processName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="订单所有工序"
        >
          <template slot-scope="{row}">
            <span class="ellipsis"> {{ row.printOrder.allProcessStr }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="订单尺寸"
        >
          <template slot-scope="{row}">
            <span class="ellipsis"> {{ row.orderSize }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="印刷状态"
        >
          <template slot-scope="{row}">
            <span class="ellipsis"> {{ row.printOrder.clientName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          width="110px"
        >
          <template slot-scope="{row}">
            <el-tooltip :content="row.printOrder.productName" placement="top-start" effect="light">
              <span  class="ellipsis"> {{ row.printOrder.productName }}</span>
            </el-tooltip>


          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="订单编号">
          <template slot-scope="{row}">
            <a href="javascript:;" style="color: #20a0ff" @click="getOrderStep(row)">{{row.printOrder.orderCode}}</a>
          </template>
        </el-table-column>
        <el-table-column
          width="80px"
          label="订单状态">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.printOrder.stateMemo == '待组版'">{{ row.printOrder.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.printOrder.stateMemo == '待审核'" type="success">{{ row.printOrder.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.printOrder.stateMemo == '生产中'" type="danger">{{ row.printOrder.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.printOrder.stateMemo == '待入库'" type="danger">{{ row.printOrder.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.printOrder.stateMemo == '已入库'" type="warning">{{ row.printOrder.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.printOrder.stateMemo == '已发货'" type="info">{{ row.printOrder.stateMemo }}</el-tag>
            <el-tag size="mini" v-else-if="row.printOrder.stateMemo == '部分发货'" type="info">{{ row.printOrder.stateMemo }}</el-tag>
            <el-button size="mini" class="button-new-tag" v-else >{{ row[column.field] }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="订单消息"
          width="110px"
        >
          <template slot-scope="{row}">
            <template v-if="row.orderMessage">
              <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
              <a href="javascript:;" style="color: #20a0ff" @click="openMessage(row)">{{row.printOrder.orderMessage}}</a>
            </template>
            <template v-else>
              <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
            </template>
          </template>
        </el-table-column>


        <el-table-column
          width="120px"
          label="制单时间">
          <template slot-scope="{row}">
            <span v-if="row.createTime">
          {{row.createTime | getTime}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="交货时间">
          <template slot-scope="{row}">
            <span v-if="row.deliverDate">
          {{row.deliverDate | getTime}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="制单人">
          <template slot-scope="{row}">
            <span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="反馈数量">
          <template slot-scope="{row}">
            <span>
            </span>
          </template>
        </el-table-column>







      </el-table>
<!--      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"-->
<!--                  :limit.sync="listData.pageSize" @pagination="getTableInfo"/>-->
    </div>

    <el-dialog :title="printbilTitle" :visible.sync="printbilVisible" width="500px">
      <el-form :model="printForm" label-width="50px" label-position="right">
        <el-form-item  label="备注">
          <el-input type="textarea" v-model="printForm.taskMemo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printbilVisible = false">取 消</el-button>
        <el-button type="primary" @click="printBtn">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="ruleForm" label-width="100px" :rules="rules" ref="ruleForm" label-position="left">
        <el-form-item v-show="workProcessShow" prop="isComplete" label="是否反馈完成">
          <el-checkbox v-model="ruleForm.isComplete">任务已完成</el-checkbox>
        </el-form-item>
        <el-form-item v-show="feedBackContentVisible" prop="feedbackCount"  label="反馈数量">
          <el-input oninput = "value=value.replace(/[^0-9]/gi,'')" v-model="ruleForm.feedbackCount"></el-input>
        </el-form-item>
        <el-form-item  label="反馈备注">
          <el-input type="textarea" v-model="ruleForm.memo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="backRecordBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>
    <printbill-detail ref="printbillDetail"></printbill-detail>
    <print-step ref="printStep"></print-step>
    <machinef-list @searchList="searchList" ref="machinefList"></machinef-list>
    <el-dialog title="选择工序" :visible.sync="processVisible" width="500px">
      <div style="margin-bottom: 15px;"><el-button @click="handleCheck" size="mini" type="primary">确定选择</el-button></div>
      <el-table
        :data="tableData2"
        v-loading="listLoading"
        @selection-change="handleSelectionChange"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          prop="processName"
          label="工序名称">
        </el-table-column>
        <el-table-column
          label="备注说明"
          prop="remark"
        >
        </el-table-column>

      </el-table>
    </el-dialog>
    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <order-step ref="orderStep"></order-step>
    <right-menu :btnShow="btnShow" :btnList="btnList" v-if="menuVisible" @foo="foo" ref="rightmenu"
                @handleOne="handleOne" @handleTwo="handleTwo"></right-menu>

  </div>
</template>

<script>
import {
  queryOrderTasksToFeedback,
  taskFeedbackPause,
  feedbackTask,
  taskFeedbackStart,
  orderTaskFeedbackStart,//订单任务启动
  orderTaskFeedbackPause,//订单任务暂停
  feedbackOrderTask//反馈订单orderTaskFeedbackPause
} from '@/api/feedBack/feedBack.js'
import { getWorkProcessList } from '@/api/productFile/workProcessInfo.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue';
import { mapGetters } from 'vuex';
import OrderMessage from '@/components/orderMessage/orderMessage'
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import rightMenu from '@/components/rightMenu/index.vue'
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import machinefList from "@/components/machinefList/machinefList";
import printStep from "@/components/printbillDetail/printStep";
import OrderDetail from "@/components/orderDetail/orderDetail";
import {getOrderStepList} from "@/api/order/orderList";
import OrderStep from "@/components/orderStep/orderStep";


export default {
  computed: {
    ...mapGetters([
      'name',
      'loginName'
    ]),
    noMore(){
      return this.tableData.length >= this.listData.total;
    },
    disabled () {
      return this.listLoading || this.noMore
    }
  },
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  components: {
    OrderStep,
    btnList:[
      {name: '暂停'},
      {name: '反馈'}
    ],
    Cancledialog,
    rightMenu,
    PrintbillDetail,
    printStep,
    machinefList,
    OrderDetail,
    OrderMessage,
  },
  data() {
    return {
      heightTable:"auto",
      totalPape:0,
      rowData:{},
      drawer: false,
      stepList: [],
      detailVisible:false,
      ids: "",
      tableData2:[],
      processVisible:false,
      activities: [],
      avtiveStep: true,
      activitiesArray: [],
      memoDrawer: false,
      workProcessShow:false,
      btnShow:false,
      row:{},
      btnList:[
        {name: '暂停'},
        {name: '反馈'}
      ],
      menuVisible:false,
      printbilVisible:false,
      printbilTitle:"",
      feedBackContentVisible:false,
      multipleSelection: [],
      dialogStatus: 1,//1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      search: {
        keyWord: '',
        idProcess:'',
        // idMachineInfo:""
      },
      printForm:{},
      ruleForm: {},
      rules: {
        feedbackCount: [
          { type: 'number', message: '必须为数字值'}
        ]
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 15
      },
      listData2: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: ''
    }
  },
  mounted() {
    this.getTableInfo();
  },
  methods: {
    load() {
      // 滑到底部时进行加载
      this.listLoading = true;
      setTimeout(() => {
        this.listData.page++; //页数+1
        this.getTableInfo(); //调用接口，此时页数+1，查询下一页数据
      }, 1000);
    },
    handleStart(){
      var _that = this;

    },
    openDetail(row) {
      //查看订单详情
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },
    handleCheck(){
      const _that = this;
      _that.ids = _that.unique(_that.getIds(_that.multipleSelection)).toString();
      // console.log(_that.ids);
      _that.search.idProcess = _that.ids;
      _that.getTableInfo();
      _that.processVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getIds(data) {
      const _that = this;
      var idArray = [];
      for (let i = 0; i < data.length; i++) {
        var datas = data[i];
        idArray.push(datas.id)
      }
      return idArray
    },
    checkProcessList(){
      const _that = this;
      var params = {};
      var page = {
        pageIndex: _that.listData2.page,
        pageSize: _that.listData2.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }

      getWorkProcessList(data).then(response => {
        // console.log(response)
        const data = response.data;
        _that.processVisible = true;
        // //  组合表单数据
        _that.tableData2 = data
        // console.log(_that.tableData)
        _that.listData2.total = response.total;
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    searchList(id){
      const _that = this;
      // console.log(id);
      _that.search.idMachineInfo = id;
      _that.getTableInfo();
    },
    //获取机台任务
    handleMachine(){
      const _that = this;
      _that.$refs.machinefList.drawer = true;
      _that.$refs.machinefList.getMachine(0);
    },
    handleAddBreed(){
      this.memoDrawer = false;
      this.getTableInfo();
    },
    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail();
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.id
      _that.$refs.orderStep.getOrderStep()
    },
    handleClose() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities.slice(0, 9);
    },
    handleOpen() {
      const _that = this;
      _that.avtiveStep = !_that.avtiveStep;
      _that.activitiesArray = _that.activities;
    },
    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function() {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.idOrder;
        _that.$refs.orderMessage.idPrint = row.idPrintBreed;
        _that.$refs.orderMessage.idPrintBill = row.idPrintBill;
        _that.$refs.orderMessage.sMessage = "";
        _that.$refs.orderMessage.getList()
      })
    },

    handleTwo(){
      const _that = this;
    },
    handleOne(row){
      const _that = this;
      _that.rowData = row;
      if(row.pauseStatus==1){
        _that.printbilTitle = "确定启动？";
        _that.printForm={
          id: row.id,
          taskStatus: row.taskStatus,
          taskMemo: ""
        }
      }else if(row.pauseStatus==0){
        _that.printbilTitle = "确定暂停？";
        _that.printForm={
          id: row.id,
          taskStatus: row.taskStatus,
          taskMemo: ""
        }
      }
      _that.printbilVisible = true;
    },
    getCodeName(row){
      return row.printBill.billCode+"-"+row.printBreed.breedName
    },
    getPaper(row){
      return row.printBreed.cutSize+"-"+row.printBreed.paperName;
    },
    printBtn(){
      const _that = this;
      // console.log(_that.printForm);

      if(!_that.printForm.taskMemo && _that.rowData.pauseStatus==0){
        _that.$message.warning("备注信息不能为空");
        return
      }
      if(_that.rowData.pauseStatus==0){
        var Infos = {
          "task": JSON.stringify(_that.printForm),
        }
        orderTaskFeedbackPause(Infos).then(response => {
          console.log("taskFeedbackPause", response);
          _that.$message("暂停成功");
          _that.printbilVisible =false
          _that.rowData.pauseStatus = 1;


        }).catch(err => {
          _that.$message.error(err);
        })
      }else if(_that.rowData.pauseStatus==1){
        var Infos = {
          "task": JSON.stringify(_that.printForm),
        }
        orderTaskFeedbackStart(Infos).then(response => {
          // console.log("taskFeedbackPause", response);
          _that.$message("启动成功");
          _that.printbilVisible =false;
          _that.rowData.pauseStatus = 0;
        }).catch(err => {
          _that.$message.error(err);
        })
      }
    },
    backRecordBtn(){
      const _that = this;
      // console.log(_that.ruleForm);
      if(_that.ruleForm.feedbackCount<=0 && _that.feedBackContentVisible){
        _that.$message.warning("反馈数量不能小于0");
        return
      }
      var Infos = {
        "item": JSON.stringify(_that.ruleForm),
      }
      feedbackOrderTask(Infos).then(response => {
        // console.log("feedbackTask", response);
        _that.getTableInfo();
        _that.$message("成功");
        _that.dialogVisible =false;
      }).catch(err => {
        _that.$message.error(err);
      })
    },
    handleBackRecordStart(row){
      const _that = this;
      _that.dialogTitle = "版任务反馈";
      _that.ruleForm={
        idTask: row.id,
        taskStatus: row.taskStatus,
        isComplete: true,
        feedbackCount:0,
        memo: "",
      }
      this.$confirm('反馈开始？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var Infos = {
          "item": JSON.stringify(_that.ruleForm),
        }
        feedbackOrderTask(Infos).then(response => {
          console.log("feedbackTask", response);
          _that.getTableInfo();
          _that.$message("反馈成功");
        }).catch(err => {
          _that.$message.error(err);
        })
      }).catch(() => {
      });
    },
    //版任务数量反馈
    handleBackRecord(row){
      const _that = this;
      _that.dialogTitle = "版任务反馈";
      console.log(row.workProcess.feedBackContent);
      _that.dialogVisible = true;
      _that.feedBackContentVisible = true;
      _that.ruleForm={
        idTask: row.id,
        taskStatus: row.taskStatus,
        feedbackCount:0,
        memo: "",
      }

      _that.dialogVisible = true;
    },
    //任务暂停
    handlePause(id,pauseStatus){

    },
    //获取列表
    getTableInfo() {
      const _that = this
      _that.listLoading = true;
      var params = _that.search;
      var page = {
        pageIndex:_that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      // console.log("111",data);
      queryOrderTasksToFeedback(data).then(response => {
        // console.log("getPageInfo",response)
        _that.listData.total = response.total;
        if(response.data.length>0){
          _that.heightTable = "480px";
          _that.tableData = _that.tableData.concat(response.data);
        }else {
          _that.heightTable = "auto";
        }
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err);
        _that.listLoading = false
      })
    },

    //刷新表格
    tableRefresh() {
      this.listData.page = 1;
      this.search.idMachineInfo = "";
      this.search.keyWord = "";
      this.getTableInfo()
    },
    //搜索
    searchData() {
      this.listData.page = 1;
      this.search.idMachineInfo = "";
      this.getTableInfo()
    },
    //序号
    indexMethod(index) {
      return index+1;
    },
    unique(arr) {
      return Array.from(new Set(arr))
    },
    rowContextmenu(row, column, event) {
      const _that = this;
      _that.row = row;
      if(row.pauseStatus==1){
        _that.btnList[0].name="启动";
        _that.btnShow = true;
      }
      if(row.pauseStatus==0){
        _that.btnList[0].name="暂停";
        _that.btnShow = false;
      }
      _that.menuVisible = false;
      _that.menuVisible = true;

      // _that.$refs.multipleTable.toggleRowSelection(row);
      // 阻止右键默认行为
      event.preventDefault()
      _that.$nextTick(() => {
        _that.$refs.rightmenu.init(row, column, event);
      })
    },
    foo() { // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener('click', this.foo)
    },
  },
  watch: {


  }
}
</script>
<style>
/*.el-drawer__container .el-drawer__open{*/
/*  height: 400px !important;*/
/*}*/
/*.el-drawer__wrapper{*/
/*  height: 400px !important;*/
/*  position: fixed !important;*/
/*  bottom: 0px !important;*/
/*}*/
/*.el-drawer__container{*/
/*  height: 400px !important;*/
/*  position: fixed !important;*/
/*  bottom: 0px !important;*/
/*}*/
</style>

<style lang="scss" scoped>
.machineInfList{}
aside{
  background: #eef1f6;
  padding: 18px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}
.filter-container{
  margin-bottom: 15px;
}
.text-task{
  font-size: 14px;
  text-align: center;
  color: #7c7c7c;
  margin-left: 15px;
}
</style>

