<template>
  <basic-container>
    <avue-tabs :option="tabOption" @change="(row)=>tabChange(row.prop)">
    </avue-tabs>
    <avue-crud v-if="['ACTIVE_SETTING'].indexOf(key)!==-1"
               :option="crudOption"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @expand-change="expandChanges"
               @on-load="onLoad">
      <template slot="expand" slot-scope="{row}">
        <!-- 活动设置 -->
        <avue-form v-model="form"
                   :option="formOption"
                   @submit="(row2,loading2)=>{
                     updateSetting(row2,loading2,row.id)
                   }">
          <template slot="functionItemOption" slot-scope="{index}">
            <el-button-group>
              <p>
                <el-button type="primary" size="mini" @click="formDataOption('functionItemList',index,'up')">上移
                </el-button>
              </p>
              <p>
                <el-button type="danger" size="mini" @click="formDataOption('functionItemList',index,'down')">下移
                </el-button>
              </p>
            </el-button-group>
          </template>
          <template slot="indexImageOption" slot-scope="{index}">
            <el-button-group>
              <p>
                <el-button type="primary" size="mini" @click="formDataOption('indexImageList',index,'up')">上移
                </el-button>
              </p>
              <p>
                <el-button type="danger" size="mini" @click="formDataOption('indexImageList',index,'down')">下移
                </el-button>
              </p>
            </el-button-group>
          </template>
        </avue-form>
      </template>
    </avue-crud>
    <avue-form v-if="['COMMON_SETTING','POINT_GOODS_SETTING'].indexOf(key)!==-1"
               ref="form"
               v-model="form"
               :option="formOption"
               @submit="updateSetting">
    </avue-form>
  </basic-container>
</template>

<script>
import {getPlatformSetting, updatePlatformValue} from "@/api/sing_desk/platformsetting";
import {getList} from "@/api/sing_active/activerecord";

