<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-02-19 12:20:38
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-15 09:56:28
 -->
<template>
  <div class="custom-dialog-wrap">
    <el-dialog title="门店图片变更" :visible.sync="customDialog" width="600px" :before-close="handleCardClose">
      <div class="dialog-content">
        <el-row>
          <el-col :span="11">
            <div class="grid-content bg-purple-dark">
              变更前
            </div>
            <div class="data-body">
              <div class="data-body-content flex flex-column">
                <template v-for="(item, index) in leftData">
                  <img :src="item" alt="" :key="'img' + index" />
                </template>
              </div>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple-dark">
              变更后
            </div>
            <div class="data-body">
              <div class="data-body-content flex flex-column">
                <template v-for="(item, index) in rightData">
                  <img :src="item" alt="" :key="'img0' + index" />
                </template>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'StoreChangeDialog',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    storeChangeData: {
      type: [ Object, Array ]
    }
  },
  data() {
    return {
      repProjectName: 'haoban-web', // 项目名
      customDialog: this.value, // 弹框显示
      leftData: [],
      rightData: []
    };
  },
  /* 接收数据 */
  mounted() {
    const that = this;
    that.leftData = that.storeChangeData.beforeContent;
    that.rightData = that.storeChangeData.afterContent;
  },
  methods: {
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    handleCardClose() {
      const that = this;
      that.customCancel();
    },
    customCancel() {
      const that = this;
      that.customDialog = false;
      that.$emit('input', that.customDialog);
    }
  },
  watch: {
    value: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    storeChangeData: function(newData, oldData) {
      const that = this;
      that.leftData = newData.beforeContent;
      that.rightData = newData.afterContent;
    }
  }
};
</script>

<style lang="less" scoped>
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-column {
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}

.flex-space-between {
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
.dialog-content {
  /*height: 484px;*/
  padding-bottom: 20px;

  .grid-content {
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background: rgba(245, 247, 250, 1);
    font-size: 16px;
    color: #303133;
    /*border: 1px solid rgba(235,238,245,1);
    border-radius: 4px;*/
  }

  .el-row {
    width: 100%;
    font-size: 0;
  }
  .el-col-11 {
    width: 272px;
    border: 1px solid rgba(235, 238, 245, 1);
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    & + .el-col-11 {
      margin-left: 14px;
    }
  }

  .data-body {
    height: 442px;
    max-height: 442px;
    padding: 11px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    .data-body-content {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
    img {
      width: 100%;
      & + img {
        margin-top: 10px;
      }
    }
  }
}
</style>
