<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-container-lt">
        <el-form :inline="true" label-position="left" :model="listQuery">
          <el-form-item>
            <el-input clearable v-model="listQuery.shopName" placeholder="店铺名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="listQuery.type" clearable filterable placeholder="平台类型">
              <el-option
                v-for="item in typesOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="getList()">搜索</el-button >
            <el-button type="primary" @click="add()">新增</el-button >
        </el-form>
      </div>
    </div>
    <div class="table-container">
      <el-table  style="width: 100%" v-loading="listLoading" :key="tableKey" :data="list" row-key="id"
        stripe border fit highlight-current-row>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column label="店铺名" min-width="100" align="center" prop="shopName" />
        <el-table-column label="封面图" min-width="130" align="center">
          <template slot-scope="scope">
            <el-image 
              style="width: 100px;"
              :src="scope.row.coverPicture" 
              :preview-src-list="[scope.row.coverPicture]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="封面文字" min-width="100" align="center" prop="coverText" />
        <el-table-column label="平台类型" min-width="130" align="center">
          <template slot-scope="scope">
            {{  scope.row.type == 0 ? '品牌(国内)' : '海外' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="success" size="mini" icon="el-icon-edit" circle @click="handleEdit(scope.row)" />
            </el-tooltip>
            <el-tooltip class="more" effect="dark" content="删除" placement="top">
              <el-button type="danger" size="mini" icon="el-icon-delete-solid" circle
                @click="handleDelete(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <swPage v-if="total > 0" key="2" :listQuery="listQuery" :total="total" pos="btmRight" @retPage="retPage" />
    <VideoCoverFormModal ref="VideoCoverFormModal" @confirm="retPage"></VideoCoverFormModal>
  </div>
</template>

<script>
import waves from "@/directive/waves";
import swPage from "@/views/common/swPage";
import { auditStatus } from "@/constants/index";
import { getValueByKey } from "@/utils/index";
import { shopConfigInfoList, deteleShopConfigInfo } from "@/api/videoCoverManager";
import { mapGetters } from "vuex";
import permission from "@/directive/permission";
import VideoCoverFormModal from "./components/VideoCoverFormModal";


export default {
  name: "videoCoverManager",
  directives: {
    waves,
    permission
  },
  components: {
    swPage,
    VideoCoverFormModal
  },
  computed: {
    
  },
  data() {
    return {
      auditStatus,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      downloadingRows: {},
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        shopName: null,
        type: null //平台类型 0:品牌 1:海外
      }
    };
  },
  //页面创建的时候执行
  created() {
    this.getList();
  },
  computed: {
    typesOptions() {
      return [
        {value: '0', label: '品牌（国内）'},
        {value: '1', label: '海外'}
      ]
    }
  },
  methods: {
    getValueByKey,
    getList() {
      this.listLoading = true;
      const params = {}
      for (const key in this.listQuery) {
        const value = this.listQuery[key]
        if (value !== null && value !== '' && value !== undefined) {
          params[key] = value
        }
      }
      shopConfigInfoList(params).then(res => {
        if (200 == res.code) {
          this.total = res.data.total;
          this.list = res.data.rows;
        }
        this.listLoading = false;
      });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleEdit(row) {
      this.$refs.VideoCoverFormModal.show(row, 'edit');
    },
    add() {
      this.$refs.VideoCoverFormModal.show(null, 'add');
    },
    handleDelete(row) {
      //删除
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        const { id } = row;
        deteleShopConfigInfo([id]).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 3000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        });
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/layout.scss";

.button {
  .el-button {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
