<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-27 09:14:54
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-09 15:49:11
-->
<!--
  绑定详情-变更
  <store-auth-detail :store-range-auditId="storeRangeAuditId"  @closeLog="closeLog"></store-auth-detail>
  import storeAuthDetail from '@/components/company/store-auth-detail.vue';
 -->
<template>
  <el-dialog title="绑定详情" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="绑定门店" name="first"></el-tab-pane>
        <el-tab-pane label="共享门店" name="second"></el-tab-pane>
      </el-tabs>
     <div class="store-change-body">
       <div class="flex ">
         <div class="change-stores flex-1">
           <div class="font-14 color-303133 text-center m-b-20">变更前</div>
           <ul class="store-cell-ul bg-f5f7fa">
             <li class="text-center" v-for="(item, index) in showData.range" :key="index + 'bind'">
               <el-tag type="info">{{ item.storeGroupName || item.storeInfoName }}</el-tag>
             </li>
           </ul>
         </div>
         <div class="change-stores flex-1 m-l-10">
           <div class="font-14 color-303133 text-center m-b-20">变更后</div>
           <ul class="store-cell-ul bg-f5f7fa">
             <li class="text-center" v-for="(item, index) in showData.auditRange" :key="index + 'binded'">
               <el-tag type="info">{{ item.storeGroupName || item.storeInfoName }}</el-tag>
             </li>
           </ul>
         </div>
       </div>
     </div>
    </div>
  </el-dialog>
</template>
<script>
import fetch from '@/api/merchant-auth.js';
const { getAuditLogDetail } = fetch;
// import { _debounce } from '@/common/js/public';
export default {
  name: 'StoreAuthDetail',
  props: {
    storeRangeAuditId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      activeName: 'first',
      tableData: [],
      detailData: {
        shareStoreMode: '',
        bindStoreMode: '',
        shareRange: [],
        bindRange: [],
        auditShareRange: [],
        auditBindRange: []
      },
      showData: {
        range: [],
        auditRange: []
      }
    };
  },
  mounted() {
    const that = this;
    if (that.storeRangeAuditId) {
      that.getTableList();
    }
    document.documentElement.style.backgroundColor = '#f0f2f5';
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  methods: {
    /**
     * @description: 改变 tab
     * @author: 无尘
     */
    handleClick() {
      const that = this;
      that.showData = {
        range: that.activeName == 'first' ? that.detailData.bindRange : that.detailData.shareRange,
        auditRange: that.activeName == 'first' ? that.detailData.auditBindRange : that.detailData.auditShareRange,
      };
    },
    /**
     * @description: 关闭
     * @author: 无尘
     */
    handleClose() {
      const that = this;
      that.tableData = [];
      that.$emit('closeLog');
    },
    /**
     * @description: 路由跳转
     * @param {String} path
     * @author: 无尘
     */
    changeRoute(path) {
      this.$router.push(path);
    },
    /**
     * @description: 获取列表数据
     * @author: 无尘
     */
    getTableList() {
      const that = this;
      let para = {
        storeRangeAuditId: that.storeRangeAuditId,
      };
      getAuditLogDetail(para)
        .then(res => {
          if (!!res.result.bindRange) {
            res.result.bindRange = JSON.parse(res.result.bindRange);
          }else {
            res.result.bindRange = [];
          }
          if (!!res.result.shareRange) {
            res.result.shareRange = JSON.parse(res.result.shareRange);
          }else {
            res.result.shareRange = [];
          }
          if (!!res.result.auditBindRange) {
            res.result.auditBindRange = JSON.parse(res.result.auditBindRange);
          }else {
            res.result.auditBindRange = [];
          }
          if (!!res.result.auditShareRange) {
            res.result.auditShareRange = JSON.parse(res.result.auditShareRange);
          }else {
            res.result.auditShareRange = [];
          }
          that.detailData = res.result || [];
          that.showData = {
            range: that.activeName == 'first' ? that.detailData.bindRange : that.detailData.shareRange,
            auditRange: that.activeName == 'first' ? that.detailData.auditBindRange : that.detailData.auditShareRange,
          };
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    storeRangeAuditId(newData, oldData) {
      const that = this;
      if (newData) {
        that.getTableList();
      }
    }
  }
};
</script>
<style type="text/less" lang="less" scoped>
.line-h-18 {
  line-height: 18px;
}
.bg-f5f7fa {
  background: #f5f7fa;
}
.store-cell-ul {
  height: 289px;
  overflow-y: auto;
  li {
    margin-top: 10px;
  }
}
</style>
