<template>
  <div class="app-container calendar-list-container">
    <el-form label-position="right" label-width="100px"  style='width:100%;'>
      <el-row :gutter="24">
        <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
          <div class="grid-content bg-purple" >
            <el-form-item  :label="$t('usermanager.openid')" >
              <div class="block">
                <el-input style="width: 100%;" class="filter-item"
                  v-model="seachQuery.wmu_openid" :maxlength = "20">
              </el-input>
              </div>
            </el-form-item>
          </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
        <div class="grid-content bg-purple" >
          <el-form-item  :label="$t('usermanager.phone')" >
            <div class="block">
              <el-input style="width: 100%;" class="filter-item"
                  v-model="seachQuery.wmu_phone" :maxlength = "20">
              </el-input>
            </div>
          </el-form-item>
        </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
        <div class="grid-content bg-purple" >
          <el-form-item  :label="$t('usermanager.city')" >
            <div class="block">
                  <el-select v-if="mktEnable" disabled  class="filter-item" v-model="seachQuery.wmu_city" default-first-optionplaceholder="请选择城市" style="width: 100%;">
                    <el-option v-for="city in citysOptions" :key="city.branche_code" :label="city.branche_name" :value="city.branche_code">
                    </el-option>
                  </el-select>
                  <el-select v-else class="filter-item" v-model="seachQuery.wmu_city" default-first-optionplaceholder="请选择城市" style="width: 100%;">
                    <el-option v-for="city in citysOptions" :key="city.branche_code" :label="city.branche_name" :value="city.branche_code">
                    </el-option>
                  </el-select>
                </div>
          </el-form-item>
        </div>
      </el-col>
      <el-col :xs="23" :sm="23" :md="11" :lg="5" :xl="5">
          <div class="grid-content bg-purple" >
            <el-form-item  :label="$t('booking.bookingdate')" >
              <div class="block">
              <el-date-picker v-model="seachQuery.wmu_date" value-format="yyyy-MM-dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" style="width: 100%;">
              </el-date-picker>
              </div>
            </el-form-item>
          </div>
      </el-col>
      </el-row>
        <el-row :gutter="24" style="margin-bottom:15px;">
      <el-col :span="24">
          <div  align="center" > <el-button class="filter-item" type="primary" v-waves :loading ="buttonloading" icon="el-icon-search" @click="handleFilterfirst">
        {{$t('table.search')}}
      </el-button>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-delete" @click="handleref">
        {{$t('table.cancel')}}
      </el-button>
      </div>
      </el-col>
      </el-row>
    </el-form>
      <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
              highlight-current-row
              style="width: 100%">
      <el-table-column align="center" :label="$t('usermanager.openid')">
        <template slot-scope="scope">
            <span>{{scope.row.wmu_openid}}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" :label="$t('usermanager.phone')">
        <template slot-scope="scope">
            <span>{{scope.row.wmu_phone}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('usermanager.city')">
        <template slot-scope="scope">
          <span>{{scope.row.wmu_city_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('booking.bookingdate')">
        <template slot-scope="scope">
          <span>{{scope.row.wmu_date}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')">
        <template slot-scope="scope" align="right">
          <a href="#" @click="comment_show(scope.row.id)"><el-tag>详情查看</el-tag></a> 
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="评论内容" :visible.sync="dialogFormVisible" :before-close="handleClose">
    <el-table :data="detailList"  border fit  highlight-current-row  style="width: 100%" >
      <el-table-column   prop="wsq_name"  label="题目">
      </el-table-column>
      <el-table-column prop="returnvalue" label="答案">
      </el-table-column>
    </el-table>
    </el-dialog>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[10,30,50,100]" :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { fetchPv } from '@/api/article'
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'
  import { getBranches } from '@/api/article'
  import { queryWXMMUserSearchs, getWXMMUserSearchDetailByQID } from '@/api/wxmini'
  // arr to obj ,such as { CN : "China", US : "USA" }
  export default {
    name: 'introducer',
    directives: {
      waves
    },
    data() {
      return {
        mktEnable: null,
        content: null,
        tableKey: 0,
        citysOptions: null,
        list: null,
        total: null,
        page: 1,
        limit: 10,
        queryType: 'list',
        listLoading: true,
        buttonloading: false,
        dialogStatus: null,
        dialogbuttonloading: false,
        dialogImageUrl: undefined,
        listQuery: {
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        commentShow: {
          comment: null
        },
        seachQuery: {
          wmu_openid: null,
          wmu_phone: null,
          wmu_city: null,
          wmu_date: null,
          page: null,
          limit: null
        },
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        showReviewer: false,
        dialogVisible: false,
        dialogFormVisible: false,
        dialogPvVisible: false,
        dialogAuditingDC: false,
        dialogAuditing: '',
        pvData: [],
        detailList: [],
        textMap: {
          update: 'Edit',
          create: '添加月嫂'
        }
      }
    },
    created() {
      this.getList()
      this.userMkt = this.$store.getters.mkt
      if (this.userMkt !== 'ALL') {
        this.seachQuery.od_cityid = this.userMkt
        this.mktEnable = true
      }
      getBranches().then(response => {
        this.citysOptions = response.data
      })
    },
    methods: {
      getList() {
        this.list = []
        this.listQuery.page = this.page
        this.listQuery.limit = this.limit
        this.queryType = 'list'
        this.listLoading = true
        queryWXMMUserSearchs(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
        })
      },
      handleFilter() {
        this.seachQuery.page = this.page
        this.seachQuery.limit = this.limit
        this.queryType = 'query'
        this.listLoading = true
        queryWXMMUserSearchs(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.queryType = 'query'
        this.listLoading = true
        this.buttonloading = true
        queryWXMMUserSearchs(this.seachQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.listLoading = false
          this.buttonloading = false
        })
      },
      handleSizeChange(val) {
        this.limit = val
        if (this.queryType === 'list') {
          this.listQuery.limit = val
          this.listQuery.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.listQuery.limit = this.limit
          this.listQuery.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
      },
      handleClose(done) {
        done()
      },
      hrefedit(id) {
        this.$router.push({ name: 'dianpingedit', params: { dianpingID: id }})
      },
      infoshow(id) {
        this.$router.push({ name: 'dianpingshow', params: { dianpingID: id }})
      },
      handleDelete(row) {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      },
      handleFetchPv(pv) {
        fetchPv(pv).then(response => {
          this.pvData = response.data.pvData
          this.dialogPvVisible = true
        })
      },
      comment_show(id) {
        var requestDetail = {
          wmu_id: id
        }
        getWXMMUserSearchDetailByQID(requestDetail).then(response => {
          this.detailList = response.data
        })
        this.dialogFormVisible = true
      },
      handleref() {
        this.seachQuery.wmu_openid = null
        this.seachQuery.wmu_phone = null
        this.seachQuery.wmu_city = null
        this.seachQuery.wmu_date = null
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      }
    }
  }
</script>
<style>
.el-form--label-left .el-form-item__label{
  text-align:right
}
.el-rate{
  line-height: 0;
  margin-top:8px;
}
.el-checkbox.el-checkbox {
    margin-left: 30px;
}
.disabled .el-upload--picture-card {
    display: none;
}
</style>
