<template>
  <div class="ls-vertical" >
    <navbar title="维护列表"  :buttons="btns"  icon="set">
    </navbar>
    <search ref="search" @query="query"></search>
    <div class="ls-container" >
      <div class="ls-btn-row">
        <div class="left">
          <img src="@/assets/img/public/icon-list.png" />
          <span >列表数据</span>
        </div>
        <div>
          <el-button @click="doAddOrUpdate('add',undefined)" icon="el-icon-plus" type="primary" size="small">新增
          </el-button>
        </div>
      </div>
      <div class="ls-table-warp">
        <el-table class="todo-table dic-table" size="mini" height="100%" stripe border @cell-dblclick="showLogsInfo" :data="datas">
          <el-table-column type="index" width="50" label="#">
          </el-table-column>
          <el-table-column v-for="(item,index) in colunms" :key="index"
                 :prop="item.prop" :label="item.label"
                  :min-width="item.width"
                 :show-overflow-tooltip="item.tooltip" :fixed="item.fixed">
          </el-table-column>
          <el-table-column label="操作" min-width="155" prop="status">
            <template slot-scope="scope">
              <el-button v-for="item in btnList" :key="item.name" @click="btnOperation(item.name, scope.row)"
                :type="item.type" :size="item.small">
                {{item.content}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination @size-change="pagerHandleSizeChange" @current-change="pagerHandleCurrentChange"
        :current-page="pager.currPage" :page-sizes="pager.pageOptions" :page-size="pager.pageSize"
        :total="pager.totalRow" layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <submit-log ref="logRef"></submit-log>
      <add-update @callback="callback" ref="refDictAddUpdate" v-if="oper" :open-title="openTitle" :submitInfo="formData"></add-update>

    </div><!-- lx-container -->
  </div>
</template>

<script>
  import search from './components/submit-user-search.vue'
  import submitLog from './components/submit-log.vue'
  import addUpdate from './components/submit-user-add-update.vue'
  export default {
    name: 'submit-list',
    components: {
      search,
      addUpdate,
      submitLog
    },
    data: function() {
      return {
        oper:false,
        openTitle:'',
        // deptId:'',
        // deptName:'',
        btns: [{
          title: '',
          btnEvent: 'refresh',
          size: '',
          circle: 'circle',
          type: 'refresh',
          show: true,
          icon: ''
        }],
        btnList: [{
            name: 'edit',
            type: "text",
            size: "small",
            content: "编辑"
          },
          {
            name: 'delete',
            type: "text",
            size: "small",
            content: "删除"
          },
        ],
        pager: {
          currPage: 1,
          pageSize: 20,
          pageOptions: [20, 30,50],
          totalRow: 0
        },
        datas: [],
        queryParam: {},
        formData:{},
        //表格列
        colunms: [
          {
            prop: 'deptName',
            label: '部门名称',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'moduleName',
            label: '模块',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'reportTypeKey',
            label: '类型',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'informersStr',
            label: '提交人员',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'submitCount',
            label: '提交人数',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'creater',
            label: '更新人',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'createTime',
            label: '更新时间',
            width: 100,
            fixed: false,
            tooltip: true
          },
        ]

      }
    },
    created() {
      // this.getUserDept();
    },
    mounted: function() {
      let _this = this;
      this.$nextTick(function() {
        _this.doQuery();
      })
    },
    methods: {
      //按钮操作
      btnOperation: function(btnName, row) {
        if (btnName === 'edit') {
           this.oper=true
          return this.doAddOrUpdate('edit', row);
        } else if (btnName === 'delete') {
          return this.delete(row);
        }
      },
      callback: function(value) {
        this.oper=false
        if(value==null||value != 'close'){
            this.doQuery();
        }
      },
      //删除
      delete: function(row) {
        console.log("row",row)
        this.$confirm(`此操作将永久删除数据, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            id: row.id
          }
          this.$ajax.post({
            domain: 'crmUrl',
            url: 'reportSubmitTending.deleteReportSubmitTending',
            data: JSON.stringify(param),
            success: function(res) {
              console.log(res)
              if (res.errorCode == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.doQuery()
              } else {
                this.$message.error(res.body.msg);
              }
            }.bind(this),
            error: function(res) {
              this.$message.error(res.body.msg);
            }.bind(this)
          });
        }).catch(() => {
        });
      },
      //数据查询
      query(data) {
        let param = data
        this.queryParam = data
        this.pager.currPage = 1
        this.doQuery();
      },
      //查询当前登录人员部门
      // getUserDept() {
      //   this.$ajax.post({
      //     domain: 'crmUrl',
      //     url: 'visit.getUserDept',
      //     data: {},
      //     requestType: 'body',
      //     showLoad: false,
      //     success: function(res) {
      //       if (res.errorCode === 200) {
      //         let data = res.data;
      //         this.deptName = data.deptName;
      //         this.deptId = data.deptId;
      //       }
      //     }.bind(this),
      //     error: function(res) {
      //       this.$message.error(res.body.msg || res.msg);
      //     }.bind(this)
      //   });
      // },
      //分页查询
      doQuery: function() {
        let param = {
          currPage: this.pager.currPage,
          pageSize: this.pager.pageSize,
          queryParam: this.queryParam
        }
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'reportSubmitTending.listTendingPage',
          data: JSON.stringify(param),
          success: function(res) {
            if (res.errorCode == 200) {
              this.datas = res.data.records || [];
              this.pager.totalRow = res.data.total || 0;
            } else {
              this.$message.error(res.body.msg);
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(res.body.msg);
          }.bind(this)
        });
      },
      doAddOrUpdate: function(type, row) {
        if (type == 'add') {
           this.openTitle = '新增';
           this.formData={}
           // this.formData.deptName = this.deptName;
           // this.formData.deptId = this.deptId;
        }else if(type == 'edit'){
            this.openTitle = '编辑';
            this.formData = row;
            console.log("this.formData==>",this.formData)
        }
        this.oper=true
      },
      // 变更页面显示数量
      pagerHandleSizeChange(val) {
        this.pager.pageSize = val;
        this.doQuery();
      },
      // 变更当前页面
      pagerHandleCurrentChange(val) {
        this.pager.currPage = val;
        this.doQuery();

      },
      // 日志信息展示
      showLogsInfo: function(row) {
        this.doAddOrUpdate('edit',row)
      }
    },



  }
</script>

<style lang="scss"  scoped>
.ls-container {
  overflow: hidden;
}
</style>
