<template>
  <basic-container>
    <el-row>
      <el-col :span="24">
        <el-alert
          title="提示：双击主选项选中内容，通过勾选副选项的内容，点击保存。"
          type="warning"
          effect="dark"
          :closable="true">
        </el-alert>
        <el-divider></el-divider>
        <el-alert
          title="提示：副选项选择内容之后，切换分页之前或选择其他主选项必须点击保存，否则数据将不会有任何修改"
          type="warning"
          effect="dark"
          :closable="true">
        </el-alert>
        <el-divider></el-divider>
        <el-button size="small" round @click="toggleSelectTab">切换主副选项</el-button>
        <el-button type="primary" size="small" @click="updateActiveAndPointGoods" style="float: right" round>保存修改</el-button>
      </el-col>
      <!-- CRUD表单 -->
      <el-col :span="12" :style="{float: type===activeRecord.type?'left':'right'}">
        <h3>{{type===activeRecord.type?'主选项':'副选项'}}</h3>
        <el-divider></el-divider>
        <avue-crud :option="activeRecord.option"
                   :table-loading="activeRecord.loading"
                   :data="activeRecord.data"
                   :page.sync="activeRecord.page"
                   v-model="activeRecord.form"
                   ref="activeRecordCrud"
                   @row-click="(row, event)=>{
                     selectActiveOrGoods(row,event,activeRecord.type);
                   }"
                   @search-change="activeRecordSearchChange"
                   @selection-change="activeRecordSelectionChange"
                   @search-reset="activeRecordSearchReset"
                   @current-change="activeRecordCurrentChange"
                   @size-change="activeRecordSizeChange"
                   @refresh-change="activeRecordRefreshChange"
                   @on-load="activeRecordOnLoad">
          <template slot="menuLeft">
          </template>
        </avue-crud>
      </el-col>
      <el-col :span="12">
        <h3>{{type===pointGoods.type?'主选项':'副选项'}}</h3>
        <el-divider></el-divider>
        <avue-crud :option="pointGoods.option"
                   :table-loading="pointGoods.loading"
                   :data="pointGoods.data"
                   :page.sync="pointGoods.page"
                   v-model="pointGoods.form"
                   ref="pointGoodsCrud"
                   @row-click="(row, event)=>{
                     selectActiveOrGoods(row,event,pointGoods.type);
                   }"
                   @search-change="pointGoodsSearchChange"
                   @search-reset="pointGoodsSearchReset"
                   @selection-change="pointGoodsSelectionChange"
                   @current-change="pointGoodsCurrentChange"
                   @size-change="pointGoodsSizeChange"
                   @refresh-change="pointGoodsRefreshChange"
                   @on-load="pointGoodsOnLoad">
          <template slot="menuLeft">
          </template>
        </avue-crud>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import {getList, updateActiveAndPointGoods} from "@/api/sing_goods/activeidandgoodsid";
import {getList as activeRecordGetList} from "@/api/sing_active/activerecord";
import {getList as pointGoodsGetList} from "@/api/sing_goods/pointgoods";
import {mapGetters} from "vuex";

