<!-- 新闻管理 by wangshxc -->
<template>
  <div>
    <div class="tab-item">
      <div class="tab-button" align="left">
        <ws-button class="tab-kuan" type="primary" round @click="addGoing"> 新增</ws-button>
       <!-- <ws-button class="tab-kuan" round @click="addGoing"> 导入</ws-button>
        <ws-button class="tab-kuan" round @click="addGoing"> 导出</ws-button>-->
      </div>
      <!-- 过滤筛选 -->
      <div class="searchTwo" align="right">
        <ws-button type="text" @click="dialogVisible = true">
          <i class="iconfont iconfilter" />
          <span>过滤</span>
        </ws-button>
        <span class="guolvmsg">共{{ deptBudgetTotal }}条结果</span>
        <ws-dialog
          :close-on-click-modal="false"
          title="过滤"
          :visible.sync="dialogVisible"
          class="dialog"
          :modal="false"
          @close="startFilter"
        >
          <!-- 功能模块 -->
          <span>
            <div class="select">
              <div class="selectTitle">
                <div>所属功能模块:</div>
                <span>一级功能:</span>
              </div>
               <ws-select v-model="deptBudgetPage.firstFunctionModuleCode" @change="changeOneLevel" style="width:100%;">
                <ws-option
                  v-for="item in oneLevel"
                  :key="item.serviceCode"
                  :label="item.serviceName"
                  :value="item.serviceCode"/>
              </ws-select>
            <!--  <el-cascader :props="props" size="small" style="width:100%;"></el-cascader>-->
            </div>
            <div class="select">
              <div class="selectTitle">
                <span>二级功能:</span>
              </div>
               <ws-select v-model="deptBudgetPage.secondFunctionModuleCode" @change="changeTwoLevel" style="width:100%;">
                <ws-option
                  v-for="item in twoLevel"
                  :key="item.serviceCode"
                  :label="item.serviceName"
                  :value="item.serviceCode"/>
              </ws-select>
            </div>
            <div class="select">
              <div class="selectTitle">
                <span>三级功能:</span>
              </div>
             <ws-select v-model="deptBudgetPage.thirdFunctionModuleCode" style="width: 100%;">
            <ws-option
              v-for="item in threeLevel"
              :key="item.serviceCode"
              :label="item.serviceName"
              :value="item.serviceCode"
            />
          </ws-select>
            </div>
            <!--创建日期-->
            <div class="select" style="margin-bottom: 0px">
                <div class="selectTitle">
                  <span>创建日期:</span>
                </div>
               <ws-date-picker
                 value-format="yyyy-MM-dd"
                 v-model="dateRangeList"
                 type="daterange"
                 range-separator="-"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 style="width: 100%;"
               />
              </div>
          </span>
          <span slot="footer" class="dialog-footer">
                  <div class="elButton">
                    <ws-button @click="reset">重置</ws-button>
                    <ws-button type="primary" @click="startFilter">过滤</ws-button>
                  </div>
                </span>
        </ws-dialog>
      </div>
      <!-- 模糊搜索 Start -->
      <div class="searchThree" align="right">
        <ws-input
          v-model="deptBudgetPage.searchKeyword"
          maxlength="50"
          placeholder="请输入问题，解答形式，创建人"
          @clear="resetSearch"
          @keyup.enter.native="getDeptBudgetList"
          style="width: 277px;"
        />
        <svg-icon icon-class="gen" class="searchIcon" @click="getDeptBudgetList"/>
      </div>
    </div>
    <div>
      <!--一览页页面 Start -->
      <ws-normal-table
        v-loading="listLoading"
        stripe
        :data="deptBudgetList"
        @cell-click="jumpDeptBudget">
        <ws-table-column align="center" prop="crtNo" label="序号" width="100">
          <template slot-scope="scope">
            {{ (deptBudgetPage.currentPage - 1)*deptBudgetPage.pageSize + scope.$index + 1 }}
          </template>
        </ws-table-column>
        <ws-table-column align="left" header-align="center" prop="questionContent" label="问题内容" min-width="200"/>
        <ws-table-column align="center" prop="functionModuleType" label="所属功能模块" min-width="150">
          <template slot-scope="scope">
            <div :title="scope.row.firstFunctionModuleName +
               (scope.row.secondFunctionModuleName? '/' + scope.row.secondFunctionModuleName:'') +
              (scope.row.thirdFunctionModuleName? '/' + scope.row.thirdFunctionModuleName:'')">
              {{ scope.row.firstFunctionModuleName +
              (scope.row.secondFunctionModuleName? '/' + scope.row.secondFunctionModuleName:'') +
              (scope.row.thirdFunctionModuleName? '/' + scope.row.thirdFunctionModuleName:'') }}</div>
          </template>
        </ws-table-column>
        <ws-table-column align="center" prop="answerType" label="解答形式" min-width="150"/>
        <ws-table-column align="center" prop="createUserName" label="创建人" min-width="120"/>
        <ws-table-column align="center" prop="createDate" label="创建日期" min-width="120">
          <template slot-scope="scope">
            <div :title="scope.row.createDate">{{ scope.row.createDate.split(' ')[0] }}</div>
          </template>
        </ws-table-column>
   <!--     <ws-table-column align="center" prop="likesNumber" label="点赞次数" width="100"/>
        <ws-table-column align="center" prop="dislikeNumber" label="否定次数" width="100"/>
        <ws-table-column align="center" prop="totalHits" label="总点击次数" width="100"/>-->
      </ws-normal-table>
      <pagination
        v-show="deptBudgetTotal>0"
        :total="deptBudgetTotal"
        :page.sync="deptBudgetPage.currentPage"
        :limit.sync="deptBudgetPage.pageSize"
        @pagination="getDeptBudgetList"
      />
      <!--一览页页面 End -->
    </div>
  </div>