export default {
  data() {
    return {
      form: {},
      query: {},
      data: [],
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      key: "",
      tabOption: {
        column: [{
          icon: 'iconfont icon-jifen',
          label: '公共设置',
          prop: 'COMMON_SETTING',
        }, {
          icon: 'iconfont icon-jifen',
          label: '积分商场设置',
          prop: 'POINT_GOODS_SETTING',
        }, {
          icon: 'iconfont iconicon_task',
          label: '活动设置',
          prop: 'ACTIVE_SETTING',
        }]
      },
      formOption: {
        submitText: '保存',
        labelWidth: 120,
        emptyBtn: false,
        column: [],
        group: []
      },
      crudOption: {
        labelWidth: 120,
        rowKey: 'id',
        expandRowKeys: [],
        expand: true,
        emptyBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        menu: false,
        column: [],
      },
    }
  },
  created() {
    this.tabChange(this.tabOption.column[0].prop);
  },
  methods: {
    /**
     * 获取平台设置
     */
    getSetting(key, activeId) {
      this.form = {};
      getPlatformSetting(key, activeId).then(res => {
        if (res.data.data !== null) {
          this.form = JSON.parse(res.data.data);
          this.formOption.group.forEach(ele=>{
            ele.column.forEach(ele2=>{
              this.form[ele2.prop] = this.form[ele.prop][ele2.prop.substring(ele2.prop.indexOf("-")+1)];
            });
          });
        }
      });
    },
    /**
     * 更新平台设置
     */
    updateSetting(row, loading, activeId) {
      const data = {};
      //基础内容
      this.formOption.column.forEach(ele => {
        data[ele.prop] = this.form[ele.prop];
      });
      //分组内容
      this.formOption.group.forEach(ele=>{
        data[ele.prop] = {};
        ele.column.forEach(ele2 => {
          data[ele.prop][ele2.prop.substring(ele2.prop.indexOf("-")+1)] = this.form[ele2.prop];
        });
      })
      updatePlatformValue({
        key: this.key,
        activeId: activeId,
        value: JSON.stringify(data)
      }).then(() => {
        this.$message.success("修改成功");
      }).finally(() => {
        loading();
      });
    },
    /**
     * 选项卡变化
     */
    tabChange(key) {
      this.key = key;
      this.formOption.group = [];
      this.formOption.column = [];
      //活动页面
      if (this.key === "COMMON_SETTING") {
        this.formOption.column = [
          {
            label: "默认活动",
            prop: "defaultActiveId",
            type: "select",
            dicUrl: "/api/sing_active/activerecord/list?current=1&size=999",
            props: {
              label: 'title',
              value: 'id',
              desc: 'id',
              res: "data.records"
            },
            span: 12,
            rules: [{
              required: true,
              message: "请选择默认活动",
              trigger: "blur"
            }],
          },
        ];
      } else if (this.key === "POINT_GOODS_SETTING") {
        this.formOption.column = [
          {
            label: "主页轮播图",
            prop: "indexImageList",
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              column: [{
                label: '轮播图',
                prop: "url",
                dataType: "string",
                type: 'upload',
                propsHttp: {
                  res: 'data',
                  url: 'link'
                },
                listType: 'picture-img',
                tip: '只能上传jpg/png文件，且不超过500kb',
                action: '/api/blade-resource/oss/endpoint/put-file',
                rules: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur"
                }]
              }, {
                label: '类型',
                prop: "type",
                rules: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur"
                }],
              }, {
                label: '地址',
                prop: "path",
                rules: [{
                  required: true,
                  message: "请输入地址",
                  trigger: "blur"
                }],
              }]
            }
          }
        ]
      } else if (this.key === "ACTIVE_SETTING") {
        this.crudOption.column = [
          {
            label: "活动标题",
            prop: "title",
            span: 24,
            rules: [{
              required: true,
              message: "请输入活动标题",
              trigger: "blur"
            }],
          }
        ];
        this.formOption.column = [
          {
            label: "主页标题",
            prop: "indexTitle",
            span: 24,
            rules: [{
              required: true,
              message: "请输入主页标题",
              trigger: "blur"
            }],
          },
          {
            label: "移动授权标题",
            prop: "cmccAuthTitle",
            span: 24,
            rules: [{
              required: true,
              message: "请输入移动授权标题",
              trigger: "blur"
            }],
          },
          {
            label: "移动授权内容",
            prop: "cmccAuthContent",
            component: 'AvueUeditor',
            options: {
              action: '/api/blade-resource/oss/endpoint/put-file',
              propsHttp: {
                res: 'data',
                url: 'link'
              },
            },
            hide: true,
            minRows: 6,
            span: 24,
            rules: [{
              required: true,
              message: "请输入活动内容",
              trigger: "blur"
            }]
          },
          {
            label: "功能按钮",
            prop: "functionItemList",
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              column: [{
                label: '图标',
                prop: "icon",
                dataType: "string",
                type: 'upload',
                propsHttp: {
                  res: 'data',
                  url: 'link'
                },
                listType: 'picture-img',
                tip: '只能上传jpg/png文件，且不超过500kb',
                action: '/api/blade-resource/oss/endpoint/put-file',
                rules: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur"
                }]
              }, {
                label: '名称',
                prop: "name",
                rules: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur"
                }],
              }, {
                label: '地址',
                prop: "path",
                rules: [{
                  required: true,
                  message: "请输入地址",
                  trigger: "blur"
                }],
              }, {
                label: '是否展示',
                type: "switch",
                prop: "show",
                value: 1,
                dicData: [{
                  label: "隐藏",
                  value: 0,
                }, {
                  label: "显示",
                  value: 1
                }],
                rules: [{
                  required: true,
                  message: "请输入是否展示",
                  trigger: "blur"
                }],
              }, {
                label: '操作',
                prop: "functionItemOption",
                rules: [{
                  required: false,
                  message: "请输入是否展示",
                  trigger: "blur"
                }],
              }]
            }
          },
          {
            label: "主页轮播图",
            prop: "indexImageList",
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              column: [{
                label: '轮播图',
                prop: "url",
                dataType: "string",
                type: 'upload',
                propsHttp: {
                  res: 'data',
                  url: 'link'
                },
                listType: 'picture-img',
                tip: '只能上传jpg/png文件，且不超过500kb',
                action: '/api/blade-resource/oss/endpoint/put-file',
                rules: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur"
                }]
              }, {
                label: '类型',
                prop: "type",
                rules: [{
                  required: true,
                  message: "请输入类型",
                  trigger: "blur"
                }],
              }, {
                label: '地址',
                prop: "path",
                rules: [{
                  required: true,
                  message: "请输入地址",
                  trigger: "blur"
                }],
              }, {
                label: '操作',
                prop: "indexImageOption",
                rules: [{
                  required: false,
                  message: "请输入是否展示",
                  trigger: "blur"
                }],
              }]
            }
          },
          {
            label: "热力值/票",
            prop: "voteAndHeatRate",
            type: "number",
            span: 12,
            rules: [{
              required: true,
              message: "请输入热力值/票",
              trigger: "blur"
            }],
          },
          {
            label: "普法积分值/票",
            prop: "voteAndPointRate",
            type: "number",
            span: 12,
            rules: [{
              required: true,
              message: "请输入普法积分值/票",
              trigger: "blur"
            }],
          },
          {
            label: "排行显示总数",
            prop: "rankTotal",
            type: "number",
            span: 12,
            rules: [{
              required: true,
              message: "请输入排行显示总数",
              trigger: "blur"
            }],
          },
          {
            label: "我的作品背景图",
            prop: "myProductImage",
            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: "helpExplainList",
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              column: [{
                label: '说明',
                type: "textarea",
                prop: "helpExplain",
                span: 24,
                minRows: 6,
                rules: [{
                  required: true,
                  message: "请输入说明",
                  trigger: "blur"
                }],
              }]
            }
          },
        ];
        this.formOption.group = [{
          icon:'iconfont iconicon_share',
          label: '分享设置',
          collapse: true,
          prop: 'shareParam',
          column: [{
            label: '分享标题',
            prop: "shareParam-title",
            rules: [{
              required: false,
              message: '请输入分享设置',
              trigger: 'blur'
            }],
          }, {
            label: '分享描述',
            prop: 'shareParam-desc',
            type: "textarea",
            span: 24,
            minRows: 6,
            rules: [{
              required: false,
              message: '请输入分享描述',
              trigger: 'blur'
            }],
          }, {
            label: '分享图片',
            prop: 'shareParam-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: false,
              message: '请输入分享图片',
              trigger: 'blur'
            }],
          }]
        },{
          icon:'iconfont iconicon_share',
          label: '拉票设置',
          collapse: true,
          prop: 'pullVoteParam',
          column: [{
            label: '标题',
            prop: "pullVoteParam-title",
            rules: [{
              required: false,
              message: '请输入分享设置',
              trigger: 'blur'
            }],
          }, {
            label: '主办方',
            prop: 'pullVoteParam-sponsor',
            rules: [{
              required: false,
              message: '请输入分享描述',
              trigger: 'blur'
            }],
          }]
        },{
          icon:'iconfont iconicon_setting',
          label: '主题颜色配置',
          collapse: true,
          prop: 'theme',
          column: [{
            label: '图标',
            prop: "theme-enable",
            type: "switch",
            value: false,
            control:(value)=>{
              if(value){
                return {
                  "theme-baseColor":{
                    display: true
                  },
                  "theme-shopBg":{
                    display: true
                  },
                  "theme-ruleBg":{
                    display: true
                  },
                  "theme-rankBgImg":{
                    display: true
                  },
                };
              }
              return {
                "theme-baseColor":{
                  display: false
                },
                "theme-shopBg":{
                  display: false
                },
                "theme-ruleBg":{
                  display: false
                },
                "theme-rankBgImg":{
                  display: false
                },
              };
            },
            dicData:[
              {
                label: "关闭",
                value: false
              },
              {
                label: "开启",
                value: true
              }
            ],
            rules: [{
              required: true,
              message: '请输入图标',
              trigger: 'blur'
            }],
          }, {
            label: '基础颜色',
            prop: 'theme-baseColor',
            // type: "color",
            colorFormat: "hex",
            rules: [{
              required: true,
              message: '请输入基础颜色',
              trigger: 'blur'
            }],
          }, {
            label: '商城背景颜色',
            prop: 'theme-shopBg',
            // type: "color",
            colorFormat: "hex",
            rules: [{
              required: true,
              message: '请输入商城背景颜色',
              trigger: 'blur'
            }],
          }, {
            label: '规则背景颜色',
            prop: 'theme-ruleBg',
            // type: "color",
            colorFormat: "hex",
            rules: [{
              required: true,
              message: '请输入规则背景颜色',
              trigger: 'blur'
            }],
          }, {
            label: '排行背景',
            prop: 'theme-rankBgImg',
            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'
            }],
          }]
        }]
        return;
      }
      this.getSetting(this.key);
    },
    expandChanges(row, expendList) {
      if (expendList.length) {
        this.crudOption.expandRowKeys = [];
        if (row) {
          this.crudOption.expandRowKeys.push(row.id)
          this.getSetting(this.key, row.id);
        }
      } else {
        this.crudOption.expandRowKeys = []
      }
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    formDataOption(name, index, type) {
      let array = [];
      Object.assign(array, this.form[name]);
      switch (type) {
        case "up":
          if (index != 0) {
            const temp = array[index];
            array[index] = array[index - 1];
            array[index - 1] = temp;
          } else {
            this.$message.warning("你已经在最顶端");
          }
          break;
        case "down":
          if (index != (array.length - 1)) {
            const temp = array[index];
            array[index] = array[index + 1];
            array[index + 1] = temp;
          } else {
            this.$message.warning("你已经在最底端");
          }
          break;
        default:
          break;
      }
      this.form[name] = array;
    }
  }
};
</script>

<style>
</style>