export default {
    data() {
      return {
        type: "ActiveRecord",
        operationId: null,
        isChange: false,
        selectionList:[],
        activeRecord:{
          type: "ActiveRecord",
          form: {},
          query: {},
          loading: true,
          page: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },
          selectionList: [],
          option: {
            highlightCurrentRow: true,
            height:'auto',
            calcHeight: 30,
            tip: false,
            searchShow: true,
            searchMenuSpan: 6,
            border: true,
            index: true,
            viewBtn: false,
            addBtn: false,
            delBtn: false,
            editBtn: false,
            menu: false,
            selection: false,
            dialogClickModal: false,
            column: [
              {
                label: "活动标题",
                prop: "title",
                search: true,
                rules: [{
                  required: true,
                  message: "请输入",
                  trigger: "blur"
                }]
              },
              {
                label: "活动图片",
                prop: "imgUrl",
                type: 'upload',
                listType: 'picture-img',
                dataType: 'string',
                span: 12,
                propsHttp: {
                  res: 'data',
                  url: 'link'
                },
                action: '/api/blade-resource/oss/endpoint/put-file',
                rules: [{
                  required: true,
                  message: "请输入商品图片地址",
                  trigger: "blur"
                }]
              },
            ]
          },
          data: []
        },
        pointGoods:{
          type: "PointGoods",
          form: {},
          query: {},
          loading: true,
          page: {
            pageSize: 10,
            currentPage: 1,
            total: 0
          },
          selectionList: [],
          option: {
            highlightCurrentRow: false,
            height:'auto',
            calcHeight: 30,
            tip: false,
            searchShow: true,
            searchMenuSpan: 6,
            border: true,
            index: true,
            viewBtn: false,
            addBtn: false,
            delBtn: false,
            editBtn: false,
            menu: false,
            selection: true,
            dialogClickModal: false,
            column: [
              {
                label: "商品名称",
                prop: "name",
                search: true,
                rules: [{
                  required: true,
                  message: "请输入",
                  trigger: "blur"
                }]
              },
              {
                label: "商品图片",
                prop: "imgUrl",
                type: 'upload',
                listType: 'picture-img',
                dataType: 'string',
                span: 12,
                propsHttp: {
                  res: 'data',
                  url: 'link'
                },
                action: '/api/blade-resource/oss/endpoint/put-file',
                rules: [{
                  required: true,
                  message: "请输入商品图片地址",
                  trigger: "blur"
                }]
              },
              {
                label: "兑换所需积分",
                prop: "point",
                rules: [{
                  required: true,
                  message: "请输入兑换所需积分",
                  trigger: "blur"
                }]
              }
            ]
          },
          data: []
        }
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.activeidandgoodsid_add, false),
          viewBtn: this.vaildData(this.permission.activeidandgoodsid_view, false),
          delBtn: this.vaildData(this.permission.activeidandgoodsid_delete, false),
          editBtn: this.vaildData(this.permission.activeidandgoodsid_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      /**
       * 切换主副
       */
      toggleSelectTab(){
        this.activeRecordSelectionClear();
        this.pointGoodsSelectionClear();
        this.$refs.pointGoodsCrud.setCurrentRow();
        this.$refs.activeRecordCrud.setCurrentRow();
        this.operationId = null;
        this.isChange = false;
        this.selectionList = [];
        if(this.type===this.activeRecord.type){
          this.type = this.pointGoods.type;
          this.activeRecord.option.highlightCurrentRow = false;
          this.activeRecord.option.selection = true;
          this.pointGoods.option.highlightCurrentRow = true;
          this.pointGoods.option.selection = false;
        }else{
          this.type = this.activeRecord.type;
          this.activeRecord.option.highlightCurrentRow = true;
          this.activeRecord.option.selection = false;
          this.pointGoods.option.highlightCurrentRow = false;
          this.pointGoods.option.selection = true;
        }
      },
      /**
       * 选择活动编辑商品
       * @param row
       * @param event
       */
      selectActiveOrGoods(row, event,type){
        if(type===this.type){
          //清空选项
          this.activeRecordSelectionClear();
          this.pointGoodsSelectionClear();
          this.selectionList = [];
          this.operationId = row.id;
          this.isChange = false;
          const params = {};
          if(type===this.activeRecord.type){
            params.activeId = row.id;
            params.ids = this.pointGoods.data.map(ele=>{
              return ele.id;
            }).join(",");
          }else{
            params.goodsId = row.id;
            params.ids = this.activeRecord.data.map(ele=>{
              return ele.id;
            }).join(",");
          }
          //获取关联集合
          getList(1,9999,params).then(res=>{
            this.selectionList = res.data.data.records.map(ele=>{
              if(type === this.activeRecord.type){
                return ele.goodsId;
              }else{
                return ele.activeId;
              }
            });
            //设置选中
            if(this.type===this.activeRecord.type){
              this.$refs.pointGoodsCrud.toggleSelection(this.pointGoods.data.filter(ele=>{
                return this.selectionList.indexOf(ele.id)!==-1;
              }),true);
            }else{
              this.$refs.activeRecordCrud.toggleSelection(this.activeRecord.data.filter(ele=>{
                return this.selectionList.indexOf(ele.id)!==-1;
              }),true);
            }
          });
        }
      },
      /**
       * 更新活动与积分商品的关系
       * @param id
       * @param data
       * @param type
       */
      updateActiveAndPointGoods(){
        if(this.operationId!==null){
          const params = {
            id: this.operationId,
            ids: this.selectionList.join(","),
            type: this.type,
          };
          if(this.type===this.activeRecord.type){
            params.delIds = this.pointGoods.data.map(ele=>{
              return ele.id;
            }).join(",");
          }else{
            params.delIds = this.activeRecord.data.map(ele=>{
              return ele.id;
            }).join(",");
          }
          updateActiveAndPointGoods(params).then(()=>{
            this.$message.success("保存成功!");
          });
        }else{
          this.$message.warning("请先双击选择一个选项");
        }
      },
      //******************************以下是活动接口*******************************
      activeRecordSearchReset() {
        this.activeRecord.query = {};
        this.activeRecordOnLoad(this.activeRecord.page);
      },
      activeRecordSearchChange(params, done) {
        this.activeRecord.query = params;
        this.activeRecord.page.currentPage = 1;
        this.activeRecordOnLoad(this.activeRecord.page, params);
        done();
      },
      activeRecordSelectionChange(list) {
        this.activeRecord.selectionList = list;
        if(this.type===this.pointGoods.type){
          //添加选中的
          this.selectionList = list.map(ele=>{
            return ele.id;
          });
          this.isChange = true;
        }
      },
      activeRecordSelectionClear() {
        this.activeRecord.selectionList = [];
        this.$refs.activeRecordCrud.toggleSelection();
      },
      activeRecordCurrentChange(currentPage){
        this.activeRecord.page.currentPage = currentPage;
      },
      activeRecordSizeChange(pageSize){
        this.activeRecord.page.pageSize = pageSize;
      },
      activeRecordRefreshChange() {
        this.activeRecordOnLoad(this.activeRecord.page, this.activeRecord.query);
      },
      activeRecordOnLoad(page, params = {}) {
        this.activeRecord.loading = true;
        activeRecordGetList(page.currentPage, page.pageSize, Object.assign(params, this.activeRecord.query)).then(res => {
          const data = res.data.data;
          this.activeRecord.page.total = data.total;
          this.activeRecord.data = data.records;
          this.activeRecord.loading = false;
          if(this.operationId!=null){
            this.selectActiveOrGoods({id:this.operationId},null, this.pointGoods.type);
          }
        });
      },
      //******************************以下是积分商品接口*******************************
      pointGoodsSearchReset() {
        this.pointGoods.query = {};
        this.pointGoodsOnLoad(this.pointGoods.page);
      },
      pointGoodsSearchChange(params, done) {
        this.pointGoods.query = params;
        this.pointGoods.page.currentPage = 1;
        this.pointGoodsOnLoad(this.pointGoods.page, params);
        done();
      },
      pointGoodsSelectionChange(list) {
        this.pointGoods.selectionList = list;
        if(this.type===this.activeRecord.type){
          //添加选中的
          this.selectionList = list.map(ele=>{
            return ele.id;
          });
          this.isChange = true;
        }
      },
      pointGoodsSelectionClear() {
        this.pointGoods.selectionList = [];
        this.$refs.pointGoodsCrud.toggleSelection();
      },
      pointGoodsCurrentChange(currentPage){
        this.pointGoods.page.currentPage = currentPage;
      },
      pointGoodsSizeChange(pageSize){
        this.pointGoods.page.pageSize = pageSize;
      },
      pointGoodsRefreshChange() {
        this.pointGoodsOnLoad(this.pointGoods.page, this.pointGoods.query);
      },
      pointGoodsOnLoad(page, params = {}) {
        this.pointGoods.loading = true;
        pointGoodsGetList(page.currentPage, page.pageSize, Object.assign(params, this.pointGoods.query)).then(res => {
          const data = res.data.data;
          this.pointGoods.page.total = data.total;
          this.pointGoods.data = data.records;
          this.pointGoods.loading = false;
          if(this.operationId!=null){
            this.selectActiveOrGoods({id:this.operationId},null, this.activeRecord.type);
          }
        });
      }
    }
  };
</script>

<style>
</style>
