<!--
  <select-card-template :selectTemp="selectTemp" @returnData="returnData"  @closeTemp="closeTemp"></select-card-template>
  import selectCardTemplate from '@/components/app/protectCard/select-card-template.vue';
 -->
<template>
  <el-dialog title="选择模板" :visible.sync="dialogVisible" width="700px" :before-close="handleClose" @open="initData">
    <div class="">
      <el-table class="select-table" ref="multipleTable" height="450" :data="tableData" tooltip-effect="dark" :style="{ width: '100%', minHeight: tableH }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="卡券模板名称" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.templateName }}</template>
        </el-table-column>
        <el-table-column prop="" label="卡券类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.cardType == 0">抵金券</span>
            <span v-if="scope.row.cardType == 1">折扣券</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="提交人" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.commitName }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import setDepartment from '@/components/company/set-department.vue';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
// import { _debounce } from '@/common/js/public';
export default {
  name: 'select-card-template',
  props: {
    cardTempShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    selectTemp: {
      type: [Object, Array],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',

      dialogVisible: false,
      // 分页参数
      currentPage: 1,
      pageSize: 20,
      total: 0,
      tableData: [],
      multipleSelection: []
    };
  },
  computed: {},
  methods: {
    /**
     *  选择模板
     */
    handleSelectionChange(val) {
      const that = this;
      that.multipleSelection = val;
    },
    handleClose() {
      const that = this;
      that.$emit('closeTemp');
      that.$refs.multipleTable.clearSelection();
      const arr = that.selectTemp.map(ele => ele.templateId);
      that.$nextTick(() => {
        that.tableData.forEach(ele => {
          if (arr.includes(ele.templateId)) {
            that.$refs.multipleTable.toggleRowSelection(ele, true);
          }
        });
      });
    },
    submitForm() {
      const that = this;
      if (!that.multipleSelection.length) {
        that.$message.error({
          duration: 1000,
          message: '请选择模板'
        });
        return false;
      }
      if (that.multipleSelection.length > 20) {
        that.$message.error({
          duration: 1000,
          message: '最多只能选择20个模板'
        });
        return false;
      }
      that.$emit('returnData', that.multipleSelection);
      that.$nextTick(() => {
        const arr = that.selectTemp.map(ele => ele.templateId);
        that.$nextTick(() => {
          that.tableData.forEach(ele => {
            if (arr.includes(ele.templateId)) {
              that.$refs.multipleTable.toggleRowSelection(ele, true);
            }
          });
        });
      });
    },
    /**
     * 路由跳转
     */
    changeRoute(path) {
      this.$router.push(path);
    },

    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * 获取列表数据
     */
    getTableList(val) {
      const that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-app-customer-web/inner/list-template', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    initData() {
      const that = this;
      const arr = that.selectTemp.map(ele => ele.templateId);
      that.$nextTick(() => {
        that.$refs.multipleTable.clearSelection();
        that.tableData.forEach(ele => {
          if (arr.includes(ele.templateId)) {
            that.multipleSelection.push(ele);
          }
        });
        that.tableData.forEach(ele => {
          if (arr.includes(ele.templateId)) {
            that.$refs.multipleTable.toggleRowSelection(ele, true);
          }
        });
      });
    }
  },
  watch: {
    cardTempShow(newData) {
      const that = this;
      that.dialogVisible = newData;
    },
    selectTemp(newData, oldData) {
      /*  const that = this;
      if (newData.length) {
        setTimeout(() => {
          that.$refs.multipleTable.clearSelection();
          const arr = that.selectTemp.map(ele => ele.templateId);
          that.tableData.forEach(ele => {
            if (arr.includes(ele.templateId)) {
              that.$refs.multipleTable.toggleRowSelection(ele);
            }
          });
        }, 500);
      } */
    }
  },
  mounted() {
    const that = this;
    that.dialogVisible = that.cardTempShow;
    // that.multipleSelection = JSON.parse(JSON.stringify(that.selectTemp));
    that.getTableList();
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: {
    navCrumb,
    setDepartment
  }
};
</script>
<style type="text/less" lang="less" scoped>
.span-dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 3px;
  &.bg-52c41a {
    background: #52c41a;
  }
  &.bg-f5222d {
    background: #f5222d;
  }
}
.bg-82C5FF {
  background: #82c5ff;
}
.color-508CEE {
  color: #508cee;
}
.color-FF585C {
  color: #ff585c;
}
.line-h-18 {
  line-height: 18px;
}
.tooltip-text {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.w-293 {
  width: 293px;
}
.w-191 {
  width: 191px;
}
.el-alert--info {
  background: rgba(240, 245, 255, 1);
  border-radius: 2px;
  border: 1px solid rgba(133, 165, 255, 1);
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  .el-alert__icon {
    font-size: 12px;
    padding-top: 3px;
  }
}
.my-customer-wrap {
  height: 100%;
}
.right-content {
  /*width: 100%;*/
  padding: 0 20px 20px 20px;
  min-height: calc(100% - 160px);
  .right-box {
    background: #fff;
    min-height: 500px;
    padding: 0px;
    .apps-content {
      .apps-content-right {
        width: 100%;
        padding: 20px;
        background: #fff;
        .overstore-body {
          background: #fff;
        }
        .daily-set-wrap {
          height: 100%;
          background: #fff;
        }
        .app-detail-wrap {
          height: 100%;
          background: #fff;
        }
        .common-set-wrap {
          height: 100%;
          background: #fff;
        }
      }
    }
  }
}
</style>
