<template>
  <div>
    <pages-header class="mb16" ref="pageHeader" :title="$route.meta.title"></pages-header>
    <div class="app-container">

      <el-form :model="formValidate" ref="formValidate" size="small" :inline="true" label-width="68px">
        <el-form-item>
          <el-select v-model="formValidate.status" placeholder="是否显示" clearable class="form_content_width">
            <el-option value="1" label="显示"></el-option>
            <el-option value="0" label="不显示"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="userSearchs">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" @click="groupAdd">新增</el-button>
        </el-col>
      </el-row>

      <el-table :data="tabList" ref="table" class="mt14" v-loading="loading" no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果" fit
        highlight-current-row border stripe>
        <el-table-column :label="item.title" :min-width="item.minWidth" v-for="(item, index) in columns1" :key="index">
          <template slot-scope="scope">
            <template v-if="item.key">
              <div v-if="item.type !== 'img'">
                <span>{{ scope.row[item.key] }}</span>
              </div>
              <div v-else>
                <div class="tabBox_img">
                  <image-preview :src="scope.row[item.key]" :width="60" :height="60" />
                </div>
              </div>
            </template>
            <template v-else-if="item.slot === 'status'">
              <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.status" :value="scope.row.status"
                @change="onchangeIsShow(scope.row)" size="large">
              </el-switch>
            </template>
            <template v-else-if="item.slot === 'action'" slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
              <el-button type="text" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination v-if="total" :total="total" :page.sync="formValidate.pageNum" :limit.sync="formValidate.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import editFrom from '@/components/from/from';
import {
  groupDataListApi,
  groupDataAddApi,
  groupDataEditApi,
  groupDataHeaderApi,
  groupDataSetApi,
  groupAllApi, delDataRecord
} from "@/api/system/group";
export default {
  name: 'list',
  components: { editFrom },
  data() {
    return {
      treeId: '',
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      formValidate: {
        status: '',
        pageNum: 1,
        pageSize: 10,
        gid: 0,
      },
      total: 0,
      tabList: [],
      columns1: [],
      FromData: null,
      loading: false,
      titleType: 'group',
      groupAll: [],
      theme3: 'light',
      labelSort: [],
      sortName: null,
      current: 0,
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '80px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  watch: {
    $route(to, from) {
      if (this.getUrlParam('groupId')) {
        this.getList();
        this.getListHeader();
      } else {
        this.getGroupAll();
      }
    },
  },
  mounted() {

    if (this.getUrlParam('groupId')) {
      this.getList();
      this.getListHeader();
    } else {
      this.getGroupAll();
    }
  },
  methods: {
    bindMenuItem(name, index) {
      this.current = index;
      this.formValidate.gid = name.id;
      this.getListHeader();
      this.getList();
    },
    getGroupAll() {
      groupAllApi()
        .then(async (res) => {
          this.groupAll = res.data;
          this.sortName = res.data[0].id;
          this.formValidate.gid = res.data[0].id;
          this.getListHeader();
          this.getList();
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 返回
    back() {
      this.$router.push({ path: '/system/config/system_group/index' });
    },
    getUrl(type) {
      let url = 'setting/group_data' + type;
      if (this.$route.params.id) {
        let arr = {
          setting_groupDataSign: 'setting/sign_data' + type,
          setting_groupDataOrder: 'setting/order_data' + type,
          setting_groupDataUser: 'setting/usermenu_data' + type,
          setting_groupDataPoster: 'setting/poster_data' + type,
          marketing_storeSeckillData: 'setting/seckill_data' + type,
        };
        if (arr[this.$route.name] === undefined) return url;
        return arr[this.$route.name];
      } else {
        return url;
      }
    },
    // 列表
    getList() {
      this.loading = true;
      this.formValidate.gid = this.getUrlParam('groupId') ? this.getUrlParam('groupId') : this.formValidate.gid;
      this.formValidate.status = this.formValidate.status || '';
      groupDataListApi(this.formValidate)
        .then(async (res) => {
          this.tabList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    // 表格头部
    getListHeader() {
      this.loading = true;
      let data = {
        gid: this.getUrlParam('groupId') ? this.getUrlParam('groupId') : this.formValidate.gid,
      };
      groupDataHeaderApi(data, this.getUrl('/header'))
        .then(async (res) => {
          let data = res.data;
          let header = data.header;
          let index = [];
          header.forEach(function (item, i) {
            if (item.type === 'img') {
              index.push(i);
            }
          });
          index.forEach(function (item) {
            header[item].render = (h, params) => {
              let arr = params.row[header[item].key];
              let newArr = [];
              if (arr !== undefined && arr.length) {
                arr.forEach(function (e, i) {
                  newArr.push(
                    h(
                      'div',
                      {
                        style: {
                          width: '36px',
                          height: '36px',
                          'border-radius': '4px',
                          cursor: 'pointer',
                          display: 'inline-block',
                        },
                      },
                      [
                        h('img', {
                          attrs: {
                            src: params.row[header[item].key][i],
                          },
                          style: {
                            width: '100%',
                            height: '100%',
                          },
                        }),
                      ],
                    ),
                  );
                });
              }
              return h('viewer', newArr);
            };
          });
          this.columns1 = header;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    // 表格搜索
    userSearchs() {
      this.formValidate.pageNum = 1;
      this.getList();
    },
    // 添加表单
    groupAdd() {
      this.$modalForm(
        groupDataAddApi(
          { gid: this.getUrlParam('groupId') ? this.getUrlParam('groupId') : this.formValidate.gid },
          this.getUrl('/create'),
        ),
      ).then(() => this.getList());
    },
    // 修改是否显示
    onchangeIsShow(row) {
      groupDataSetApi(`/set_status/${row.id}/${row.status}`)
        .then(async (res) => {
          this.$message.success(res.msg);
          this.getList();
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 编辑
    edit(row) {
      let data = {
        id: row.id
      };
      this.$modalForm(groupDataEditApi(data)).then(() => this.getList());
    },

    /** 删除按钮操作 */
    del(row) {
      const ids = row.id
      this.$modal
        .confirm('是否确认删除编号为"' + ids + '"的数据项？')
        .then(function () {
          return delDataRecord(ids)
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => { })
    },
  },
};
</script>

<style scoped>
::v-deep .ivu-menu-vertical .ivu-menu-item-group-title {
    display: none;
}

::v-deep .ivu-menu-vertical.ivu-menu-light:after {
    display: none;
}

.left-wrapper {
    height: 904px;
    background: #fff;
    border-right: 1px solid #dcdee2;
}

.menu-item {
    z-index: 50;
    position: relative;
    display: flex;
    justify-content: space-between;
    word-break: break-all;

    .icon-box {
        z-index: 3;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
    }

    &:hover .icon-box {
        display: block;
    }

    .right-menu {
        z-index: 10;
        position: absolute;
        right: -106px;
        top: -11px;
        width: auto;
        min-width: 121px;
    }
}

.tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
