/**
* Created by wang on 18/10/31.
*/
<template>
  <div class="index">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
      <el-row>
        <el-col :lg="10" :sm="24" :md="24">
          <el-form-item label="购买时间">
            <el-date-picker
              v-model="searchFrom.time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00','23:59:59']">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :sm="24" :md="12">
          <el-form-item label="来源">
            <el-input v-model="searchFrom.source" placeholder="名称"
                      size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :sm="24" :md="12">
          <el-form-item>
            <el-button type="primary" plain size="small" @click="initPage">
              搜索
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :lg="4" :sm="24" :md="12">
          <el-form-item>
            <el-button type="primary" plain size="small" @click="doExport">
              导出
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="宝贝名称">
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="备注">
      </el-table-column>
      <el-table-column
        prop="create_at"
        label="添加时间" sortable>
      </el-table-column>
      <el-table-column
        prop="source"
        label="来源">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="150"
        v-if="!$store.state.readonly">
        <template slot-scope="scope">
          <el-button
            @click="editComment(scope.row.id, scope.row.desc)"
            type="text"
            plain
            size="mini">
            编辑备注
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog
      title="编辑备注"
      center
      append-to-body
      :visible.sync="showCommentDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="600px">
      <div>
        <el-form ref="commentFrom" :model="commentForm">
          <el-form-item prop="desc">
            <el-input type="textarea" v-model="commentForm.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="showCommentDialog = false;commentForm={}">取 消</el-button>
            <el-button type="primary" @click="saveComment">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
  import page from '../framework/page'
  import CommonJs from '../../util/common';
  import {getAdsInnerListApi,updateAdsInnerApi} from "../../service/api";
  export default {
    name: "index",
    components:{
      page
    },
    data(){
      return {
        total:0,
        nowPage:1,
        limit: 10,
        searchFrom: {
          source:''
        },
        tableData:[],
        commentForm: {},
        showCommentDialog: false
      }
    },
    created(){
      this.initPage()
    },
    methods:{
      initPage(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        }
        if (this.searchFrom.time) {
          json.time = this.searchFrom.time
        }
        if (this.searchFrom.source) {
          json.source = this.searchFrom.source
        }
        if(this.searchFrom.time && this.searchFrom.time.length > 0){
          json.date_start = CommonJs.dateFmt(this.searchFrom.time[0],"yyyy-MM-dd hh:mm:ss");
          json.date_end = CommonJs.dateFmt(this.searchFrom.time[1],"yyyy-MM-dd hh:mm:ss")
        }
        getAdsInnerListApi(json).then((res)=>{
          this.tableData = res.list;
          this.total = res.total
        })
      },
      onPageChange(val){
        this.nowPage = val
        this.initPage()
      },
      onSizeChange(val){
        this.nowPage = 1
        this.limit = val
        this.initPage()
      },
      doExport(){
        let query = `?type=export`;
        if(this.searchFrom.source){
          query = query + '&source=' + this.searchFrom.source
        }

        if(this.searchFrom.time && this.searchFrom.time.length > 0){
          query = query + '&date_start=' + CommonJs.dateFmt(this.searchFrom.time[0],"yyyy-MM-dd hh:mm:ss");
          query = query + '&date_end=' + CommonJs.dateFmt(this.searchFrom.time[1],"yyyy-MM-dd hh:mm:ss")
        }
        window.open(`/api/public/ads/export/all${query}`)
      },
      saveComment(){
        let id = this.commentForm.id;
        let desc = this.commentForm.desc ? this.commentForm.desc : '';
        if(!desc) return;
        this.$confirm('确认编辑备注', '提示', {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateAdsInnerApi(id,{desc: desc}).then(res=>{
            this.$message({
              type: 'success',
              message: '编辑备注成功'
            });
            this.showCommentDialog = false
            this.initPage();
          });
        })
      },
      editComment(id, desc) {
        this.showCommentDialog = true;
        this.commentForm = {
          id: id,
          desc: desc
        };
      },
    }
  }
</script>

<style scoped lang="less">
  .index {
    padding: 20px 0;
  }
</style>