<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-06-16 15:34:43
 -->
<!--
  <add-template :brandId="brandId"  @closeTemplate="closeTemplate" @submitTemplate="submitTemplate"></add-template>
  import addTemplate from '@/components/set/add-template.vue';
 -->
<template>
  <el-dialog :title="!!editRow.templateId ? '可见范围' : '可见范围'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="">
      <div class="search-top">
        <el-input placeholder="搜索门店名称或代码" prefix-icon="el-icon-search" v-model="searchInput" class="w-369" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearInput">
          </el-input>
      </div>
      <el-table class="select-table" ref="multipleTable" v-loading="loading" :data="tableData" height="450" tooltip-effect="dark" :style="{ width: '100%' }">
        <el-table-column label="门店名称" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.storeName || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="门店code" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.storeCode || '--' }}</template>
        </el-table-column>
        <el-table-column prop="" label="门店分组" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.storeGroup }}
          </template>
        </el-table-column>
      </el-table>
      <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
        <dm-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </dm-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toCancel">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
  props: {
    editRow: {
      type: Object,
      default() {
        return {};
      }
    },
    categoryId: {
      type: Object,
      default() {
        return '';
      }
    }
  },
  components: {
    limitInput
  },
  data() {
    return {
      editPersion: localStorage.getItem('userInfos') && JSON.parse(localStorage.getItem('userInfos')).staffDTO ? JSON.parse(localStorage.getItem('userInfos')).staffDTO.staffName : '',
      wxEnterpriseRelatedId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      loading: false,
      dialogVisible: true,
      tableData: [],
      searchInput: '',
       // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    toCancel() {
      const that = this;
      that.$emit('closeTemplate');
      that.$refs['ruleForm'].resetFields();
    },
    handleClose(done) {
      const that = this;
      that.$emit('closeTemplate');
      that.$refs['ruleForm'].resetFields();
    },
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        }
      });
    }, 300),
    postSave() {
      const that = this;
      const data = {
        templateId: that.ruleForm.templateId,
        templateName: that.ruleForm.templateName,
        memberTagGroupIds: that.ruleForm.memberTagGroupIds.join(','),
        editPerson: that.editPerson
      };
      postRequest(that.ruleForm.templateId ? '/haoban-app-customer-web/memberGroup/save-group-template' : '/haoban-app-customer-web/memberGroup/save-group-template', data)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('操作成功', 'success');
            that.$refs['ruleForm'].resetFields();
            that.$emit('submitTemplate');
          } else {
            errMsg.errorMsg(resData);
          }
        })
        .catch(error => {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
     /**
     * 获取列表数据
     */
    getTableList(val) {
      const that = this;
      that.loading = true;
      let storeGroups = [];
      let filterStoreIds = [];
      let clerkIds = [];
      that.conditionObj.storeGroup.forEach(ele => {
        if (ele.type == 1) {
          clerkIds.push(ele.employeeClerkId);
        }
        if (ele.type == 2) {
          storeGroups.push(ele.groupId);
        }
        if (ele.type == 3) {
          filterStoreIds.push(ele.storeId);
        }
      });
      if (!that.conditionObj.dateRange) {
        that.conditionObj.dateRange = [];
      }
      let para = {
        search: that.searchInput || '', // 搜索字段
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize, // 一页显示个数
        gicEnterpriseId: that.brandId
        // taskType: 1 //0不良评价，1话务任务
      };
      postRequest('/haoban-app-customer-web/memberGroup/search-store', para)
        .then(res => {
          let resData = res.data;
          that.loading = false;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.pageInfo.total;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    editRow(newData) {
      const that = this;
      if (Object.keys(newData).length) {
        that.ruleForm = JSON.parse(JSON.stringify(newData));
      }
    }
  },
  mounted() {
    const that = this;
    if (Object.keys(that.editRow).length) {
      that.ruleForm = JSON.parse(JSON.stringify(that.editRow));
    }
  }
};
</script>
<style lang="less" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.p-l-18 {
  padding-left: 18px;
}
.material-content {
  position: relative;
  .material-body {
    /*  resize: none;
    width: 440px;
    height: 273px;
    border-radius: 2px;
    border: 1px solid rgba(196, 198, 207, 1); */
    .el-textarea {
      /deep/ .el-textarea__inner {
        height: 273px;
      }
    }
  }
  .emoji-img {
    position: absolute;
    left: 10px;
    bottom: 10px;
  }
}
.el-textarea {
  /deep/ .el-textarea__inner {
    height: 273px;
  }
}
</style>