</template>

<script>
    import Pagination from '../../components/Pagination'
    import {
      getFirstLevelFunctionality,
      getProblemList,
      getSecondaryFunctionality,
      getTertiaryFunctionality
    } from '../../api/help'

    export default {
        name: 'newList',
        components: {
            Pagination
        },
        data() {
            return {
              dateRangeList: [],
              oneLevel: [],
              twoLevel: [],
              threeLevel: [],
              props: {
                lazy: true,
                lazyLoad (node, resolve) {
                  const {level} = node;
                  setTimeout(() => {
                    const nodes = Array.from({length: level + 1})
                      .map(item => ({
                        value: ++id,
                        label: `选项${id}`,
                        leaf: level >= 2
                      }));
                    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                    resolve(nodes);
                  }, 1000);
                }
                },
                dialogVisible: false,
                listLoading: false,
                inputVisible: false,
                inputValue: '',
                allTypeName: '全部类型',
                shipList: [],
                deptBudgetDate: [], // 过滤时间数组
                deptBudgetList: [],
                deptBudgetPage: {
                    currentPage: 1,
                    pageSize: 10,
                    typeId: '',
                    beginDate: '',
                    endDate: '',
                    searchKeyword: '',
                    firstFunctionModuleCode: '',
                    secondFunctionModuleCode: '',
                    thirdFunctionModuleCode: '',
                },
                deptBudgetTotal: 0,
                id: '',
                dialogDeptBudgetFilter: false,
                addRemarkMsg: {
                    id: ''
                },
                dynamicTags: [],
            }
        },
        created() {
          //获取一级菜单
          getFirstLevelFunctionality().then(res => {
            this.oneLevel = res.data
          })
        },
        mounted() {
            this.getDeptBudgetList();
        },
        methods: {
          // 切换一级功能
          changeOneLevel(val){
            //获取二级菜单
            getSecondaryFunctionality({serviceCode: val}).then(res => {
              this.twoLevel = res.data
              this.deptBudgetPage.secondFunctionModuleCode = ''
              this.deptBudgetPage.thirdFunctionModuleCode = ''
            })
          },
          // 切换二级功能
          changeTwoLevel(val){
            //获取三级菜单
            getTertiaryFunctionality({serviceCode: val}).then(res => {
              this.threeLevel = res.data
              this.deptBudgetPage.thirdFunctionModuleCode = ''
            })
          },
          // 重置
          reset() {
            this.deptBudgetPage.firstFunctionModuleCode = ''
            this.deptBudgetPage.secondFunctionModuleCode = ''
            this.deptBudgetPage.thirdFunctionModuleCode = ''
            this.deptBudgetPage.beginDate = null
            this.deptBudgetPage.endDate = null
            this.dateRangeList = []
            this.getDeptBudgetList()
            this.dialogVisible = false
          },
          // 过滤
          startFilter() {
            if (this.dateRangeList != null && this.dateRangeList.length === 2) {
              this.deptBudgetPage.beginDate = this.dateRangeList[0]
              this.deptBudgetPage.endDate = this.dateRangeList[1]
            } else {
              this.deptBudgetPage.beginDate = null
              this.deptBudgetPage.endDate = null
            }
            this.getDeptBudgetList()
            this.dialogVisible = false
          },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },
            handleEdit(tag) {
                this.$nextTick(_ => {
                    this.$set(tag,'edit',true)
                });
                this.$forceUpdate();
            },
            handleSave(tag) {
                this.$nextTick(_ => {
                    this.$set(tag,'edit',false)
                });
                this.$forceUpdate();
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push({
                        parameterId: '',
                        constCode: 'NEWS_TYPE',
                        parameterKey: '',
                        parameterValue: this.inputValue,
                        parameterValueEn: this.inputValue,
                        edit: false
                    })
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            // 一览页面信息
            getDeptBudgetList() {
                this.listLoading = true;
                getProblemList(this.deptBudgetPage).then(response => {
                    this.deptBudgetList = response.data.records;
                    this.deptBudgetTotal = response.data.total
                    this.listLoading = false;
                })
            },
            // 公告类型数据
            BasicInformation() {
                noticeTypelist({constCode: 'NEWS_TYPE'}).then(response => {
                    this.shipList = response.data
                    this.shipList.splice(0, 0, {
                        parameterId: '',
                        parameterValue: '全部类型',
                        parameterValueEn: 'All type'
                    })
                })
            },

            // 重置
            resetSearch() {
                this.deptBudgetPage.searchKeyword = null
                this.getDeptBudgetList()
            },
            // 跳转到新增页面
            addGoing() {
                this.$router.push({
                    name: 'helpAdd'
                })
            },
            submitNewType() {
                createOrUpdateNewType(this.dynamicTags).then(response => {
                    this.$message({
                        type: "success",
                        message: '保存成功!'
                    });
                })
            },
            // 一览页面跳转
            jumpDeptBudget(row, column) {
              this.$router.push({
                  name: 'helpDetails',
                  query: {
                    questionBankId: row.questionBankId,
                  }
              })
            },
        }
    }
