<template>
  <div class="g-main">
    <div class="m-search">
      <el-form :inline="true" ref="ref_searchform" :label-width="'100px'">
        <div>
          <el-form-item label="文章标题">
            <el-input v-model.trim="formData.title" size="small" class="item_width_1" clearable placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="标签">
            <el-select class="item_width_1" v-model.trim="formData.tagId" size="small" placeholder="请选择" clearable>
              <el-option v-for="item in adverTagList" :key="item.id" :label="item.tagName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select class="item_width_1" v-model.trim="enabled" size="small" placeholder="请选择" clearable>
              <el-option v-for="item in statuslist" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  </div>
  <div class="block">
                  <div style="display: flex; justify-content: flex-end;">
            <el-button style="margin-left:10px" class="diy-button--blue" size="small"
              @click="handleSearch">查询</el-button>
            <el-button style="margin-left:10px" class="diy-button--white" size="small"
              @click="resetSearch">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="m-table">

<div class="div_btn">
  <el-button style="" class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
</div>

<el-table class="table" :data="tableData" border  v-loading="tableLoading"
  style="width: 100%">

  <el-table-column label="序号" header-align="center" align="center" type="index" width="80"></el-table-column>
  <el-table-column prop="title" header-align="center" align="center" label="文章标题" width="200">
  </el-table-column>
  <el-table-column prop="tagName" header-align="center" align="center" label="标签" width="150">
    <!-- <template slot-scope="scope">
      <span>{{ scope.row.enabled === 1 ? '关闭' : '显示' }}</span>
    </template> -->
  </el-table-column>

  <el-table-column prop="status" header-align="center" align="center" label="状态" width="80">
        <template slot-scope="scope">
      <span>{{ scope.row.status === 0 ? '已下线' : '已发布' }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="agencyName" header-align="center" align="center" label="发布单位" width="200">
  </el-table-column>
  <el-table-column prop="releaseTime" header-align="center" align="center" label="发布时间" width="200">
  </el-table-column>
  <el-table-column prop="top" header-align="center" align="center" label="置顶" width="100">
    <template slot-scope="scope">
      <span>{{ scope.row.top === 0 ? '否' : '是' }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="topp" header-align="center" align="center" label="点赞数" width="100">
  </el-table-column>
  <el-table-column prop="createdTime" header-align="center" align="center" label="转发数" width="100">
  </el-table-column>
  <el-table-column label="操作" fixed="right" width="250" header-align="center" align="center" class="operate">
    <template slot-scope="scope">
  <el-button   type="text" style="color:#1C6AFD;" size="small" @click="handleDetail(scope.row)">查看</el-button>
  <el-button v-if="scope.row.status === 0" type="text" style="color:#1C6AFD;" size="small" @click="handleEdit(scope.row)">编辑</el-button>
  <el-button v-if="scope.row.status === 0" type="text" style="color:#1C6AFD;" size="small" @click="handleDelete(scope.row)">删除</el-button>
  <el-button v-if="scope.row.status === 0" type="text" style="color:#1C6AFD;" size="small" @click="handleOnline(scope.row)">上线</el-button>
  <el-button v-if="scope.row.status === 1 " type="text" style="color:#1C6AFD;" size="small" @click="handleOffline(scope.row)">下线</el-button>
</template>
  </el-table-column>
</el-table>

      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
          :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 修改弹出框 -->
    <el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="formTitle"
      width="950px" top="5vh" class="dialog-h" @closed="diaClose">
      <add ref="ref_form"  v-if="formShow" @dialogCancle="addFormCancle"
        @dialogOk="addFormOk"></add>
    </el-dialog>

    <el-dialog :visible.sync="detailShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="'活动详情'"
      width="950px" top="5vh" class="dialog-h" @closed="eventForm">
      <event ref="ref_detail"  @dialogCancle="eventForm"></event>
    </el-dialog>
  </div>
</template>

    <script>
    import { Loading } from 'element-ui' // 引入Loading服务
    import { requestPost, requestGet } from '@/js/dai/request';
    import add from "./add.vue";
    import event from "./event.vue";
    export default {
      data () {
        return {
          tableData:[],
          unitList:[],
          loading: false,
          total: 0,
          pageSize: 10,
          pageNo: 0,
          tableLoading: false,
          agencyId: '',
          typeName:'',
          enabled:'',
          //form相关
          formShow: false,
          formTitle: '新增活动',
          detailShow: false,
          formData: {
            title: "",
            tagId: "",
            startTime: "",
            endTime: "",
          },
          pageSize: 20,
          pageNo: 1,
          adverTagList:[],
          statuslist: [
          { value: 0, label: '已发布' },
          { value: 1, label: '已下线' },
        ],
        }
      },
      components: {
        add,event
      },
    //   components: {
    //     typeActivityadd, typeDetails
    //   },
      async created () {
    
      },
      async mounted () {
        //获取服务事项
        // await this.getDemandOptions()
    
        const { user } = this.$store.state
        this.agencyId = user.agencyId
    
        //获取建联单位
        this.advertisingTag()
        //获取网格下拉框数据
        this.loadTable()    
      },
    
      methods: {
        handleSearch () {
          this.loadTable()
        },
        async advertisingTag () {
          const url = "/actual/base/advertisingTag/page"
          let params = {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            tagName: "",
            status: ""
          }
          const { data, code, msg } = await requestPost(url, params)
          if (code === 0) {
            this.adverTagList = data.list
          } else {
            this.$message.error(msg)
          }
        },
        async loadTable () {
          this.tableLoading = false
          const url = "/actual/base/communityPublicity/page"
          let params = {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            // agencyId: this.agencyId,
            ...this.formData,
          }
          const { data, code, msg } = await requestPost(url, params)
          if (code === 0) {
            this.total = data.total
            this.tableData = data.list
            // console.log( "啊大苏打撒旦",this.tableData )
             this.tableData.forEach((item=>{
                this.adverTagList.forEach((item1)=>{
                  if(item.tagId==item1.id){
                    item.tagName=item1.tagName
                  }
                })
             }))
          } else {
            this.$message.error(msg)
          }
          this.tableLoading = false
        },
    
        diaClose () {
          // this.$refs.ref_form.resetData()
          this.formShow = false
        },
    
        detailClosed () {
          // console.log(this.$refs.ref_detail)
          // this.$refs.ref_detail.diaDestroy()
          this.detailShow = false
        },
    
    
        handleDetail (row) {
          this.detailShow = true
          this.formTitle = '详情'
          this.$nextTick(() => {
            this.$refs.ref_detail.initForm(row)
            // this.$refs.ref_form.initForm('detail', row.id)
          })
        },
    
        handleAdd () {
          this.formTitle = '新增'
          this.formShow = true
          this.$nextTick(() => {
            this.$refs.ref_form.initForm('add',null)
          })
        },
        handleEdit (row) {
          console.log(row);
          this.formTitle = '修改'
          this.formShow = true
          this.$nextTick(() => {
            this.$refs.ref_form.initForm("edit",row)
          })
        },
     
        addFormCancle () {
          this.formShow = false
        },

        eventForm(){
          this.detailShow = false
        },
        addFormOk () {
          this.formShow = false
          this.loadTable()
    
        },
    
        async handleDelete (row) {
          this.$confirm("确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.deleteActivity(row)
            })
            .catch(err => {
              if (err == "cancel") {
    
              }
    
            });
        },
        async handleOnline (row) {
          this.$confirm("确认上线?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.OnhandleOnline(row)
            })
            .catch(err => {
              if (err == "cancel") {
    
              }
            });
          },
          async OnhandleOnline(row){
            // console.log(row)
          const url = "/actual/base/communityPublicity/updateStatus"
    			let params={
            status:0,
            id:row.id
          }
          const { data, code, msg } = await requestPost(url, params)
    
          if (code === 0) {
            this.$message({
              type: "success",
              message: "已发布"
            });
    
            this.loadTable()
          } else {
            this.$message.error(msg)
          }
          },
          async handleOffline (row) {
          this.$confirm("确认下线?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.OnhandleOffline(row)
            })
            .catch(err => {
              if (err == "cancel") {
    
              }
            });
          },
          async OnhandleOffline(row){
            // console.log(row)
          const url = "/actual/base/communityPublicity/updateStatus"
    			let params={
            status:0,
            id:row.id
          }
          const { data, code, msg } = await requestPost(url, params)
    
          if (code === 0) {
            this.$message({
              type: "success",
              message: "已下线"
            });
    
            this.loadTable()
          } else {
            this.$message.error(msg)
          }
          },
        async deleteActivity (row) {
          console.log(row)
          const url = "/actual/base/communityPublicity/delete"
          // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/delete"
    			let idArr=[row.id]
          const { data, code, msg } = await requestPost(url, idArr)
    
          if (code === 0) {
            this.$message({
              type: "success",
              message: "删除成功"
            });
    
            this.loadTable()
          } else {
            this.$message.error(msg)
          }
        },
    
        //重置搜索条件
        resetSearch () {
          this.formData = {
            title: "",
            tagId: "",
            startTime: "",
            endTime: "",
          },
          this.loadTable()
        },

        handleSizeChange (val) {
          this.pageSize = val
          this.pageNo = 1
          this.loadTable()
        },
        handleCurrentChange (val) {
          this.pageNo = val
          this.loadTable()
        },
    
       
   
      },

    }
    
    </script>
    <style lang="scss" scoped >
            .g-main {
      width: 100%;
    }
  
    .m-search {
      background: #ffffff;
      border-radius: 4px;
      padding: 30px 20px 5px;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    }
  
    .item_width_1 {
      width: 260px;
    }
  
    .item_width_2 {
      width: 495px;
    }
  
    .m-table {
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      margin-top: 15px;
      padding: 23px 30px 10px;
  
      .table {
        margin-top: 20px;
      }
    }
  
    .div_btn {
      display: flex;
      justify-content: space-between;
    }
  
    .el-row {
      /* margin-bottom: 20px; */
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      margin-right: 50px;
    }
  </style>
    