<template>
  <div class="ls-vertical"  style="overflow: hidden;">
    <navbar  title="模板配置"  :buttons="btns"  @clickbutton="clickbtn" icon="set">
    </navbar>
    <search ref="search" @query="query"></search>
    <div class="ls-container project-list" style="overflow: auto;" >
      <div class="ls-btn-row">
        <div class="left">
          <img src="@/assets/img/public/icon-list.png" />
          <span >列表数据</span>
        </div>
        <div class="btns-project">
          <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 height="100%" 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="150px" 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>
              <el-button type="text" size="small"  @click="administration(scope.row)">{{scope.row.status=="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>
      <template-log ref="logRef"></template-log>
      <template-dict-add-update @callback="callback" ref="refDictAddUpdate"></template-dict-add-update>
    </div><!-- lx-container -->
  </div>
</template>


<!-- <template>
  <div class="ls-vertical" style="overflow: hidden;">
    <navbar title="拜访报告" :buttons="btns" @clickbutton="clickbtn" icon="look"></navbar>
    <search ref="search" @query="chaData"></search>
    <div class="ls-container">
      <div class="ls-btn-row">
        <navbar title="列表数据"></navbar>
        <div><el-button @click="addVisit" icon="el-icon-plus" type="primary" size="mini">新增</el-button></div>
      </div>
      <div class="ls-table-warp">
        <el-table :data="datas" ref="tableRef" :class=" scrollTable?'scrolltable':'' "
          size="mini"  stripe border height="100%" >
          <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="200" prop="status">
            <template slot-scope="scope">
              <el-button v-if="scope.row.reviewStatus == '待批阅' || '已批阅'" type="text"  style="font-size: 14px;"size="small" @click="doAddOrUpdate(scope.row)">详情</el-button>
              <el-button v-if="scope.row.reviewStatus == '草稿'" type="text" size="small"  style="font-size: 14px;" @click="editVisit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.reviewStatus == '草稿'" type="text" size="small"  style="font-size: 14px;" @click="deletes(scope.row)">删除</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>
      <visit-log ref="logRef"></visit-log>
      <visit-dict-add-update @callback="callback" ref="refDictAddUpdate"></visit-dict-add-update>
    </div>
  </div>
</template> -->




<script>
  import search from './components/template-search.vue'
  import templateLog from './components/template-log.vue'
  import templateDictAddUpdate from './components/template-dict-add-update.vue'
  export default {
    name: 'logList',
    components: {
      search,
      templateLog,
      templateDictAddUpdate,
    },
    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);
        }
      },

      callback: function() {
        this.doQuery();
      },
      //失效启用
      administration: function(row) {
        console.log(row)
        let text=row.status ==  "Y" ? "失效" : "启用"
        this.$confirm(`此操作将${text}该模板配置, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let param = {
            id: row.id,
            status: row.status =="Y" ? "N" : "Y"
          }
          this.$ajax.post({
            domain: 'crmUrl',
            url: 'templates.disableOrEnableTemplates',
            data: JSON.stringify(param),
            success: function(res) {
              console.log(res)
              if (res.errorCode == 200) {
                // this.pager.totalRow = res.total || 0;
                this.$message({
                  type: 'success',
                  message: '操作成功'
                });
                this.doQuery()
              } else {
                this.$message.error(res.msg);
              }
            }.bind(this),
            error: function(res) {
              this.$message.error(res.msg);
            }.bind(this)
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });


      },
      //数据查询
      query(data) {
        let param = data
        this.queryParam = data
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'templates.listTemplates',
          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.msg);
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(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: 'templates.listPageTemplates',
          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') {
          console.log('编辑')
          this.$refs.refDictAddUpdate.title = '编辑';
          this.$refs.refDictAddUpdate.openTitle = '编辑';
          console.log(row)
          this.$refs.refDictAddUpdate.formData = JSON.parse(JSON.stringify(row)); //解决get，set监听问题
        }
        this.$refs.refDictAddUpdate.visible = true;

      },
      doView: function(type, row) {
        this.$refs.refDictAddUpdate.type = type;
        this.$refs.refDictAddUpdate.openTitle = '查看';
        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: "查看"
          },
        ],
        pager: {
          currPage: 1,
          pageSize: 10,
          pageOptions: [10, 15, 20, 50, 100, 500, 1000],
          totalRow: 0
        },
        datas: [],
        queryParam: {},

        //表格列
        colunms: [
          {
            prop: 'departmentName',
            label: '事业部',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'isRequired',
            label: '是否必填项',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'isShow',
            label: '是否显示',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'itemProductName',
            label: '产品线',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'moduleName',
            label: '模块名称',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'sortBy',
            label: '排序',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'templateDesc',
            label: '模板描述',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'templateName',
            label: '模板名称',
            width: 100,
            fixed: false,
            tooltip: true
          },
          {
            prop: 'creater',
            label: '创建人',
            width: 100,
            fixed: false,
            tooltip: true
          },

        ]

      }
    },

  }
</script>

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

<style  lang="scss">
  .project-list.ls-container {

      position: relative;
      >.btns-project{
        position: absolute;
        right: 10px;
        top: 16px;
        z-index: 9;
      }

    .el-tabs{
      overflow: hidden;
      .table-wrap{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
    }

  }
</style>
