<template>
  <ai-list isTabs class="appCountrysideTourism bg369">
    <template #content>
      <ai-search-bar>
        <template slot="left">
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="toAdd()" v-if="$permissions('app_appcountrysidetourism_edit')">添加
          </el-button>
          <el-button icon="el-icon-delete-solid" size="small" class="del-btn-list" @click="deleteList()" v-if="$permissions('app_appcountrysidetourism_del')" :disabled="!multipleSelection.length">删除
          </el-button>
        </template>
        <template #right>
          <el-input
            v-model="search.title"
            class="search-input"
            size="small"
            @keyup.enter.native="search.current = 1, search.title, getAppCountrysideTourism()"
            placeholder="请输入标题"
            clearable
            @clear="search.current = 1, search.title = '', getAppCountrysideTourism()"
            suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        ref="aitableex"
        :current.sync="page.current"
        @selection-change="handleSelectionChange"
        :size.sync="page.size"
        @getList="getAppCountrysideTourism">
        <el-table-column width="160" slot="options" label="操作" align="center" fixed="right">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" :title="row.status == 1 ? '取消发布' : '发布'" @click="changeStatus(row)">{{ row.status == 1 ? '取消发布' : '发布' }}</el-button>
              <el-button type="text" title="编辑" @click="viewDetail(row)" :disabled="!$permissions('app_appcountrysidetourism_edit')">编辑</el-button>
              <el-button type="text" title="删除" @click="deleteItem(row)" :disabled="!$permissions('app_appcountrysidetourism_del')">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
      <!-- <el-table ref="multipleTable" :data="tableData" style="margin-top:8px;" header-cell-class-name="table-header"
                tooltip-effect="light" row-class-name="table-row" cell-class-name="table-cell"
                @selection-change="handleSelectionChange">

        <el-table-column prop="title" label="产品名称" v-if="activeName == 'ruralProdect'" align="center"
                         show-overflow-tooltip>
          <div slot-scope="{row}">
            {{ row.title || "-" }}
          </div>
        </el-table-column>
        <el-table-column prop="status" label="发布状态" align="center">
          <div slot-scope="{row}" v-if="row.status == 1"> 已发布</div>
          <div slot-scope="{row}" v-else> 未发布</div>
        </el-table-column>
        <el-table-column slot="operate" label="操作" align="center">
          <div slot-scope="{row}">
            <span class="iconfont iconChange icon-color89B mar-r8" :title="row.status==1?'取消发布':'发布'"
                  style="cursor: pointer;" @click="changeStatus(row)"/>
            <span class="iconfont iconEdit icon-color89B mar-r8" title="编辑" style="cursor: pointer;"
                  @click="viewDetail(row)" v-if="$permissions('app_appcountrysidetourism_edit')"/>
            <span class="iconfont iconDelete icon-color89B" title="删除" style="cursor: pointer;" @click="deleteItem(row)"
                  v-if="$permissions('app_appcountrysidetourism_del')"/>
          </div>
        </el-table-column>
      </el-table> -->
    </template>
  </ai-list>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'appCountrysideTourism',
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      activeName: String,
      type: String,
      areaId: String
    },
    inject: ['home'],
    data() {
      return {
        tableData: [],
        columns: [
          {
            label: '标题',
            prop: 'title',
            type: '',
            dict: ''
          },
          {
            label: '地区',
            prop: 'areaName',
            type: '',
            dict: ''
          },
          {
            label: '发布状态',
            prop: 'status',
            type: '',
            dict: ''
          },
          {
            label: '发布时间',
            prop: 'createDate',
            type: 'time',
            dict: ''
          },
          // {
          //   label: '发布单位',
          //   prop: 'createUnitName',
          //   type: '',
          //   dict: ''
          // },
          {
            label: '发布人',
            prop: 'createUserName',
            type: '',
            dict: ''
          },
          {
            label: '操作',
            prop: 'operate',
            type: '',
            dict: ''
          }
        ],
        search: {
          style: {},
          title: ''
        },
        page: {
          current: 1,
          size: 10,
        },
        total: 0,
        multipleSelection: [],
        ids: []
      }
    },

    computed: {
      ...mapState(['user']),

      colConfigs () {
        return [
          { type: 'selection', align: 'center'},
          { prop: 'title',  label: this.activeName == 'ruralProdect' ? '产品名称' : '标题', align: 'left', width: '200px' },
          { prop: 'areaName', label: '地区', align: 'center' },
          { prop: 'status', label: '发布状态', align: 'center', formart: v => v === '1' ? '已发布' : '未发布' },
          { prop: 'createDate', label: '发布时间', align: 'center' },
          { prop: 'createUnitName', label: '发布单位', align: 'center' },
          { prop: 'createUserName', label: '发布人', align: 'center' },
          { slot: 'options', label: '操作', align: 'center' }
        ]
      }
    },

    mounted() {
      if (this.dict) this.dict.load(this.columns.map(e => (e.type == 'select' ? e.dict : '')))
      this.resetSearch()
    },

    methods: {
      isPermit(params) {
        return this.permissions ? this.permissions(params) : false;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.ids = []
        this.multipleSelection.forEach(e => {
          this.ids.push(e.id);
        });
      },
      deleteItem(item) {
        this.ids = []
        this.ids.push(item.id);
        this.deleteList();
      },
      deleteList() {
        this.$confirm('是否要删除这些信息?', {type: 'warning'})
        .then(() => {
          this.instance.post('/app/appcountrysidetourism/delete?ids=' + this.ids, null, {}).then(() => {
            this.getAppCountrysideTourism();
            this.ids = [];
            this.$message.success('删除成功!');
          });
        })
        .catch(() => {
        });
      },
      viewDetail(item) {
        this.$emit('showEditRoral', item);
      },
      handleSizeChange(val) {
        this.page.size = val
        this.getAppCountrysideTourism()
      },
      resetSearch() {
        this.page.current = 1;
        this.page.size = 10;
        this.columns.map(c => {
          if (c.type) this.search[c.prop] = null;
        });
        Object.keys(this.search).forEach(e => {
          this.search[e] = null;
        });
        this.getAppCountrysideTourism();
      },
      getAppCountrysideTourism() {
        this.instance.post(`/app/appcountrysidetourism/list?type=${this.type}&areaId=${this.home.areaId}`, null, {
          params: {
            ...this.search,
            ...this.page
          }
        })
        .then(res => {
          if (res && res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        });
      },
      addOrUpdateAppCountrysideTourism() {
        this.instance.post('/app/appcountrysidetourism/addOrUpdate', this.dialog.add).then(() => {
          this.getAppCountrysideTourism();
          this.$message.success('添加或修改成功!');
        });
      },
      deleteAppCountrysideTourism(ids) {
        this.$confirm('是否要删除这些账号?', {
          type: 'warning'
        })
        .then(() => {
          this.instance
          .post('/app/appcountrysidetourism/delete', null, {
            params: {
              ids: ids
            }
          })
          .then(() => {
            this.getAppCountrysideTourism();
            this.$message.success('删除成功!');
          });
        })
        .catch(() => {
        });
      },
      handleCurrentChange(val) {
        this.page.current = val;
        this.getAppCountrysideTourism();
      },
      toAdd() {
        this.$emit('showAddRoral');
      },
      changeStatus(item) {
        let title = item.status == '1' ? '是否要取消发布?' : '是否要发布?';
        this.$confirm(title, {type: 'warning'})
        .then(() => {
          item.status = item.status == '1' ? '0' : '1';
          this.instance.post('/app/appcountrysidetourism/addOrUpdate', item).then(res => {
            if (res && res.code == 0) {
              title == '是否要发布?' ? this.$message.success('发布成功') : this.$message.success('取消发布成功');
              this.getAppCountrysideTourism();
            }
          });
        })
        .catch(() => {
        });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .appVillageCadres {
    background-color: #f3f6f9;
    width: 100%;
    height: 100%;

    .header {
      padding: 0 16px;
      width: 100%;
      background-color: #ffffff;
      height: 48px;
      line-height: 48px;
      box-shadow: inset 0px -1px 0px 0px #d8dce3;
    }

    .main-content {
      margin: 16px;
      background-color: white;
      border: 1px solid #eee;
      padding: 12px 16px;

      .searchBar {
        border-bottom: 1px solid #eee;

        .el-col {
          margin-bottom: 12px;
          height: 32px;
        }
      }

      .row-btn {
        margin: 16px 0;
      }
    }
  }
</style>
