  <template>
    <div class="app-container calendar-list-container">
      <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
                highlight-current-row
                style="width: 100%">
        <el-table-column type="index" align="center" :label="$t('table.seq')" width="50">
        </el-table-column>
        <el-table-column align="center" :label="$t('usermanager.openid')">
          <template slot-scope="scope">
            <span>{{scope.row.wp_openid}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('usermanager.nickname')">
          <template slot-scope="scope">
            <span>{{scope.row.wp_nickname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('usermanager.issend')">
          <template slot-scope="scope">
            <span>{{scope.row.wp_cityname}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('usermanager.options')" >
          <template slot-scope="scope">
            <span v-for="item in cityOptions" :key="item.branche_code">
              <a href="#" v-if='Number(scope.row.wp_issend) === Number(item.branche_code)' ><el-tag type="info" style="margin-right:4px;">{{item.branche_name}}</el-tag></a> 
              <a href="#" v-else @click="updateCity(scope.row,item.branche_code)"><el-tag style="margin-right:4px;">{{item.branche_name}}</el-tag></a> 
            </span>
            <a href="#" v-if="Number(scope.row.wp_issend) === 999999" ><el-tag type="info" style="margin-right:4px;">不接收</el-tag></a>
            <a href="#" v-else @click="updateCity(scope.row, 999999)"><el-tag style="margin-left: -5px;">不接收</el-tag></a> 
           </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="page" :page-sizes="[10,20,30,50]" :page-size="limit"
                      layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <br>
      <span style="color:#c7c8cf;font-size:16px;">1、在微信中打开https://yuesuo.yueguanjia.com/modoo-1/GetWxPublicUrl</span><br>
      <span style="color:#c7c8cf;font-size:16px;">2、复制并打开生成的URL,像：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx52852a3c47540fad&redirect_uri=http://yuesuo.yueguanjia.com/modoo-1/getWxPublicCode&response_type=code&scope=snsapi_userinfo&state=STAT#wechat_redirect</span><br>
      <span style="color:#c7c8cf;font-size:16px;">3、打开上面网址会弹出授权页面进行授权</span><br>
      <span style="color:#c7c8cf;font-size:16px;">4、接受微信消息必须关注悦所公众号</span><br>
      <span style="color:#c7c8cf;font-size:16px;">5、上述步骤操作完成后会插入一条授权人的信息,选择接受城市即可收到消息</span>
    </div>
  </template>
  <script>
    import waves from '@/directive/waves' // 水波纹指令
    import { getBranches } from '@/api/article'
    import { getWXPublics, updateWXPublic } from '@/api/manager'
    export default {
      name: 'usermanager',
      directives: {
        waves
      },
      data() {
        return {
          seachQuery: {
            page: 1,
            limit: 10
          },
          page: 1,
          limit: 10,
          tableKey: 0,
          list: null,
          total: null,
          buttonloading: false,
          listLoading: true,
          downloadLoading: false,
          cityOptions: [],
          // gogogo
          queryType: 'list',
          showReviewer: false
        }
      },
      created() {
        this.userMkt = this.$store.getters.mkt
        if (this.userMkt !== 'ALL') {
          this.seachQuery.city = this.userMkt
          this.addAdmininfo.city = this.userMkt
          this.mktEnable = true
        }
        this.getList()
        this.list = []
        this.listLoading = false
      },
      methods: {
        getList() {
          this.queryType = 'list'
          this.listLoading = true
          getWXPublics(this.seachQuery).then(response => {
            this.list = response.data.items
            this.total = response.data.total
            this.listLoading = false
          })
          getBranches().then(response => {
            this.cityOptions = response.data
          })
        },
        updateCity(row, id) {
          var updateRequest = {
            wp_openid: row.wp_openid,
            wp_issend: id
          }
          updateWXPublic(updateRequest).then(response => {
            this.getList()
            if (response.data !== 0) {
              this.$notify({
                title: '成功',
                message: '保存成功!',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify({
                title: '失败',
                message: '请联系管理员！',
                type: 'error',
                duration: 2000
              })
            }
          })
        },
        handleFilter() {
          if (this.seachQuery.experience === 0) {
            this.seachQuery.experience = null
          }
          this.seachQuery.page = this.page
          this.seachQuery.limit = this.limit
          this.queryType = 'query'
          this.listLoading = true
          getWXPublics(this.seachQuery).then(response => {
            this.list = response.data.items
            this.total = response.data.total
            this.listLoading = false
          })
        },
        handleFilterfirst() {
          this.seachQuery.page = 1
          this.seachQuery.limit = 10
          this.page = 1
          this.limit = 10
          this.queryType = 'query'
          this.listLoading = true
          this.buttonloading = true
          getWXPublics(this.seachQuery).then(response => {
            this.buttonloading = false
            this.list = response.data.items
            this.total = response.data.total
            this.listLoading = false
          })
        },
        handleSizeChange(val) {
          this.limit = val
          if (this.queryType === 'list') {
            this.seachQuery.limit = val
            this.seachQuery.page = this.page
            this.getList()
          } else {
            this.seachQuery.limit = val
            this.seachQuery.page = this.page
            this.handleFilter()
          }
        },
        handleCurrentChange(val) {
          this.page = val
          if (this.queryType === 'list') {
            this.seachQuery.limit = this.limit
            this.seachQuery.page = val
            this.getList()
          } else {
            this.seachQuery.limit = this.limit
            this.seachQuery.page = val
            this.handleFilter()
          }
        },
        handleModifyStatus(row, status) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          row.status = status
        }
      }
    }
  </script>
  <style>
    .el-form--label-left .el-form-item__label{
    text-align:right
    }
    .el-rate{
      line-height: 0;
      margin-top:8px;
    }
  </style>
  