</script>

<style scoped lang="scss">
  .guolvmsg {
    font-size: 14px;
    color: #333;
    display: inline-block;
    width: 82px;
    text-align: left;
  }
  .select{
    text-align: left;
    margin-bottom: 20px;
    .selectTitle {
      margin-bottom: 5px;
    }
  }
  .searchTwo {
    .el-button--text {
      color: #333;
    }

    .el-button--text:hover {
      color: #1d6ced;
    }

    /deep/ .el-dialog{
      width: 320px;
      margin-top: 21vh !important;
      margin-right: 23%;
    }
    /deep/ .el-dialog__header{
      background-color: #f6f6f6;
      .el-dialog__title{
        color: #333 !important;
        font-size: 14px !important;
        font-weight: bold;
      }
    }
    /deep/ .el-dialog__footer{
      background-color: #f6f6f6;
      height: 72px;
      line-height: 72px;
      text-align: center !important;
      padding: 0px 0 20px 0px !important;
    }
  }

  .searchThree {
    width: 28%;
  }

  .input-main {
    margin-top: 0 !important
  }

  .tab-kuan {
    float: left;
  }

  /deep/ .el-pagination__jump {
    margin-right: 46px;
  }

  .searchIcon {
    height: 32px;
    width: 32px;
    float: right;
    position: relative;
  }

  .tab-button {
    width: 60%;
  }

  .tab-item {
    display: flex;
    padding: 10px 0px 10px 0px;
  }

  .el-tag + .el-tag {
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;

  }

  /deep/ .el-tag + .el-tag {
    margin-left: 2%;
    margin-top: 10px;
  }

  /deep/ .el-tag {
    width: 47%;
    margin-left: 2%;
    margin-top: 10px;
    padding: 0px 0px;
  }

  /deep/ .input-new-tag {
    width: 47%;
    margin-left: 2%;
    margin-top: 10px;
  }

  /deep/ .button-new-tag {
    width: 47%;
    margin-left: 2%;
    margin-top: 10px;
  }

  /deep/ .el-tag .el-icon-close {
    float: right;
    top: 9px;
    right: 5px;
  }

</style>
