<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="tagName" size="small" class="item_width_1" clearable placeholder="请输入">
            </el-input>
          </el-form-item>

          <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="tagName" header-align="center" align="center" label="标签名称" width="380">
        </el-table-column>
        <el-table-column prop="createdTime" header-align="center" align="center" label="创建时间" width="380">
        </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 type="text" style="color:#1C6AFD;" size="small"
              @click="handleEdit(scope.row)">修改</el-button>
              <el-button type="text" style="color:#1C6AFD;" size="small"
              @click="handleDelete(scope.row)">删除</el-button>

            <!-- <el-button type="text"
                            style="color:#D51010;" size="small"
                            @click="handleDelete(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">
      <AddpromotionTab ref="ref_form"  :gridList="gridList" @dialogCancle="addFormCancle"
        @dialogOk="addFormOk"></AddpromotionTab>
    </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="diaClose">
      <viewPromotionalTags ref="ref_detail" :gridList="gridList" @dialogCancle="addFormQ"></viewPromotionalTags>
    </el-dialog>
  </div>
</template>

    <script>
     import AddpromotionTab from './AddpromotionTab.vue'
     import viewPromotionalTags from './viewPromotionalTags.vue'
    import { Loading } from 'element-ui' // 引入Loading服务
    import { requestPost, requestGet } from '@/js/dai/request';
            export default {
      data () {
        return {
          loading: false,
          total: 0,
          pageSize: 10,
          pageNo: 0,
          tableLoading: false,
          agencyId: '',
          gridList: [],//所属网格
          typeName:'',
          enabled:'',
          tableData:[],
          //form相关
          formShow: false,
          formTitle: '新增活动',
          detailShow: false,
          tagName:'',
          status:null,
          statuslist: [
          { value: 0, label: '关闭' },
          { value: 1, label: '显示' }
        ],
        }
      },
      components: {
        AddpromotionTab,viewPromotionalTags
      },
    //   components: {
    //     typeActivityadd, typeDetails
    //   },
      async created () {
    
      },
      async mounted () {
        //获取服务事项
        // await this.getDemandOptions()
    
        const { user } = this.$store.state
        this.agencyId = user.agencyId
    
        //获取建联单位
        // this.loadUnit()
        // this.loadGrid()
        //获取网格下拉框数据
        this.loadTable()    
      },
    
      methods: {
        handleSearch () {
          this.loadTable()
        },
        //展示表格
        async loadTable () {
          this.tableLoading = false
          const url = "/actual/base/advertisingTag/page"
          let params = {
            pageSize: 20,
            pageNo: 1,
            tagName: this.tagName,
            status: this.status
          }
          const { data, code, msg } = await requestPost(url, params)
          if (code === 0) {
            this.total = data.total
            this.tableData = data.list
          } 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) {
          this.formTitle = '修改'
          this.formShow = true
          this.$nextTick(() => {
            this.$refs.ref_form.initForm(row)
          })
        },
     
        addFormCancle () {
          this.formShow = false
        },
        addFormQ(){
          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 deleteActivity (row) {
          console.log(row)
          const url = "/actual/base/advertisingTag/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.tagName = ''
          this.status = null
          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>
    