<template>
  <div class="ls-vertical">
    <navbar title="字典列表"  :buttons="btns"  @clickbutton="clickbtn" icon="set">
    </navbar>
    <search ref="search" @query="query"></search>

    <div class="ls-container">
      <div class="ls-btn-row">
        <navbar title="列表数据"></navbar>
        <div>
          <el-button @click="doAddOrUpdate('add',undefined)" icon="el-icon-plus" type="primary" size="mini">新增
          </el-button>
        </div>
      </div>
      <div class="ls-table-warp">
        <el-table class="todo-table dic-table" size="mini" 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="290" prop="isValid">
            <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>
              <el-button type="text" size="small" @click="administration(scope.row)">
                |{{scope.row.isValid=="Y"?"已启用":"已失效"}}</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>

      <dialog-log ref="logRef"></dialog-log>
      <dialog-dict-add-update @callback="callback" ref="refDictAddUpdate"></dialog-dict-add-update>

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

<script>
  import search from './components/dictionary-search.vue'
  import dialogLog from './components/dialog-log.vue'
  import dialogDictAddUpdate from './components/dialog-dict-add-update.vue'
  export default {
    name: 'logList',
    components: {
      search,
      dialogLog,
      dialogDictAddUpdate,
    },
    mounted: function() {
      let _this = this;
      this.$nextTick(function() {
        _this.doQuery();
      })
    },
    methods: {
      //按钮操作
      btnOperation: function(btnName, row) {
        if (btnName === 'edit') {
          return this.doAddOrUpdate('edit', row);
        } else if (btnName === 'copy') {
          return this.doAddOrUpdate('copy', row);
        } else if (btnName === 'view') {
          return this.doView('view', row);
        } else if (btnName === 'log') {
          // return this.doAddOrUpdate(row);
        } else if (btnName === 'delete') {
          // return this.doAddOrUpdate(row);
        }
      },

      callback: function() {
        this.doQuery();
      },
      //失效启用字典
      administration: function(row) {
        console.log(row)
        let text = row.isValid == "Y" ? "失效" : "启用"
        this.$confirm(`此操作将${text}该字典, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            id: row.id,
            isValid: row.isValid == "Y" ? "N" : "Y"
          }
          this.$ajax.post({
            domain: 'crmUrl',
            url: 'digitalDictionary.Enable',
            data: JSON.stringify(param),
            success: function(res) {
              console.log(res)
              if (res.errorCode == 200) {
                this.doQuery()
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
              } 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.$ajax.post({
          domain: 'crmUrl',
          url: 'digitalDictionary.query',
          data: JSON.stringify(param),
          success: function(res) {
            console.log(res)
            if (res.errorCode == 200) {
              console.log(res, '查询')
              this.datas = res.data || [];

              // this.pager.totalRow = res.total || 0;
              this.doQuery()
            } else {
              this.$message.error(res.body.msg);
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(res.body.msg);
          }.bind(this)
        });
      },
      doQuery: function() {
        let param = {
          currPage: this.pager.currPage,
          pageSize: this.pager.pageSize,
          queryParam: this.queryParam
        }
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'digitalDictionary.pagingQuery',
          data: JSON.stringify(param),
          success: function(res) {
            if (res.errorCode == 200) {
              console.log(res, 2222222222)
              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) {
        this.$refs.refDictAddUpdate.type = type;

        if (type == 'add') {
          this.$refs.refDictAddUpdate.title = '新增';
          this.$refs.refDictAddUpdate.openTitle = '新增';
        }

        if (type == 'edit') {
          this.$refs.refDictAddUpdate.title = '编辑';
          this.$refs.refDictAddUpdate.openTitle = '编辑';
          this.$refs.refDictAddUpdate.formData = JSON.parse(JSON.stringify(row)); //解决get，set监听问题
        }
        if (type == 'copy') {
          // this.$refs.refDictAddUpdate.formData = this.$common.copyProperties(this.$refs.refDictAddUpdate.formData,{});//创建一个新的对象，防止监听属性不成功问题，弃用原先属性
          this.$refs.refDictAddUpdate.title = '复制';
          this.$refs.refDictAddUpdate.formData = JSON.parse(JSON.stringify(row)); //解决get，set监听问题
          this.$refs.refDictAddUpdate.formData.id = '';
        }
        this.$refs.refDictAddUpdate.visible = true;

      },
      doView: function(type, row) {
        this.$refs.refDictAddUpdate.type = type;
        this.$refs.refDictAddUpdate.title = '查看';
        this.$refs.refDictAddUpdate.formData = JSON.parse(JSON.stringify(row)); //解决get，set监听问题
        this.$refs.refDictAddUpdate.visible = true;
      },

      // 变更页面显示数量
      pagerHandleSizeChange(val) {
        this.pager.pageSize = val;
        this.doQuery();
      },
      // 变更当前页面
      pagerHandleCurrentChange(val) {
        this.pager.currPage = val;
        this.doQuery();

      },
      // 导航栏按钮操作
      clickbtn: function(type) {
        switch (type) {
          case 'refresh':
            this.pager.currPage = 1;
            this.pager.pageSize = 50;
            this.doQuery();
            break;
        }
      },

      // 日志信息展示
      showLogsInfo: function(msg) {
        this.$refs.logRef.logMsg = msg;
        this.$refs.logRef.visible = true;
      }

    },

    data: function() {
      return {
        btns: [{
          title: '',
          btnEvent: 'refresh',
          size: '',
          circle: 'circle',
          type: 'refresh',
          show: true,
          icon: ''
        }],
        btnList: [{
            name: 'edit',
            type: "text",
            size: "small",
            content: "|编辑"
          },
          {
            name: 'view',
            type: "text",
            size: "small",
            content: "|查看"
          },
          {
            pops: 'isValid',
            name: 'delete',
            type: "text",
            size: "small",
          },
          // {name:'copy', type:"text", size:"small", content:"|复制"},
          // {name:'log', type:"text", size:"small", content:"|启用"}
        ],
        pager: {
          currPage: 1,
          pageSize: 10,
          pageOptions: [10, 15, 20, 50, 100, 500, 1000],
          totalRow: 0
        },
        datas: [],
        queryParam: {},

        //表格列
        colunms: [{
            prop: 'id',
            label: '字典ID',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'pid',
            label: '字典父ID',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'dataType',
            label: '字典类型',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'dataCode',
            label: '字典KEY',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'dataValue',
            label: '字典VALUE',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'dataSort',
            label: '字典排序',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'dataDesc',
            label: '字典描述',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'ext1',
            label: '字典扩展1',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'ext2',
            label: '字典扩展2',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'creater',
            label: '创建人',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'updater',
            label: '修改人',
            width: 100,
            fixed: false,
            tooltip: true
          },

        ]

      }
    },

  }
</script>

<style lang="scss" scoped>
  .lx-container {
    td.log-msg {
      .cell {
        display: flex;
        align-items: center;

        >span {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          margin-right: 6px;
        }
      }
    }

   
  }

  .lx-btn-row {
    display: flex;
    justify-content: end
  }

</style>
