<template>
  <div>
    <div class="system-table-search">
      <div class="flex-h">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="">
            <select-building v-model="form.buildingId"></select-building>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="form.contentType" placeholder="类型" @change="getList">
              <el-option
                      v-for="item in contentTypeOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="form.showPosition" placeholder="发布位置" @change="getList">
              <el-option
                      v-for="item in showPositionOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="form.status" placeholder="状态" @change="getList">
              <el-option
                      v-for="item in statusOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-item flex-h">
        <el-button size="mini" type="success" @click='addDynamic'>新增</el-button>
      </div>

      <div class="moreFilter"></div>
    </div>
    <el-table :data="carouselList.records || []">
      <el-table-column
        type="index">
        <template slot-scope="scope">
          <span>{{ GetIndex(scope.$index) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="主图">
        <template slot-scope="scope">
          <div class="header">
            <img :src="scope.row.image" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="showType"
        label="类型">
        <template slot-scope="scope">{{ scope.row.showType === 'banner' ? '轮播图' : scope.row.showType === 'screen' ? '开屏' : '' }}</template>
      </el-table-column>
      <el-table-column
        prop="showPosition"
        label="发布位置">
        <template slot-scope="scope">{{ scope.row.showPosition === 'index' ? '首页' : scope.row.showPosition === 'mall' ? '商城' : '' }}</template>
      </el-table-column>
      <el-table-column
        label="发布时间"
        width="180">
        <template slot-scope="scope">
          <span>{{FormatDate(scope.row.createDate)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        >
        <template slot-scope="scope">
          <span>{{scope.row.status == 1 ? '启用' : '停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
          <el-button type="text" @click="handlePulic(scope.row.contentId, 1)" size="small" v-if="scope.row.status === 0">启用</el-button>
          <el-button type="text" @click="Prohibit(scope.row.contentId, 0)" size="small" v-if="scope.row.status === 1">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      style="margin-top:10px;"
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      :pageSize="pageSize"
      :total="carouselList.total || 0"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import dayjs from 'dayjs'

const {
  mapState: mapCarouselFigureState,
  mapActions: mapCarouselFigureActions
} = createNamespacedHelpers("carouselFigure");

const {
  mapState: mapBuildingState,
  mapActions: mapBuildingActions
} = createNamespacedHelpers("building");

export default {
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      name: "",
      buildingId: "",
      buildingList: [], // 所属项目
      buildingForm: { // 所属项目条件
        pageNum: 1,
        pageSize: 100
      },
      form: {
        pageNum: 1,
        pageSize: 100,
        buildingId: '',
        showType: 'banner',
        contentType: '',
        showPosition: '',
        status: ''
      },
      contentTypeOption: [
        {
          label: '活动',
          value: 'activity'
        },
        {
          label: '项目',
          value: 'project'
        },
        {
          label: '资讯',
          value: 'news'
        }
      ],
      showPositionOption: [
        {
          label: '商城',
          value: 'mall'
        },
        {
          label: '首页',
          value: 'index'
        },
      ],
      statusOption: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '停用',
          value: 0
        }
      ]
    };
  },
  computed: {
    ...mapCarouselFigureState({
      carouselList: x => x.carouselList
    }),
    ...mapBuildingState({
      buildings: x => x.buildings
    })
  },
  methods: {
    ...mapCarouselFigureActions(["getExtendContent","handleExtendContent"]),
    ...mapBuildingActions(["getBuildings"]),
    GetIndex(inx) {
      return (this.currentPage - 1) * this.pageSize + inx + 1;
    },
    FormatDate(date) {
      if (!date || date.indexOf('0001-') > -1) return ''

      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },

    getList() {
      this.getExtendContent(this.form);
    },
    getBuildingName(id) {
      return (
        ((this.buildings.list || []).filter(x => x.buildingId === id)[0] || {})
          .buildingName || ""
      );
    },
    search() {
      this.currentPage = 1;
      this.getList();
    },
    handleEdit(row) {
      this.$router.push({ name: "editCarousel", query: { id: row.contentId } });
    },
    handlePulic(contentId, status) {
      this.$confirm("确认发布此数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.updateExtendContent(contentId, status)
      });
    },
    Prohibit(contentId, status) {
      this.$confirm("确认停用此轮播图?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.updateExtendContent(contentId, status)
      });
    },
    handleDel(contentId, status) {
      this.$confirm("确认删除此数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        if (row.status === 1) {
          this.$message.error("当前活动处于发布状态，不允许删除！");
          return false;
        }
      });
    },
    updateExtendContent(contentId, status) { // 修改轮播状态
      this.$store.dispatch('carouselFigure/updateExtendContent', { contentId: contentId, status: status }).then((res) => {
        this.getList();
      }).catch(() =>{
        console.log('carouselFigure/updateExtendContent err')
      })
    },
    addDynamic() {
      this.$router.push({ name: "editCarousel" });
    },
    getBuildList() {
      this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
        this.buildingList = res.records
      }).catch(() => {
        console.log('building/getBuildings err')
      })
    },
  },
  created() {
    this.getBuildList()
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}

.system-table-search {
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

.system-table-search li {
  margin-right: 20px;
}

.system-table-search ul {
  font-size: 0;
  white-space: nowrap;
}

.system-table-search ul > li {
  display: inline-block;
}

.flex-h {
  display: flex;
  display: -webkit-flex;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>
