<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h"></div>
        <ul>
          <li>
            <el-input
              placeholder="请输入姓名"
              v-model="postData.name"
              clearable>
            </el-input>
          </li>
          <li>
            <el-input
              placeholder="请输入手机号"
              v-model="postData.phone"
              clearable>
            </el-input>
          </li>
          <li>
            <el-select v-model="postData.makeStatus" placeholder="请选择状态">
              <el-option
                label="已完成"
                value="finish">
              </el-option>
              <el-option
                label="制作中"
                value="making">
              </el-option>
            </el-select>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary"
          @click="search">搜索</el-button>
        <el-button
          size="mini"
          type="success" @click="exportExcel">导出Excel</el-button>
        <el-button
          size="mini"
          type="success" @click="finishStatusMore">批量完成</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box item_tmp">
      <el-checkbox-group v-model="selids">
      <el-table
          :data="calendar.list"
          style="width: 100%"
          >
          <el-table-column
            label=""
            width="30"
            >
            <template slot-scope="scope">
              <el-checkbox v-if='scope.row.MakeStatus === "making"' :label='scope.row.CustomerCalendarId'></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            prop="ModelName"
            label="模板"
            width="100">
          </el-table-column>
          <el-table-column
            prop="Name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="CustomerName"
            label="昵称">
          </el-table-column>
          <el-table-column
            prop="Phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="Email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            prop="CreateDate"
            label="定制时间">
            <template slot-scope="scope">
              <span v-if="scope.row.CreateDate !== '0001-01-01T00:00:00Z'">{{toolClass.dateFormat(scope.row.CreateDate, 'yyyy-MM-dd hh:mm')}}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="Status"
            label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.MakeStatus === "finish" ? '制作完成' : '制作中'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="400">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.MakeStatus === 'making'"
                size="mini"
                type="success"
                @click="finishStatus(scope.row.CustomerCalendarId)">制作完成</el-button>
              <el-button
                size="mini"
                type="warning"
                @click="downUserPic(scope.row.CustomerCalendarId, 'user')">下载用户照片</el-button>
              <el-button
                size="mini"
                type="success"
                @click="downUserPic(scope.row.CustomerCalendarId, 'calendar')">下载合成照片</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-checkbox-group>
    </div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="postData.page"
      :page-size="postData.pagesize"
      layout="prev, pager, next, jumper"
      :total="calendar.pagenum">
    </el-pagination>
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState: mapCalendarState, mapActions: mapCalendarActions } = createNamespacedHelpers('calendar')

export default {
  data () {
    return {
      postData: {
        name: '',
        phone: '',
        makeStatus: '',
        page: 1,
        pagesize: 10,
      },
      total: 0,
      selids: [],
    }
  },
  computed: {
    ...mapCalendarState({
      calendar: x => x.CalendarList || {},
    }),
  },
  mounted () {
    this.getList()
  },
  methods: {
    ...mapCalendarActions([
      'getCalendarList',
      'changeCalendarStatus',
    ]),
    search () {
      this.postData.page = 1
      this.getList()
    },
    getList () {
      this.getCalendarList(this.postData)
    },
    handleCurrentChange (val) {
      this.getList()
    },
    exportExcel () {
      window.open(`${this.toolClass.ReplaceOrg(this.$api.activityManager.calendarExcel.url)}?token=${localStorage.getItem('JWT')}&name=${this.postData.name}&phone=${this.postData.phone}&makeStatus=${this.postData.makeStatus}`, '_blank')
    },
    finishStatus (id) {
      this.$confirm('确认完成此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeCalendar(id)
      })
    },
    finishStatusMore () {
      var ids = this.selids.join()
      if (ids === '') {
        this.$message({
          message: '请先选择需要完成的记录',
          type: 'error'
        })
        return
      }
      this.$confirm('确认批量完成数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.changeCalendar(ids)
      })
    },
    changeCalendar (ids) {
      this.changeCalendarStatus({ids}).then(() => {
        this.getList()
        this.selids = []
      })
    },
    downUserPic (id, type) {
      var url = this.$api.activityManager.downCalendarPic.url
      url = url.replace(':calendarId', id).replace(':imgType', type)
      window.open(`${this.toolClass.ReplaceOrg(url)}?token=${localStorage.getItem('JWT')}`, '_blank')
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>

<style>
.item_tmp .el-checkbox__label{
  font-size: 0;
  color: transparent;
}
</style>
